acutally use fallback url

fix wasm loading in component build
rename useMatrixRtc -> userRustRtcSdk
2026-10-19 23:52:26 +00:00 · 2026-09-18 15:17:53 +02:00 · 2026-09-18 14:59:05 +02:00 · 2026-09-18 09:27:26 +02:00 · 2026-09-17 21:03:41 +02:00 · 2026-09-17 21:02:52 +02:00
574 changed files with 70462 additions and 29565 deletions
@@ -1,61 +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"],
-  extends: [
-    "plugin:matrix-org/react",
-    "plugin:matrix-org/a11y",
-    "plugin:matrix-org/typescript",
-    "prettier",
-    "plugin:rxjs/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: ["./tsconfig.json"],
-  },
-  env: {
-    browser: true,
-    node: true,
-  },
-  rules: {
-    "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 } }],
-  },
-  overrides: [
-    {
-      files: ["src/*/**"],
-      rules: {
-        // In application code we should use the js-sdk logger, never console directly.
-        "no-console": ["error"],
-      },
-    },
-  ],
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-};
@@ -1,11 +0,0 @@
-#!/usr/bin/sh
-
-FILE=.links.temp-disabled.yaml
-if test -f "$FILE"; then
-  # Only do the post-commit hook if the file was temp-disabled by the pre-commit hook.
-  # Otherwise linking was actively (`yarn links:disable`) disabled and this hook should noop.
-  mv .links.temp-disabled.yaml .links.yaml
-  yarnLog=$(yarn)
-  echo "[yarn-linker] The post-commit hook has re-enabled .links.yaml."
-  exit 1
-fi
@@ -1,11 +1,9 @@
-#!/usr/bin/sh
+#!/usr/bin/env bash

-FILE=".links.yaml"
-if test -f "$FILE"; then
-  mv .links.yaml .links.temp-disabled.yaml
-  # echo "running yarn"
-  x=$(yarn)
-  y=$(git add yarn.lock)
-  echo "[yarn-linker] The pre-commit hook has disabled .links.yaml and MODIFIED the yarn.lock file. Review the staged changes (the hook added yarn.lock, was this desired?) and run \`git commit \` again if they look okay. The post-commit hook will re-enable your links."
+# Checks if there currently is linking configured. Informs the user to disable linking before committing.
+
+PNPMFILE=.pnpmfile.cjs
+if test -f "$PNPMFILE"; then
+  echo "[pnpm-linker] The pre-commit hook detected $PNPMFILE which implies you have linked packages in your pnpm-lock.yaml. Run pnpm links:off and commit again. See also linking.md."
  exit 1
 fi
@@ -0,0 +1,46 @@
+<!-- Thanks for submitting a PR! Please read CONTRIBUTING.md before you start. -->
+
+> [!IMPORTANT]
+> **Features and UI changes require a pre-approved issue.**
+> Every PR must have a linked issue
+> that a maintainer has reviewed and approved **before you started writing code**.
+> PRs that don't meet this requirement will not be reviewed.
+> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) for ElementCall decided for this approach.
+
+## Content
+
+<!-- Describe shortly what has been changed -->
+
+## Motivation and context
+
+<!-- Provide a link to the pre-approved issue, or explain the context for a bug fix -->
+
+## Screenshots / GIFs
+
+<!--
+
+You can use a table like this to show a before/after comparison.
+Uncomment the markdown table below and fill in the last line:
+
+|Before|After|
+|-|-|
+|||
+
+-->
+
+## Tests
+
+<!-- Explain how you tested your changes -->
+
+- Step 1
+- Step 2
+- Step ...
+
+## Checklist
+
+- [ ] A linked, pre-approved issue exists for this feature or UI change.
+- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) in full.
+- [ ] Pull request includes screenshots or videos for any UI changes.
+- [ ] Tests written for new code (and existing touched code where feasible).
+- [ ] Linter and other CI checks pass.
+- [ ] I have licensed the changes to Element by completing the [Contributor License Agreement (CLA)](https://cla-assistant.io/element-hq/element-call)
@@ -0,0 +1,253 @@
+- name: "A-1:1"
+  description: "Calls between two people"
+  color: "bfd4f2"
+- name: "A-Big-Grid"
+  description: "The freedom layout system used for >12 participants"
+  color: "bfd4f2"
+- name: "A-Developer-Experience"
+  description: "Workflow of developing: building, linting, debugging, profiling, etc."
+  color: "c5def5"
+- name: "A-E2EE"
+  description: "End-to-end encryption"
+  color: "bfd4f2"
+- name: "A-Embedded"
+  description: "Using the app embedded within other Matrix clients (as a widget)"
+  color: "bfd4f2"
+- name: "A-Feedback-Reporting"
+  description: "Reporting process for bugs, debug logs (rageshakes), suggestions"
+  color: "bfd4f2"
+- name: "A-Freedom"
+  description: "Freedom layout, where participants can be rearranged and resized"
+  color: "bfd4f2"
+- name: "A-Handset"
+  description: "Audio playback through the earpiece of a phone. Also known as 'earpiece mode' or 'handset mode'."
+  color: "bfd4f2"
+- name: "A-Huddle"
+  description: "Ad-hoc calls in a room notifying others"
+  color: "bfd4f2"
+- name: "A-Lobby"
+  description: "The page before joining a call"
+  color: "bfd4f2"
+- name: "A-Login"
+  color: "bfd4f2"
+- name: "A-Matrix2.0"
+  description: "Issues relating to the Matrix 2.0 / MSC4143 work, such as sticky events and multi-sfu"
+  color: "bfd4f2"
+- name: "A-Media-Devices"
+  color: "BFD4F2"
+- name: "A-Media-Quality"
+  description: "Distortions or glitches in audio/video"
+  color: "bfd4f2"
+- name: "A-Meeting"
+  description: "Scheduled call on the calendar"
+  color: "bfd4f2"
+- name: "A-Mobile"
+  description: "Using the app on a mobile device"
+  color: "bfd4f2"
+- name: "A-Moderation"
+  description: "Access to calls and powers within calls"
+  color: "bfd4f2"
+- name: "A-Performance"
+  color: "bfd4f2"
+- name: "A-Reactions"
+  color: "bfd4f2"
+- name: "A-Registration"
+  color: "bfd4f2"
+- name: "A-Screen-Sharing"
+  color: "bfd4f2"
+- name: "A-SDK"
+  description: "SDK for building MatrixRTC + LiveKit widgets"
+  color: "c5def5"
+- name: "A-Settings"
+  color: "bfd4f2"
+- name: "A-SFU"
+  description: "Routing calls through a selective forwarding unit"
+  color: "bfd4f2"
+- name: "A-Signaling"
+  description: "Call signaling"
+  color: "bfd4f2"
+- name: "A-Simulcast"
+  description: "Automatic selection of variable video resolutions"
+  color: "bfd4f2"
+- name: "A-SPA"
+  description: "Standalone application accessed via call links"
+  color: "bfd4f2"
+- name: "A-Spatial-Audio"
+  description: "Directional audio based on where a speaker appears on screen"
+  color: "bfd4f2"
+- name: "A-Speech-Enhancement"
+  description: "Techniques to enhance the intelligibility of speech in calls"
+  color: "c5def5"
+- name: "A-Split-Grid"
+  description: "The freedom layout system used for ≤12 participants"
+  color: "bfd4f2"
+- name: "A-Spotlight"
+  description: "Spotlight layout, where the active speaker is foregrounded"
+  color: "bfd4f2"
+- name: "A-Telemetry-Posthog"
+  description: "Share opt in usage data for optimizing the app via posthog"
+  color: "bfd4f2"
+- name: "A-Testing"
+  description: "Integration tests, unit tests, etc."
+  color: "bfd4f2"
+- name: "A-Video-Rooms"
+  description: "Rooms reserved exclusively for calling"
+  color: "bfd4f2"
+- name: "A-Walkie-Talkie"
+  description: "Walkie-talkie / PTT (push-to-talk) mode"
+  color: "bfd4f2"
+- name: "A11y"
+  description: "Accessibility"
+  color: "4ADEC0"
+- name: "backport-candidate"
+  description: "Something that is a candidate for backport to a particular release branch"
+  color: "0B8D85"
+- name: "customer-retainer"
+  color: "F44A5F"
+- name: "dependencies"
+  description: "Pull requests that update a dependency file"
+  color: "0366d6"
+- name: "development build"
+  description: "runs yarn build process in development mode"
+  color: "1d76db"
+- name: "Discord"
+  description: "Use case familiar to Discord users"
+  color: "3670d2"
+- name: "docker build"
+  description: "Creates a docker image for this PR"
+  color: "0e8a16"
+- name: "EPIC"
+  color: "5319E7"
+- name: "good first issue"
+  description: "Good for newcomers"
+  color: "7057ff"
+- name: "Help Wanted"
+  description: "Community contributions are welcome!"
+  color: "159818"
+- name: "I18n"
+  description: "Internationalisation"
+  color: "d4c5f9"
+- name: "O-Frequent"
+  description: "Affects or can be seen by most users regularly or impacts most users' first experience"
+  color: "0052CC"
+- name: "O-Occasional"
+  description: "Affects or can be seen by some users regularly or most users rarely"
+  color: "1D76DB"
+- name: "O-Uncommon"
+  description: "Most users are unlikely to come across this or unexpected workflow"
+  color: "C5DEF5"
+- name: "p1"
+  description: "Must fix/implement before this is usable as a product"
+  color: "D93F0B"
+- name: "p2"
+  description: "Should fix/implement, but not at the expense of p1s"
+  color: "FBCA04"
+- name: "p3"
+  description: "Could fix/implement when time allows"
+  color: "0E8A16"
+- name: "PR-Breaking-Change"
+  description: "A Pull request that changes EC in a way that is incompatible to the previous version."
+  color: "D93F0B"
+- name: "PR-Bug-Fix"
+  description: "Release note category. A PR that fixes a bug."
+  color: "C2E0C6"
+- name: "PR-Developer-Experience"
+  description: "Release note category. A PR that does not change EC but improves working with the repository."
+  color: "C2E0C6"
+- name: "PR-Documentation"
+  description: "Release note category. A PR that improves the documentation."
+  color: "C2E0C6"
+- name: "PR-Feature"
+  description: "Release note category. A PR that introduces a new user facing feature."
+  color: "C2E0C6"
+- name: "PR-Improvement"
+  description: "Release note category. A PR that improves EC's performance or stability."
+  color: "C2E0C6"
+- name: "PR-Task"
+  description: "Release note category. A PR that is hidden from release note."
+  color: "C2E0C6"
+- name: "Privacy"
+  color: "f41192"
+- name: "Roadmap"
+  color: "57457E"
+- name: "S-Critical"
+  description: "Prevents work, causes data loss and/or has no workaround"
+  color: "bd0026"
+- name: "S-Major"
+  description: "Severely degrades major functionality or product features, with no satisfactory workaround"
+  color: "fc4e2a"
+- name: "S-Minor"
+  description: "Impairs non-critical functionality or suitable workarounds exist"
+  color: "feb24c"
+- name: "S-Tolerable"
+  description: "Low/no impact on users"
+  color: "ffeda0"
+- name: "Security"
+  color: "b3e5fc"
+- name: "storybook build"
+  description: "Build and deploy the storybook frontend to netlify."
+  color: "45cd61"
+- name: "T-Defect"
+  description: "Something isn't working: bugs, crashes, hangs, vulnerabilities, or other reported problems"
+  color: "98e6ae"
+- name: "T-Enhancement"
+  description: "New features, changes in functionality, performance boosts, user-facing improvements"
+  color: "98e6ae"
+- name: "T-Other"
+  description: "Questions, user support, anything else"
+  color: "98e6ae"
+- name: "T-Task"
+  description: "Refactoring, enabling or disabling functionality, other engineering tasks"
+  color: "98e6ae"
+- name: "X-Blocked"
+  description: "Cannot be merged due to external dependencies"
+  color: "ff7979"
+- name: "X-Cannot-Reproduce"
+  description: "Needs reproduction steps"
+  color: "ff7979"
+- name: "X-Needs-Design"
+  description: "May require input from the design team"
+  color: "ff7979"
+- name: "X-Needs-Info"
+  description: "This issue is blocked awaiting information from the reporter"
+  color: "ff7979"
+- name: "X-Needs-Investigation"
+  color: "ff7979"
+- name: "X-Needs-Product"
+  description: "More input needed from the Product team"
+  color: "ff7979"
+- name: "X-Regression"
+  color: "ff7979"
+- name: "X-Release-Blocker"
+  color: "ff7979"
+- name: "X-Spec-Changes"
+  description: "May require spec changes"
+  color: "ff7979"
+- name: "X-Won't-Fix"
+  description: "This will not be worked on"
+  color: "ff7979"
+- name: "Z-Community-Testing"
+  description: "Issues found during the community testing sessions"
+  color: "efefef"
+- name: "Z-Could"
+  color: "ededed"
+- name: "Z-Design"
+  color: "ededed"
+- name: "Z-Flaky-Test"
+  color: "aaaaaa"
+- name: "Z-Media-Failure"
+  description: "Someone's audio or video isn't coming through"
+  color: "ededed"
+- name: "Z-Must"
+  color: "ededed"
+- name: "Z-Platform-Specific"
+  color: "ededed"
+- name: "Z-Power-Users"
+  color: "ededed"
+- name: "Z-ProductPolish"
+  color: "aaaaaa"
+- name: "Z-Should"
+  color: "ededed"
+- name: "Z-Splitbrain"
+  description: "Someone who should be on the call isn't showing up"
+  color: "ededed"
@@ -1,7 +1,16 @@
 name: Prevent blocked
 on:
+  # zizmor: ignore[dangerous-triggers]
+  # Reason: This workflow does not checkout code or use secrets.
+  # It only reads labels to set a failure status on the PR.
  pull_request_target:
    types: [opened, labeled, unlabeled, synchronize]
+
+permissions:
+  pull-requests: read
+  # Required to fail the check on the PR
+  statuses: write
+
 jobs:
  prevent-blocked:
    name: Prevent blocked
@@ -10,7 +19,7 @@ jobs:
      pull-requests: read
    steps:
      - name: Add notice
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7
        if: contains(github.event.pull_request.labels.*.name, 'X-Blocked')
        with:
          script: |
@@ -20,10 +20,13 @@ jobs:
    runs-on: ubuntu-latest
    permissions:
      contents: write # required to upload release asset
-      packages: write
+      packages: write # needed for publishing packages to GHCR
+      id-token: write # needed for login into tailscale with GitHub OIDC Token
    steps:
      - name: Check it out
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false

      - name: 📥 Download artifact
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -34,26 +37,64 @@ jobs:
          path: dist

      - name: Log in to container registry
-        uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3.4.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

+      - name: Connect to Tailscale
+        uses: tailscale/github-action@306e68a486fd2350f2bfc3b19fcd143891a4a2d8 # v4
+        if: github.event_name != 'pull_request'
+        with:
+          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
+          audience: ${{ secrets.TS_AUDIENCE }}
+          tags: tag:github-actions
+
+      - name: Compute vault jwt role name
+        id: vault-jwt-role
+        if: github.event_name != 'pull_request'
+        run: |
+          echo "role_name=github_service_management_$( echo "${{ github.repository }}" | sed -r 's|[/-]|_|g')" | tee -a "$GITHUB_OUTPUT"
+
+      - name: Get team registry token
+        id: import-secrets
+        uses: hashicorp/vault-action@4c06c5ccf5c0761b6029f56cfb1dcf5565918a3b # v3
+        if: github.event_name != 'pull_request'
+        with:
+          url: https://vault.infra.ci.i.element.dev
+          role: ${{ steps.vault-jwt-role.outputs.role_name }}
+          path: service-management/github-actions
+          jwtGithubAudience: https://vault.infra.ci.i.element.dev
+          method: jwt
+          secrets: |
+            services/voip-repositories/secret/data/oci.element.io username | OCI_USERNAME ;
+            services/voip-repositories/secret/data/oci.element.io password | OCI_PASSWORD ;
+
+      - name: Login to oci.element.io Registry
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3
+        if: github.event_name != 'pull_request'
+        with:
+          registry: oci-push.vpn.infra.element.io
+          username: ${{ steps.import-secrets.outputs.OCI_USERNAME }}
+          password: ${{ steps.import-secrets.outputs.OCI_PASSWORD }}
+
      - name: Extract metadata (tags, labels) for Docker
        id: meta
-        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: ${{ inputs.docker_tags}}
+          images: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+            oci-push.vpn.infra.element.io/element-call
+          tags: ${{ inputs.docker_tags }}
          labels: |
            org.opencontainers.image.licenses=AGPL-3.0-only OR LicenseRef-Element-Commercial

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0

      - name: Build and push Docker image
-        uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1 # v6.16.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -7,24 +7,20 @@ on:
        type: string
      package:
        type: string # This would ideally be a `choice` type, but that isn't supported yet
-        description: The package type to be built. Must be one of 'full' or 'embedded'
+        description: The package type to be built. Must be one of 'full', 'embedded', or 'sdk'
        required: true
      build_mode:
        type: string # This would ideally be a `choice` type, but that isn't supported yet
        description: The build mode for vite. Must be either 'development' or 'production'
        required: false
        default: production
-    secrets:
-      SENTRY_ORG:
-        required: true
-      SENTRY_PROJECT:
-        required: true
-      SENTRY_URL:
-        required: true
-      SENTRY_AUTH_TOKEN:
-        required: true
-      CODECOV_TOKEN:
-        required: false
+    # No `secrets:` block: every caller passes `secrets: inherit`, so the
+    # repository's secrets reach this workflow without each one being declared
+    # here and threaded through by name at the call sites -- the same pattern
+    # build-and-publish-docker.yaml uses. A secret this workflow starts using
+    # then needs no change to the callers. The ones read below are
+    # MATRIX_RTC_NPM_TOKEN, SENTRY_ORG, SENTRY_PROJECT, SENTRY_URL,
+    # SENTRY_AUTH_TOKEN and CODECOV_TOKEN.

 jobs:
  build:
@@ -32,18 +28,29 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
-      - name: Yarn cache
+      - name: pnpm cache
        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
-          cache: "yarn"
+          cache: "pnpm"
          node-version-file: ".node-version"
+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
      - name: Install dependencies
-        run: "yarn install --immutable"
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
      - name: Build Element Call
-        run: ${{ format('yarn run build:{0}:{1}', inputs.package, inputs.build_mode) }}
+        run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
        env:
          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -52,6 +59,8 @@ jobs:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
          NODE_OPTIONS: "--max-old-space-size=4096"
+          PACKAGE: ${{ inputs.package }}
+          BUILD_MODE: ${{ inputs.build_mode }}
      - name: Upload Artifact
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
        with:
@@ -6,7 +6,7 @@ on:
      - opened
      - labeled
  push:
-    branches: [livekit, full-mesh]
+    branches: [main]
 jobs:
  build_full_element_call:
    # Use the full package vite build
@@ -15,15 +15,10 @@ jobs:
      package: full
      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-    secrets:
-      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      SENTRY_URL: ${{ secrets.SENTRY_URL }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    secrets: inherit
  deploy_develop:
-    # Deploy livekit branch to call.element.dev after build completes
-    if: github.ref == 'refs/heads/livekit'
+    # Deploy main branch to call.element.dev after build completes
+    if: github.ref == 'refs/heads/main'
    needs: build_full_element_call
    runs-on: ubuntu-latest
    steps:
@@ -43,13 +38,15 @@ jobs:
                }
            })
  docker_for_develop:
-    # Build docker and publish docker for livekit branch after build completes
-    if: github.ref == 'refs/heads/livekit'
+    # Build docker and publish docker for main branch after build completes
+    if: github.ref == 'refs/heads/main'
    needs: build_full_element_call
    permissions:
      contents: write
      packages: write
+      id-token: write
    uses: ./.github/workflows/build-and-publish-docker.yaml
+    secrets: inherit
    with:
      artifact_run_id: ${{ github.run_id }}
      docker_tags: |
@@ -63,9 +60,49 @@ jobs:
      package: embedded
      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-    secrets:
-      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      SENTRY_URL: ${{ secrets.SENTRY_URL }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    secrets: inherit
+
+  build_sdk_element_call:
+    # Use the embedded package vite build
+    uses: ./.github/workflows/build-element-call.yaml
+    with:
+      package: sdk
+      vite_app_version: ${{ github.event.release.tag_name || github.sha }}
+      build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
+    secrets: inherit
+
+  build_storybook:
+    name: Build Storybook
+    if: contains(github.event.pull_request.labels.*.name, 'storybook build')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+      - name: Enable Corepack
+        run: corepack enable
+      - name: pnpm cache
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          cache: "pnpm"
+          node-version-file: ".node-version"
+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
+      - name: Install dependencies
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Build Storybook
+        run: pnpm run build-storybook
+      - name: Upload Artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: build-output-storybook
+          path: storybook-static
+          # We'll only use this in a triggered job, then we're done with it
+          retention-days: 1
@@ -1,8 +1,16 @@
 name: PR changelog label

 on:
+  # zizmor: ignore[dangerous-triggers]
+  # This is safe because we do not use actions/checkout or execute untrusted code.
+  # Using pull_request_target is necessary to allow status writes for PRs from forks.
  pull_request_target:
-    types: [labeled, unlabeled, opened]
+    types: [labeled, unlabeled, opened, synchronize]
+
+permissions:
+  pull-requests: read
+  statuses: write
+
 jobs:
  pr-changelog-label:
    runs-on: ubuntu-latest
@@ -14,6 +14,10 @@ on:
      deployment_ref:
        required: true
        type: string
+      package:
+        required: true
+        type: string
+        description: Which package to deploy - 'full', 'embedded', 'sdk', or 'storybook'
      artifact_run_id:
        required: false
        type: string
@@ -39,7 +43,7 @@ jobs:
        with:
          step: start
          token: ${{ secrets.GITHUB_TOKEN }}
-          env: Netlify
+          env: ${{ inputs.package}}
          ref: ${{ inputs.deployment_ref }}
          desc: |
            Do you trust the author of this PR? Maybe this build will steal your keys or give you malware.
@@ -50,23 +54,35 @@ jobs:
        with:
          github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
          run-id: ${{ inputs.artifact_run_id }}
-          name: build-output-full
+          name: build-output-${{ inputs.package }}
          path: webapp

      - name: Add redirects file
        # We fetch from github directly as we don't bother checking out the repo
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
        run: curl -s https://raw.githubusercontent.com/element-hq/element-call/main/config/netlify_redirects > webapp/_redirects

      - name: Add config file
-        run: curl -s "https://raw.githubusercontent.com/${{ inputs.pr_head_full_name }}/${{ inputs.pr_head_ref }}/config/config_netlify_preview.json" > webapp/config.json
-
+        # Not needed for storybook deployments
+        if: inputs.package != 'storybook'
+        run: |
+          if [ "${INPUTS_PACKAGE}" = "full" ]; then
+            curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview.json" > webapp/config.json
+          else
+            curl -s "https://raw.githubusercontent.com/${INPUTS_PR_HEAD_FULL_NAME}/${INPUTS_PR_HEAD_REF}/config/config_netlify_preview_sdk.json" > webapp/config.json
+          fi
+        env:
+          INPUTS_PACKAGE: ${{ inputs.package }}
+          INPUTS_PR_HEAD_FULL_NAME: ${{ inputs.pr_head_full_name }}
+          INPUTS_PR_HEAD_REF: ${{ inputs.pr_head_ref }}
      - name: ☁️ Deploy to Netlify
        id: netlify
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0
        with:
          publish-dir: webapp
          deploy-message: "Deploy from GitHub Actions"
-          alias: pr${{ inputs.pr_number }}
+          alias: ${{ inputs.package == 'sdk' && format('pr{0}-sdk', inputs.pr_number) || inputs.package == 'storybook' && format('pr{0}-storybook', inputs.pr_number) || format('pr{0}', inputs.pr_number) }}
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
@@ -2,28 +2,39 @@ name: Lint, format & type check
 on:
  pull_request: {}
 jobs:
-  prettier:
+  lint:
    name: Lint, format & type check
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
-      - name: Yarn cache
+      - name: pnpm cache
        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
-          cache: "yarn"
+          cache: "pnpm"
          node-version-file: ".node-version"
+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
      - name: Install dependencies
-        run: "yarn install --immutable"
-      - name: Prettier
-        run: "yarn run prettier:check"
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Formatting
+        run: "pnpm run format:check"
      - name: i18n
-        run: "yarn run i18n:check"
-      - name: ESLint
-        run: "yarn run lint:eslint"
+        run: "pnpm run i18n:check"
+      - name: Lint
+        run: "pnpm run lint:oxlint"
      - name: Type check
-        run: "yarn run lint:types"
+        run: "pnpm run lint:types"
      - name: Dead code analysis
-        run: "yarn run lint:knip"
+        run: "pnpm run lint:knip"
@@ -1,5 +1,7 @@
 name: Deploy previews for PRs
 on:
+  # zizmor: ignore[dangerous-triggers]
+  # Reason: This is now restricted to internal PRs only using the 'if' condition below.
  workflow_run:
    workflows: ["Build"]
    types:
@@ -7,7 +9,14 @@ on:

 jobs:
  prdetails:
-    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
+    # Logic:
+    # 1. Build must be successful
+    # 2. Event must be a pull_request
+    # 3. Head repository must be the SAME as the base repository (No Forks!)
+    if: >
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.head_repository.full_name == github.repository
    runs-on: ubuntu-latest
    outputs:
      pr_number: ${{ steps.prdetails.outputs.pr_id }}
@@ -20,7 +29,7 @@ jobs:
          owner: ${{ github.event.workflow_run.head_repository.owner.login }}
          branch: ${{ github.event.workflow_run.head_branch }}

-  netlify:
+  netlify-full:
    needs: prdetails
    permissions:
      deployments: write
@@ -31,6 +40,42 @@ jobs:
      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+      package: full
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
+  netlify-sdk:
+    needs: prdetails
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/deploy-to-netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+      package: sdk
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
+  netlify-storybook:
+    needs: prdetails
+    if: ${{ needs.prdetails.outputs.pr_data_json && contains(fromJSON(needs.prdetails.outputs.pr_data_json).labels.*.name, 'storybook build') }}
+    permissions:
+      deployments: write
+    uses: ./.github/workflows/deploy-to-netlify.yaml
+    with:
+      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
+      pr_number: ${{ needs.prdetails.outputs.pr_number }}
+      pr_head_full_name: ${{ github.event.workflow_run.head_repository.full_name }}
+      pr_head_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.ref }}
+      deployment_ref: ${{ needs.prdetails.outputs.pr_data_json && fromJSON(needs.prdetails.outputs.pr_data_json).head.sha || github.ref || github.head_ref }}
+      package: storybook
    secrets:
      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
@@ -42,7 +87,9 @@ jobs:
    permissions:
      contents: write
      packages: write
+      id-token: write
    uses: ./.github/workflows/build-and-publish-docker.yaml
+    secrets: inherit
    with:
      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
      docker_tags: |
@@ -9,7 +9,7 @@ on:
      - opened
      - labeled
  push:
-    branches: [livekit]
+    branches: [main]

 jobs:
  versioning:
@@ -22,8 +22,18 @@ jobs:
      TAG: ${{ steps.tag.outputs.TAG }}
    steps:
      - name: Calculate VERSION
-        # We should only use the hard coded test value for a dry run
-        run: echo "VERSION=${{ github.event_name == 'release' && github.event.release.tag_name || 'v0.0.0-pre.0' }}" >> "$GITHUB_ENV"
+        # Safely store dynamic values in environment variables
+        # to prevent shell injection (template-injection)
+        run: |
+          # The logic is executed within the shell using the env variables
+          if [ "$EVENT_NAME" = "release" ]; then
+            echo "VERSION=$RELEASE_TAG" >> "$GITHUB_ENV"
+          else
+            echo "VERSION=v0.0.0-pre.0" >> "$GITHUB_ENV"
+          fi
+        env:
+          RELEASE_TAG: ${{ github.event.release.tag_name }}
+          EVENT_NAME: ${{ github.event_name }}
      - id: dry_run
        name: Set DRY_RUN
        # We perform a dry run for all events except releases.
@@ -44,6 +54,8 @@ jobs:
        run: |
          if [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
            echo "TAG=latest" >> "$GITHUB_OUTPUT"
+          elif [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+\-rc\.[0-9]+$ ]]; then
+            echo "TAG=rc" >> "$GITHUB_OUTPUT"
          else
            echo "TAG=other" >> "$GITHUB_OUTPUT"
          fi
@@ -54,11 +66,7 @@ jobs:
    with:
      vite_app_version: embedded-${{ needs.versioning.outputs.PREFIXED_VERSION }}
      package: embedded
-    secrets:
-      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      SENTRY_URL: ${{ secrets.SENTRY_URL }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+    secrets: inherit

  publish_tarball:
    needs: [build_element_call, versioning]
@@ -69,7 +77,9 @@ jobs:
      contents: write # required to upload release asset
    steps:
      - name: Determine filename
-        run: echo "FILENAME_PREFIX=element-call-embedded-${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
+        run: echo "FILENAME_PREFIX=element-call-embedded-${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
+        env:
+          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}
      - name: 📥 Download built element-call artifact
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
        with:
@@ -78,12 +88,12 @@ jobs:
          name: build-output-embedded
          path: ${{ env.FILENAME_PREFIX}}
      - name: Create Tarball
-        run: tar --numeric-owner -cvzf ${{ env.FILENAME_PREFIX }}.tar.gz ${{ env.FILENAME_PREFIX }}
+        run: tar --numeric-owner -cvzf ${FILENAME_PREFIX}.tar.gz ${FILENAME_PREFIX}
      - name: Create Checksum
-        run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
+        run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
      - name: Upload
        if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
        with:
          files: |
            ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -98,10 +108,12 @@ jobs:
      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
    permissions:
      contents: read
-      id-token: write # required for the provenance flag on npm publish
+      id-token: write # Allow npm to authenticate as a trusted publisher
    steps:
      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false

      - name: 📥 Download built element-call artifact
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -121,15 +133,16 @@ jobs:
      - name: Publish npm
        working-directory: embedded/web
        run: |
-          npm version ${{ needs.versioning.outputs.PREFIXED_VERSION }} --no-git-tag-version
+          npm version ${NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION} --no-git-tag-version
          echo "ARTIFACT_VERSION=$(jq '.version' --raw-output package.json)" >> "$GITHUB_ENV"
-          npm publish --provenance --access public --tag ${{ needs.versioning.outputs.TAG }} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
+          npm publish --provenance --access public --tag ${NEEDS_VERSIONING_OUTPUTS_TAG} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_RELEASE_TOKEN }}
+          NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION: ${{ needs.versioning.outputs.PREFIXED_VERSION }}
+          NEEDS_VERSIONING_OUTPUTS_TAG: ${{ needs.versioning.outputs.TAG }}

      - id: artifact_version
        name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"

  publish_android:
    needs: [build_element_call, versioning]
@@ -142,7 +155,9 @@ jobs:
      contents: read
    steps:
      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false

      - name: 📥 Download built element-call artifact
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -153,7 +168,7 @@ jobs:
          path: embedded/android/lib/src/main/assets/element-call

      - name: ☕️ Setup Java
-        uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4
+        uses: actions/setup-java@c1e323688fd81a25caa38c78aa6df2d33d3e20d9 # v4
        with:
          distribution: "temurin"
          java-version: "17"
@@ -161,14 +176,19 @@ jobs:
      - name: Get artifact version
        # Anything that is not a final release will be tagged as a snapshot
        run: |
-          if [[ "${{ needs.versioning.outputs.TAG }}" == "latest" ]]; then
-            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
+          if [[ "${NEEDS_VERSIONING_OUTPUTS_TAG}" == "latest" ]]; then
+            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
+          elif [[ "${NEEDS_VERSIONING_OUTPUTS_TAG}" == "rc" ]]; then
+            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
          else
-            echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}-SNAPSHOT" >> "$GITHUB_ENV"
+            echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}-SNAPSHOT" >> "$GITHUB_ENV"
          fi
+        env:
+          NEEDS_VERSIONING_OUTPUTS_TAG: ${{ needs.versioning.outputs.TAG }}
+          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}

      - name: Set version string
-        run: sed -i "s/0.0.0/${{ env.ARTIFACT_VERSION }}/g" embedded/android/lib/src/main/kotlin/io/element/android/call/embedded/Version.kt
+        run: sed -i "s/0.0.0/${ARTIFACT_VERSION}/g" embedded/android/lib/src/main/kotlin/io/element/android/call/embedded/Version.kt

      - name: Publish AAR
        working-directory: embedded/android
@@ -182,7 +202,7 @@ jobs:

      - id: artifact_version
        name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"

  publish_ios:
    needs: [build_element_call, versioning]
@@ -195,9 +215,10 @@ jobs:
      contents: read
    steps:
      - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
          path: element-call
+          persist-credentials: false

      - name: 📥 Download built element-call artifact
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
@@ -208,20 +229,22 @@ jobs:
          path: element-call/embedded/ios/Sources/dist

      - name: Checkout element-call-swift
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
          repository: element-hq/element-call-swift
          path: element-call-swift
-          token: ${{ secrets.SWIFT_RELEASE_TOKEN }}
+          persist-credentials: false

      - name: Copy files
        run: rsync -a --delete --exclude .git element-call/embedded/ios/ element-call-swift

      - name: Get artifact version
-        run: echo "ARTIFACT_VERSION=${{ needs.versioning.outputs.UNPREFIXED_VERSION }}" >> "$GITHUB_ENV"
+        run: echo "ARTIFACT_VERSION=${NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION}" >> "$GITHUB_ENV"
+        env:
+          NEEDS_VERSIONING_OUTPUTS_UNPREFIXED_VERSION: ${{ needs.versioning.outputs.UNPREFIXED_VERSION }}

      - name: Set version string
-        run: sed -i "s/0.0.0/${{ env.ARTIFACT_VERSION }}/g" element-call-swift/Sources/EmbeddedElementCall/EmbeddedElementCall.swift
+        run: sed -i "s/0.0.0/${ARTIFACT_VERSION}/g" element-call-swift/Sources/EmbeddedElementCall/EmbeddedElementCall.swift

      - name: Test build
        working-directory: element-call-swift
@@ -233,17 +256,23 @@ jobs:
          git config --global user.email "ci@element.io"
          git config --global user.name "Element CI"
          git add -A
-          git commit -am "Release ${{ needs.versioning.outputs.PREFIXED_VERSION }}"
-          git tag -a ${{ env.ARTIFACT_VERSION }} -m "${{ github.event.release.html_url }}"
+          git commit -am "Release ${NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION}"
+          git tag -a ${ARTIFACT_VERSION} -m "${GITHUB_EVENT_RELEASE_HTML_URL}"
+        env:
+          NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION: ${{ needs.versioning.outputs.PREFIXED_VERSION }}
+          GITHUB_EVENT_RELEASE_HTML_URL: ${{ github.event.release.html_url }}

      - name: Push
+        if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
        working-directory: element-call-swift
        run: |
-          git push --tags ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
+          git push "https://x-access-token:${SWIFT_RELEASE_TOKEN}@github.com/element-hq/element-call-swift.git" --tags
+        env:
+          SWIFT_RELEASE_TOKEN: ${{ secrets.SWIFT_RELEASE_TOKEN }}

      - id: artifact_version
        name: Output artifact version
-        run: echo "ARTIFACT_VERSION=${{env.ARTIFACT_VERSION}}" >> "$GITHUB_OUTPUT"
+        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"

  release_notes:
    needs: [versioning, publish_npm, publish_android, publish_ios]
@@ -255,12 +284,16 @@ jobs:
    steps:
      - name: Log versions
        run: |
-          echo "NPM: ${{ needs.publish_npm.outputs.ARTIFACT_VERSION }}"
-          echo "Android: ${{ needs.publish_android.outputs.ARTIFACT_VERSION }}"
-          echo "iOS: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}"
+          echo "NPM: ${NEEDS_PUBLISH_NPM_OUTPUTS_ARTIFACT_VERSION}"
+          echo "Android: ${NEEDS_PUBLISH_ANDROID_OUTPUTS_ARTIFACT_VERSION}"
+          echo "iOS: ${NEEDS_PUBLISH_IOS_OUTPUTS_ARTIFACT_VERSION}"
+        env:
+          NEEDS_PUBLISH_NPM_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_npm.outputs.ARTIFACT_VERSION }}
+          NEEDS_PUBLISH_ANDROID_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_android.outputs.ARTIFACT_VERSION }}
+          NEEDS_PUBLISH_IOS_OUTPUTS_ARTIFACT_VERSION: ${{ needs.publish_ios.outputs.ARTIFACT_VERSION }}
      - name: Add release notes
        if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
-        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
        with:
          append_body: true
          body: |
@@ -13,11 +13,7 @@ jobs:
    with:
      package: full
      vite_app_version: ${{ github.event.release.tag_name }} # Using ${{ env.VERSION }} here doesn't work
-    secrets:
-      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
-      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-      SENTRY_URL: ${{ secrets.SENTRY_URL }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+    secrets: inherit

  publish_tarball:
    needs: build_element_call
@@ -38,11 +34,11 @@ jobs:
          name: build-output-full
          path: ${{ env.FILENAME_PREFIX }}
      - name: Create Tarball
-        run: tar --numeric-owner --transform "s/dist/${{ env.FILENAME_PREFIX }}/" -cvzf ${{ env.FILENAME_PREFIX }}.tar.gz ${{ env.FILENAME_PREFIX }}
+        run: tar --numeric-owner --transform "s/dist/${FILENAME_PREFIX}/" -cvzf ${FILENAME_PREFIX}.tar.gz ${FILENAME_PREFIX}
      - name: Create Checksum
-        run: find ${{ env.FILENAME_PREFIX }} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${{ env.FILENAME_PREFIX }}.sha256
+        run: find ${FILENAME_PREFIX} -type f -print0 | sort -z | xargs -0 sha256sum | tee ${FILENAME_PREFIX}.sha256
      - name: Upload
-        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
        with:
          files: |
            ${{ env.FILENAME_PREFIX }}.tar.gz
@@ -55,12 +51,15 @@ jobs:
    permissions:
      contents: write
      packages: write
+      id-token: write
    uses: ./.github/workflows/build-and-publish-docker.yaml
+    secrets: inherit
    with:
      artifact_run_id: ${{ github.event.workflow_run.id || github.run_id }}
      docker_tags: |
        type=sha,format=short,event=branch
        type=raw,value=${{ github.event.release.tag_name }}
+        type=raw,value=latest
      # Like before, using ${{ env.VERSION }} above doesn't work
  add_docker_release_note:
    needs: publish_docker
@@ -68,7 +67,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Add release note
-        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631 # v2
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
        with:
          append_body: true
          body: |
@@ -0,0 +1,23 @@
+name: Sync labels
+on:
+  workflow_dispatch: {}
+
+  push:
+    branches:
+      - main
+    paths:
+      - .github/labels.yml
+      - .github/workflows/sync-labels.yml
+
+permissions: {} # We use LABEL_SYNC_GITHUB_TOKEN instead
+
+jobs:
+  sync-labels:
+    uses: element-hq/element-meta/.github/workflows/sync-labels.yml@7f2f93fb9b52ece7a0998f60e64862aa203c1746
+    with:
+      LABELS: |
+        .github/labels.yml
+      DELETE: true
+      WET: true
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.LABEL_SYNC_GITHUB_TOKEN }}
@@ -0,0 +1,48 @@
+# Triggers after the playwright tests have finished,
+# taking the artifact and uploading it to Netlify for easier viewing
+name: Upload End to End Test report to Netlify
+on:
+  # Privilege escalation necessary to publish to Netlify
+  # 🚨 We must not execute any checked out code here.
+  workflow_run: # zizmor: ignore[dangerous-triggers]
+    workflows: ["Test"]
+    types:
+      - completed
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch || github.run_id }}
+  cancel-in-progress: ${{ github.event.workflow_run.event == 'pull_request' }}
+
+permissions: {}
+
+jobs:
+  report:
+    if: github.event.workflow_run.conclusion != 'cancelled'
+    name: Report results
+    runs-on: ubuntu-24.04
+    environment: Netlify
+    permissions:
+      statuses: write
+      deployments: write
+      actions: read
+    steps:
+      - name: Download HTML report
+        uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          name: html-report
+          path: playwright-report
+
+      - name: 📤 Deploy to Netlify
+        uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
+        with:
+          path: playwright-report
+          owner: ${{ github.event.workflow_run.head_repository.owner.login }}
+          branch: ${{ github.event.workflow_run.head_branch }}
+          revision: ${{ github.event.workflow_run.head_sha }}
+          token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          site_id: ${{ secrets.NETLIFY_SITE_ID }}
+          desc: Playwright Report
+          deployment_env: EndToEndTests
+          prefix: "e2e-"
@@ -2,60 +2,114 @@ name: Test
 on:
  pull_request: {}
  push:
-    branches: [livekit, full-mesh]
+    branches: [main]
 jobs:
  vitest:
    name: Run unit tests
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
-      - name: Yarn cache
+      - name: pnpm cache
        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
-          cache: "yarn"
+          cache: "pnpm"
          node-version-file: ".node-version"
+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
      - name: Install dependencies
-        run: "yarn install --immutable"
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Get Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
+      - name: Cache Playwright binaries
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright binaries
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm playwright install --with-deps
      - name: Vitest
-        run: "yarn run test:coverage"
+        run: "pnpm run test:coverage"
      - name: Upload to codecov
-        uses: codecov/codecov-action@18283e04ce6e62d37312384ff67231eb8fd56d24 # v5
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
        with:
          flags: unittests
          fail_ci_if_error: true
  playwright:
-    name: Run end-to-end tests
-    timeout-minutes: 30
+    name: Run end-to-end tests (${{ matrix.call_implementation }})
+    timeout-minutes: 60
    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        # Both MatrixRTC implementations, until matrix-rtc becomes the
+        # default and matrix-js-sdk goes (oxidation plan §5.15). The
+        # matrix-rtc run does not block until it has passed once.
+        call_implementation: [matrix-js-sdk, matrix-rtc]
+    continue-on-error: ${{ matrix.call_implementation == 'matrix-rtc' }}
    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
-          cache: "yarn"
+          cache: "pnpm"
          node-version-file: ".node-version"
+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
      - name: Install dependencies
-        run: yarn install --immutable
-      - name: Install Playwright Browsers
-        run: yarn playwright install --with-deps
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: pnpm install --frozen-lockfile --ignore-pnpmfile
+      - name: Get Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
+      - name: Cache Playwright binaries
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+      - name: Install Playwright binaries
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm playwright install --with-deps
      - name: Run backend components
        run: |
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml pull
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up -d
          docker ps
      - name: Run Playwright tests
        env:
          USE_DOCKER: 1
-        run: yarn playwright test
-      - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+          CALL_VIEW_MODEL_IMPLEMENTATION: ${{ matrix.call_implementation }}
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        if: ${{ !cancelled() }}
        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 3
+          name: html-report-${{ matrix.call_implementation }}
+          path: playwright-report
+          if-no-files-found: error
+          retention-days: 4
@@ -13,18 +13,29 @@ jobs:

    steps:
      - name: Checkout the code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false

      - name: Enable Corepack
        run: corepack enable

      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
-          cache: "yarn"
+          cache: "pnpm"
          node-version-file: ".node-version"

+      - name: Authenticate to GitHub Packages
+        # The MatrixRTC SDK (@billcarsonfr/matrix-rtc, see .npmrc) is on the GitHub
+        # Packages npm registry, which needs a token with read:packages even for
+        # public packages. A workflow's GITHUB_TOKEN only reaches packages of its own
+        # repository, so this is a personal access token kept as a repository secret.
+        env:
+          NPM_REGISTRY_TOKEN: ${{ secrets.MATRIX_RTC_NPM_TOKEN }}
+        run: echo "//npm.pkg.github.com/:_authToken=${NPM_REGISTRY_TOKEN}" >> ~/.npmrc
      - name: Install Deps
-        run: "yarn install --immutable"
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"

      - name: Prune i18n
        run: "rm -R locales"
@@ -37,12 +48,17 @@ jobs:
      - name: Fix the owner of the downloaded files
        run: "sudo chown runner:docker -R locales"

-      - name: Prettier
-        run: yarn prettier:format
+      # Localazy doesn't write file contents in the same order that i18next-cli's
+      # extractor uses. We re-run the extractor after downloading to fix the order.
+      - name: i18n
+        run: pnpm i18n
+
+      - name: Formatting
+        run: pnpm format

      - name: Create Pull Request
        id: cpr
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
        with:
          token: ${{ secrets.ELEMENT_BOT_TOKEN }}
          branch: actions/localazy-download
@@ -50,7 +66,7 @@ jobs:
          title: Localazy Download
          commit-message: Translations updates
          labels: |
-            T-Task
+            PR-Task

      - name: Enable automerge
        run: gh pr merge --merge --auto "$PR_NUMBER"
@@ -2,7 +2,7 @@ name: Upload translation files to Localazy
 on:
  push:
    branches:
-      - livekit
+      - main
    paths-ignore:
      - ".github/**"

@@ -14,7 +14,9 @@ jobs:

    steps:
      - name: Checkout the code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false

      - name: Upload
        uses: localazy/upload@27e6b5c0fddf4551596b42226b1c24124335d24a # v1
@@ -0,0 +1,23 @@
+name: GitHub Actions Security Analysis with zizmor 🌈
+
+on:
+  push:
+    branches: ["main", "full-mesh"]
+  pull_request: {}
+
+permissions: {}
+
+jobs:
+  zizmor:
+    name: Run zizmor 🌈
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write # Required for upload-sarif (used by zizmor-action) to upload SARIF files.
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
+        with:
+          persist-credentials: false
+
+      - name: Run zizmor 🌈
+        uses: zizmorcore/zizmor-action@192e21d79ab29983730a13d1382995c2307fbcaa # v0.5.7
@@ -8,7 +8,11 @@ dist-ssr
 .idea/
 public/config.json
 backend/synapse_tmp/*
+backend/synapse_tmp_othersite/*
 /coverage
+
+# Transient agent scratch files
+/agent-workspace/
 config.json

 # Yarn
@@ -20,12 +24,20 @@ yarn-error.log
 !/.yarn/releases
 !/.yarn/sdks
 !/.yarn/versions
+# old yarn based linking
 /.links.yaml
 /.links.disabled.yaml
 /.links.temp-disabled.yaml
+# pnpm based linking
+/.links.cjs
+/.links.disabled.cjs
+/.links.temp-disabled.cjs

 # Playwright
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/
+
+*storybook.log
+storybook-static
@@ -1 +1 @@
-22
+24
@@ -0,0 +1,9 @@
+# The MatrixRTC SDK (`@element-hq/matrix-rtc`, aliased in package.json to the
+# name the fork's CI publishes it under) comes from the GitHub Packages npm
+# registry, which needs a token with `read:packages` even for public
+# packages. This is a stop-gap while the SDK is in flux; once it is published
+# to npmjs.com this file and the alias go away (docs/matrix_rtc_sdk.md).
+# Only the scope->registry mapping lives here; the token goes in your
+# user-level npm config (~/.npmrc), never in this file. CI writes it there
+# from a repository secret (see .github/workflows).
+@billcarsonfr:registry=https://npm.pkg.github.com
@@ -0,0 +1,6 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist"]
+}
@@ -0,0 +1,165 @@
+{
+  "$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",
+    "element-call/no-top-level-logger-get-child": "error",
+    "jsdoc/empty-tags": "error",
+    "jsdoc/check-property-names": "error",
+    "jsdoc/require-param-description": "warn",
+    "react/display-name": "error",
+    // TODO: These React Compiler-based rules joined oxlint's correctness
+    // category in v1.81 and flag many pre-existing patterns, including hooks
+    // like useLatest/useInitial/useReactiveState that intentionally access
+    // refs during render. Re-evaluate them when adopting the React Compiler.
+    "react/immutability": "off",
+    "react/no-deriving-state-in-effects": "off",
+    "react/preserve-manual-memoization": "off",
+    "react/refs": "off",
+    "react/set-state-in-effect": "off",
+    "react/static-components": "off",
+    "react/use-memo": "off",
+    // 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"
+      }
+    }
+  ]
+}
@@ -1,2 +0,0 @@
-node_modules
-dist
@@ -1 +0,0 @@
-{}
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-vitest"],
+  framework: "@storybook/react-vite",
+  // THIS IS IMPORTANT
+  // vitest runs without Vite's normal dependency optimization, so we need to manually include the polyfills for the stories to work.
+  // otherwise we will get: new dependencies optimized: ...
+  // and
+  // ```
+  // [vitest] Vite unexpectedly reloaded a test. This may cause tests to fail, lead to flaky behaviour or duplicated test runs.
+  // For a stable experience, please add mentioned dependencies to your config's `optimizeDeps.include` field manually.
+  // ```
+  // which breaks the storybook ci on the first and only run.
+  viteFinal(config) {
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      include: [
+        ...(config.optimizeDeps?.include ?? []),
+        "vite-plugin-node-polyfills/shims/buffer",
+        "vite-plugin-node-polyfills/shims/global",
+        "vite-plugin-node-polyfills/shims/process",
+      ],
+    };
+    return config;
+  },
+};
+export default config;
@@ -0,0 +1,31 @@
+/*
+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 { create } from "storybook/theming";
+import { addons } from "storybook/manager-api";
+
+addons.setConfig({
+  theme: create({
+    base: "light",
+    colorPrimary: "#1b1d22",
+    colorSecondary: "#0467dd",
+
+    // Typography
+    fontBase: '"Inter", sans-serif',
+    fontCode: '"Inconsolata", monospace',
+
+    // Text colors
+    textColor: "#1b1d22",
+    appBg: "#ffffff",
+    barBg: "#ffffff",
+
+    brandTitle: "Element Call",
+    brandUrl: "https://element.io/",
+    brandImage: "/src/icons/Logo.svg",
+    brandTarget: "_self",
+  }),
+});
@@ -0,0 +1,63 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import type { Preview } from "@storybook/react-vite";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import EN from "../locales/en/app.json";
+import { Config } from "../src/config/Config";
+import { initReactI18next } from "react-i18next";
+import { i18n } from "../src/utils/i18n";
+import "../src/index.css";
+
+// Bare-minimum i18n config.
+// Unlike the app, stories register the instance as react-i18next's default
+// rather than wrapping every story in an <I18nextProvider>.
+i18n
+  .use(initReactI18next)
+  .init({
+    lng: "en",
+    fallbackLng: "en",
+    supportedLngs: ["en"],
+    // We embed the translations, so that it never needs to fetch
+    resources: {
+      en: {
+        translation: EN,
+      },
+    },
+    interpolation: {
+      escapeValue: false, // React has built-in XSS protections
+    },
+  })
+  .catch((e) => logger.warn("Failed to init i18n for stories", e));
+
+// Stories run without a config.json; the defaults stand in, as they do for
+// a component host that passes none.
+Config.initWith({});
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default preview;
@@ -1,91 +0,0 @@
-/*
-Copyright 2025 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 = {
-  name: "linker",
-  factory: (require) => ({
-    hooks: {
-      // Yarn's plugin system is very light on documentation. The best we have
-      // for this hook is simply the type definition in
-      // https://github.com/yarnpkg/berry/blob/master/packages/yarnpkg-core/sources/Plugin.ts
-      registerPackageExtensions: async (config, registerPackageExtension) => {
-        const { structUtils } = require("@yarnpkg/core");
-        const { parseSyml } = require("@yarnpkg/parsers");
-        const path = require("path");
-        const fs = require("fs");
-        const process = require("process");
-
-        // Create a descriptor that we can use to target our direct dependencies
-        const projectPath = config.projectCwd
-          .replace(/\\/g, "/")
-          .replace("/C:/", "C:/");
-        const manifestPath = path.join(projectPath, "package.json");
-        const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8"));
-        const selfDescriptor = structUtils.parseDescriptor(
-          `${manifest.name}@*`,
-          true,
-        );
-
-        // Load the list of linked packages
-        const linksPath = path.join(projectPath, ".links.yaml");
-        let linksFile;
-        try {
-          linksFile = fs.readFileSync(linksPath, "utf8");
-        } catch (e) {
-          return; // File doesn't exist, there's nothing to link
-        }
-        let links;
-        try {
-          links = parseSyml(linksFile);
-        } catch (e) {
-          console.error(".links.yaml has invalid syntax", e);
-          process.exit(1);
-        }
-
-        // Resolve paths and turn them into a Yarn package extension
-        const overrides = Object.fromEntries(
-          Object.entries(links).map(([name, link]) => [
-            name,
-            `portal:${path.resolve(config.projectCwd, link)}`,
-          ]),
-        );
-        const overrideIdentHashes = new Set();
-        for (const name of Object.keys(overrides))
-          overrideIdentHashes.add(
-            structUtils.parseDescriptor(`${name}@*`, true).identHash,
-          );
-
-        // Extend our own package's dependencies with these local overrides
-        registerPackageExtension(selfDescriptor, { dependencies: overrides });
-
-        // Filter out the original dependencies from the package spec so Yarn
-        // actually respects the overrides
-        const filterDependencies = (original) => {
-          const pkg = structUtils.copyPackage(original);
-          pkg.dependencies = new Map(
-            Array.from(pkg.dependencies.entries()).filter(
-              ([, value]) => !overrideIdentHashes.has(value.identHash),
-            ),
-          );
-          return pkg;
-        };
-
-        // Patch Yarn's own normalizePackage method to use the above filter
-        const originalNormalizePackage = config.normalizePackage;
-        config.normalizePackage = function (pkg, extensions) {
-          return originalNormalizePackage.call(
-            this,
-            pkg.identHash === selfDescriptor.identHash
-              ? filterDependencies(pkg)
-              : pkg,
-            extensions,
-          );
-        };
-      },
-    },
-  }),
-};
@@ -1,3 +0,0 @@
-nodeLinker: node-modules
-plugins:
-  - .yarn/plugins/linker.cjs
@@ -0,0 +1,54 @@
+# AGENTS.md — Element Call
+
+MatrixRTC (MSC4143) + LiveKit video calling, shipped standalone, as a widget in
+Element Web and Element X, as embedded packages, and as a React component in a
+host's page. It is the MatrixRTC reference implementation.
+
+## Non-negotiables
+
+- Features and UI changes need a pre-approved issue. No issue, no review.
+- Exactly one `PR-*` label per PR. CI enforces it; it drives the changelog.
+- New behaviour ships with unit tests, a story if it renders, and an e2e spec if it
+  is user-facing. All three.
+- Reuse an existing component. If you genuinely cannot, say so in the PR body and
+  name what you rejected — never add a new one silently.
+- Nothing reads the page. No `window.location`, `document.body`, `window.inner*`,
+  `@media`, global `i18next` or the `widget` global — take it from a provider.
+- The change works standalone, as a widget and as a component. Say what you checked.
+- Every gate below is green before you push.
+- Hand off after the first implementation, before the quality pass. Then commit on
+  the user's word where the setup allows it, or hand them the message.
+
+## Read before you
+
+| …                                | …                                                          |
+| -------------------------------- | ---------------------------------------------------------- |
+| start a task of any size         | [docs/agents/workflow.md](docs/agents/workflow.md)         |
+| touch call logic or a view model | [docs/agents/architecture.md](docs/agents/architecture.md) |
+| write any code                   | [docs/agents/code-style.md](docs/agents/code-style.md)     |
+| write a test, story or e2e spec  | [docs/agents/testing.md](docs/agents/testing.md)           |
+| open a PR                        | [CONTRIBUTING.md](CONTRIBUTING.md)                         |
+| implement from a feature spec    | [FEATURES_SPEC/AGENTS.md](FEATURES_SPEC/AGENTS.md)         |
+
+## Gates
+
+```sh
+pnpm lint            # tsc, oxlint, knip, component externals
+pnpm format          # oxfmt
+pnpm test            # vitest: unit and storybook projects
+pnpm i18n:check
+```
+
+`knip` fails on dead code; a file deliberately inert ahead of its consumer goes in
+`knip.ts` `ignoreFiles` with a reason.
+
+## A good PR
+
+- One slice, under ~400 changed lines, green on its own, linked to its issue.
+- View model + marble tests, thin view, a story per state, an e2e spec.
+- Any new shared component called out explicitly, with why nothing existing fit.
+- Template filled for real: what, why, before/after screenshots, repro steps.
+- Anything that redraws continuously — an animation frame, a stream — says what it
+  costs, or better, counts the redraws in a test.
+- Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.
+- Once review starts, fix forward. Never force-push a regeneration over a review.
@@ -1,3 +1,71 @@
 # Contributing code to Element

 Element follows the same pattern as the [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md).
+
+# Contributing to Element Call
+
+Element Call is a native Matrix video conferencing application built on
+[MatrixRTC (MSC4143)](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)
+and [LiveKit](https://livekit.io/). It runs in multiple deployment contexts — as a
+standalone web app and as a widget embedded in Element Web, Element X iOS, and
+Element X Android. It is also the primary R&D foundation for MatrixRTC, which means
+its architecture, maintainability, and flexibility are held to a high standard.
+
+We welcome contributions from the community. This document explains how to
+contribute effectively so that both you and the maintainers get the best outcome.
+
+## Issue First Policy
+
+> [!IMPORTANT]
+> Before writing a single line of code for a new feature or UI change, you **must**
+> open an issue and have the approach agreed with the maintainers.
+>
+> **We will not review or merge feature or UI pull requests that arrive without a
+> corresponding, pre-approved issue.**
+
+This is not gatekeeping — it's how we prevent wasted effort on both sides. Element
+Call must work correctly across multiple deployment contexts and meet specific product
+and design requirements. It is also a fast-moving codebase that underpins ongoing
+MatrixRTC development. A PR that looks reasonable in isolation can easily conflict
+with in-progress work, planned architecture changes, or design decisions that haven't
+been publicly documented yet.
+
+The issue is where we resolve all of that **before** anyone writes code.
+
+**Bug fixes** are no exception — most confirmed bugs should already have an issue anyways, existing issues that are marked as bugs have an implicit maintainer approval. If the solution for the bug is controversial it is highly recommended to discuss the approach in the issue before opening a PR.
+
+## Contribution Workflow
+
+1. **Open an issue** using the [Enhancement request](https://github.com/element-hq/element-call/issues/new?template=enhancement.yml) template.
+2. **Wait for feedback.** A maintainer will comment on the issue **within two weeks**. The use case and approach will get dicussed.
+   This may involve questions, suggestions, or a request to adjust scope.
+   This also allows to bring design and product into the loop before code gets created.
+3. **Get a green light.** Wait for explicit approval from a maintainer before starting
+   implementation.
+4. **Implement.** Write the code against the agreed approach.
+5. **Open a PR.** Link to the issue in your PR description and satisfy the checklist
+   in the PR template.
+
+## Code Quality
+
+Element Call moves fast and the codebase must stay clean and maintainable.
+
+- **Take responsibility for AI-generated code.** AI tools can be a useful aid, but we expect all the generated code to be understood and reasoned about by the contributor. Questions by the maintainers should be answered without just forwarding them to AI. The maintainers also have access to AI tools. If your contribution is just transporting messages between LLM <-> maintaines all our time is better used if the maintainers decide to interact with AI for this specific problem by themselves.
+- **Think across deployment contexts.** Changes must work correctly in both standalone
+  and widget modes. Consider how your change interacts with Element Web, Element X
+  iOS, and Element X Android.
+- **Write tests.** New functionality should be covered by tests. Where it is feasible,
+  existing uncovered code touched by your PR should also gain tests.
+
+## Contributor License Agreement
+
+All contributors must sign the
+[Element Contributor License Agreement](https://cla-assistant.io/element-hq/element-call)
+before their contribution can be merged. The CLA assistant bot will prompt you
+automatically when you open a PR.
+
+## Getting Help
+
+The best place to ask questions about Element Call development is the MatrixRTC room:
+
+**[#matrixRtc:matrix.org](https://matrix.to/#/#matrixrtc:matrix.org)**
@@ -3,6 +3,7 @@
 [![Chat](https://img.shields.io/matrix/webrtc:matrix.org)](https://matrix.to/#/#webrtc:matrix.org)
 [![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-call%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-call)
 [![License](https://img.shields.io/github/license/element-hq/element-call)](LICENSE-AGPL-3.0)
+[![Codecov](https://img.shields.io/codecov/c/github/element-hq/element-call)](https://app.codecov.io/gh/element-hq/element-call)

 [🎬 Live Demo 🎬](https://call.element.io)

@@ -35,8 +36,9 @@ You can find the latest development version continuously deployed to
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
 homeservers.  
 ✅ **End-to-End Encrypted** – Secure and private calls.  
-✅ **Standalone & Widget Mode** – Use as an independent app or embed in Matrix
-clients.  
+✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
+in Matrix clients as a widget, or (experimentally) mount it as a React component
+inside your own application.  
 ✅ **WebRTC-based** – No additional software required.  
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
 ([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
@@ -65,7 +67,7 @@ requiring a separate Matrix client.

 ### 📲 In-App Calling (Widget Mode in Messenger Apps)

-When used as a widget 🧩, Element Call is solely responsible on the core calling
+When used as a widget 🧩, Element Call is solely responsible for the core calling
 functionality (MatrixRTC). Authentication, event handling, and room state
 updates (via the Client-Server API) are handled by the hosting client.
 Communication between Element Call and the client is managed through the widget
@@ -89,7 +91,9 @@ and voice calls within Matrix rooms.

 Element Call offers two packaging options: one for standalone or widget
 deployment, and another for seamless widget-based integration into messenger
-apps. Below is an overview of each option.
+apps. A third, experimental option builds it as a React component library for
+applications that want to render a call inside their own page rather than in an
+iframe. Below is an overview of each option.

 **Full Package** – Supports both **Standalone** and **Widget** mode. It is
 hosted as a static web page and can be accessed via a URL when used as a widget.
@@ -106,38 +110,46 @@ recommended method for embedding Element Call.
  <img src="./docs/embedded_package.drawio.png" alt="Element Call Embedded Package">
 </p>

+**Component Package (experimental)** – A library build of Element Call as a
+React component, consumed as a dependency by a host application that already
+has a Matrix client. See
+[Element Call as a component](#element-call-as-a-component-experimental) below.
+
 For more details on the packages, see the
-[Embedded vs. Standalone Guide](./docs/embedded-standalone.md).
+[Embedded vs. Standalone Guide](./docs/embedded_standalone.md).

 ## 🛠️ Self-Hosting

 For operating and deploying Element Call on your own server, refer to the
-[**Self-Hosting Guide**](./docs/self-hosting.md).
+[**Self-Hosting Guide**](./docs/self_hosting.md).

-## 🧭 MatrixRTC Backend Discovery and Selection
+## MatrixRTC Transports

-For proper Element Call operation each site deployment needs a MatrixRTC backend
-setup as outlined in the [Self-Hosting](#self-hosting). A typical federated site
+For proper operation of Element Call, each deployment needs to set up a
+MatrixRTC transport in the form of a LiveKit server as outlined in the
+[Self-Hosting Guide](./docs/self_hosting.md). A typical federated site
 deployment for three different sites A, B and C is depicted below.

 <p align="center">
  <img src="./docs/Federated_Setup.drawio.png" alt="Element Call federated setup">
 </p>

-### Backend Discovery
+### Transport Discovery

-MatrixRTC backend (according to
-[MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)) is
-announced by the Matrix site's `.well-known/matrix/client` file and discovered
-via the `org.matrix.msc4143.rtc_foci` key, e.g.:
+Element Call discovers the available MatrixRTC transports (as defined by
+[MSC4519](https://github.com/matrix-org/matrix-spec-proposals/pull/4519)) by
+hitting the `GET /_matrix/client/unstable/org.matrix.msc4143/rtc/transports`
+endpoint of the Client-Server API. An example response:

 ```json
-"org.matrix.msc4143.rtc_foci": [
+{
+  "rtc_transports": [
    {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
-    },
-]
+      "type": "livekit",
+      "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
+    }
+  ]
+}
 ```

 where the format for MatrixRTC using LiveKit backend is defined in
@@ -148,13 +160,12 @@ via `livekit_service_url`.

 ### Backend Selection

- Each call participant proposes their discovered MatrixRTC backend from
+- Each call participant proposes their discovered MatrixRTC transport from
  `org.matrix.msc4143.rtc_foci` in their `org.matrix.msc3401.call.member` state event.
- For **LiveKit** MatrixRTC backend
+- For the **LiveKit** MatrixRTC backend
  ([MSC4195](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)),
-  the **first participant who joined the call** defines via the `foci_preferred`
-  key in their `org.matrix.msc3401.call.member` which actual MatrixRTC backend
-  will be used for this call.
+  the **first participant who joined the call** defines which backend will be used for this call via
+  the `foci_preferred` key in their `org.matrix.msc3401.call.member` state event.
 - During the actual call join flow, the **[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)**
  provides the client with the **LiveKit SFU WebSocket URL** and an
  **access JWT token** in order to exchange media via WebRTC.
@@ -177,6 +188,13 @@ discuss and coordinate translation efforts.

 ## 🛠️ Development

+### Dependencies
+
+- Node.js (e.g. via [nvm](https://github.com/nvm-sh/nvm))
+- [Corepack](https://github.com/nodejs/corepack) (not bundled with Node.js anymore starting from 25.0.0)
+- Docker client and runtime + Docker Compose (for the backend)
+  - On macOS you can install everything with `brew install colima docker docker-compose`
+
 ### Frontend

 To get started clone and set up this project:
@@ -185,9 +203,22 @@ To get started clone and set up this project:
 git clone https://github.com/element-hq/element-call.git
 cd element-call
 corepack enable
-yarn
+pnpm install
 ```

+`pnpm install` currently needs a GitHub token: the MatrixRTC SDK
+(`@element-hq/matrix-rtc`) is, as a stop-gap until it is published to npmjs.com,
+an npm package on the GitHub Packages registry, which rejects anonymous
+requests even for public packages. Create a classic personal access token with
+the `read:packages` scope and add it to your user-level npm config once:
+
+```sh
+echo "//npm.pkg.github.com/:_authToken=<your token>" >> ~/.npmrc
+```
+
+See [The MatrixRTC SDK package](./docs/matrix_rtc_sdk.md) for the details, CI
+setup and developing against a local crate.
+
 To use it, create a local config by, e.g.,
 `cp ./config/config.devenv.json ./public/config.json` and adapt it if necessary.
 The `config.devenv.json` config should work with the backend development
@@ -196,54 +227,153 @@ environment as outlined in the next section out of box.
 You're now ready to launch the development server:

 ```sh
-yarn dev
+pnpm dev
 ```

 See also:

- [Developing with linked packages](./linking.md)
+- [Developing with linked packages](./docs/linking.md)
+- [The MatrixRTC SDK package](./docs/matrix_rtc_sdk.md)
+
+#### Element Call as a component (experimental)
+
+Element Call can also be embedded directly into another React application
+rather than being loaded in an iframe as a widget. `pnpm build:component`
+builds it as a library into `component/dist` (the bundle, its stylesheet and
+type declarations), and
+
+```sh
+pnpm dev:component
+```
+
+serves a harness on port 3001 that stands in for such an application: it signs
+in twice against the development backend and shows two calls side by side, in
+resizable boxes, with page furniture of its own around them. Use it to see how
+Element Call behaves when it does not own the page — the size it is given,
+whether it stays inside its container, and what it says to its host, which is
+logged along the bottom. The harness is served with the same development
+certificate as the app, so unless the development CA is trusted, the browser
+needs a certificate exception for `https://localhost:3001` as well (see the
+note under [Backend](#backend)). It reads the same `public/config.json` as
+`pnpm dev` if one exists, and runs with Element Call's defaults otherwise.
+
+The call lays itself out for the size of the element it is mounted in, not the
+window: a host that shrinks the container to a corner of its page gets the
+picture-in-picture layout, just as a host that shrank the whole iframe used to.
+The breakpoints in the stylesheets the component uses are
+`@container element-call` queries against its root element for the same reason;
+for the standalone app the root is the page, so they mean what the media queries
+they replaced did. (The standalone-only views, such as the home and login pages,
+still use plain media queries, since the component never shows them.)
+
+The component's stylesheet is confined to the element it is mounted in: the
+build rewrites every selector so that it matches only Element Call's root or
+what is inside it, with `html`, `body` and `:root` standing for that root (see
+`component/build/scopeStylesToRoot.ts`). A host's own page keeps its styles,
+and Element Call brings its own fonts and design tokens along.
+
+The component speaks every language the app does. English is bundled in; the
+other locales are split into chunks the host's bundler loads the first time
+they are needed. It starts in the browser's language, and follows the host's
+own language setting through the `language` prop (`supportedLanguages` lists
+the tags it accepts, and anything else falls back to its base language or to
+English). The `theme` prop works the same way and takes the same values as the
+widget's `theme` URL parameter: `light`, `dark`, `light-high-contrast` or
+`dark-high-contrast`. Both can change while a call is running without
+disturbing it.
+
+A host must call and await `initializeElementCall(config)` once before
+rendering the component: it loads the `Intl` polyfills, applies the
+deployment-wide `config.json`-style configuration and sets up translations.
+The component itself takes the host's `client` and the `roomId` to call in, an
+`intent` saying what the user asked for (which decides whether to show the
+lobby, ring, and so on), an optional `config` overriding what the intent
+implies, and an optional `hostBridge` through which Element Call tells the host
+that the user has joined or hung up, that it wants to stay on screen, and so
+on. The host makes its own requests (`join`, `hangUp`, `setDeviceMute`) through
+the handle exposed on `ref`. The full API is documented in the type declarations
+(`component/index.tsx` and `component/host.ts`).
+
+A few things differ from the widget on purpose: the component draws a solid
+background rather than a gradient unless told otherwise, never offers to edit
+the user's profile (the account is the host's), scopes its keyboard shortcuts to
+its own root element so that several instances can share a page, and only shows
+its own post-call and error screens when the host has not supplied a `close()`
+callback; with one, it asks the host to unmount it instead. The
+[global JS controls](./docs/controls.md) on `window` are unchanged and remain
+page-wide, so with several instances on one page they apply to all of them.
+
+The package is not published yet. A host installs it as a git dependency on the
+`component` directory of this repository,
+
+```json
+"@element-hq/element-call-component": "github:element-hq/element-call#main&path:/component"
+```
+
+whose `prepare` script runs the build on install. That build needs pnpm (via
+Corepack) on the host's machine, runs a full `pnpm install` of this repository
+(so the host needs the GitHub Packages token described in
+[The MatrixRTC SDK package](./docs/matrix_rtc_sdk.md) as well) and is
+memory-hungry, since it inherits the `--max-old-space-size` setting of
+the app build; the host's pnpm also has to allow it to run at all
+(`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
+project of its own for this reason, so pnpm commands run from inside that
+directory target it rather than the repository; run them from the repository
+root. The host imports the component from
+`@element-hq/element-call-component` and the stylesheet from
+`@element-hq/element-call-component/style.css`, and has to provide `react`,
+`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
+them external.

 ### Backend

-A docker compose file `dev-backend-docker-compose.yml` is provided to start the
-whole stack of components which is required for a local development environment:
+A docker compose file `docker-compose-dev.yml` is provided to start the
+whole stack of components which is required for a local development environment
+including federation:

- Minimum Synapse Setup (servername: `synapse.m.localhost`)
- MatrixRTC Authorization Service (Note requires Federation API and hence a TLS reverse proxy)
- Minimum LiveKit SFU Setup using dev defaults for config
- Redis db for completeness
+- Minimum Synapse Setup (servernames: `synapse.m.localhost`, `synapse.othersite.m.localhost`)
+- MatrixRTC Authorization Service (Note: requires Federation API and hence a TLS reverse proxy)
+- Minimum LiveKit SFU setup using dev defaults for config
 - Minimum `localhost` Certificate Authority (CA) for Transport Layer Security (TLS)
-  - Hostnames: `m.localhost`, `*.m.localhost`
-  - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browsers trusted
+  - Hostnames: `m.localhost`, `*.m.localhost`, `*.othersite.m.localhost`
+  - Add [./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt) to your web browser's trusted
    certificates
 - Minimum TLS reverse proxy for
-  - Synapse homeserver: `synapse.m.localhost`
-  - MatrixRTC backend: `matrix-rtc.m.localhost`
-  - Local Element Call development `call.m.localhost` via `yarn dev --host `
-  - Element Web `app.m.localhost`
-  - Note certificates will expire on Thu, 03 May 2035 10:32:02 GMT
+  - Synapse homeserver: `synapse.m.localhost` and `synapse.othersite.m.localhost`
+  - MatrixRTC backend: `matrix-rtc.m.localhost` and `matrix-rtc.othersite.m.localhost`
+  - Local Element Call development `call.m.localhost` via `pnpm dev --host `
+  - Element Web `app.m.localhost` and `app.othersite.m.localhost`
+  - Note certificates will expire on Thr, 20 September 2035 14:27:35 CEST

 These use a test 'secret' published in this repository, so this must be used
 only for local development and **_never be exposed to the public Internet._**

-Run backend components:
+Make sure your Docker runtime is running (e.g. via `colima start`) and then start
+the backend components:

 ```sh
-yarn backend
-# or  for podman-compose
-# podman-compose -f dev-backend-docker-compose.yml up
+pnpm backend
+# or for podman-compose:
+# podman-compose -f docker-compose-dev.yml up
 ```

 > [!NOTE]
 > To ensure your local development frontend functions properly, you’ll need to
-> add certificate exceptions in your browser for `https://localhost:3000`,
-> `https://matrix-rtc.m.localhost/livekit/jwt/healthz` and
-> `https://synapse.m.localhost/.well-known/matrix/client`. This can be either
-> done by adding the minimum localhost CA
+> add certificate exceptions in your browser for `https://localhost:3000` and
+> `https://matrix-rtc.m.localhost/livekit/jwt/healthz`. This can be done either
+> by adding the minimum localhost CA
 > ([./backend/dev_tls_local-ca.crt](./backend/dev_tls_local-ca.crt)) to your web
-> browsers trusted certificates or by simply copying and pasting each URL into
+> browser's trusted certificates or by simply copying and pasting each URL into
 > your browser’s address bar and follow the prompts to add the exception.

+### Updating snapshots
+
+To update snapshots used in tests, use Vitest's `-u` flag, e.g.:
+
+```sh
+pnpm test DeveloperSettingsTab -u
+```
+
 ### Playwright tests

 Our Playwright tests run automatically as part of our CI along with our other
@@ -256,16 +386,19 @@ running Playwright by following

 However the Playwright tests are run, an element-call instance must be running
 on https://localhost:3000 (this is configured in `playwright.config.ts`) - this
-is what will be tested.
+is what will be tested. The tests under `playwright/component` instead drive
+the component harness (`pnpm dev:component`) on https://localhost:3001, which
+Playwright starts as a second web server; it is always a Vite dev server, even
+when the app itself is served from Docker with `USE_DOCKER`.

 The local backend environment should be running for the test to work:
-`yarn backend`
+`pnpm backend`

 There are a few different ways to run the tests yourself. The simplest is to
 run:

 ```shell
-yarn run test:playwright
+pnpm run test:playwright
 ```

 This will run the Playwright tests once, non-interactively.
@@ -273,7 +406,7 @@ This will run the Playwright tests once, non-interactively.
 There is a more user-friendly way to run the tests in interactive mode:

 ```shell
-yarn run test:playwright:open
+pnpm run test:playwright:open
 ```

 The easiest way to develop new test is to use the codegen feature of Playwright:
@@ -315,7 +448,7 @@ To add a new translation key you can do these steps:

 1. Add the new key entry to the code where the new key is used:
   `t("some_new_key")`
-1. Run `yarn i18n` to extract the new key and update the translation files. This
+1. Run `pnpm i18n` to extract the new key and update the translation files. This
   will add a skeleton entry to the `locales/en/app.json` file:

   ```jsonc
@@ -343,9 +476,19 @@ Usage and other technical details about the project can be found here:

 [**Docs**](./docs/README.md)

+## GitHub Labels
+
+GitHub labels in this repository are maintained in the [`labels.yml`](.github/labels.yml) file and
+automatically synced to GitHub using the [`sync-labels` workflow](.github/workflows/sync-labels.yml).
+We do this so that we can reuse the labels between repositories.
+
+> [!WARNING]
+> Do not manually edit labels in the GitHub UI. Any manual changes will be overridden by the
+> workflow on its next invocation.
+
 ## 📝 Copyright & License

-Copyright 2021-2025 New Vector Ltd
+Copyright 2021-2026 New Vector Ltd

 This software is dual-licensed by New Vector Ltd (Element). It can be used
 either:
@@ -1,6 +1,6 @@
 # Testing Element-Call in widget mode

-When running `yarn backend` the latest element-web develop will be deployed and served on `http://localhost:8081`.
+When running `pnpm backend` the latest element-web develop will be deployed and served on `http://localhost:8081`.
 In a development environment, you might prefer to just use the `element-web` repo directly, but this setup is useful for CI/CD testing.

 ## Setup
@@ -18,7 +18,7 @@ that uses
 It is part of the existing backend setup. To start the backend, run:

 ```sh
-yarn backend
+pnpm backend
 ```

 Then open `http://localhost:8081` in your browser.
@@ -1,20 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          node: "current",
-        },
-      },
-    ],
-    [
-      "@babel/preset-react",
-      {
-        runtime: "automatic",
-      },
-    ],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["babel-plugin-transform-vite-meta-env"],
-};
@@ -0,0 +1,17 @@
+id: "lk-jwt-service-othersite"
+as_token: "ec_dev_as_token_othersite_0123456789ab"
+hs_token: "ec_dev_hs_token_othersite_0123456789ab"
+sender_localpart: "_lk_jwt_service"
+namespaces:
+  users:
+    - exclusive: false
+      regex: "@.*:homeserver-1" # Cover all local users
+# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
+url: "http://auth-server-1:16080"
+# Enable membership look-ups via /is_joined.
+io.element.msc4502.scopes:
+  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
+# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
+# service.
+io.element.msc4512.proxy_prefix: "rtc/livekit"
+io.element.msc4512.proxy_url: "http://auth-server-1:16080"
@@ -0,0 +1,17 @@
+id: "lk-jwt-service"
+as_token: "ec_dev_as_token_main_0123456789ab"
+hs_token: "ec_dev_hs_token_main_0123456789ab"
+sender_localpart: "_lk_jwt_service"
+namespaces:
+  users:
+    - exclusive: false
+      regex: "@.*:homeserver" # Cover all local users
+# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
+url: "http://auth-server:6080"
+# Enable membership look-ups via /is_joined.
+io.element.msc4502.scopes:
+  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
+# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
+# service.
+io.element.msc4512.proxy_prefix: "rtc/livekit"
+io.element.msc4512.proxy_url: "http://auth-server:6080"
@@ -0,0 +1,82 @@
+server_name: "synapse.othersite.m.localhost"
+public_baseurl: https://synapse.othersite.m.localhost/
+
+pid_file: /data/homeserver.pid
+
+listeners:
+  - port: 18008
+    tls: false
+    type: http
+    x_forwarded: true
+    resources:
+      - names: [client, federation, openid]
+        compress: false
+
+database:
+  name: sqlite3
+  args:
+    database: /data/homeserver.db
+
+media_store_path: /data/media_store
+signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
+trusted_key_servers:
+  - server_name: "synapse.m.localhost"
+    accept_keys_insecurely: true
+
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+  # MSC4222 needed for syncv2 state_after. This allow clients to
+  # correctly track the state of the room.
+  msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140. Must be a positive value if set.  Defaults to no
+# duration (null), which disallows sending delayed events.
+max_event_delay_duration: 24h
+
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
+report_stats: false
+
+# Ratelimiting settings for client actions (registration, login, messaging).
+#
+# Each ratelimiting configuration is made of two parameters:
+#   - per_second: number of requests a client can send per second.
+#   - burst_count: number of requests a client can send before being throttled.
+
+rc_message:
+  # This needs to match at least the heart-beat frequency plus a bit of headroom
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  per_second: 0.5
+  burst_count: 30
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.othersite.m.localhost/livekit/jwt
@@ -19,8 +19,18 @@ database:

 media_store_path: /data/media_store
 signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
 trusted_key_servers:
-  - server_name: "matrix.org"
+  - server_name: "synapse.othersite.m.localhost"
+    accept_keys_insecurely: true

 experimental_features:
  # MSC3266: Room summary API. Used for knocking over federation
@@ -28,12 +38,32 @@ experimental_features:
  # MSC4222 needed for syncv2 state_after. This allow clients to
  # correctly track the state of the room.
  msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml

 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
 # duration (null), which disallows sending delayed events.
 max_event_delay_duration: 24h

+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
+report_stats: false
+
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
 # Each ratelimiting configuration is made of two parameters:
@@ -46,9 +76,7 @@ rc_message:
  per_second: 0.5
  burst_count: 30

-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
-report_stats: false
-serve_server_wellknown: true
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.m.localhost/livekit/jwt
@@ -0,0 +1,24 @@
+port: 17880
+bind_addresses:
+  - "0.0.0.0"
+rtc:
+  tcp_port: 17881
+  port_range_start: 50300
+  port_range_end: 50400
+  use_external_ip: false
+turn:
+  enabled: false
+  domain: localhost
+  cert_file: ""
+  key_file: ""
+  tls_port: 5349
+  udp_port: 443
+  external_tls: true
+keys:
+  devkey: secret
+room:
+  auto_create: false
+webhook:
+  api_key: devkey
+  urls:
+    - https://matrix-rtc.othersite.m.localhost/livekit/jwt/sfu_webhook
@@ -6,11 +6,6 @@ rtc:
  port_range_start: 50100
  port_range_end: 50200
  use_external_ip: false
-#redis:
-#    address: redis:6379
-#    username: ""
-#    password: ""
-#    db: 0
 turn:
  enabled: false
  domain: localhost
@@ -23,3 +18,7 @@ keys:
  devkey: secret
 room:
  auto_create: false
+webhook:
+  api_key: devkey
+  urls:
+    - https://matrix-rtc.m.localhost/livekit/jwt/sfu_webhook
@@ -1,4 +1,5 @@
-# Synapse reverse proxy including .well-known/matrix/client
+# Synapse reverse proxy
+# domain synapse.m.localhost
 server {
    listen                  80;
    listen                  [::]:80;
@@ -10,37 +11,64 @@ server {
    ssl_certificate         /root/ssl/cert.pem;
    ssl_certificate_key     /root/ssl/key.pem;

-    # well-known config adding rtc_foci backend
-    # Note well-known is currently not effective due to:
-    # https://spec.matrix.org/v1.12/client-server-api/#well-known-uri the spec
-    # says it must be at https://$server_name/... (implied port 443) Hence, we
-    # currently rely for local development environment on deprecated config.json
-    # setting for livekit_service_url
-    location /.well-known/matrix/client {
-        add_header Access-Control-Allow-Origin *;
-        return 200 '{"m.homeserver": {"base_url": "https://synapse.m.localhost"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "https://matrix-rtc.m.localhost/livekit/jwt"}]}';
-        default_type application/json;
+    # Reverse proxy for Matrix Synapse Homeserver
+    # This is also required for development environment.
+    # Reason: the lk-jwt-service uses the federation API for the openid token
+    #         verification, which requires TLS
+    location ~ ^(/_matrix|/_synapse/client)  {
+        proxy_pass "http://homeserver:8008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
    }
+    location ~ ^(/_matrix|/_synapse/admin)  {
+        proxy_pass "http://homeserver:8008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
+    }
+
+}
+
+# Synapse reverse proxy
+# domain synapse.othersite.m.localhost
+server {
+    listen                  80;
+    listen                  [::]:80;
+    listen                  443 ssl;
+    listen                  8448 ssl;
+    listen                  [::]:443 ssl;
+    listen                  [::]:8448 ssl;
+    server_name             synapse.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;

    # Reverse proxy for Matrix Synapse Homeserver
    # This is also required for development environment.
    # Reason: the lk-jwt-service uses the federation API for the openid token
    #         verification, which requires TLS
-    location / {
-        proxy_pass "http://homeserver:8008";
+    location ~ ^(/_matrix|/_synapse/client)  {
+        proxy_pass "http://homeserver-1:18008";
        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
    }

-    error_page   500 502 503 504  /50x.html;
+    location ~ ^(/_matrix|/_synapse/admin)  {
+        proxy_pass "http://homeserver-1:18008";
+        proxy_http_version 1.1;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Host $host;
+    }

 }

 # MatrixRTC reverse proxy
+# domain matrix-rtc.m.localhost
 # - MatrixRTC Authorization Service
 # - LiveKit SFU websocket signaling connection
 upstream jwt-auth-services {
@@ -49,16 +77,14 @@ upstream jwt-auth-services {
 }

 server {
-    listen                  80;
-    listen                  [::]:80;
    listen                  443 ssl;
    listen                  [::]:443 ssl;
-    listen                  8448 ssl;
-    listen                  [::]:8448 ssl;
    server_name             matrix-rtc.m.localhost;
    ssl_certificate         /root/ssl/cert.pem;
    ssl_certificate_key     /root/ssl/key.pem;

+    http2 on;
+

    location ^~ /livekit/jwt/ {

@@ -69,7 +95,7 @@ server {

      # JWT Service running at port 6080
      proxy_pass http://jwt-auth-services/;
-    
+
    }

    location ^~ /livekit/sfu/ {
@@ -89,12 +115,59 @@ server {
      # LiveKit SFU websocket connection running at port 7880
      proxy_pass http://livekit-sfu:7880/;
    }
-    
-    error_page   500 502 503 504  /50x.html;

 }

-# Convenience reverse proxy for the call.m.localhost domain to yarn dev --host
+# MatrixRTC reverse proxy
+# domain matrix-rtc.othersite.m.localhost
+# - MatrixRTC Authorization Service
+# - LiveKit SFU websocket signaling connection
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             matrix-rtc.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+    http2 on;
+
+
+    location ^~ /livekit/jwt/ {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      # JWT Service running at port 16080
+      proxy_pass http://auth-service-1:16080/;
+
+    }
+
+    location ^~ /livekit/sfu/ {
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_send_timeout 120;
+      proxy_read_timeout 120;
+      proxy_buffering off;
+
+      proxy_set_header Accept-Encoding gzip;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+
+      # LiveKit SFU websocket connection running at port 17880
+      proxy_pass http://livekit-sfu-1:17880/;
+    }
+
+}
+
+# Convenience reverse proxy for the call.m.localhost domain to element call
+# running on the host either via
+# - pnpm dev --host or
+# - falling back to http (the element call docker container)
 server {
    listen                  80;
    listen                  [::]:80;
@@ -110,7 +183,7 @@ server {
    ssl_certificate         /root/ssl/cert.pem;
    ssl_certificate_key     /root/ssl/key.pem;

-
+    # 1. Attempt HTTPS first
    location ^~ / {

      proxy_set_header Host $host;
@@ -121,9 +194,23 @@ server {
      proxy_pass https://host.docker.internal:3000;
      proxy_ssl_verify              off;

+      # 2. Redirect specific errors (e.g., 502 Bad Gateway  or 504 Timeout)
+      # to the named fallback location
+      error_page 502 503 504 = @http_fallback;
+
+    }
+
+    # 3. Fallback location using HTTP
+    location @http_fallback {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_pass http://host.docker.internal:8080;
+
    }
-    
-    error_page   500 502 503 504  /50x.html;

 }

@@ -155,7 +242,36 @@ server {
      proxy_ssl_verify              off;

    }
-    
-    error_page   500 502 503 504  /50x.html;
+
+}
+
+# Convenience reverse proxy app.othersite.m.localhost for element web
+server {
+    listen                  80;
+    listen                  [::]:80;
+    server_name             app.othersite.m.localhost;
+
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen                  443 ssl;
+    listen                  [::]:443 ssl;
+    server_name             app.othersite.m.localhost;
+    ssl_certificate         /root/ssl/cert.pem;
+    ssl_certificate_key     /root/ssl/key.pem;
+
+
+    location ^~ / {
+
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_pass http://element-web-1:18081;
+      proxy_ssl_verify              off;
+
+    }

 }
@@ -1,19 +1,19 @@
 -----BEGIN CERTIFICATE-----
-MIIDGjCCAgKgAwIBAgIUGdiFHhH4KL2pqBjMQHQ+PVIkSV8wDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMDMy
-MDJaFw0zNTA1MDMxMDMyMDJaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
-Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDA2y0hjmNn1vRsVSdy
-8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH9jdT
-tG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeFw9fw
-eRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZNWnie
-Ui7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAveL9K
-FGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BLPiQU
-KGKrAgMBAAGjUDBOMB0GA1UdDgQWBBQJqBjMu61c1p24txw/y+kv3D+V6DAfBgNV
-HSMEGDAWgBQJqBjMu61c1p24txw/y+kv3D+V6DAMBgNVHRMEBTADAQH/MA0GCSqG
-SIb3DQEBCwUAA4IBAQB8m2YfFGLugNt5vAAOvNxVqDA8c72yCVYr3CBCpmTIEY5Z
-d3qVGhG9//ux6+J8ntkSwd9nV5GJyYXHukCG1VavnAWolWdNF/WAllf0jhLuz7kD
-/cJnuI1By4tBsBmSz851i6HJ4t5k99Be+6GQVzi0e7zzfxTHZE4xP2J6Ox8QbPsP
-n0m76nIp/WbWaJqzvIIjJhmUUPPv+4wN+eOArgjiGLzptM2qTtGZtd0c9nS5gvep
-+mEbSUN9zkhAroZf80wf+hEvy+fJ94VbZ9QjTzTg7odZLrsXGIe8DaG63EYRQ25b
-W5iYBAreln5fGSt7qHsGfqwZibTEk/Lx3dydO1Kg
+MIIDGjCCAgKgAwIBAgIUOlA2wgQUGZkKqNDvvifFWEsJfvYwDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNjA1MTgwOTM0
+MzFaFw0yODA3MjYwOTM0MzFaMB4xHDAaBgNVBAMME0VsZW1lbnQgQ2FsbCBEZXYg
+Q0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCcImv3pStfIUo7PbOO
+XRVUXuDlApBOrg2dCnvZQ1Jfaf4MftGHj/pURkF4eoBuyH4k4+NLzWD0VcU1cM74
+RnxowJt4AceCGe5RK/rqal5fapXc2vYMM8P6xaQR86gkxohpufsLgTnSweh74yqN
+B5WHUnCX00/X0bh1ho2BMUvGM9+dI4MdgKdaQDgWK4zg9hwp2Z6Yq7SkJ/D8+sGW
+WGpn3osDakL8HTBqop+YVJgF40db50yFurfcfQ0gjVtT4JW8ejO9j8PS/S2oQ/s5
+mA1B470XhLtT5qTjGm2bp3WpYkTi5widps8PDzBp5eNr0HrvJqcw7BGpbvBlLa+3
+7dhLAgMBAAGjUDBOMB0GA1UdDgQWBBRDfyRM4yKUqW6vu/2KUSXGb8vswDAfBgNV
+HSMEGDAWgBRDfyRM4yKUqW6vu/2KUSXGb8vswDAMBgNVHRMEBTADAQH/MA0GCSqG
+SIb3DQEBCwUAA4IBAQBoAhD4W4Yi/VJ2pTKrzhstn1UF1rgQnRddnn97v5BaEV/X
+uuBXbSO+/ewjQUupRjePZFp9FFe9co1OiduKcDExlvPU1eIqkWAwDWjMDpI+Lw5q
+KI5yHzplmMrT/7jn9Tepl9atrIcfDeFkP1dGtdRPyU6ARJEEWJSKeH9ftmImAsbM
+ykXAqSyRl8+bPx1ISG4cNihOxFd38VPDHIW53umaRBgRcN4GcvloKBGrVtRFNM//
+H+md8HmNQMP+e7FamETxs28DxjsdpygxjiFNY/T2eD67dH50ZxC3qCxEG6TJsoAg
+TYJafnqEcGDfiWQyNZRBypuaRsRmmTR27hCPVgi8
 -----END CERTIFICATE-----
@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDA2y0hjmNn1vRs
-VSdy8IOfo8N1q9UgkhQWpGKXzPh+D5d1fnuJEmHIVwtDEtS/PwQ43LTmegChPtKH
-9jdTtG0IihW9Ja5YNG+9xAwaoA/sB3CGCBYsz+2/XjVUpXoBJXIPoFBWsn+K0oeF
-w9fweRO1z9abM4cl+LjKzMNM8CCyu9uI1MaGjYez2YIWvG854VucLxX7HSlMJxZN
-WnieUi7fMakuJhB2+aiIQjdKxy4E5RHNhzYG/LXhvP+wBYBDPNRsP3rtzEaE9HAv
-eL9KFGqd3R4cBia6r1WIXmpAzyu5RGP5Eou0TZlGkal96/bF0I7q/pKlL23Jt1BL
-PiQUKGKrAgMBAAECggEAAPX2kxi5AQ7ul82SzT1KgpSXyDHLdYaUyAoYnaX9RO+B
-8ylmpyeqygs4+KQS4EMJm9jpo85Oy37bIKdG3kljU6wQcKlL5Y+ZUOo1nzpV6fid
-hGVs6ts8VXw8KshKQ9AyccZ8L/pirUfgOffgTwfjY7/90zceAL/s98GuZWc62nkX
-55joQv/OikqYfAGP/U6Bp2Zyf23DwJB09Z3B6NnZj/ZyAbDrDEHuA15LhCOcCczp
-IU/mFEywBPHT9Tg4w4Beq78PeAETvku2UalYRLhP3RLlXr2oEbwUtINRVt2QjZ85
-Esps4uCqL/mgQluIebtudD9HL/YMlNPXue1mDXFxJQKBgQDgZZY4yJBcf488T1V6
-HNm06b/LvVGj253pKgw14hpY1xQu3Ymgzv1GEqzhSYdzxhpmj0tMUNHxAp+YdGQu
-SZ0wcPKhw0aYVkIjDRYDC3Wn5GJhyIEYHGYMo/n4l49UzHRBPOTDzp49DkHTKBgh
-XgIIazYT3CkjTIMRrkUv+qfIPQKBgQDcBGu/mqbjxs4sN3zqPS4aB21o6t6W0sXs
-ZP9w6RlTPQi5U2oRbftjZtYc0bbEgkMUImB1HwYPQT5pJ+MyC414xDvSc2exBr5d
-To6yyPIy78Tf5PHM12fpKV92nSvoz/pSjYcGxxDtKfPqu+t8mOJfjCV1lLLA+xuB
-DDaE4p8dBwKBgQCdAne6A5v/HMH8UQZeCxHJpESvKiiVnnU/UEx651nID7XvlNNX
-0X0mKqsMd4ZvW43ddSYan/JF0LAa3FW8jYWO/3jF9vzOWoysOdvNBZetgf/Uq5ao
-aDZ/YbzmVCXWD7jIbPMkjs3pqrAkL0mzDzQc7+dGviWKrV6IYIfIqnn7gQKBgDCz
-vdIk/qpO+JZrFfiX4Fucp0hhLTJ/p5ZDaRPqVVPKn+K+Jy2ChfIj8mNgvK9VEloj
-nexvGJ1J2PHYBX+vdPp1nbRhHWPfVUY8PHQw7QP/dToGaMvqJrNDGEGeWvjnCMc7
-UtdaO1H0Rm0AegkTopB56lTTvJnhO95eALd7nrMDAoGAEPdzJtWoKafp49svhSj0
-hiXQv2SPBwVUN4LZ4SOWiXUcmYYm80aNpYKLkBxYjrfqFWhE7NUHLGp8YorQWKY2
-acD9AReHk/xku0ABy6jeYmSCmCxASxst5liKD+l12sk0gB0rk5MBxB4Uu1MIbQZ2
-aCASX3AVD2/XyC2MKkzc8Eg=
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCcImv3pStfIUo7
+PbOOXRVUXuDlApBOrg2dCnvZQ1Jfaf4MftGHj/pURkF4eoBuyH4k4+NLzWD0VcU1
+cM74RnxowJt4AceCGe5RK/rqal5fapXc2vYMM8P6xaQR86gkxohpufsLgTnSweh7
+4yqNB5WHUnCX00/X0bh1ho2BMUvGM9+dI4MdgKdaQDgWK4zg9hwp2Z6Yq7SkJ/D8
+sGWWGpn3osDakL8HTBqop+YVJgF40db50yFurfcfQ0gjVtT4JW8ejO9j8PS/S2o
+Q/s5mA1B470XhLtT5qTjGm2bp3WpYkTi5widps8PDzBp5eNr0HrvJqcw7BGpbvBl
+La+37dhLAgMBAAECggEAEsS4gc5jBk50I+bo3KYn2DqHgj/qpOqbTFNkS9uh3UJa
+fZoJCeiuyM6hNCBVq/uB3mFeg1Au5XAiAqiK2KFwdw8gIS7lkqgXU76brO4YZhPj
+6+aOSS03079KV7YYckNDRqJKoTlpgAI7Nhk6ljVhLiEk07tdD65wJACGpg8M8sg9
+dyAz+ANs9gs65iF5LYjH61O/AFlLqCRQh5/z0mjGX6G9uN27nxeUY4+n4QMAcd9D
+Gcygxjt+4nlQayNAlKMwVfps9bWNtI3Ye9knY4WGkrv5cJbW3bgjV6qrvQsbukbq
+xEYzcIlUiWGO9Tv7MN6rk5uQOyoKT/KUnfRmdVd3YQKBgQDMhWm6Q+WuI7Pyn57R
+tmY4rs+fSqTmv6xAOcozKJxffGaEwSUuNA15NvR/7iedcNqmH3XT9j90ZNVHe090
+ocm1HDUvzC9G5GRrdO6JTTksRaIMZEhosWxqH3DIuBJPLGbF/4obGE7//PJtmDEp
+QVL9Aa0WrcwAWhRzUdvCE+taMwKBgQDDbyZIvtlEr1w2V0bjXO536rRksBapc2ZJ
+XRKtrXivuVtiZYNDB0I7CCJ52cka61n3kyZz2mhQmLq4cAZXyKYWE2i643O+kc3S
+lpZEFSfDZ+3YlhxMxG9oEcgUSwVdbPlAhd/UR8V6n8o2Fm+gug9h6E2zY4fgHLJF
+8hOWoD4hiQKBgA7YXD1F8mT6eHRS+78zIyZYIf/o9iE9pm4fA7tE5lzT9ckLD/zT
+kGrM/2BN1BhMecJ3JCFXjXGQZB7FJ5ZKrA52VrH6ezAFIfjeyvWyYkUBZOrLWKoo
+vrrRP2mCWuneSjNzAf5HfGx+WsZztpXNBQ4SUhMEWHtqDnP0bCQhOAMbAoGAPfLv
+qcOFT3ZevoLv34ZHuQ9W20vOAyynUb4E+7SvOtSAmTIgZ5DXd6recs2MJ9JOlGG6
+oKKsyk9/cJNiD1V1AC5q1kLfH5tMKOK/AxnJnvFEvZDnq5Xg0pZAW95j9vdiEwfc
+qYeOm44nJPn7rHEOCzT93E1CdtHh2LYha2+kAjECgYEAh4qODleBi+2fnf2eq494
+/tAot3szu2+gjyCN00vGjtzoAuDKTYgo0cbU1ILk0Pgpp1NcIvdHz/wQnG9RLX7e
+Dfy1Q+UkyBK67SJUPvcYqBEaZ6ddyijJDunqh+U3nIBGP+IntKIKMIKiLF6wzTKz
+NRpK1HNmllp+O692ZtxoNDU=
 -----END PRIVATE KEY-----
@@ -1,21 +1,21 @@
 -----BEGIN CERTIFICATE-----
-MIIDZzCCAk+gAwIBAgIUXizLjwkdqepX0bh0K3abeJxj68IwDQYJKoZIhvcNAQEL
-BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNTA1MDUxMzU5
-MTFaFw0zNTA1MDMxMzU5MTFaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
-MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCrzGSScSgaQuZdELGFYiLiYRwr
-LKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI39WmH95aX3d+A
-U7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ouuN6AOdzWs8hp
-RYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFft1ZXxIZOCjDs
-rEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71IfieLCEzMTP1VXa
-tP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZrQUGnL2RtAgMB
-AAGjgaIwgZ8wHwYDVR0jBBgwFoAUCagYzLutXNaduLccP8vpL9w/legwCQYDVR0T
-BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwMAYDVR0RBCkw
-J4IJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdDAdBgNVHQ4E
-FgQUfdh1p52ZgWyZcBgBXGwKi4EnUE0wDQYJKoZIhvcNAQELBQADggEBAKrHEuB6
-33j8+EwSHw3zrvt/DRXK2BDHI1Ir9JcztSunaKAjZXVvf/dvZp0Xs1dEdJIdnv6G
-iZYhBbOqDqpQZbf2h/h0kuu5yZSBUdnQXnYNxlhp2UaC/UEgw5iZT/p1rm7RjVie
-y4Dp2WytV5iZOLmLj6xDvd3DXazgJPWIRX8p8qJZbKTkwCjTr7nDIj8jjG1sVFf7
-1RJBO5/6WSnImrpDmlLUrvjiKvbxcdseDJyBOhTwdRdSk4S2M+s5tR5j2I1gXLOq
-J5ioN76+SCrTY0K0WKRy9oOXWO1/X3+VYcekp+0F3SGkd5w17jylCv1XIGHAdEsQ
-v2z2/aMI/7sAD2Q=
+MIIDijCCAnKgAwIBAgIUWkx2ad/F7QIj1JDaYfbLhiRV+EswDQYJKoZIhvcNAQEL
+BQAwHjEcMBoGA1UEAwwTRWxlbWVudCBDYWxsIERldiBDQTAeFw0yNjA1MTgwOTM0
+MzFaFw0yODA3MjYwOTM0MzFaMBgxFjAUBgNVBAMMDSoubS5sb2NhbGhvc3QwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC0hora/UCYMtrLJc6BOjonPUPi
+bYpbNiZYnvnqI4doKbV0LBT2TfokT7tpgdPCtHKV0RknsVSL8vhlXpkRqIiWPml8
+sZaa0+5NDGCQxexS2WVBlsoNCmAaqi/HNSFop6xaxGpQ3bu0iV3oIkUihveXAl6H
+C0VYyGifQ8D5onzepW2ayhemu47YRNSo8wETY5vIi0i/iajTTaw6JvwS+8Kv5/QV
+5prdvcFlG/oBs12p0+KoRyxskyzcdBdyIarvfY+9nDZwym5GfN32xO/iqtDuDQzw
+Q09h2OsfHJCw70IpHcgXLlEQF2DsFbmbVpWSU6HcMm6B7Yw1YeE64W4PRJp3AgMB
+AAGjgcUwgcIwHwYDVR0jBBgwFoAUQ38kTOMilKlur7v9ilElxm/L7MAwCQYDVR0T
+BAIwADALBgNVHQ8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwUwYDVR0RBEww
+SoIJbG9jYWxob3N0ggttLmxvY2FsaG9zdIINKi5tLmxvY2FsaG9zdIIXKi5vdGhl
+cnNpdGUubS5sb2NhbGhvc3SCCCoubmlwLmlvMB0GA1UdDgQWBBSd0sKIKmZzTnxT
+gNHHjsJNnFcYaTANBgkqhkiG9w0BAQsFAAOCAQEAeffRTrD9o9PVRIoul5r2chwP
+WF7JtvPdC5xWy9rlCfmIKRNzNRnpVw/mDF/jdhlWcENt3psN8Vb1NM3SECKve9KL
+8bDD2rJEoLBHIFQPS+XpEPqVGLHQcfBtGgs2XdILKvgXJyBHY/pgNZkQmXxYDVoc
+bH9PjJJ4V3t6+tiVWZ792739EU/pHaSz7tab+ycTiggs7mo18E5jpYILhWsDqIVs
+Kz3uczK2OR8537Ix64Z9kmKiklVAqE53odV7Qx2B+7DoOD/7KBN7SMy1KvR1ae6I
+p1ivtDKpBZWbb1ccFxp2cQ30qRHLJrt2YRwz268gx/A6rGXuW6UQPYf4ISNR4Q==
 -----END CERTIFICATE-----
@@ -1,28 +1,28 @@
 -----BEGIN PRIVATE KEY-----
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCrzGSScSgaQuZd
-ELGFYiLiYRwrLKyUdNr0rsPcOo0bvbeZ3zQMeUMRNlA69zGFdarumiDRXUoAmZI3
-9WmH95aX3d+AU7EFnWev7xpWSVhSYj8T0d4rke8HjGk3LpaffJ93tbJuagBIH1ou
-uN6AOdzWs8hpRYIomWleEeeuVnnfaMwaXOdc+ihJJ6wzm2hwQSfdpjZPWBDd/DFf
-t1ZXxIZOCjDsrEIiI7uU8iZPLB3QEM/tgxSSAOxrcKvQvxZokk+FD7aMJFP71Ifi
-eLCEzMTP1VXatP7UTAKAqB2NyDJ8m3IHbOINiqcdFvFR3R1D9bXOYE4oRynNvYZr
-QUGnL2RtAgMBAAECggEAJaFQii8U/KOYt9vXNoMnZvSkaeSQLLhn2V6Kciu1CtWE
-aMTWLsFE6nk+G5xXkYcTmM3T0GghtH3u5CjyI6EcsEkeEorCZJt0wbmayDmqiekR
-LfMzOdHuTHX5+edPgMGYYG1BFyRKyYFsjH1b5zRFZhXdGQnrl5760GsVlz9D1KZQ
-iHcT+q1S2tmZeoUukQnADENKXUMCyTGM5FCddgNtsWnGDsTDayh7hUdvDkB+mW4G
-lSp+BZuc3PCwpbD6qkXvfugWs6CUAAtXoV3ceWgxQ+TEnNlwxaG1AyugfgNUBolk
-8xgeZt4r5QId03jsHDf7hpBAofcaCd5EMIIQYFvWoQKBgQDlbAvAzEFPTZZn2nRV
-Xagw4xjqVc1LLEKLCWq0N5rEkwn0h90Dz5N7/3NuonP/sIDsDHCbyiOYBI1Ck6Xi
-0WuB+OyKDh+xeF2mekN9G9ywPahdK5lT/TVsxXFyZlwtVv1x/6KBO4yv5URizxqU
-gyAPDDxfD/KcNjkOBaodWEwQGQKBgQC/s2gPDBtQkjLwkHXchBomLww5eLlVrac1
-WK4UX6uSdOgrjJ375OOgMTxe8NVZdOuAKytGXRWDwgH3nVWvuZhe7dGlX3JMuSer
-e9VwDpBESrvqcR4ruL6wm8wej6BXyjH0wD3FHb0S5HfuBDxTn+4bDwrbRzOUMNgy
-lSppuflxdQKBgQDiZcIfazFT8evn5nMAvuC4BZNTxIJHmZC9JfjPiUPIkpWzYtOe
-7BvNtKOT3Op9uw8uYYRKqKqBXJSNy6ha8XCXHS9HeXKbLn20SFkLQBCDNwVLlDfF
-40zyXtF6JDr4XyzSb4NM5pgKCER5AYloXxGm59s3sEQpFXUuOjbKqJS/GQKBgAoI
-c7vF4HAZFr1sch62cz/oWnVvkhOf4Q5zs7ixQSOLJtOQqnwSgK9TpFs7s47ZBbJR
-kBRAru2Ua9Hv1Bo8VnMxczV6h1roneDlvEf/GyHX33nnrbKQGrrXjJlU3wl5NaAf
-p5v3cHvapUQ5yIZ/6lBUOzc6xMJOxCHxmKSr7Rg5AoGAbEE4lt6Xh2dnBPJ81eNI
-IDrw/3ITY53qAY4Bx88CByIFuu8CEUdUZprh98jSl6ic1tMinZfUhRMwABLrUD51
-DGst8iGLPD9u83iMcUHI/L+p7AbxrKLvWXZrF5UZm440c9mSWqfhPaTBosPtNDsG
-LfETwH1flKXMTXd2xA9RTE4=
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC0hora/UCYMtrL
+Jc6BOjonPUPibYpbNiZYnvnqI4doKbV0LBT2TfokT7tpgdPCtHKV0RknsVSL8vhl
+XpkRqIiWPml8sZaa0+5NDGCQxexS2WVBlsoNCmAaqi/HNSFop6xaxGpQ3bu0iV3o
+IkUihveXAl6HC0VYyGifQ8D5onzepW2ayhemu47YRNSo8wETY5vIi0i/iajTTaw6
+JvwS+8Kv5/QV5prdvcFlG/oBs12p0+KoRyxskyzcdBdyIarvfY+9nDZwym5GfN32
+xO/iqtDuDQzwQ09h2OsfHJCw70IpHcgXLlEQF2DsFbmbVpWSU6HcMm6B7Yw1YeE6
+4W4PRJp3AgMBAAECggEAIgdIbk4VmnrfjjKCsg5JPvNH9AsE7PuQj9zrq+xljkdq
+aksS6ni5YZXb9F/iDE4aWU4waTB+iODUXLtPrCnyESwTk0sgYe/39/MQ0slUKivL
+b+keDgY6JlyVI/5KXWFZ1kQ27CZXxwiruGGZWZBKZF8wdVE1Ea65Neg+HHA6DHee
+Jck002gtgO/J1MMbB1MzdtGcsejYLrA+mO6YddQhA65xdQMljTEfyUwgTVv0pWde
+biyKegGK77vlsOyoCkMpVYORG5NMV1Kxs+htA79yuIW71tWHqVbcRMyoM+BaHzPh
+7uprs+8vYDFrO39LseczA8gURWwUsCgQ0yQ6Ix5W7QKBgQDnSK4AzjPpDEArdHuV
+VGKyzrfPtzH0VV/yTH9hvByNG6i/x8sE/r2KPi5nRMi4PAjjqmxyO1G5qwDOfzvK
+sBvwFrTRpmbnqGITVKPPivdoI9+RveN+FxhOXVA8NylAOv/dtSoakYwg3e507UsC
+RuFW3Re0Oc+0XFq4C8rQyLkIOwKBgQDH0T9gww+XbwIGCtiNpnEziU9FXBKSVwXf
+dCxYcTLPATq3BqHmP4OUA0v+sa3wPcnBkXF7q6eoB9+S6ZYQA/b2BXGU5/j9xYd4
+29cF4DlPkhTwF9S8b+h1zhlGIn96Lw/vZuj7Bc3wuwxvB17d8dpyo8bZynIe7BvF
+KSPJz+2O9QKBgFFyd8xS0VcFeGeVKpwozmUXhQWCBvZ7RkGGjOk3HHrYvbFjw2vr
+5YWUZjT5tRGkGqFJ98y2dQ5EWRFfHwg+wmfnJyAZUG3OD1OtX86Lqpqi321siHtz
+2JxoIgRCjKVQ4aAK11vp24YLgZjto5eWrG4xh9Jw9WMXjt73UCH8PaTXAoGBAIff
+TY1qlmuO3H1nWqHXkBpPQEwVs7s22ZN817q8HqSMXXSfWe/LOJmpND/YakJ2gX7S
+e6xwqOylje3EUHpLd98LDJUIuFM3wkr4klo4gkANQZeRXONV5WhV4PHD+5MF9XwB
+KmOnKsaLKoVFKckZ8EUMAOePtdI5ExkaRG+yqAMRAoGAJyUFK+V9ST1N/6wYgqor
+vywMSRE2cF2WvVIxdMvWffmpoj40bG6lAlaSWm29E2T8SVvAKsRid0wDgCQ4QTEn
+ft7yUDjqVALCJVCrOFHDY0BPStkm6njMWagr/0lGr9zUWqbBOKJhNfDJlykv8gaF
+8kWTgabrMCKmpTi7fBWbzZA=
 -----END PRIVATE KEY-----
@@ -3,7 +3,7 @@
 # Step 1: Create a Root CA key and cert
 openssl genrsa -out dev_tls_local-ca.key 2048
 openssl req -x509 -new -nodes \
-  -days 3650 \
+  -days 800 \
  -subj "/CN=Element Call Dev CA" \
  -key dev_tls_local-ca.key \
  -out dev_tls_local-ca.crt \
@@ -21,7 +21,7 @@ openssl x509 \
  -CA dev_tls_local-ca.crt -CAkey dev_tls_local-ca.key \
  -CAcreateserial \
  -out dev_tls_m.localhost.crt \
-  -days 3650 \
+  -days 800 \
  -sha256 \
  -extfile <( cat <<EOF
 authorityKeyIdentifier=keyid,issuer
@@ -34,5 +34,7 @@ subjectAltName = @alt_names
 DNS.1 = localhost
 DNS.2 = m.localhost
 DNS.3 = *.m.localhost
+DNS.4 = *.othersite.m.localhost
+DNS.5 = *.nip.io
 EOF
 )
@@ -0,0 +1,53 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://synapse.othersite.m.localhost",
+      "server_name": "synapse.othersite.m.localhost"
+    }
+  },
+  "disable_custom_urls": false,
+  "disable_guests": false,
+  "disable_login_language_selector": false,
+  "disable_3pid_login": false,
+  "force_verification": false,
+  "brand": "Element",
+  "integrations_ui_url": "https://scalar.vector.im/",
+  "integrations_rest_url": "https://scalar.vector.im/api",
+  "integrations_widgets_urls": [
+    "https://scalar.vector.im/_matrix/integrations/v1",
+    "https://scalar.vector.im/api",
+    "https://scalar-staging.vector.im/_matrix/integrations/v1",
+    "https://scalar-staging.vector.im/api",
+    "https://scalar-staging.riot.im/scalar/api"
+  ],
+  "default_widget_container_height": 280,
+  "default_country_code": "GB",
+  "show_labs_settings": false,
+  "features": {
+    "feature_element_call_video_rooms": true,
+    "feature_video_rooms": true,
+    "feature_group_calls": true,
+    "feature_release_announcement": false
+  },
+  "default_federate": true,
+  "default_theme": "light",
+  "room_directory": {
+    "servers": ["matrix.org"]
+  },
+  "enable_presence_by_hs_url": {
+    "https://matrix.org": false,
+    "https://matrix-client.matrix.org": false
+  },
+  "setting_defaults": {
+    "breadcrumbs": true,
+    "feature_group_calls": true
+  },
+  "jitsi": {
+    "preferred_domain": "meet.element.io"
+  },
+  "element_call": {
+    "participant_limit": 8,
+    "brand": "Element Call"
+  },
+  "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
+}
@@ -0,0 +1,99 @@
+server_name: "synapse.othersite.m.localhost"
+public_baseurl: https://synapse.othersite.m.localhost/
+
+pid_file: /data/homeserver.pid
+
+listeners:
+  - port: 18008
+    tls: false
+    type: http
+    x_forwarded: true
+    resources:
+      - names: [client, federation, openid]
+        compress: false
+
+database:
+  name: sqlite3
+  args:
+    database: /data/homeserver.db
+
+media_store_path: /data/media_store
+signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
+trusted_key_servers:
+  - server_name: "synapse.m.localhost"
+    accept_keys_insecurely: true
+
+experimental_features:
+  # MSC3266: Room summary API. Used for knocking over federation
+  msc3266_enabled: true
+  # MSC4222 needed for syncv2 state_after. This allow clients to
+  # correctly track the state of the room.
+  msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
+
+# The maximum allowed duration by which sent events can be delayed, as
+# per MSC4140. Must be a positive value if set.  Defaults to no
+# duration (null), which disallows sending delayed events.
+max_event_delay_duration: 24h
+
+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
+report_stats: false
+
+# Ratelimiting settings for client actions (registration, login, messaging).
+#
+# Each ratelimiting configuration is made of two parameters:
+#   - per_second: number of requests a client can send per second.
+#   - burst_count: number of requests a client can send before being throttled.
+
+rc_message:
+  per_second: 10000
+  burst_count: 10000
+
+rc_delayed_event_mgmt:
+  per_second: 10000
+  burst_count: 10000
+
+rc_login:
+  address:
+    per_second: 10000
+    burst_count: 10000
+  account:
+    per_second: 10000
+    burst_count: 10000
+  failed_attempts:
+    per_second: 10000
+    burst_count: 10000
+
+rc_registration:
+  per_second: 10000
+  burst_count: 10000
+
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.othersite.m.localhost/livekit/jwt
@@ -19,8 +19,18 @@ database:

 media_store_path: /data/media_store
 signing_key_path: "/data/SERVERNAME.signing.key"
+
+# Due to custom TLS certificate with domains
+# - m.localhost, localhost
+# - *.m.localhost
+# - *.othersite.m.localhost
+# we disable certificate verification to allow for federation.
+# WARNING: DO NOT USE IN PRODUCTION!!!
+federation_verify_certificates: false
+ip_range_blacklist: []
 trusted_key_servers:
-  - server_name: "matrix.org"
+  - server_name: "synapse.othersite.m.localhost"
+    accept_keys_insecurely: true

 experimental_features:
  # MSC3266: Room summary API. Used for knocking over federation
@@ -28,12 +38,32 @@ experimental_features:
  # MSC4222 needed for syncv2 state_after. This allow clients to
  # correctly track the state of the room.
  msc4222_enabled: true
+  # sticky events for MatrixRTC user state
+  msc4354_enabled: true
+  # MatrixRTC
+  msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml

 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
 # duration (null), which disallows sending delayed events.
 max_event_delay_duration: 24h

+# Required for Element Call in Single Page Mode due to on-the-fly user registration
+enable_registration: true
+enable_registration_without_verification: true
+
+# Shared secret for admin user registration via API (for testing only!)
+registration_shared_secret: "test_shared_secret_for_local_dev_only"
+
+report_stats: false
+
 # Ratelimiting settings for client actions (registration, login, messaging).
 #
 # Each ratelimiting configuration is made of two parameters:
@@ -44,6 +74,10 @@ rc_message:
  per_second: 10000
  burst_count: 10000

+rc_delayed_event_mgmt:
+  per_second: 10000
+  burst_count: 10000
+
 rc_login:
  address:
    per_second: 10000
@@ -59,9 +93,7 @@ rc_registration:
  per_second: 10000
  burst_count: 10000

-# Required for Element Call in Single Page Mode due to on-the-fly user registration
-enable_registration: true
-enable_registration_without_verification: true
-
-report_stats: false
-serve_server_wellknown: true
+matrix_rtc:
+  transports:
+    - type: livekit
+      livekit_service_url: https://matrix-rtc.m.localhost/livekit/jwt
@@ -1,5 +0,0 @@
-bind 0.0.0.0
-protected-mode yes
-port 6379
-timeout 0
-tcp-keepalive 300
@@ -13,7 +13,6 @@ coverage:
        informational: true
    patch:
      default:
-        # Encourage (but don't enforce) 80% coverage on all lines that a PR
+        # Enforce 80% coverage on all lines that a PR
        # touches
        target: 80%
-        informational: true
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/* The container a host mounts us into. It fills whatever space the host gives
+it, and nothing we draw may leave it.
+
+That takes two separate things, which are easy to mistake for one. `isolation`
+gives us a stacking context, so nothing inside can be layered above the host's
+own interface. Containment makes us the containing block for `position: fixed`
+descendants, and clips what we paint to our own box: without it, the modal
+scrim and dialog — which are positioned `fixed` and centred, since in the app
+they are meant to cover the page — resolve against the viewport and appear in
+the middle of the host's window rather than in the middle of the call.
+
+The clipping cuts both ways: a menu near the edge of a small container is
+trimmed rather than overflowing into the host. That is the trade being a
+component rather than a page makes. */
+.root {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  isolation: isolate;
+  contain: layout paint;
+  position: relative;
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Compound's overlay container, which holds tooltips and popovers, has to fill
+the container for the elements inside it to be positioned against it. The
+standalone page does the same for the container under `#root`. */
+.root > [data-overlay-container] {
+  position: relative;
+  block-size: 100%;
+}
@@ -0,0 +1,112 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+import postcss from "postcss";
+
+import { ROOT_SELECTOR, scopeStylesToRoot } from "./scopeStylesToRoot";
+
+const inRoot = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`;
+const isRoot = `:where(${ROOT_SELECTOR})`;
+
+async function scope(css: string, file = "base.css"): Promise<string> {
+  const result = await postcss([scopeStylesToRoot()]).process(css, {
+    from: file,
+  });
+  return result.css;
+}
+
+describe("scopeStylesToRoot", () => {
+  it("makes the root stand in for the document", async () => {
+    expect(await scope("html { line-height: 1.15 }")).toBe(
+      `${isRoot} { line-height: 1.15 }`,
+    );
+    expect(await scope("body { margin: 0 }")).toBe(`${isRoot} { margin: 0 }`);
+    expect(await scope(":root { --a: 1 }")).toBe(`${isRoot} { --a: 1 }`);
+    expect(await scope("body.no-scroll-body { position: fixed }")).toBe(
+      `${isRoot}.no-scroll-body { position: fixed }`,
+    );
+    expect(await scope("body .x { color: red }")).toBe(
+      `${isRoot} .x { color: red }`,
+    );
+  });
+
+  it("collapses selectors that all became the root", async () => {
+    expect(await scope("html, body, input { font: inherit }")).toBe(
+      `${isRoot},input${inRoot} { font: inherit }`,
+    );
+  });
+
+  it("confines everything else to the root and what is inside it", async () => {
+    expect(await scope("h1 { margin: 0 }")).toBe(`h1${inRoot} { margin: 0 }`);
+    expect(await scope(".cpd-theme-dark { --a: 1 }")).toBe(
+      `.cpd-theme-dark${inRoot} { --a: 1 }`,
+    );
+    expect(await scope("* { box-sizing: border-box }")).toBe(
+      `*${inRoot} { box-sizing: border-box }`,
+    );
+    expect(await scope(".a > .b + .c { color: red }")).toBe(
+      `.a>.b+.c${inRoot} { color: red }`,
+    );
+  });
+
+  it("keeps pseudo-elements last", async () => {
+    expect(await scope("button::-moz-focus-inner { border: 0 }")).toBe(
+      `button${inRoot}::-moz-focus-inner { border: 0 }`,
+    );
+    expect(await scope(".a .b:hover::after { content: '' }")).toBe(
+      `.a .b:hover${inRoot}::after { content: '' }`,
+    );
+    expect(await scope("p:first-letter { color: red }")).toBe(
+      `p${inRoot}:first-letter { color: red }`,
+    );
+  });
+
+  it("leaves alone what already names the root", async () => {
+    const css = `${ROOT_SELECTOR}[data-platform="ios"] { --a: 1 }`;
+    expect(await scope(css)).toBe(css);
+  });
+
+  it("reaches into layers and media queries", async () => {
+    expect(
+      await scope(
+        "@layer normalize { h1 { margin: 0 } } @media (min-width: 1px) { p { margin: 0 } }",
+      ),
+    ).toBe(
+      `@layer normalize { h1${inRoot} { margin: 0 } } @media (min-width: 1px) { p${inRoot} { margin: 0 } }`,
+    );
+  });
+
+  it("does not touch keyframes or nested rules", async () => {
+    expect(
+      await scope("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }"),
+    ).toBe("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }");
+    expect(
+      await scope(
+        ".a { color: red; &:hover { color: blue } .b { color: green } }",
+      ),
+    ).toBe(
+      `.a${inRoot} { color: red; &:hover { color: blue } .b { color: green } }`,
+    );
+  });
+
+  it("only touches the bare selectors of a CSS module", async () => {
+    const file = "Settings.module.css";
+    expect(await scope("pre { font-size: 1px }", file)).toBe(
+      `pre${inRoot} { font-size: 1px }`,
+    );
+    expect(await scope(".modal pre { font-size: 1px }", file)).toBe(
+      `.modal pre${inRoot} { font-size: 1px }`,
+    );
+    expect(await scope(".box_abc12 { border: 0 }", file)).toBe(
+      ".box_abc12 { border: 0 }",
+    );
+    expect(await scope(".a .b_abc12:hover { border: 0 }", file)).toBe(
+      ".a .b_abc12:hover { border: 0 }",
+    );
+  });
+});
@@ -0,0 +1,161 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type AtRule,
+  type Container,
+  type Document,
+  type Plugin,
+  type Rule,
+} from "postcss";
+import selectorParser, {
+  type Node,
+  type Pseudo,
+  type Selector,
+} from "postcss-selector-parser";
+
+/**
+ * How the stylesheets find Element Call's root element. The attribute is put
+ * there by `useTheme`, on the container the host gives the component.
+ */
+export const ROOT_SELECTOR = "[data-element-call-root]";
+
+// Both are `:where()`, which has no specificity of its own, so the rules keep
+// exactly the weight they had before being scoped and nothing in Element Call's
+// cascade changes — only where it applies.
+//
+// The root, or anything inside it. Appended to the element a rule is about,
+// rather than prepended to the whole selector, so that a rule about the root
+// itself (its theme class, say) still matches.
+const IN_ROOT = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`;
+// The root itself, standing in for the document.
+const IS_ROOT = `:where(${ROOT_SELECTOR})`;
+
+/**
+ * Confines a stylesheet to Element Call's root element, for the build of
+ * Element Call as a component.
+ *
+ * As a page of its own, Element Call can style the document: normalize.css and
+ * Compound speak of `html`, `body` and bare elements, and the design tokens are
+ * declared on `:root`. As a component, all of that would land on the host's
+ * document too. This rewrites every selector so that it matches only the root
+ * or its descendants:
+ *
+ * - `html`, `body` and `:root` become the root element, which is what stands in
+ *   for the document inside a host.
+ * - Everything else keeps its selector and gains `:where([data-element-call-root],
+ *   [data-element-call-root] *)` on the element it styles.
+ * - Selectors that already name the root are left alone, as are keyframe
+ *   selectors and rules nested inside another rule, which are relative to it.
+ *
+ * CSS modules are scoped by their class names already, so only their selectors
+ * that would match by element alone — `pre` rather than `.pre` — are touched.
+ *
+ * The root's fonts and design tokens are still inherited by everything inside
+ * it, the way they were from `body` and `:root`, and `@font-face` declarations
+ * stay global, which they are by nature.
+ */
+export function scopeStylesToRoot(): Plugin {
+  return {
+    postcssPlugin: "element-call-scope-styles-to-root",
+    Once(root) {
+      const isModule =
+        root.source?.input.file?.endsWith(".module.css") ?? false;
+      root.walkRules((rule) => {
+        if (isRelative(rule)) return;
+        rule.selector = (isModule ? scopeBare : scopeAll).processSync(
+          rule.selector,
+          { lossless: false },
+        );
+      });
+    },
+  };
+}
+
+/** Whether a rule's selectors are relative to something other than the document. */
+function isRelative(rule: Rule): boolean {
+  let parent: Container | Document | undefined = rule.parent;
+  while (parent !== undefined) {
+    if (parent.type === "rule") return true;
+    if (parent.type === "atrule") {
+      const { name } = parent as AtRule;
+      if (name.endsWith("keyframes") || name === "page") return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+
+const processor = (isModule: boolean): ReturnType<typeof selectorParser> =>
+  selectorParser((selectors) => {
+    selectors.each((selector) => {
+      scopeSelector(selector, isModule);
+    });
+    // Mapping `html, body` onto the root leaves the same selector twice
+    const seen = new Set<string>();
+    selectors.each((selector) => {
+      const text = String(selector).trim();
+      if (seen.has(text)) selector.remove();
+      else seen.add(text);
+    });
+  });
+
+// Everything, for stylesheets that speak of the document; only what a class
+// does not already confine, for CSS modules
+const scopeAll = processor(false);
+const scopeBare = processor(true);
+
+function scopeSelector(selector: Selector, isModule: boolean): void {
+  if (String(selector).includes(ROOT_SELECTOR)) return;
+
+  const compounds = splitCompounds(selector);
+  if (compounds.length === 0) return;
+
+  // Something said of the document is said of the root instead
+  const document = compounds[0].find(isDocumentSelector);
+  if (document !== undefined) {
+    document.replaceWith(pseudo(IS_ROOT));
+    return;
+  }
+
+  const subject = compounds.at(-1)!;
+  if (isModule && subject.some((node) => node.type === "class")) return;
+
+  // Pseudo-elements have to come last in a compound selector
+  const pseudoElement = subject.find(isPseudoElement);
+  if (pseudoElement === undefined) selector.append(pseudo(IN_ROOT));
+  else selector.insertBefore(pseudoElement, pseudo(IN_ROOT));
+}
+
+/** The compound selectors making up a complex selector, in order. */
+function splitCompounds(selector: Selector): Node[][] {
+  const compounds: Node[][] = [[]];
+  for (const node of selector.nodes) {
+    if (node.type === "combinator") compounds.push([]);
+    else if (node.type !== "comment") compounds.at(-1)!.push(node);
+  }
+  return compounds.filter((compound) => compound.length > 0);
+}
+
+function isDocumentSelector(node: Node): boolean {
+  return (
+    (node.type === "tag" && (node.value === "html" || node.value === "body")) ||
+    (node.type === "pseudo" && node.value === ":root")
+  );
+}
+
+function isPseudoElement(node: Node): node is Pseudo {
+  if (node.type !== "pseudo") return false;
+  return (
+    node.value.startsWith("::") ||
+    [":before", ":after", ":first-line", ":first-letter"].includes(node.value)
+  );
+}
+
+function pseudo(text: string): Pseudo {
+  return selectorParser().astSync(text).nodes[0].nodes[0].clone() as Pseudo;
+}
@@ -0,0 +1,46 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type ElementCallHostBridge } from "../index";
+
+/**
+ * A host bridge that reports everything it is told, so that the harness can
+ * watch what Element Call says to its host. (What the host says to Element
+ * Call goes through the component's handle, and is logged by the pane.)
+ */
+export function createDevHostBridge(
+  log: (message: string) => void,
+  /** What the host does when Element Call asks to be closed. */
+  onClose: () => void,
+): ElementCallHostBridge {
+  /**
+   * Records something Element Call told the host. Nothing is sent anywhere, so
+   * this is only asynchronous because a real host's answer would have to be.
+   */
+  const told = async (message: string): Promise<void> => {
+    log(`→ ${message}`);
+    await Promise.resolve();
+  };
+
+  return {
+    setAlwaysOnScreen: async (alwaysOnScreen): Promise<void> =>
+      await told(`setAlwaysOnScreen(${alwaysOnScreen})`),
+    contentLoaded: async (): Promise<void> => await told("contentLoaded"),
+    notifyJoined: async (): Promise<void> => await told("notifyJoined"),
+    notifyHungUp: async (): Promise<void> => await told("notifyHungUp"),
+    notifyDeviceMute: async (state): Promise<void> =>
+      await told(
+        `notifyDeviceMute(audio: ${state.audio_enabled}, video: ${state.video_enabled})`,
+      ),
+    // Present because this host really can dismiss Element Call, which is what
+    // makes it offer a close affordance at all
+    close: async (): Promise<void> => {
+      await told("close");
+      onClose();
+    },
+  };
+}
@@ -0,0 +1,140 @@
+/*
+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.
+*/
+
+.credentials {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-inline-size: 420px;
+  margin: 48px auto;
+  padding: 24px;
+  background-color: #ffffff;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.harness {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  block-size: 100%;
+}
+
+.header,
+.paneBar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-block-end: 1px solid #d4d4d8;
+  background-color: #ffffff;
+}
+
+.header h1 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.middle {
+  display: flex;
+  min-block-size: 0;
+}
+
+.sidebar {
+  flex: 0 0 220px;
+  padding: 12px;
+  border-inline-end: 1px solid #d4d4d8;
+  background-color: #ffffff;
+  overflow-y: auto;
+}
+
+.panes {
+  display: flex;
+  flex-wrap: wrap;
+  /* So that a pane is the size it was dragged to, rather than being stretched
+  to fill the row */
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 16px;
+  padding: 16px;
+  flex: 1;
+  min-inline-size: 0;
+  overflow: auto;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+.paneBar {
+  flex-wrap: wrap;
+  gap: 6px;
+  border-block-end: none;
+}
+
+/* The space the host gives Element Call. Resizable so that the sizes it has to
+cope with can be found by dragging rather than by rebuilding, and `overflow:
+hidden` both to enable the resize handle and to show up anything inside Element
+Call that does not fit the box it was given. */
+.paneCall {
+  inline-size: 560px;
+  block-size: 420px;
+  min-inline-size: 180px;
+  min-block-size: 180px;
+  resize: both;
+  overflow: hidden;
+}
+
+.log {
+  max-block-size: 180px;
+  overflow-y: auto;
+  padding: 8px 12px;
+  border-block-start: 1px solid #d4d4d8;
+  background-color: #ffffff;
+  font-size: 12px;
+}
+
+.log h2 {
+  font-size: 13px;
+  margin: 0 0 4px;
+}
+
+.log ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A host overlay, which Element Call must not be able to draw over */
+.dialogScrim {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background-color: rgb(0 0 0 / 50%);
+  z-index: 10;
+}
+
+.dialog {
+  padding: 24px;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
@@ -0,0 +1,380 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type FC,
+  type FormEvent,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import {
+  ElementCallClientBased,
+  type ElementCallHandle,
+  supportedLanguages,
+} from "../index";
+import { createDevHostBridge } from "./DevHostBridge";
+import { createSession, joinRoom } from "./session";
+import styles from "./Harness.module.css";
+
+interface Credentials {
+  homeserver: string;
+  username: string;
+  password: string;
+  room: string;
+}
+
+const CREDENTIALS_KEY = "element-call-component-harness";
+
+const DEFAULT_CREDENTIALS: Credentials = {
+  homeserver: "https://synapse.m.localhost",
+  username: "",
+  password: "",
+  room: "",
+};
+
+/**
+ * The credentials to start with: the last ones used, so that a reload does not
+ * mean typing them again, overridden by anything in the query string.
+ *
+ * A host reading its own URL is entirely proper — it was Element Call doing so
+ * that was the mistake. It lets the end-to-end tests, or a shared link, say
+ * which account and room to use.
+ */
+function loadCredentials(): Credentials {
+  let stored: Partial<Credentials> = {};
+  try {
+    const json = localStorage.getItem(CREDENTIALS_KEY);
+    if (json !== null) stored = JSON.parse(json) as Credentials;
+  } catch (e) {
+    logger.warn("Could not read the stored harness credentials", e);
+  }
+
+  const query = new URLSearchParams(location.search);
+  const fromUrl = Object.fromEntries(
+    (["homeserver", "username", "password", "room"] as const)
+      .map((name) => [name, query.get(name)])
+      .filter(([, value]) => value !== null),
+  ) as Partial<Credentials>;
+
+  return { ...DEFAULT_CREDENTIALS, ...stored, ...fromUrl };
+}
+
+interface Session {
+  label: string;
+  client: MatrixClient;
+}
+
+type State =
+  | { phase: "credentials" }
+  | { phase: "starting"; progress: string }
+  | { phase: "started"; roomId: string; sessions: Session[] }
+  | { phase: "failed"; error: string };
+
+interface LogEntry {
+  pane: string;
+  message: string;
+  at: string;
+}
+
+/**
+ * One Element Call component, with the controls a host would have over it: the
+ * requests it can make of Element Call, and the ability to take it off screen
+ * altogether.
+ */
+const Pane: FC<{
+  session: Session;
+  roomId: string;
+  theme: string | undefined;
+  language: string | undefined;
+  log: (pane: string, message: string) => void;
+}> = ({ session, roomId, theme, language, log }): ReactNode => {
+  const [mounted, setMounted] = useState(true);
+
+  const bridge = useMemo(
+    () =>
+      createDevHostBridge(
+        (message) => log(session.label, message),
+        () => setMounted(false),
+      ),
+    [log, session.label],
+  );
+
+  // What the host asks of Element Call goes through the component's handle.
+  // Worth saying out loud when a request is refused — asking to hang up when
+  // there is no call, say — since that is the sort of thing the harness is for.
+  const handle = useRef<ElementCallHandle>(null);
+  const ask = (
+    name: string,
+    make: (handle: ElementCallHandle) => Promise<unknown>,
+  ): void => {
+    if (handle.current === null) {
+      log(session.label, `← ${name}: not mounted`);
+      return;
+    }
+    log(session.label, `← ${name}`);
+    make(handle.current).then(
+      (reply) =>
+        log(
+          session.label,
+          `→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`,
+        ),
+      (e: unknown) => log(session.label, `→ ${name} refused: ${e}`),
+    );
+  };
+
+  return (
+    <section className={styles.pane} data-testid="call-pane">
+      <div className={styles.paneBar}>
+        <strong>{session.label}</strong>
+        <code>{session.client.getDeviceId()}</code>
+        <button onClick={(): void => setMounted((m) => !m)}>
+          {mounted ? "Unmount" : "Mount"}
+        </button>
+        <button
+          onClick={(): void =>
+            ask(
+              "setDeviceMute(audio: false)",
+              async (h) => await h.setDeviceMute({ audio_enabled: false }),
+            )
+          }
+        >
+          Mute
+        </button>
+        <button
+          onClick={(): void => ask("hangUp", async (h) => await h.hangUp())}
+        >
+          Hang up
+        </button>
+      </div>
+      {/* Resizable, because how Element Call copes with the size it is given is
+      one of the things we cannot find out from the standalone app */}
+      <div className={styles.paneCall} data-testid="call-container">
+        {mounted && (
+          <ElementCallClientBased
+            ref={handle}
+            client={session.client}
+            roomId={roomId}
+            hostBridge={bridge}
+            theme={theme}
+            language={language}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+/** Host furniture, to make it visible if Element Call styles anything but itself. */
+const HostChrome: FC = (): ReactNode => (
+  <nav className={styles.sidebar}>
+    <h2>Host chrome</h2>
+    <p>
+      This column belongs to the host. If Element Call&apos;s stylesheet reaches
+      outside its own container, it shows up here.
+    </p>
+    <hr />
+    <ul>
+      <li>Some room</li>
+      <li>Another room</li>
+    </ul>
+    <button>A host button</button>
+  </nav>
+);
+
+/**
+ * A dialog of the host's own, over the top of the calls. Element Call as a
+ * component has to sit underneath this — being unable to is one of the reasons
+ * for a component rather than an iframe.
+ */
+const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
+  <div className={styles.dialogScrim}>
+    <div className={styles.dialog}>
+      <h2>A dialog belonging to the host</h2>
+      <p>This should cover the calls completely.</p>
+      <button onClick={onClose}>Close</button>
+    </div>
+  </div>
+);
+
+/**
+ * Stands in for a host application using the Element Call component: it owns the Matrix
+ * clients, the page and the space each call is given, and reaches Element Call
+ * only through the component's public interface.
+ *
+ * Two calls at once, from two devices of the same account, so that a real call
+ * happens between them and anything Element Call keeps once per process rather
+ * than once per call shows itself.
+ */
+export const Harness: FC = (): ReactNode => {
+  const [credentials, setCredentials] = useState(loadCredentials);
+  const [state, setState] = useState<State>({ phase: "credentials" });
+  const [entries, setEntries] = useState<LogEntry[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  // The host's language setting, which Element Call follows. Undefined means
+  // the host has none and Element Call uses the browser's.
+  const [language, setLanguage] = useState<string | undefined>(undefined);
+  const [theme, setTheme] = useState<string | undefined>(undefined);
+
+  const log = useCallback((pane: string, message: string): void => {
+    setEntries((entries) =>
+      [
+        ...entries,
+        { pane, message, at: new Date().toLocaleTimeString() },
+      ].slice(-100),
+    );
+  }, []);
+
+  const start = useCallback(
+    (event: FormEvent): void => {
+      event.preventDefault();
+      localStorage.setItem(CREDENTIALS_KEY, JSON.stringify(credentials));
+      const { homeserver, username, password, room } = credentials;
+
+      const progress = (message: string): void =>
+        setState({ phase: "starting", progress: message });
+      progress("Starting");
+
+      void (async (): Promise<void> => {
+        try {
+          // One at a time: two logins at once from the same account is the
+          // shape of request homeservers rate limit
+          const sessions: Session[] = [];
+          for (const label of ["Call A", "Call B"])
+            sessions.push({
+              label,
+              client: await createSession(
+                homeserver,
+                username,
+                password,
+                (message) => progress(`${label}: ${message}`),
+              ),
+            });
+
+          progress("Joining the room");
+          let roomId = room;
+          for (const { client } of sessions)
+            roomId = await joinRoom(client, roomId);
+
+          setState({ phase: "started", roomId, sessions });
+        } catch (e) {
+          logger.error("The harness could not start", e);
+          setState({ phase: "failed", error: `${e}` });
+        }
+      })();
+    },
+    [credentials],
+  );
+
+  const field = (
+    name: keyof Credentials,
+    label: string,
+    type = "text",
+  ): ReactNode => (
+    <label className={styles.field}>
+      {label}
+      <input
+        type={type}
+        value={credentials[name]}
+        onChange={(e): void =>
+          setCredentials((c) => ({ ...c, [name]: e.target.value }))
+        }
+      />
+    </label>
+  );
+
+  if (state.phase !== "started")
+    return (
+      <form className={styles.credentials} onSubmit={start}>
+        <h1>Element Call component harness</h1>
+        <p>
+          Signs in twice and shows the Element Call component twice, in a page
+          that is not Element Call&apos;s own.
+        </p>
+        {field("homeserver", "Homeserver")}
+        {field("username", "Username")}
+        {field("password", "Password", "password")}
+        {field("room", "Room ID or alias")}
+        <button type="submit" disabled={state.phase === "starting"}>
+          Start
+        </button>
+        {state.phase === "starting" && <p>{state.progress}</p>}
+        {state.phase === "failed" && (
+          <p className={styles.error}>{state.error}</p>
+        )}
+      </form>
+    );
+
+  return (
+    <div className={styles.harness}>
+      <header className={styles.header}>
+        <h1>Element Call component harness</h1>
+        <code>{state.roomId}</code>
+        <button onClick={(): void => setDialogOpen(true)}>
+          Open a host dialog
+        </button>
+        <label>
+          Theme{" "}
+          <select
+            value={theme ?? ""}
+            onChange={(e): void => setTheme(e.target.value || undefined)}
+          >
+            <option value="">Element Call&apos;s choice</option>
+            <option value="light">light</option>
+            <option value="dark">dark</option>
+          </select>
+        </label>
+        <label>
+          Language{" "}
+          <select
+            value={language ?? ""}
+            onChange={(e): void => setLanguage(e.target.value || undefined)}
+          >
+            <option value="">Browser default</option>
+            {supportedLanguages.map((tag) => (
+              <option key={tag} value={tag}>
+                {tag}
+              </option>
+            ))}
+          </select>
+        </label>
+      </header>
+      <div className={styles.middle}>
+        <HostChrome />
+        <main className={styles.panes}>
+          {state.sessions.map((session) => (
+            <Pane
+              key={session.label}
+              session={session}
+              roomId={state.roomId}
+              theme={theme}
+              language={language}
+              log={log}
+            />
+          ))}
+        </main>
+      </div>
+      <section className={styles.log} data-testid="bridge-log">
+        <h2>Host bridge</h2>
+        <ol>
+          {entries.map((entry, i) => (
+            <li key={i}>
+              <code>{entry.at}</code> <strong>{entry.pane}</strong>{" "}
+              {entry.message}
+            </li>
+          ))}
+        </ol>
+      </section>
+      {dialogOpen && <HostDialog onClose={(): void => setDialogOpen(false)} />}
+    </div>
+  );
+};
@@ -0,0 +1,23 @@
+/*
+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.
+*/
+
+/* The host page's own styles. Deliberately plain, and deliberately not using
+Element Call's design tokens: the harness should look like it does because of
+this file, not because Element Call styled it. */
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background-color: #f4f4f5;
+  color: #18181b;
+}
@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+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.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Element Call component harness</title>
+  </head>
+  <body>
+    <!-- Deliberately plain: this page stands in for a host application, so
+    anything it looks like must have come from the host's own styles or from
+    Element Call reaching outside its container. -->
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { type ConfigOptions, initializeElementCall } from "../index";
+import { Harness } from "./Harness";
+// After Element Call's, so that the host has the last word on its own page
+import "./host.css";
+
+/**
+ * The development app's own `config.json`, so that the harness runs Element
+ * Call the way `pnpm dev` does. It is not in the repository — developers copy
+ * it from `config/config.devenv.json` — so its absence is expected rather than
+ * an error.
+ */
+async function loadConfig(): Promise<ConfigOptions> {
+  try {
+    const response = await fetch("/config.json");
+    if (response.ok) return (await response.json()) as ConfigOptions;
+    logger.warn(
+      `No config.json (${response.status}); running with Element Call's defaults`,
+    );
+  } catch (e) {
+    logger.warn("Could not read config.json", e);
+  }
+  return {};
+}
+
+await initializeElementCall(await loadConfig());
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Harness />
+  </StrictMode>,
+);
@@ -0,0 +1,79 @@
+/*
+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 {
+  ClientEvent,
+  createClient,
+  type MatrixClient,
+  MemoryStore,
+  SyncState,
+} from "matrix-js-sdk";
+
+/**
+ * Logs in and brings up a client the way a host application would, so that the
+ * component is handed a real one rather than something Element Call built for
+ * itself.
+ *
+ * Everything is kept in memory and a fresh login happens on every reload. That
+ * costs a device on the development homeserver each time, which is harmless,
+ * and buys the harness two clients that cannot tread on each other's storage.
+ * Persisting the login to make reloads quicker would mean persisting the
+ * crypto store too: reusing a device ID with a fresh crypto store generates new
+ * device keys, and uploading them conflicts with the ones the server already
+ * holds.
+ */
+export async function createSession(
+  homeserver: string,
+  username: string,
+  password: string,
+  onProgress: (message: string) => void,
+): Promise<MatrixClient> {
+  onProgress("Logging in");
+  const login = await createClient({ baseUrl: homeserver }).login(
+    "m.login.password",
+    { identifier: { type: "m.id.user", user: username }, password },
+  );
+
+  const client = createClient({
+    baseUrl: homeserver,
+    accessToken: login.access_token,
+    userId: login.user_id,
+    deviceId: login.device_id,
+    store: new MemoryStore(),
+    useAuthorizationHeader: true,
+    fallbackICEServerAllowed: true,
+  });
+
+  onProgress(`Setting up crypto for ${login.device_id}`);
+  await client.initRustCrypto({ useIndexedDB: false });
+
+  onProgress(`Syncing ${login.device_id}`);
+  await client.startClient();
+  await new Promise<void>((resolve) => {
+    const onSync = (state: SyncState): void => {
+      if (state !== SyncState.Prepared && state !== SyncState.Syncing) return;
+      client.off(ClientEvent.Sync, onSync);
+      resolve();
+    };
+    client.on(ClientEvent.Sync, onSync);
+  });
+
+  return client;
+}
+
+/**
+ * The room to call in, joining it if this session is not in it yet — a host
+ * hands Element Call a room it already knows about, so the harness has to get
+ * itself into that position first.
+ */
+export async function joinRoom(
+  client: MatrixClient,
+  roomIdOrAlias: string,
+): Promise<string> {
+  const room = await client.joinRoom(roomIdOrAlias);
+  return room.roomId;
+}
@@ -0,0 +1,161 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, test, vi } from "vitest";
+
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
+
+describe("useComponentHostBridge", () => {
+  test("keeps one identity while the host supplies new objects", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    const first = result.current;
+    rerender({ supplied: { notifyJoined: async () => {} } });
+    expect(result.current).toBe(first);
+  });
+
+  test("forwards to whatever the host most recently supplied", async () => {
+    const before = vi.fn().mockResolvedValue(undefined);
+    const after = vi.fn().mockResolvedValue(undefined);
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined, undefined),
+      { initialProps: { supplied: { notifyJoined: before } } },
+    );
+    rerender({ supplied: { notifyJoined: after } });
+
+    await result.current.notifyJoined();
+    expect(before).not.toHaveBeenCalled();
+    expect(after).toHaveBeenCalledOnce();
+  });
+
+  test("is quiet about what the host did not implement", async () => {
+    const { result } = renderHook(() =>
+      useComponentHostBridge(undefined, undefined, undefined),
+    );
+    await expect(result.current.contentLoaded()).resolves.toBeUndefined();
+    await expect(
+      result.current.notifyDeviceMute({
+        audio_enabled: true,
+        video_enabled: false,
+      }),
+    ).resolves.toBeUndefined();
+    expect(result.current.supportsReactions).toBe(true);
+    // Starting the user unmuted unasked is something a host has to opt into
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(false);
+  });
+
+  test("lets the host allow joining unmuted on the intent", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(false);
+
+    // Read through to whatever the host most recently said
+    rerender({ supplied: { allowJoinUnmutedViaIntent: true } });
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(true);
+  });
+
+  test("only has a close when the host has one, since that is a signal", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    expect(result.current.close).toBeUndefined();
+
+    const close = vi.fn().mockResolvedValue(undefined);
+    rerender({ supplied: { close } });
+    expect(result.current.close).toBeDefined();
+  });
+
+  test("never offers profile changes, since the account is the host's", () => {
+    const { result } = renderHook(() =>
+      useComponentHostBridge(undefined, undefined, undefined),
+    );
+    expect(result.current.supportsProfileChanges).toBe(false);
+  });
+
+  describe("the handle", () => {
+    test("delivers a request to what is listening and resolves on its reply", async () => {
+      const ref = createRef<ElementCallHandle>();
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, ref, undefined),
+      );
+
+      const received = vi.fn();
+      result.current.deviceMute$.subscribe(({ data, reply }) => {
+        received(data);
+        reply({ audio_enabled: data.audio_enabled!, video_enabled: true });
+      });
+
+      await expect(
+        ref.current!.setDeviceMute({ audio_enabled: false }),
+      ).resolves.toEqual({ audio_enabled: false, video_enabled: true });
+      expect(received).toHaveBeenCalledWith({ audio_enabled: false });
+    });
+
+    test("refuses a request nothing in Element Call is listening for", async () => {
+      const ref = createRef<ElementCallHandle>();
+      renderHook(() => useComponentHostBridge(undefined, ref, undefined));
+
+      await expect(ref.current!.hangUp()).rejects.toThrow(
+        "Nothing in Element Call can hang up right now",
+      );
+    });
+  });
+
+  describe("the theme", () => {
+    test("reaches a subscriber that arrives after it was set", () => {
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, undefined, "light"),
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
+      expect(names).toEqual(["light"]);
+    });
+
+    test("follows the prop", () => {
+      const { result, rerender } = renderHook(
+        ({ theme }: { theme: string | undefined }) =>
+          useComponentHostBridge(undefined, undefined, theme),
+        { initialProps: { theme: "light" } },
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
+
+      rerender({ theme: "dark" });
+      expect(names).toEqual(["light", "dark"]);
+    });
+
+    test("says nothing when the host leaves the theme to Element Call", () => {
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, undefined, undefined),
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
+      expect(names).toEqual([]);
+    });
+  });
+});
@@ -0,0 +1,201 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * How a host application and the Element Call component talk to each other.
+ *
+ * Inside Element Call the host is a {@link HostBridge}, which carries the
+ * host's requests as rxjs observables because that is what the widget API and
+ * the view models work in. A host should not have to know about rxjs, or agree
+ * with us on a version of it, so a component host sees neither: it implements
+ * plain async callbacks for what Element Call tells it, and makes its own
+ * requests through an imperative handle on the component, the way it would
+ * call `play()` on a video element. This module adapts the one to the other.
+ */
+
+import { type Ref, useEffect, useImperativeHandle } from "react";
+import { ReplaySubject, Subject } from "rxjs";
+
+import {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+  type HostBridge,
+  type HostRequest,
+} from "../src/HostBridge";
+import { type JoinCallData } from "../src/widget";
+import { useInitial } from "../src/useInitial";
+import { useLatest } from "../src/useLatest";
+
+/**
+ * What Element Call tells the application hosting it as a component.
+ * Everything is optional: a host implements what it wants to hear about.
+ *
+ * Compared by nothing — Element Call always calls whichever one it was most
+ * recently given, so this may be written inline.
+ */
+export interface ElementCallHostBridge {
+  /**
+   * Asks the host to keep Element Call on screen (or stop doing so), so that a
+   * call in progress is not torn down when the user navigates elsewhere.
+   */
+  setAlwaysOnScreen?(alwaysOnScreen: boolean): Promise<void>;
+  /** Tells the host that Element Call has finished loading. */
+  contentLoaded?(): Promise<void>;
+  /** Tells the host that the user has joined the call. */
+  notifyJoined?(): Promise<void>;
+  /** Tells the host that the user has hung up. */
+  notifyHungUp?(): Promise<void>;
+  /** Tells the host the user's current audio and video mute state. */
+  notifyDeviceMute?(state: DeviceMuteState): Promise<void>;
+  /**
+   * Asks the host to close Element Call: to unmount the component. Its
+   * presence is what makes Element Call offer a close button on its error
+   * screens, and leave the host to decide what is shown once a call has ended.
+   * Without it, Element Call shows its own post-call screen, if it has one for
+   * the situation, or nothing.
+   */
+  close?(): Promise<void>;
+  /**
+   * Whether Element Call may send and receive reactions in this room.
+   * Defaults to true.
+   */
+  readonly supportsReactions?: boolean;
+  /**
+   * Whether the user may start unmuted when the intent skips the lobby, so
+   * that they never see their devices before joining. Defaults to false: the
+   * user starts muted and unmutes themselves. A host that chose the intent on
+   * the user's behalf, and is sure they expect to be heard and seen at once,
+   * says so here — as a Matrix client hosting Element Call as a widget does.
+   */
+  readonly allowJoinUnmutedViaIntent?: boolean;
+}
+
+/**
+ * What a host can ask of a mounted Element Call, reached through the
+ * component's `ref`. Each request resolves once Element Call has acted on it,
+ * and rejects if nothing in Element Call is in a position to act: hanging up
+ * when there is no call, say.
+ */
+export interface ElementCallHandle {
+  /**
+   * Joins the call, when Element Call was configured to `preload` and is
+   * waiting to be told to. Says which devices to join with.
+   */
+  join(devices: JoinCallData): Promise<void>;
+  /** Leaves the call. */
+  hangUp(): Promise<void>;
+  /**
+   * Changes the mute state, for whichever of audio and video is given, and
+   * reports the state that results.
+   */
+  setDeviceMute(request: DeviceMuteRequest): Promise<DeviceMuteState>;
+}
+
+/** Hands a request to Element Call and waits for it to be acknowledged. */
+async function request<Data, Reply>(
+  listeners: Subject<HostRequest<Data, Reply>>,
+  what: string,
+  data: Data,
+): Promise<Reply> {
+  if (!listeners.observed)
+    throw new Error(`Nothing in Element Call can ${what} right now`);
+  return await new Promise((resolve) =>
+    listeners.next({ data, reply: resolve }),
+  );
+}
+
+/**
+ * The {@link HostBridge} the rest of Element Call sees, built from what a
+ * component host supplies and wired to the handle it is given.
+ *
+ * The bridge is created once and never changes identity — everything that
+ * depends on it would otherwise restart when the host re-rendered with a new
+ * object — and forwards each call to whatever the host most recently passed.
+ */
+export function useComponentHostBridge(
+  supplied: ElementCallHostBridge | undefined,
+  ref: Ref<ElementCallHandle> | undefined,
+  /** The theme the host wants, or undefined to leave it to Element Call. */
+  theme: string | undefined,
+): HostBridge {
+  const latest = useLatest(supplied ?? {});
+
+  const requests = useInitial(() => ({
+    // The theme is state, not an event: a `theme` prop rather than a request
+    // on the handle. It travels this channel because that is how the rest of
+    // Element Call hears about a host's theme, and replays so that whatever
+    // subscribes after the host has set it — everything, on first render —
+    // still hears the current one.
+    themeChange$: new ReplaySubject<HostRequest<{ name?: string }>>(1),
+    join$: new Subject<HostRequest<JoinCallData>>(),
+    hangUp$: new Subject<HostRequest<Record<string, never>>>(),
+    deviceMute$: new Subject<HostRequest<DeviceMuteRequest, DeviceMuteState>>(),
+  }));
+
+  useEffect(() => {
+    if (theme !== undefined)
+      requests.themeChange$.next({ data: { name: theme }, reply: () => {} });
+  }, [requests, theme]);
+
+  const bridge = useInitial((): HostBridge => ({
+    setAlwaysOnScreen: async (alwaysOnScreen) => {
+      await latest.current.setAlwaysOnScreen?.(alwaysOnScreen);
+    },
+    contentLoaded: async () => {
+      await latest.current.contentLoaded?.();
+    },
+    notifyJoined: async () => {
+      await latest.current.notifyJoined?.();
+    },
+    notifyHungUp: async () => {
+      await latest.current.notifyHungUp?.();
+    },
+    notifyDeviceMute: async (state) => {
+      await latest.current.notifyDeviceMute?.(state);
+    },
+    // Whether these exist is itself information, so they are read through
+    // rather than wrapped unconditionally
+    get close() {
+      const close = latest.current.close;
+      return close === undefined
+        ? undefined
+        : async (): Promise<void> => await close();
+    },
+    // Not offered to a component host: the client it hands over holds the
+    // credentials to fetch media itself. A widget's client does not, which
+    // is what the internal bridge's `downloadMedia` is for.
+    get supportsReactions(): boolean {
+      return latest.current.supportsReactions ?? true;
+    },
+    get allowJoinUnmutedViaIntent(): boolean {
+      return latest.current.allowJoinUnmutedViaIntent ?? false;
+    },
+    // Whatever the host says or does not say, the account is its own: it
+    // signed the user in and handed us the client. So Element Call never
+    // offers to edit the profile from inside a component.
+    supportsProfileChanges: false,
+    ...requests,
+  }));
+
+  useImperativeHandle(
+    ref,
+    (): ElementCallHandle => ({
+      join: async (devices) =>
+        await request(requests.join$, "join a call", devices),
+      hangUp: async () => await request(requests.hangUp$, "hang up", {}),
+      setDeviceMute: async (muteRequest) =>
+        await request(
+          requests.deviceMute$,
+          "change the mute state",
+          muteRequest,
+        ),
+    }),
+    [requests],
+  );
+
+  return bridge;
+}
@@ -0,0 +1,449 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * Element Call as a React component, for an application that wants to show a
+ * call inside itself rather than in an iframe.
+ *
+ * The host supplies the client and says which room to call in; Element Call
+ * supplies the call. Everything it would otherwise take from the page it is on
+ * — the URL, the document body, a Matrix session of its own — comes from the
+ * host instead, or is confined to the container it is mounted in.
+ */
+
+// The design tokens, fonts and element defaults every Element Call stylesheet
+// builds on. Written for a page, they speak of `html`, `body` and bare
+// elements; the component build confines them, and every other stylesheet in
+// this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
+// that the host's document is left as it was.
+//
+// Where these land relative to the component stylesheets is the bundler's
+// choice — the standalone app puts them first, this build puts them in the
+// middle — so nothing in base.css may depend on winning or losing against a
+// component's own rules at equal specificity. It currently does not: what it
+// declares unlayered is custom properties on Element Call's root, which
+// components inherit rather than compete with, and everything from Compound
+// sits in a `@layer`, which loses to unlayered rules either way.
+import "../src/base.css";
+
+import {
+  type FC,
+  type JSX,
+  type ReactNode,
+  type Ref,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { type MatrixClient, type Room } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { I18nextProvider } from "react-i18next";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { ErrorBoundary } from "@sentry/react";
+import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
+
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import EN from "../locales/en/app.json";
+import { CallView } from "../src/room/CallView";
+import { ErrorPage } from "../src/FullScreenView";
+import { HostBridgeProvider } from "../src/HostBridge";
+import { RootElementProvider, useRootElement } from "../src/RootElementContext";
+import {
+  configurationForIntent,
+  componentProperties,
+  type UrlConfiguration,
+  type UrlParams,
+  UrlParamsProvider,
+  type UrlProperties,
+  UserIntent,
+  useUrlParams,
+} from "../src/UrlParams";
+import { MediaDevicesContext } from "../src/MediaDevicesContext";
+import { MediaDevices } from "../src/state/MediaDevices";
+import { ObservableScope } from "../src/state/ObservableScope";
+import { ProcessorProvider } from "../src/livekit/TrackProcessorContext";
+import { Config } from "../src/config/Config";
+import { type ConfigOptions } from "../src/config/ConfigOptions";
+import { i18n } from "../src/utils/i18n";
+import { useTheme } from "../src/useTheme";
+import { useStableValue } from "../src/useStableValue";
+import { type RtcMatrixDriver } from "../src/driver/RtcMatrixDriver";
+import { type ElementCallMatrixClientDriver } from "../src/driver/ElementCallMatrixClientDriver";
+import { useJsSdkDrivers } from "../src/driver/jsSdk/useJsSdkDrivers";
+import {
+  initMatrixRtcSdk,
+  type MatrixRtcWasmSource,
+} from "../src/matrix-rtc-sdk";
+import {
+  type MatrixDrivers,
+  MatrixDriverProvider,
+} from "../src/driver/MatrixDriverContext";
+import styles from "./ElementCall.module.css";
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
+import { supportedLanguages, translationsBackend } from "./localization";
+
+// The languages Element Call can be shown in
+export { supportedLanguages } from "./localization";
+
+// What a host implements to drive Element Call with its own Matrix stack, and
+// the implementations of both over a matrix-js-sdk client
+export { type RtcMatrixDriver } from "../src/driver/RtcMatrixDriver";
+export {
+  type ElementCallMatrixClientDriver,
+  type MatrixClientFeatures,
+  type RoomInfo,
+  type RoomMemberProfile,
+  type TimelineEvent,
+  type OwnProfile,
+} from "../src/driver/ElementCallMatrixClientDriver";
+export { JsSdkRtcMatrixDriver } from "../src/driver/jsSdk/JsSdkRtcMatrixDriver";
+export { JsSdkElementCallMatrixClientDriver } from "../src/driver/jsSdk/JsSdkElementCallMatrixClientDriver";
+
+// How the host and Element Call talk to each other, and what they say
+export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
+export {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+} from "../src/HostBridge";
+export { type JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// above, which is per call
+export { type ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent
+export {
+  BackgroundStyle,
+  HeaderStyle,
+  UserIntent,
+  type UrlConfiguration,
+} from "../src/UrlParams";
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The MatrixRTC side of the host's Matrix stack, bound to the room to call
+   * in: what the crate needs to publish a membership, exchange keys and mint
+   * transport tokens. Element Call does not authenticate anyone or manage a
+   * session of its own; both drivers are the host's.
+   */
+  rtcDriver: RtcMatrixDriver;
+  /**
+   * Everything else Element Call asks of a Matrix client for that room: who
+   * is in it, its name and avatar, the timeline for reactions and
+   * notifications, the user's own profile.
+   */
+  clientDriver: ElementCallMatrixClientDriver;
+  /**
+   * The room to call in. Optional, and when given it must be the room the
+   * drivers are bound to (`clientDriver.roomId`). Kept for one release so
+   * that hosts written for the client-based component can move over one
+   * prop at a time; then it goes.
+   */
+  roomId?: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of
+   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
+   * to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}
+
+/**
+ * {@link ElementCall} for a host with a matrix-js-sdk client: the two drivers
+ * are built here from the client and the room, so the host hands over the
+ * client as it always has.
+ */
+export type ElementCallClientBasedProps = Omit<
+  ElementCallProps,
+  "rtcDriver" | "clientDriver" | "roomId"
+> & {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+};
+
+/**
+ * Prepares the things Element Call needs before it can be shown: translations,
+ * `Intl` polyfills for older browsers, and its configuration.
+ *
+ * Await this once, before rendering {@link ElementCall}.
+ */
+export interface InitializeElementCallOptions {
+  /**
+   * Where to load the MatrixRTC SDK's wasm from, for a host that serves it
+   * from somewhere other than next to this bundle. Left out, the bundled
+   * copy is loaded when the first call needs it.
+   */
+  matrixRtcWasm?: MatrixRtcWasmSource;
+}
+
+export async function initializeElementCall(
+  config: ConfigOptions = {},
+  { matrixRtcWasm }: InitializeElementCallOptions = {},
+): Promise<void> {
+  const polyfills: Promise<unknown>[] = [];
+  // The call runs on the Rust MatrixRTC crate; its wasm is loaded up front
+  // when the host says where from, and lazily otherwise.
+  if (matrixRtcWasm !== undefined)
+    polyfills.push(initMatrixRtcSdk(matrixRtcWasm));
+  if (shouldPolyfillSegmenter())
+    polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
+  if (shouldPolyfillDurationFormat())
+    polyfills.push(import("@formatjs/intl-durationformat/polyfill-force.js"));
+  await Promise.all(polyfills);
+
+  Config.initWith(config);
+  await i18n
+    .use(translationsBackend)
+    .use(new LanguageDetector())
+    .init({
+      fallbackLng: "en",
+      defaultNS: "app",
+      keySeparator: ".",
+      nsSeparator: false,
+      pluralSeparator: "_",
+      contextSeparator: "|",
+      supportedLngs: [...supportedLanguages],
+      interpolation: { escapeValue: false },
+      // English is bundled in, so the fallback never has to be loaded; every
+      // other language arrives from the backend when first asked for.
+      partialBundledLanguages: true,
+      resources: { en: { app: EN } },
+      detection: {
+        // The browser's language, until the host says otherwise through the
+        // `language` prop. Nothing is remembered: the choice is the host's.
+        order: ["navigator"],
+        caches: [],
+      },
+    });
+}
+
+/** Applies the theme and background to the container, before it is painted. */
+const Decoration: FC<{ children: JSX.Element }> = ({ children }) => {
+  useTheme();
+  const { background } = useUrlParams();
+  const rootElement = useRootElement();
+  useLayoutEffect(() => {
+    rootElement.setAttribute("data-background", background);
+  }, [rootElement, background]);
+  return children;
+};
+
+export const ElementCall: FC<ElementCallProps> = ({
+  rtcDriver,
+  clientDriver,
+  roomId: suppliedRoomId,
+  intent = UserIntent.JoinExistingCall,
+  config,
+  hostBridge: suppliedHostBridge,
+  ref,
+  theme,
+  language,
+}): ReactNode => {
+  const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme);
+  const roomId = clientDriver.roomId;
+  if (suppliedRoomId !== undefined && suppliedRoomId !== roomId)
+    throw new Error(
+      `Element Call was asked to call in ${suppliedRoomId} with drivers bound to ${roomId}`,
+    );
+
+  useEffect(() => {
+    if (language !== undefined)
+      i18n
+        .changeLanguage(language)
+        .catch((e) => logger.error(`Could not switch to ${language}`, e));
+  }, [language]);
+
+  // The container is what Element Call decorates and portals into, so nothing
+  // inside can render until we have it.
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  // Element Call has no URL of its own to read any of this from, and the
+  // host's URL is not Element Call's business, so the defaults come from the
+  // intent with the host's wishes over the top.
+  //
+  // Everything downstream — the mute state, the call view model and with it
+  // the media connection — is keyed on the identity of this object, so it has
+  // to be stable for as long as its contents are. A host writing `config`
+  // inline would otherwise tear the call down on every render.
+  const stableConfig = useStableValue(config);
+  const params = useMemo(
+    (): UrlParams => ({
+      ...componentProperties,
+      roomId,
+      ...configurationForIntent(intent),
+      ...stableConfig,
+    }),
+    [roomId, intent, stableConfig],
+  );
+
+  // Created in an effect so that the scope it lives in ends when the component
+  // is unmounted (or these options change), rather than keeping its device
+  // observers running for the rest of the page's life. Null until then, which
+  // is one render.
+  const { controlledAudioDevices, callIntent } = params;
+  const [mediaDevices, setMediaDevices] = useState<MediaDevices | null>(null);
+  useEffect(() => {
+    const scope = new ObservableScope();
+    setMediaDevices(
+      new MediaDevices(scope, { controlledAudioDevices, callIntent }),
+    );
+    return (): void => {
+      setMediaDevices(null);
+      scope.end();
+    };
+  }, [controlledAudioDevices, callIntent]);
+
+  // The call runs on the Rust MatrixRTC crate over these two drivers; no
+  // matrix-js-sdk client is involved.
+  const drivers = useMemo(
+    (): MatrixDrivers => ({ rtcDriver, clientDriver }),
+    [rtcDriver, clientDriver],
+  );
+
+  // Everything the call needs is in hand once these exist, and the first
+  // render with them is where the call itself appears: the moment the host
+  // is told that Element Call has loaded, as the widget tells its client once
+  // its own initialisation is over. Once per mount, however often the pieces
+  // are later swapped out.
+  const ready = container !== null && mediaDevices !== null;
+  const announcedLoaded = useRef(false);
+  useEffect(() => {
+    if (!ready || announcedLoaded.current) return;
+    announcedLoaded.current = true;
+    hostBridge
+      .contentLoaded()
+      .catch((e) => logger.error("Could not tell the host we had loaded", e));
+  }, [ready, hostBridge]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <HostBridgeProvider value={hostBridge}>
+        <UrlParamsProvider value={params}>
+          <div ref={setContainer} className={styles.root}>
+            {ready && (
+              <RootElementProvider value={container}>
+                {/* Whatever goes wrong in here is shown in here. Left to
+                  propagate, an error would unmount the host's own tree. */}
+                <ErrorBoundary
+                  fallback={(error) => <ErrorPage error={error} />}
+                  // A broken call should not hold the host on screen
+                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                >
+                  <Decoration>
+                    <TooltipProvider>
+                      <MatrixDriverProvider value={drivers}>
+                        <MediaDevicesContext value={mediaDevices}>
+                          <ProcessorProvider>
+                            <CallView
+                              isPasswordlessUser={false}
+                              confineToRoom={params.confineToRoom}
+                              preload={params.preload}
+                              skipLobby={params.skipLobby}
+                            />
+                          </ProcessorProvider>
+                        </MediaDevicesContext>
+                      </MatrixDriverProvider>
+                    </TooltipProvider>
+                  </Decoration>
+                </ErrorBoundary>
+              </RootElementProvider>
+            )}
+          </div>
+        </UrlParamsProvider>
+      </HostBridgeProvider>
+    </I18nextProvider>
+  );
+};
+
+export const ElementCallClientBased: FC<ElementCallClientBasedProps> = ({
+  client,
+  roomId,
+  ...props
+}): ReactNode => {
+  const room = client.getRoom(roomId);
+  if (room === null) {
+    logger.error(
+      `Element Call was asked to call in ${roomId}, which its host's client does not know about`,
+    );
+    return null;
+  }
+  return <ClientBasedCall client={client} room={room} {...props} />;
+};
+
+/** {@link ElementCallClientBased} once the room is known: builds the drivers. */
+const ClientBasedCall: FC<
+  Omit<ElementCallClientBasedProps, "roomId"> & { room: Room }
+> = ({ client, room, ...props }): ReactNode => {
+  const drivers = useJsSdkDrivers(client, room);
+  return <ElementCall {...props} {...drivers} />;
+};
@@ -0,0 +1,46 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+
+import { supportedLanguages, translationsBackend } from "./localization";
+
+const read = async (
+  language: string,
+  namespace = "app",
+): Promise<Record<string, unknown>> =>
+  await new Promise((resolve, reject) =>
+    translationsBackend.read(language, namespace, (error, data) => {
+      if (error) reject(error);
+      else resolve(data as Record<string, unknown>);
+    }),
+  );
+
+describe("component translations", () => {
+  test("offer every language in locales/, tagged as its directory is", () => {
+    expect(supportedLanguages).toContain("en");
+    expect(supportedLanguages).toContain("de");
+    expect(supportedLanguages).toContain("zh-Hans");
+    expect(new Set(supportedLanguages).size).toBe(supportedLanguages.length);
+  });
+
+  test("load a language's translations on demand", async () => {
+    const de = await read("de");
+    expect(de).toHaveProperty("action");
+    expect(de).not.toEqual(await read("en"));
+  });
+
+  test("refuse a language there are no translations for", async () => {
+    await expect(read("xx")).rejects.toThrow("No app translations for xx");
+  });
+
+  test("refuse a namespace there are no translations for", async () => {
+    await expect(read("en", "other")).rejects.toThrow(
+      "No other translations for en",
+    );
+  });
+});
@@ -0,0 +1,55 @@
+/*
+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.
+*/
+
+/**
+ * Translations for Element Call as a component.
+ *
+ * The standalone app fetches its locale files at runtime from URLs its own
+ * build emits, which a host serving the library from somewhere else could not
+ * resolve. The component instead has the bundler split every locale into a
+ * chunk of its own, loaded the first time its language is asked for; English,
+ * the fallback, is bundled in so that the first paint never waits for it.
+ */
+
+import { type BackendModule, type ResourceKey } from "i18next";
+
+import { languageOfLocalePath } from "../src/utils/i18n";
+
+/** Every locale, as a lazily imported module. */
+const translations = import.meta.glob<{ default: ResourceKey }>(
+  "../locales/*/app.json",
+);
+
+/**
+ * The languages Element Call can be shown in, as BCP 47 tags — `en`, `de`,
+ * `zh-Hans` and so on. A language that is not one of these falls back to its
+ * base language where there is one (`de-AT` to `de`), and to English otherwise.
+ */
+export const supportedLanguages: readonly string[] = [
+  ...new Set(Object.keys(translations).map(languageOfLocalePath)),
+];
+
+/** Loads translations on demand. */
+export const translationsBackend: BackendModule = {
+  type: "backend",
+  init(): void {},
+  read(language: string, namespace: string, callback): void {
+    const load = translations[`../locales/${language}/${namespace}.json`];
+    if (load === undefined) {
+      callback(new Error(`No ${namespace} translations for ${language}`), null);
+      return;
+    }
+    load().then(
+      (module) => callback(null, module.default),
+      (error: unknown) =>
+        callback(
+          error instanceof Error ? error : new Error(String(error)),
+          null,
+        ),
+    );
+  },
+};
@@ -0,0 +1,42 @@
+{
+  "name": "@element-hq/element-call-component",
+  "version": "0.0.0",
+  "description": "Element Call as a React component. Consumed straight from the repository as a git dependency (github:element-hq/element-call#<ref>&path:/component): the host's package manager runs `prepare`, which builds `dist/`.",
+  "license": "SEE LICENSE IN ../README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/element-hq/element-call",
+    "directory": "component"
+  },
+  "type": "module",
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/element-call.js",
+  "module": "./dist/element-call.js",
+  "types": "./dist/types/component/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/component/index.d.ts",
+      "default": "./dist/element-call.js"
+    },
+    "./style.css": "./dist/element-call.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
+  },
+  "peerDependencies": {
+    "livekit-client": "^2.18.1",
+    "matrix-js-sdk": "*",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
@@ -0,0 +1,9 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .: {}
@@ -0,0 +1,14 @@
+# Makes `component/` a pnpm project of its own rather than a directory inside
+# the repository's workspace. That matters when a host installs the component
+# straight from this repository (`github:element-hq/element-call#…&path:/component`):
+# pnpm prepares such a dependency by running `pnpm install` in this directory,
+# and only a project root gets its `prepare` script (see package.json) run, which
+# is what builds `dist/`. Inside the repository's own workspace the install
+# would silently target the repository instead and build nothing.
+#
+# Consequence for development: pnpm commands run from within this directory see
+# this project, not the repository; run them from the repository root.
+
+# Nothing to install here: the peers in package.json are the host's, and the
+# build runs against the repository's own node_modules (see `prepare`).
+autoInstallPeers: false
@@ -0,0 +1,20 @@
+{
+  // Declaration output for the component package (`pnpm build:component:types`).
+  // The root tsconfig only type-checks; this one emits `.d.ts` files, and nothing
+  // else, for everything the component's entry point reaches. The layout under
+  // `dist/types` mirrors the repository (`component/index.d.ts`, `src/…`), which
+  // is what `package.json` points its `types` at.
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": false,
+    "rootDir": "..",
+    "outDir": "./dist/types"
+  },
+  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources it reaches rely on.
+  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  "exclude": []
+}
@@ -5,15 +5,10 @@
      "server_name": "synapse.m.localhost"
    }
  },
-  "features": {
-    "feature_use_device_session_member_events": true
-  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  }
 }
@@ -8,15 +8,11 @@
  "livekit": {
    "livekit_service_url": "https://livekit-jwt.mydomain.com"
  },
-  "features": {
-    "feature_use_device_session_member_events": true
-  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  "matrix_rtc_mode": "compatibility",
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  }
 }
@@ -9,8 +9,6 @@
  "matrix_rtc_session": {
    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
    "network_error_retry_ms": 100
  },
  "posthog": {
@@ -18,7 +16,7 @@
    "api_host": "https://posthog-element-call.element.io"
  },
  "rageshake": {
-    "submit_url": "https://element.io/bugreports/submit"
+    "submit_url": "https://rageshakes.element.io/api/submit"
  },
  "sentry": {
    "environment": "netlify-pr-preview",
@@ -0,0 +1,14 @@
+{
+  "default_server_config": {
+    "m.homeserver": {
+      "base_url": "https://call-unstable.ems.host",
+      "server_name": "call-unstable.ems.host"
+    }
+  },
+  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
+  "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
+    "membership_event_expiry_ms": 180000000,
+    "network_error_retry_ms": 100
+  }
+}
@@ -1,5 +1,12 @@
 # OpenTelemetry Collector for development

+## Edit:
+
+Open telemetry has been removed in: https://github.com/element-hq/element-call/pull/3586
+Check this PR to get back the implementation or to use it as reference to add it back.
+
+---
+
 This directory contains a docker compose file that starts a jaeger all-in-one instance
 with an in-memory database, along with a standalone OpenTelemetry collector that forwards
 traces into the jaeger. Jaeger has a built-in OpenTelemetry collector, but it can't be
@@ -1,107 +0,0 @@
-networks:
-  ecbackend:
-
-services:
-  auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:latest-ci
-    pull_policy: always
-    hostname: auth-server
-    environment:
-      - LIVEKIT_JWT_PORT=6080
-      - LIVEKIT_URL=wss://matrix-rtc.m.localhost/livekit/sfu
-      - LIVEKIT_KEY=devkey
-      - LIVEKIT_SECRET=secret
-      # If the configured homeserver runs on localhost, it'll probably be using
-      # a self-signed certificate
-      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
-      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
-    deploy:
-      restart_policy:
-        condition: on-failure
-    ports:
-      # HOST_PORT:CONTAINER_PORT
-      - 6080:6080
-    networks:
-      - ecbackend
-
-  livekit:
-    image: livekit/livekit-server:latest
-    hostname: livekit-sfu
-    command: --dev --config /etc/livekit.yaml
-    restart: unless-stopped
-    # The SFU seems to work far more reliably when we let it share the host
-    # network rather than opening specific ports (but why?? we're not missing
-    # any…)
-    ports:
-      # HOST_PORT:CONTAINER_PORT
-      - 7880:7880/tcp
-      - 7881:7881/tcp
-      - 7882:7882/tcp
-      - 50100-50200:50100-50200/udp
-    volumes:
-      - ./backend/dev_livekit.yaml:/etc/livekit.yaml:Z
-    networks:
-      - ecbackend
-
-  redis:
-    image: redis:6-alpine
-    command: redis-server /etc/redis.conf
-    ports:
-      # HOST_PORT:CONTAINER_PORT
-      - 6379:6379
-    volumes:
-      - ./backend/redis.conf:/etc/redis.conf:Z
-    networks:
-      - ecbackend
-
-  synapse:
-    hostname: homeserver
-    image: docker.io/matrixdotorg/synapse:latest
-    environment:
-      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
-      # Needed for rootless podman-compose such that the uid/gid mapping does
-      # fit local user uid. If the container runs as root (uid 0) it is fine as
-      # it actually maps to your non-root user on the host (e.g. 1000).
-      # Otherwise uid mapping will not match your non-root user.
-      - UID=0
-      - GID=0
-    volumes:
-      - ./backend/synapse_tmp:/data:Z
-      - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
-    networks:
-      - ecbackend
-
-  element-web:
-    image: ghcr.io/element-hq/element-web:develop
-    pull_policy: always
-    volumes:
-      - ./backend/ew.test.config.json:/app/config.json:Z
-    environment:
-      ELEMENT_WEB_PORT: 8081
-    ports:
-      - "8081:8081"
-    networks:
-      - ecbackend
-
-  nginx:
-    #  see backend/dev_tls_setup for how to generate the tls certs
-    hostname: synapse.m.localhost
-    image: nginx:latest
-    volumes:
-      - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
-      - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z
-      - ./backend/dev_tls_m.localhost.crt:/root/ssl/cert.pem:Z
-    ports:
-      # HOST_PORT:CONTAINER_PORT
-      - "443:443"
-      - "8008:80"
-      - "4443:443"
-      - "8448:8448"
-    extra_hosts:
-      - "host.docker.internal:host-gateway"
-    depends_on:
-      - synapse
-    networks:
-      ecbackend:
-        aliases:
-          - matrix-rtc.m.localhost
@@ -0,0 +1,207 @@
+networks:
+  ecbackend:
+
+services:
+  auth-service:
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    pull_policy: always
+    hostname: auth-server
+    environment:
+      - LIVEKIT_JWT_PORT=6080
+      - LIVEKIT_URL=wss://matrix-rtc.m.localhost/livekit/sfu
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+      # If the configured homeserver runs on localhost, it'll probably be using
+      # a self-signed certificate
+      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
+      # Registers this instance as an application service on the main homeserver
+      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
+      - LIVEKIT_HS_SERVER_NAME=synapse.m.localhost
+      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
+      # location has to be given explicitly.
+      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
+    volumes:
+      - ./backend/app-service.yaml:/etc/lk-jwt-service/app-service.yaml:Z
+    deploy:
+      restart_policy:
+        condition: on-failure
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 6080:6080
+    networks:
+      - ecbackend
+
+  auth-service-1:
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    pull_policy: always
+    hostname: auth-server-1
+    environment:
+      - LIVEKIT_JWT_PORT=16080
+      - LIVEKIT_URL=wss://matrix-rtc.othersite.m.localhost/livekit/sfu
+      - LIVEKIT_KEY=devkey
+      - LIVEKIT_SECRET=secret
+      # If the configured homeserver runs on localhost, it'll probably be using
+      # a self-signed certificate
+      - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
+      - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
+      # Registers this instance as an application service on the other homeserver.
+      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
+      - LIVEKIT_HS_SERVER_NAME=synapse.othersite.m.localhost
+      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
+      # location has to be given explicitly.
+      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
+    volumes:
+      - ./backend/app-service-othersite.yaml:/etc/lk-jwt-service/app-service.yaml:Z
+    deploy:
+      restart_policy:
+        condition: on-failure
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 16080:16080
+    networks:
+      - ecbackend
+
+  livekit:
+    image: livekit/livekit-server:v1.13.4
+    pull_policy: always
+    hostname: livekit-sfu
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    # The SFU seems to work far more reliably when we let it share the host
+    # network rather than opening specific ports (but why?? we're not missing
+    # any…)
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 7880:7880/tcp
+      - 7881:7881/tcp
+      - 7882:7882/tcp
+      - 50100-50200:50100-50200/udp
+    volumes:
+      - ./backend/dev_tls_m.localhost.crt:/local_cert.pem:Z
+      - ./backend/dev_livekit.yaml:/etc/livekit.yaml:Z
+    environment:
+      - SSL_CERT_FILE=/local_cert.pem
+    networks:
+      - ecbackend
+
+  livekit-1:
+    image: livekit/livekit-server:v1.13.4
+    pull_policy: always
+    hostname: livekit-sfu-1
+    command: --dev --config /etc/livekit.yaml
+    restart: unless-stopped
+    # The SFU seems to work far more reliably when we let it share the host
+    # network rather than opening specific ports (but why?? we're not missing
+    # any…)
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - 17880:17880/tcp
+      - 17881:17881/tcp
+      - 17882:17882/tcp
+      - 50300-50400:50300-50400/udp
+    volumes:
+      - ./backend/dev_tls_m.localhost.crt:/local_cert.pem:Z
+      - ./backend/dev_livekit-othersite.yaml:/etc/livekit.yaml:Z
+    environment:
+      - SSL_CERT_FILE=/local_cert.pem
+    networks:
+      - ecbackend
+
+  synapse:
+    hostname: homeserver
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop
+    pull_policy: always
+    environment:
+      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
+      # Needed for rootless podman-compose such that the uid/gid mapping does
+      # fit local user uid. If the container runs as root (uid 0) it is fine as
+      # it actually maps to your non-root user on the host (e.g. 1000).
+      # Otherwise uid mapping will not match your non-root user.
+      - UID=0
+      - GID=0
+    volumes:
+      - ./backend/synapse_tmp:/data:Z
+      - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+      - ./backend/app-service.yaml:/data/cfg/app-service.yaml:Z
+    networks:
+      - ecbackend
+
+  synapse-1:
+    hostname: homeserver-1
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop
+    pull_policy: always
+    environment:
+      - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
+      # Needed for rootless podman-compose such that the uid/gid mapping does
+      # fit local user uid. If the container runs as root (uid 0) it is fine as
+      # it actually maps to your non-root user on the host (e.g. 1000).
+      # Otherwise uid mapping will not match your non-root user.
+      - UID=0
+      - GID=0
+    volumes:
+      - ./backend/synapse_tmp_othersite:/data:Z
+      - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
+      - ./backend/app-service-othersite.yaml:/data/cfg/app-service.yaml:Z
+    networks:
+      - ecbackend
+
+  element-web:
+    image: ghcr.io/element-hq/element-web:develop
+    pull_policy: always
+    volumes:
+      - ./backend/ew.test.config.json:/app/config.json:Z
+    environment:
+      ELEMENT_WEB_PORT: 8081
+    ports:
+      - "8081:8081"
+    networks:
+      - ecbackend
+
+  element-web-1:
+    image: ghcr.io/element-hq/element-web:develop
+    pull_policy: always
+    volumes:
+      - ./backend/ew.test.othersite.config.json:/app/config.json:Z
+    environment:
+      ELEMENT_WEB_PORT: 18081
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - "18081:18081"
+    networks:
+      - ecbackend
+
+  nginx:
+    #  see backend/dev_tls_setup for how to generate the tls certs
+    hostname: synapse.m.localhost
+    image: nginx:latest@sha256:4ae259ae64fbedb67918c07d167fdcb0e05855a1615480ca445bea485e7d65ff
+    pull_policy: always
+    volumes:
+      - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
+      - ./backend/dev_tls_m.localhost.key:/root/ssl/key.pem:Z
+      - ./backend/dev_tls_m.localhost.crt:/root/ssl/cert.pem:Z
+    ports:
+      # HOST_PORT:CONTAINER_PORT
+      - "443:443"
+      - "8008:80"
+      - "4443:443"
+      - "8448:8448"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+      - "auth-server:127.0.0.1"
+      - "auth-server-1:127.0.0.1"
+    depends_on:
+      - synapse
+    networks:
+      ecbackend:
+        aliases:
+          - synapse.m.localhost
+          - synapse.othersite.m.localhost
+          - matrix-rtc.m.localhost
+          - matrix-rtc.othersite.m.localhost
@@ -0,0 +1,25 @@
+# This file contains overrides to docker-compose-dev.yml and should
+# only be used in combination with that file.
+services:
+  synapse:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
+    volumes:
+      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+  synapse-1:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
+    volumes:
+      - ./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: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:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
@@ -2,8 +2,20 @@

 This folder contains documentation for setup, usage, and development of Element Call.

- [Embedded vs standalone mode](./embedded-standalone.md)
- [Url format and parameters](./url-params.md)
+- [Embedded vs standalone mode](./embedded_standalone.md)
+- [Element Call as a React component (experimental)](../README.md#element-call-as-a-component-experimental)
+- [Url format and parameters](./url_params.md)
 - [Global JS controls](./controls.md)
- [Self-Hosting](./self-hosting.md)
+- [MatrixRTC modes](./matrix_rtc_modes.md)
+- [Self-Hosting](./self_hosting.md)
 - [Developing with linked packages](./linking.md)
+- [The MatrixRTC SDK package](./matrix_rtc_sdk.md) (registry token, CI, local crate)
+
+### Writing code for Element Call (agent-readable conventions)
+
+Entry point: [AGENTS.md](../AGENTS.md).
+
+- [Agent workflow](./agents/workflow.md)
+- [Architecture](./agents/architecture.md)
+- [Code style](./agents/code-style.md)
+- [Testing](./agents/testing.md)
@@ -0,0 +1,112 @@
+# Developer help
+
+## Testing on Mobile Devices
+
+When developing Element Call locally, you may want to test on physical mobile devices (iOS/Android)
+on the same WiFi network.
+
+**Known Limitations:** For now this setup allows to use your local EC server but not yet the SFUs and Synapses.
+
+### Prerequisites
+
+1. **Start the dev server**
+
+   ```bash
+   pnpm dev
+   ```
+
+Check the output for the `➜  Network` (this will contain the local IP address of your laptop)
+
+```
+  ➜  Local:   https://m.localhost:3000/                                                                                                                                                                 12:06:48
+  ➜  Local:   https://vite.m.localhost:3000/                                                                                                                                                            12:06:48
+  ➜  Local:   https://vite.othersite.m.localhost:3000/                                                                                                                                                  12:06:48
+  ➜  Local:   https://vite.nip.io:3000/                                                                                                                                                                 12:06:48
+  ➜  Network: https://192.168.0.122:3000/
+```
+
+2. **Transfer the CA certificate to your phone**
+
+   The file is located at `backend/dev_tls_local-ca.crt`. Transfer it via:
+   - Matrix room
+   - AirDrop for iphone
+
+### IOS Setup
+
+**Install the certificate profile on iPhone**
+
+- Open the `dev_tls_local-ca.crt` file on your iPhone
+- You'll see "Profile Downloaded"
+- Go to **Settings → General → VPN & Device Management** (or **Settings → General → Profiles**)
+- Tap the "Element Call Dev CA" profile
+- Tap **Install** and enter your passcode
+- Confirm by tapping **Install** again
+
+**Enable full trust (Critical!)**
+
+- Go to **Settings → General → About → Certificate Trust Settings**
+- Under "Enable Full Trust for Root Certificates"
+- Toggle **ON** for "Element Call Dev CA"
+- Confirm the security warning
+
+**Access Element Call**
+
+Find your laptop's IP address (e.g., `192.168.0.122`) and use one of these URLs in Safari to validate:
+
+```
+https://192-168-0-122.nip.io:3000/
+```
+
+**For Element X iOS Developer Tools**
+
+In Element X's developer settings, set the Element Call URL to the nip.io url (replace . with - in the IP address):
+
+```
+https://192-168-0-122.nip.io:3000/room
+```
+
+### Android Setup
+
+**Transfer the CA certificate to your Android device**
+
+The file is located at `backend/dev_tls_local-ca.crt`.
+
+**Install the certificate**
+
+This might vary by Android version and manufacturer, but generally:
+
+- Open **Settings** search for "CA Certificate"/"Certificate"
+- Tap **Install a certificate** or **Install from storage**
+- Select **CA certificate**
+- Confirm the security warning
+- Navigate to and select the `dev_tls_local-ca.crt` file
+- Give it a name like "Element Call Dev CA"
+
+**Access Element Call**
+
+Find your laptop's IP address (e.g., `192.168.0.122`) and use one of these URLs in Chrome to validate:
+
+```
+https://192-168-0-122.nip.io:3000/
+```
+
+**For Element X Android Developer Tools**
+
+In Element X's developer settings, set the Element Call URL to the nip.io url (replace . with - in the IP address):
+
+```
+https://192-168-0-122.nip.io:3000/room
+```
+
+### Why nip.io?
+
+[nip.io](https://nip.io) is a free wildcard DNS service that automatically resolves domain names containing IP addresses. For example, `192-168-0-122.nip.io` automatically resolves to `192.168.0.122`. This means:
+
+- No need to regenerate certificates when your laptop's IP changes
+- Works from any device without DNS configuration
+- iOS/Android treat it as a proper domain name, not an IP address
+- One-time certificate setup works for all future IP addresses
+
+> [!IMPORTANT]
+> Make sure your network router doesn't enforce DNS rebinding protection (which will
+> break nip.io). If it does, try allow-listing nip.io in your router's administration interface.
@@ -0,0 +1,79 @@
+# Architecture
+
+## Logic lives in view models; components render
+
+- Call logic lives in `src/state/`. A component that derives call state is
+  misplaced logic.
+- Composing behaviors: a factory taking `(scope, ...deps$)`, returning named
+  behaviors plus callbacks. Copy `src/state/LayoutSwitchViewModel.ts`. Prefer this
+  for anything new.
+- Owning a resource: a class taking the scope in its constructor — `MediaDevices`,
+  `MuteStates`, `TileStore`, `Publisher`, `Connection`. Both styles are current;
+  don't convert one to the other in passing.
+- `foo$` is an observable. `Behavior<T>`, an observable with a current value, is
+  the default for anything a view reads.
+
+## The view model / view contract
+
+- Components take `vm: ViewModel<Snapshot>` and read state through `useBehavior`.
+  See `CallFooter`, `InCallView`, `LobbyView`, `SettingsModal`.
+- A snapshot is `Actions & State`; every field becomes a `foo$` behavior, and none
+  is optional.
+- An unavailable action is `undefined`, not a separate `canDoThing` flag — the
+  presence of the callback drives the rendering.
+- Subscribe in an effect only to drive a side effect off an event stream, as
+  `ReactionAudioRenderer` does; never to read state a behavior already holds.
+
+## Scopes own lifetimes
+
+- `ObservableScope` bounds every subscription a view model creates.
+- Reference only the scope defined in the same function; one captured from an
+  enclosing scope outlives its owner, and `no-observablescope-leak` rejects it.
+
+## Nothing reads the page
+
+Element Call can be mounted several times inside a host's React tree, so it owns
+neither window, URL, document nor router. Each seam defaults to the old standalone
+and widget behaviour.
+
+| Never                                         | Use                                                           |
+| --------------------------------------------- | ------------------------------------------------------------- |
+| the `widget` global                           | `useHostBridge()` — `src/HostBridge.ts`                       |
+| `getUrlParams()`, `window.location`           | `useUrlParams()`                                              |
+| `useNavigate("/")`, `<Link to="/">`           | `useLeaveToHome()`, `LeaveToHomeLink`                         |
+| `document.body`                               | `useRootElement()`                                            |
+| `window.innerWidth/Height`, `useMediaQuery`   | `useRootSizeMatches()` in views, `windowSize$` in view models |
+| global `i18next`                              | the instance in `src/utils/i18n.ts`                           |
+| config or analytics reading their environment | `Config.initWith()`, `PosthogAnalytics.configure()`           |
+
+- View models take values as options, never `getUrlParams()`
+  (`callViewModelOptionsFromParams`, `CallViewModelOptions.hostBridge`).
+- The host bridge is the only channel to the host: `createWidgetHostBridge(widget)`,
+  `nullHostBridge` standalone, `useComponentHostBridge`. State a capability
+  (`supportsReactions`, `supportsProfileChanges`); never infer it from being a
+  widget.
+- Shortcuts and portals attach to the root element, so two instances don't fight.
+- Known debt, not precedent: `Grid` measures `window.innerHeight`; `ErrorView`'s
+  reload and `getAbsoluteRoomUrl` use `window.location`; recaptcha appends to
+  `document.body` on the standalone login path.
+
+## Context differences are options, not checks
+
+- Named options with per-intent defaults (`configurationForIntent`), never a
+  runtime check for who is hosting.
+- `controlledAudioDevices`, not the platform, is what makes `MediaDevices` pick
+  `AndroidControlledAudioOutput` / `IOSControlledAudioOutput` over the web
+  `AudioOutput`. Intent presets set it on non-desktop; standalone leaves it off.
+- URL params are a published contract: change one, update `docs/url_params.md`.
+
+## Build targets
+
+Code that builds in only one is a bug.
+
+- `build:full` — standalone app, also widget mode.
+- `build:embedded` — `@element-hq/element-call-embedded`.
+- `build:sdk` — SDK library, entry `sdk/main.ts`.
+- `build:component` — `@element-hq/element-call-component`, sources in `component/`
+  (its own pnpm project; run pnpm from the repo root). Host API is in the README;
+  `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
+  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
@@ -0,0 +1,74 @@
+# Code style
+
+_Clean Code_ (Robert C. Martin): small functions, intention-revealing names, low
+noise.
+
+## Reuse before you build
+
+Look before you write, in this order:
+
+1. **Compound Web** — `@vector-im/compound-web` for buttons, tooltips, alerts,
+   dialogs, menus, form controls, avatars; icons in
+   `@vector-im/compound-design-tokens/assets/web/icons`.
+2. **This repo** — `src/button/`, `src/components/`, `src/input/`, `src/form/`,
+   `src/tabs/`, and `Modal`, `Avatar`, `Toast`, `Slider`, `ErrorView`,
+   `FullScreenView` at the root of `src/`.
+3. **The nearest existing feature** — grep for the same shape first. A hook is
+   often what you want to extract, not a component.
+
+If nothing fits, name the new shared component in the PR body and say what you
+rejected and why — never add one silently. Extend or parameterise before forking,
+and extract shared logic into a hook both callers use before copying it; if you
+copy, the PR says so.
+
+## Ordering
+
+- **Newspaper order.** Headline first, detail down. A file opens with what it
+  exists to provide.
+- **Stepdown rule.** Caller above callee. A helper used by one function sits
+  beneath it, which needs a `function` declaration, not a `const` arrow. Existing
+  arrow components above their callers are not a pattern to extend — nor to churn.
+- **Suites.** Test cases first, helpers below. Older suites invert this; follow the
+  rule in new ones, don't reorder old ones.
+- **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
+  `computedLayout$`. Comments explain why, never what.
+
+## TypeScript, React and RxJS idiom win on a clash
+
+- Hooks stay unconditional at the top of a component.
+- `useCallback` / `useMemo` dependency arrays sometimes force inlining.
+- An RxJS pipeline stays one expression. Name the behavior, not each operator.
+- A long factory is fine when it reads as a list of named behaviors.
+  `CallViewModel.ts` is long because the domain is.
+- Marble test tables are dense on purpose.
+
+## Enforced by lint
+
+- Copyright header on every file: `Copyright <current year> Element Creations Ltd.`
+  plus the AGPL / commercial SPDX line.
+- `logger` from `matrix-js-sdk/lib/logger`, never `console`, and no top-level
+  `logger.getChild()`. The `console` ban is only enforced under `src/*/**`.
+- No floating or misused promises; async functions typed `Promise<T>`.
+- Inline type imports (`import { type Foo }`), so matrix-js-sdk stays lazily
+  loadable.
+- Deep-import `matrix-js-sdk/lib/<module>` as the codebase does. Banned is the bare
+  `matrix-js-sdk/lib`, `lib/index` and anything under `src/`.
+
+## CSS
+
+- Compound components and `--cpd-*` tokens in CSS modules. A hardcoded colour or px
+  spacing is a design question, not a licence to inline a hex.
+- Size against the root, not the window: `@container element-call (…)` and
+  `cqw` / `cqh`, never `@media (width)` or `vw` / `vh`. Media queries stay correct
+  only in standalone-only views — home, login.
+- Style `[data-element-call-root]`, never `body` or `:root`; the component build
+  makes those stand for the root (`component/build/scopeStylesToRoot.ts`).
+
+## Strings and a11y
+
+- Strings through `t()`: add the key, run `pnpm i18n`, fill `locales/en/app.json`.
+  Other locales come from Localazy; never hand-edit them.
+- `t` from `useTranslation()`, or `src/utils/i18n.ts` outside React. Never the
+  `i18next` global — several instances share a page.
+- Accessible names on controls, `aria-pressed` on toggles, keyboard reachability.
+  `jsx-a11y` rules are errors; `vitest-axe` is available.
@@ -0,0 +1,53 @@
+# Testing
+
+Three layers; a user-facing feature needs all three. Unit proves the logic,
+Storybook proves the rendering, e2e proves the feature. Codecov gates 80% on the
+lines a PR touches.
+
+## Unit
+
+- View model tests use `withTestScheduler` + `testScope()` from `src/utils/test.ts`
+  and read as ASCII timelines. Copy `LayoutSwitchViewModel.test.ts`.
+- Component tests use Testing Library, queried by role and accessible name.
+- Reuse the factories in `src/utils/test.ts` — `mockRemoteParticipant`,
+  `mockMatrixRoom`, `mockLivekitRoom`, `MockRTCSession`. Hand-rolled mocks drift.
+- Snapshots live in `__snapshots__/`; update with `pnpm test <Name> -u`.
+- How often something redraws is testable: drive the frames and count commits, not
+  render calls. An effect with no dependency array runs once per commit.
+- `component/**/*.test.ts` runs in the same jsdom project as `src`.
+
+## Storybook
+
+A deliverable, not documentation: `pnpm test:storybook` runs every story as a real
+browser test in the same CI job as the unit suite. **A UI change without a story is
+incomplete.** Only three stories exist so far, so copy `CallFooter.stories.tsx`.
+
+- Drive the component from a snapshot via `useStaticViewModel`, never internals.
+- One named story per state that matters — loading, error, empty, denied, mobile.
+- Assert in a `play` function with `userEvent` / `expect` from `storybook/test`.
+- Mobile is `globals: { viewport: { value: "mobile2" } }`, not a second component.
+- Expose interesting props through `argTypes`.
+
+`.storybook/preview.tsx` supplies `TooltipProvider`, `src/index.css` and English
+translations. The browser is Playwright's, so a fresh clone needs
+`pnpm playwright install` once.
+
+## End-to-end
+
+- `playwright/*.spec.ts` — standalone, on Chromium and Firefox.
+- `playwright/widget/` — widget mode, where cross-context bugs surface.
+- `playwright/component/` — the component in a host page, via the harness on port
+  3001 that Playwright starts as a second web server. Catches container-relative
+  layout, styles escaping the root, two instances on a page, host-bridge reports.
+- `playwright/mobile/` — Pixel 7, `mobile` project only.
+
+Test what a user observes: the peer sees the change, it survives a reconnect, it is
+right after a reload. Reuse `playwright/spa-helpers.ts`,
+`playwright/widget/test-helpers.ts`, `playwright/fixtures/`.
+
+```sh
+pnpm test                   # unit + storybook
+pnpm backend                # Synapse + LiveKit, required for e2e
+pnpm test:playwright        # or :open
+pnpm dev:component          # component harness, port 3001
+```
@@ -0,0 +1,50 @@
+# Agent workflow
+
+## Scratch files live in `agent-workspace/`
+
+Git-ignored. One kebab-case subfolder per task, matching the branch topic:
+`agent-workspace/<slug>/`.
+
+| File                        | Purpose                                                                          |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| `plan.md`                   | The concrete approach — files, symbols, edit order — once direction is confirmed |
+| `commit-msg.txt`            | `git commit -F agent-workspace/<slug>/commit-msg.txt`                            |
+| `pr-body.md`                | `gh pr create --body-file agent-workspace/<slug>/pr-body.md`                     |
+| `implementation-summary.md` | What was built, decisions, trade-offs                                            |
+| `NN-prompt.md`              | Raw prompt text, numbered, when worth keeping                                    |
+
+- Nothing here is durable. The folder is ignored, so anything worth keeping is
+  promoted into the PR body, a doc, or a feature spec before the task ends.
+- Never write scratch files to the repo root. Stray `load_test_summary.md` and
+  `config.json_` files are what this folder prevents.
+- Start `pr-body.md` from `.github/PULL_REQUEST_TEMPLATE.md` and fill every
+  section.
+- Commit subjects are plain imperative English. No conventional-commits prefixes.
+- A `plan.md` and a feature spec sit at different altitudes; neither replaces the
+  other. A spec in `FEATURES_SPEC/` is durable and deliberately abstract —
+  behaviour, decisions, acceptance criteria — so the feature can be rebuilt against
+  a `main` nobody has seen yet. A plan is one slice of it landing on today's
+  `main`: the paths, symbols and edit order the spec's decisions and criteria must
+  not name. `FEATURES_SPEC/AGENTS.md` wins wherever the two genuinely overlap.
+
+## Hand off before the quality pass
+
+- Implement the change, run the narrowest check that rules out an obviously broken
+  handoff, then stop and ask whether the direction is right.
+- Full `pnpm lint`, the whole suite, coverage and benchmarks come after the
+  direction is confirmed.
+- Wider refactors, extra tests and documentation polish are follow-up work, not
+  part of the first handoff.
+- If a check is needed before feedback, keep it to the touched code and say why.
+
+## Commit and PR readiness
+
+- Commit once the user confirms direction, or asks for one. Not before. Where the
+  setup has no git identity, a sandbox included, write the message to
+  `commit-msg.txt` and hand it over instead.
+- Ready means every gate in [AGENTS.md](../../AGENTS.md#gates) is green and the
+  change is covered at the layers [testing.md](./testing.md) asks for. Read the diff
+  against [code-style.md](./code-style.md) first.
+- Re-run the whole checklist after any fix. Only on green, either way.
+- Once a human has started reviewing, fix forward — never force-push a
+  regeneration over a review in progress.
@@ -7,12 +7,15 @@ A few aspects of Element Call's interface can be controlled through a global API
 - `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
 - `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
 - `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
+- `controls.onPipMediaOrientationUpdate: ((orientation: "landscape"|"portrait") => void) | undefined` Callback called whenever the PiP media orientation changes.
+  The client should track this value to already initiate the pip in the right orientation.
+  It should update the orientation of the current Pip window when called.

 ## Audio devices

 On mobile platforms (iOS, Android), web views do not reliably support selecting audio output devices such as the main speaker, earpiece, or headset. To address this limitation, the following functions allow the hosting application (e.g., Element Web, Element X) to manage audio devices via exposed JavaScript interfaces. These functions must be enabled using the URL parameter `controlledAudioDevices` to take effect.

- `controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?, boolean; }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
+- `controls.setAvailableAudioDevices(devices: { id: string, name: string, forEarpiece?: boolean, isEarpiece?: boolean isSpeaker?: boolean, isExternalHeadset?: boolean }[]): void` Sets the list of available audio outputs. `forEarpiece` is used on iOS only.
  It flags the device that should be used if the user selects earpiece mode. This should be the main stereo loudspeaker of the device.
 - `controls.onAudioDeviceSelect: ((id: string) => void) | undefined` Callback called whenever the user or application selects a new audio output.
 - `controls.setAudioDevice(id: string): void` Sets the selected audio device in Element Call's menu. This should be used if the OS decides to automatically switch to Bluetooth, for example.
@@ -3,6 +3,9 @@
 Element Call is available as two different packages: Full Package and Embedded Package.

 The Full Package is designed for standalone use, while the Embedded Package is designed for widget mode only.
+There is also an experimental third option, a build of Element Call as a React component for applications
+that want to render a call inside their own page rather than in an iframe; see
+[Element Call as a component](../README.md#element-call-as-a-component-experimental) in the README.

 The table below provides a comparison of the two packages:

@@ -14,7 +17,7 @@ The table below provides a comparison of the two packages:
 | **Release artifacts**                        | Docker Image, Tarball                                                                                                             | Tarball, NPM for Web, Android AAR, SwiftPM for iOS                                                                                                                                                                  |
 | **Recommended for**                          | Standalone/guest access usage                                                                                                     | Embedding within messenger apps                                                                                                                                                                                     |
 | **Responsibility for regulatory compliance** | The administrator that is deploying the app is responsible for compliance with any applicable regulations (e.g. privacy)          | The developer of the messenger app is responsible for compliance                                                                                                                                                    |
-| **Analytics consent**                        | Element Call will show a consent UI.                                                                                              | Element Call will not show a consent UI. The messenger app should only provide the embedded Element Call with the [analytics URL parameters](./url-params.md#embedded-only-parameters) if consent has been granted. |
+| **Analytics consent**                        | Element Call will show a consent UI.                                                                                              | Element Call will not show a consent UI. The messenger app should only provide the embedded Element Call with the [analytics URL parameters](./url_params.md#embedded-only-parameters) if consent has been granted. |
 | **Analytics data**                           | Element Call will send data to the Posthog, Sentry and Open Telemetry targets specified by the administrator in the `config.json` | Element Call will send data to the Posthog and Sentry targets specified in the URL parameters by the messenger app                                                                                                  |

 ### Using the embedded package within a messenger app
@@ -25,8 +28,8 @@ The basics are:

 1. Add the appropriate platform dependency as given for a [release](https://github.com/element-hq/element-call/releases), or use the embedded tarball. e.g. `npm install @element-hq/element-call-embedded@0.9.0`
 2. Include the assets from the platform dependency in the build process. e.g. copy the assets during a [Webpack](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/webpack.config.js#L677-L682) build.
-3. Use the `index.html` entrypointof the imported assets when you are constructing the WebView or iframe. e.g. using a [relative path in a webapp](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/src/models/Call.ts#L680), or on the the Android [WebViewAssetLoader](https://github.com/element-hq/element-x-android/blob/fe5aab6588ecdcf9354a3bfbd9e97c1b31175a8f/features/call/impl/src/main/kotlin/io/element/android/features/call/impl/utils/DefaultCallWidgetProvider.kt#L20)
-4. Set any of the [embedded-only URL parameters](./url-params.md#embedded-only-parameters) that you need.
+3. Use the `index.html` entrypoint of the imported assets when you are constructing the WebView or iframe. e.g. using a [relative path in a webapp](https://github.com/element-hq/element-web/blob/247cd8d56d832d006d7dfb919d1042529d712b59/src/models/Call.ts#L680), or on the the Android [WebViewAssetLoader](https://github.com/element-hq/element-x-android/blob/fe5aab6588ecdcf9354a3bfbd9e97c1b31175a8f/features/call/impl/src/main/kotlin/io/element/android/features/call/impl/utils/DefaultCallWidgetProvider.kt#L20)
+4. Set any of the [embedded-only URL parameters](./url_params.md#embedded-only-parameters) that you need.

 ## Widget vs standalone mode

@@ -35,5 +38,5 @@ Element Call is developed using the [js-sdk](https://github.com/matrix-org/matri
 As a widget, the app only uses the core calling (MatrixRTC) parts. The rest (authentication, sending events, getting room state updates about calls) is done by the hosting client.
 Element Call and the hosting client are connected via the widget API.

-Element Call detects that it is run as a widget if a widgetId is defined in the url parameters. If `widgetId` is present then Element Call will try to connect to the client via the widget postMessage API using the parameters provided in [Url Format and parameters
-](./url-params.md).
+Element Call detects that it is run as a widget if `widgetId` is defined in the url parameters. If `widgetId` is present then Element Call will try to connect to the client via the widget postMessage API using the parameters provided in [Url Format and parameters
+](./url_params.md).
@@ -1,39 +1,68 @@
-# Developing with linked packages
+## Quickstart guide

-If you want to make changes to a package that Element Call depends on and see those changes applied in real time, you can create a link to a local copy of the package. Yarn has a command for this (`yarn link`), but it's not recommended to use it as it ends up modifying package.json with details specific to your development environment.
+Run:

-Instead, you can use our little 'linker' plugin. Create a file named `.links.yaml` in the Element Call project directory, listing the names and paths of any dependencies you want to link. For example:
-
-```yaml
-matrix-js-sdk: ../path/to/matrix-js-sdk
-"@vector-im/compound-web": /home/alice/path/to/compound-web
+```bash
+./scripts/setup-linking.sh
 ```

-Then run `yarn install`.
+Read the script output:
+
+```
+Setup complete.
+Update: .links.cjs to your liking
+Run: 'pnpm links:on' to test your .links.cjs
+Run: 'git commit' with links enabled to test the git pre-commit hook.
+Run: 'pnpm links:off' to be able to commit again
+Run: 'git config --local core.hooksPath ""' to allow committing with linking (not recommended)
+Run: 'rm links.cjs' & 'git config --local core.hooksPath ""' to fully revert what this script did
+```
+
+# Developing with linked packages
+
+If you want to make changes to a package that Element Call depends on and see those changes applied in real time, you can create a link to a local copy of the package. `pnpm` has a command for this (`pnpm link`), but it's not recommended to use it as it ends up modifying package.json with details specific to your development environment.
+
+Instead, create a file named `.links.cjs` in the Element Call project directory (or run `./scripts/setup-linking.sh` to create a template), listing the names and paths of any dependencies you want to link. For example:
+
+```cjs
+// Packages to link to local checkouts
+module.exports = {
+  "matrix-js-sdk": "../your/path/matrix-js-sdk",
+  "matrix-widget-api": "../your/path/matrix-widget-api",
+  // The MatrixRTC SDK: run `npm run build` in that directory first
+  "@element-hq/matrix-rtc":
+    "../your/path/matrix-rust-rtc/MatrixSdkArchitectureDraft/web-test-app",
+};
+```
+
+Then run `pnpm links:on`. (this will activate the pnpm file + run `pnpm install` to setup the linking)

 ## Hooks

-Changes in `.links.yaml` will also update `yarn.lock` when `yarn` is executed. The lockfile will then contain the local
+Changes in `.links.cjs` will also update `pnpm-lock.yaml` when `pnpm install` is executed. The lockfile will then contain the local
 version of the package which would not work on others dev setups or the github CI.
-One always needs to run:
+
+One always needs to remove the pnpm `readPackage` script (the `.pnpmfile.cjs`) and run:

 ```bash
-mv .links.yaml .links.disabled.yaml
-yarn
+pnpm install
 ```

 before committing a change.

-To make it more convenient to work with this linking system we added git hooks for your conviniece.
-A `pre-commit` hook will run `mv .links.yaml .links.disabled.yaml`, `yarn` and `git add yarn.lock` if it detects
-a `.links.yaml` file and abort the commit.
-You will than need to check if the resulting changes are appropriate and commit again.
+To make this less of a foot gun we added a git hook.
+A `pre-commit` hook will check if linking is currently used. If it detects
+a `.pnpmfile.cjs` file it will abort the commit with an explanatory message.
+You will then need to run `pnpm links:off` and commit again.

-A `post-commit` hook will setup the linking as it was
-before if a `.links.disabled.yaml` is present. It runs `mv .links.disabled.yaml .links.yaml` and `yarn`.
-
-To activate the hooks automatically configure git with
+To activate the hooks configure git with (when using the setup script (`./scripts/setup-linking.sh`) this is already done):

 ```bash
-git config --local core.hooksPath .githooks/
+git config --local core.hooksPath .githooks
 ```
+
+This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.
+
+## Background
+
+Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.
@@ -0,0 +1,30 @@
+### Why do we not enable .pnpmfile.cjs by default
+
+Background: The presence of the `.pnpmfile.cjs` adds a field to the `pnpm-lock.yaml` called: `pnpmfileChecksum`. This field is a checksum of the content of the `.pnpmfile.cjs` file.
+`pnpm install --frozen-lockfile` **fails** if there is a `.pnpmfile.cjs` but no `pnpmfileChecksum` or vice versa (or on mismatch).
+
+_TLDR: running with `--ignore-pnpmfile` will fail if `pnpmfileChecksum` is present._
+
+#### `pnpmfileChecksum` + renovate bot
+
+When the renovate bot creates a PR it runs `pnpm install --ignore-pnpmfile`. This means that the `pnpmfileChecksum` in the lockfile will be **empty**.
+This breaks builds that **don't** ignore the `.pnpmfile.cjs`-file. (CI that runs on the renovate PR)
+From here we have two possible paths:
+
+- ignore `.pnpmfile.cjs` in all CI builds (CI will also fail if we accidently add it locally).
+- fixup the `pnpm-lock.yaml` in the renovate PR to contain the correct `pnpmfileChecksum`.
+
+Ignoring in all CI builds means that CI will always fail if we enable the linking system.
+This is annoying but can be worked around with the git hook we provide that at least lets us know that we are
+commiting with enabled linking.
+Only if we remember setting it back/disbale linking (or let ourselves remember by the git hook) the CI will work.
+
+#### Summary
+
+- We will always run into conflicts with the `pnpmfileChecksum` because in renovate prs it will be empty (`--ignore-pnpmfile`)
+- To keep it simple we set `--ignore-pnpmfile` in all of our CI builds to see issues immediately.
+- The only solution is to never have a `.pnpmfile.cjs` in the repository when pushing.
+  - This way there will never be a commit with `pnpmfileChecksum` in the lockfile.
+  - renovate (which uses `--ignore-pnpmfile` which we cannot disable) and other CI will work.
+- We are able to use the linking system locally if we `cp` this file from the scripts folder into `./` on demand.
+- `pnpm links:on` and `pnpm links:off` + `./scripts/setup-linking.sh` will help us with this.
@@ -0,0 +1,48 @@
+# MatrixRTC modes
+
+Element Call is in the middle of a transition of how a call session is
+represented: from room _state_ events (`org.matrix.msc3401.call.member`) to
+_sticky_ events
+([MSC4354](https://github.com/matrix-org/matrix-spec-proposals/pull/4354)),
+which are a much better fit for the short lived, per-device nature of call
+memberships.
+
+Not every homeserver supports sticky events yet. The two MatrixRTC modes
+controls whether Element Call uses them.
+
+## The modes
+
+| Mode            | Membership events | SFU selection | JWT endpoint                 |
+| --------------- | ----------------- | ------------- | ---------------------------- |
+| `compatibility` | state events      | multi SFU     | legacy                       |
+| `matrix_2_0`    | sticky events     | multi SFU     | Matrix 2.0 (hashed identity) |
+
+**`compatibility`** — multi SFU, but still state events. Use it when the
+homeserver does not support sticky events. This is the default.
+
+**`matrix_2_0`** — the target state. Requires a homeserver that advertises
+MSC4354 and all clients on v0.17.0 or later. The local membership requests its
+token from the Matrix 2.0 JWT endpoint of the
+[MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
+and identifies the room by a hashed identity instead of a `livekit_alias`.
+(Remote memberships always try the new endpoint first and fall back to the
+legacy one, so remote participants can be on either.)
+
+## Selecting a mode
+
+Users can choose a mode under **Settings → Developer → MatrixRTC mode**. The
+Matrix 2.0 option is disabled if the homeserver does not support sticky events.
+
+A deployment can pin the mode for all its clients in `config.json`, which
+disables the Developer Settings choice:
+
+```json
+{
+  "matrix_rtc_mode": "compatibility"
+}
+```
+
+Valid values are `compatibility` and `matrix_2_0`; an invalid value is
+ignored (with a warning) and the user's choice applies. Pinning `matrix_2_0` on a
+homeserver without sticky event support makes joining fail with a "sticky events
+required" error.
@@ -0,0 +1,135 @@
+# The MatrixRTC SDK package
+
+Element Call's MatrixRTC logic (session membership, keep-alive, transport
+tokens, media key exchange) runs in the Rust `matrix-rtc` crate, compiled to
+WebAssembly and shipped as the npm package `@element-hq/matrix-rtc`. The
+package is built and published by the
+[`npm-web-bindings.yml`](https://github.com/element-hq/matrix-rust-rtc/blob/main/.github/workflows/npm-web-bindings.yml)
+workflow of the `matrix-rust-rtc` repository, from its
+`MatrixSdkArchitectureDraft/web-test-app` directory. Element Call loads it in
+`src/matrix-rtc-sdk/index.ts`, the only module that imports the package
+directly.
+
+## Where the package comes from
+
+For now the package lives on the **GitHub Packages** npm registry
+(`https://npm.pkg.github.com`), not on npmjs.com. **This is a stop-gap** for
+the phase in which the crate's API still changes with every push: publishing
+from the crate's CI into a registry that comes with the repository needs no
+account or secret upstream, and nothing else consumes the package yet. Once
+the SDK is ready for consumers beyond Element Call, it should be published to
+**npmjs.com** as `@element-hq/matrix-rtc`, which makes everything in this
+document about tokens and scopes go away: `pnpm install` works anonymously
+again, forks and Renovate can install, component hosts need no setup, and the
+alias in `package.json` and the scope line in `.npmrc` are deleted.
+
+Until then, two properties of GitHub Packages shape the setup below:
+
+- **Every request needs a token**, including reads of public packages. There
+  is no anonymous install.
+- **A package is scoped to the owner of the repository whose CI published
+  it.** While the crate is developed on the `BillCarsonFr` fork, the package is
+  published as `@billcarsonfr/matrix-rtc`; once it is published from
+  `element-hq/matrix-rust-rtc` it becomes `@element-hq/matrix-rtc`.
+
+So that the code does not have to change when that happens, `package.json`
+installs the fork's package under the final name:
+
+```json
+"@element-hq/matrix-rtc": "npm:@billcarsonfr/matrix-rtc@next"
+```
+
+and the repository's `.npmrc` maps only the scope to the registry:
+
+```ini
+@billcarsonfr:registry=https://npm.pkg.github.com
+```
+
+When the package moves to `element-hq`, change the alias to the plain package
+and the scope line in `.npmrc` accordingly; nothing else in the repository
+refers to the fork's name.
+
+## Setting up your machine
+
+1. Create a **personal access token (classic)** at
+   <https://github.com/settings/tokens> with only the `read:packages` scope.
+   Fine-grained tokens do not work with GitHub Packages.
+2. Add it to your **user-level** npm config. Never put it in the repository's
+   `.npmrc`:
+
+   ```sh
+   echo "//npm.pkg.github.com/:_authToken=<your token>" >> ~/.npmrc
+   ```
+
+3. Run `pnpm install` as usual.
+
+Without the token, `pnpm install` fails while resolving
+`@billcarsonfr/matrix-rtc` with a `401` or `404` from `npm.pkg.github.com`;
+that error always means "no or wrong token", never "the package does not
+exist".
+
+## CI and other consumers
+
+A workflow's built-in `GITHUB_TOKEN` can only read packages owned by the
+repository's own owner, so element-hq's workflows cannot read a package owned
+by the `BillCarsonFr` user. The workflows that run `pnpm install` therefore
+write a personal access token from the repository secret
+`MATRIX_RTC_NPM_TOKEN` (scope `read:packages`) to `~/.npmrc` before installing.
+Keep in mind:
+
+- **Pull requests from forks and from Renovate do not receive secrets**, so
+  their installs fail until the package is readable with the built-in token.
+- **Hosts of the [component](../README.md#element-call-as-a-component-experimental)**
+  install it as a git dependency whose `prepare` script runs
+  `pnpm install --frozen-lockfile` in this repository, so they need the same
+  token in their `~/.npmrc` or CI.
+
+Publishing from `element-hq/matrix-rust-rtc` (and granting the Element Call
+repository access to the package) would let the built-in token work for
+element-hq's own workflows, but that only patches the CI case. The intended end
+state is the npmjs.com publication described above, which removes the token
+requirement for everyone.
+
+## Versions
+
+The package version tracks the crate's `Cargo.toml`. Every push to the tracked
+branches of `matrix-rust-rtc` publishes a `next` pre-release named
+`<version>-next.<run number>.<short sha>`, and a `matrix-rtc-v<version>` tag
+publishes `latest`. Element Call follows `next`; `pnpm install` picks up a new
+pre-release only when the lockfile is updated, e.g. with
+`pnpm update @element-hq/matrix-rtc`.
+
+The publish job runs only after the crate's own `cargo test` job passed on a
+_push_ (pull-request runs never publish). If a `next` build you expect is
+missing, check that workflow's push runs for a failed crate job and re-run it;
+its tests are known to be timing-sensitive.
+
+## Developing against a local crate checkout
+
+To run Element Call against a crate you are changing, build the package there
+and link it, instead of waiting for CI:
+
+```sh
+cd ../matrix-rust-rtc/MatrixSdkArchitectureDraft/web-test-app
+npm install && npm run build      # produces dist/
+```
+
+then add it to `.links.cjs` in this repository and run `pnpm links:on`, as
+described in [Developing with linked packages](./linking.md):
+
+```cjs
+"@element-hq/matrix-rtc": "../matrix-rust-rtc/MatrixSdkArchitectureDraft/web-test-app",
+```
+
+`pnpm links:off` restores the registry package before committing.
+
+## How the wasm is loaded
+
+`initMatrixRtcSdk()` in `src/matrix-rtc-sdk/index.ts` is the single entry
+point: it awaits the package's `initAsync`, then installs the log sink that
+routes the crate's logs into Element Call's logger. The wasm is imported as
+`@element-hq/matrix-rtc/wasm?url`, so the app builds emit it as an asset next
+to the other `.wasm` files and the component build inlines it. Unit tests read
+the bytes from the installed package instead (`src/utils/test-matrix-rtc.ts`),
+since vitest has no server to fetch from. A component host can point at a copy
+it serves itself through `initializeElementCall(config, { matrixRtcWasm })`.
@@ -16,7 +16,7 @@
 The following [MSCs](https://github.com/matrix-org/matrix-spec-proposals) are
 required for Element Call to work properly:

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

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

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

 ```yaml
 experimental_features:
  # MSC3266: Room summary API. Used for knocking over federation
  msc3266_enabled: true
+  # MSC4143: MatrixRTC. For historical reasons this flag enables the transports
+  # endpoint defined in MSC4519.
+  msc4143_enabled: true
  # MSC4222 needed for syncv2 state_after. This allow clients to
  # correctly track the state of the room.
  msc4222_enabled: true
@@ -58,9 +65,18 @@ rc_message:

 rc_delayed_event_mgmt:
  # This needs to match at least the heart-beat frequency plus a bit of headroom
-  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2s
+  # Currently the heart-beat is every 5 seconds which translates into a rate of 0.2Hz
  per_second: 1
  burst_count: 20
+
+matrix_rtc:
+  transports:
+    # The transport you specify will be made available to clients over the
+    # /_matrix/client/unstable/org.matrix.msc4143/rtc/transports endpoint as
+    # defined in MSC4519.
+    - type: livekit
+      # Replace this with the actual URL of your MatrixRTC Authorization Service
+      livekit_service_url: https://matrix-rtc.example.com/livekit/jwt
 ```

 As a prerequisite for the
@@ -68,10 +84,10 @@ As a prerequisite for the
 make sure that your Synapse server has either a `federation` or `openid`
 [listener configured](https://element-hq.github.io/synapse/latest/usage/configuration/config_documentation.html#listeners).

-### MatrixRTC Backend
+### LiveKit backend

-In order to **guarantee smooth operation** of Element Call MatrixRTC backend is
-required for each site deployment.
+In order to **guarantee smooth operation** of Element Call, a dedicated LiveKit
+backend is required for each site deployment.

 ![MSC4195 compatible setup](MSC4195_setup.drawio.png)

@@ -86,10 +102,11 @@ to implement
 In the context of MatrixRTC, we suggest using a single hostname for backend
 communication by implementing endpoint routing within a reverse proxy setup. For
 the example above, this results in:
-| Service | Endpoint | Example |
-| -------- | ------- | ------- |
+
+| Service                                                                           | Endpoint       | Example                              |
+| --------------------------------------------------------------------------------- | -------------- | ------------------------------------ |
 | [Livekit SFU](https://github.com/livekit/livekit) WebSocket signalling connection | `/livekit/sfu` | `matrix-rtc.example.com/livekit/sfu` |
-| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service) | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |
+| [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)   | `/livekit/jwt` | `matrix-rtc.example.com/livekit/jwt` |

 Using Nginx, you can achieve this by:

@@ -126,43 +143,65 @@ server {
 }
 ```

-#### MatrixRTC backend announcement
+Or Using Caddy, you can achieve this by:

-> [!IMPORTANT]
-> As defined in
-> [MSC4143](https://github.com/matrix-org/matrix-spec-proposals/pull/4143)
-> MatrixRTC backend must be announced to the client via your **Matrix site's
-> `.well-known/matrix/client`** file (e.g.
-> `example.com/.well-known/matrix/client` matching the site deployment example
-> from above). The configuration is a list of Foci configs:
+```caddy configuration file
+# Route for lk-jwt-service with livekit/jwt prefix
+@jwt_service path /livekit/jwt/sfu/get /livekit/jwt/healthz
+handle @jwt_service {
+  uri strip_prefix /livekit/jwt
+  reverse_proxy http://[::1]:8080 {
+    header_up Host {host}
+    header_up X-Forwarded-Server {host}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
+  }
+}

-```json
-"org.matrix.msc4143.rtc_foci": [
-    {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc.example.com/livekit/jwt"
-    },
-    {
-        "type": "livekit",
-        "livekit_service_url": "https://matrix-rtc-2.example.com/livekit/jwt"
-    }
-]
+# Default route for livekit
+handle {
+  reverse_proxy http://localhost:7880 {
+    header_up Host {host}
+    header_up X-Forwarded-Server {host}
+    header_up X-Real-IP {remote_host}
+    header_up X-Forwarded-For {remote_host}
+  }
+}
 ```

-Make sure this file is served with the correct MIME type (`application/json`).
-Additionally, ensure the appropriate CORS headers are set to allow web clients
-to access it across origins. For more details, refer to the
-[Matrix Client-Server API: 2. Web Browser Clients](https://spec.matrix.org/latest/client-server-api/#web-browser-clients).
+Using Haproxy, you can achieve this by:

 ```
-Access-Control-Allow-Origin: *
-Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
-Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization
-```
+# Frontend
+    # Match /livekit/sfu/ path
+    acl is_sfu path_beg -i /livekit/sfu/
+    use_backend sfu_backend if is_sfu matrixrtc_domain

-> [!NOTE]  
-> Most `org.matrix.msc4143.rtc_foci` configurations will only have one entry in
-> the array
+    acl is_mxrtc_auth path_beg -i /sfu/get
+    use_backend mxrtc_auth_backend if is_mxrtc_auth matrixrtc_domain
+
+# Backend
+## LiveKit backend
+backend sfu_backend
+    server livekit 127.0.0.1:7880
+    http-request set-path %[path,regsub(^/livekit/sfu/,/)]
+    http-request set-header Host %[req.hdr(host)]
+    timeout server 120s
+    # WebSocket support
+    option forwardfor
+    option http-server-close
+    option http-buffer-request
+
+backend mxrtc_auth_backend
+    server sfu 127.0.0.1:8070
+    http-request set-header Host %[req.hdr(host)]
+    timeout server 120s
+    # WebSocket support
+    option forwardfor
+    option http-server-close
+    option http-buffer-request
+
+```

 ## Building Element Call

@@ -177,8 +216,8 @@ source. First, clone and install the package:
 git clone https://github.com/element-hq/element-call.git
 cd element-call
 corepack enable
-yarn
-yarn build
+pnpm install
+pnpm build
 ```

 If all went well, you can now find the build output under `dist` as a series of
@@ -214,10 +253,10 @@ server {
 There are currently two different config files. `.env` holds variables that are
 used at build time, while `public/config.json` holds variables that are used at
 runtime. Documentation and default values for `public/config.json` can be found
-in [ConfigOptions.ts](src/config/ConfigOptions.ts).
+in [ConfigOptions.ts](../src/config/ConfigOptions.ts).

 > [!CAUTION]
-> Please note configuring MatrixRTC backend via `config.json` of
+> Please note configuring LiveKit backend via `config.json` of
 > Element Call is only available for developing and debug purposes. Relying on
 > it might break Element Call going forward!

@@ -231,7 +270,7 @@ be able to handle those yet and it may behave unreliably.

 Therefore, to use a self-hosted homeserver, this is recommended to be a new
 server where any user account created has not joined any normal rooms anywhere
-in the Matrix federated network. The homeserver used can be setup to disable
+in the Matrix federated network. The homeserver used can be set up to disable
 federation, so as to prevent spam registrations (if you keep registrations open)
 and to ensure Element Call continues to work in case any user decides to log in
 to their Element Call account using the standard Element app and joins normal
@@ -257,6 +296,7 @@ self-hosters and developers working with Element Call.
 - [MatrixRTC with Synology Container Manager (Docker)](https://ztfr.de/matrixrtc-with-synology-container-manager-docker/)
 - [Encrypted & Scalable Video Calls: How to deploy an Element Call backend with Synapse Using Docker-Compose](https://willlewis.co.uk/blog/posts/deploy-element-call-backend-with-synapse-and-docker-compose/)
 - [Element Call einrichten: Verschlüsselte Videoanrufe mit Element X und Matrix Synapse](https://www.cleveradmin.de/blog/2025/04/matrixrtc-element-call-backend-einrichten/)
+- [MatrixRTC Back-End for Synapse with Docker Compose and Traefik](https://forge.avontech.net/kstro1/matrixrtc-docker-traefik/)

 ## 🛠️ Tools

@@ -4,7 +4,7 @@ There are two formats for Element Call URLs.

 ## Link for sharing

-Requires Element Call to be deployed in [standalone](./embedded-standalone.md) mode.
+Requires Element Call to be deployed in [standalone](./embedded_standalone.md) mode.

 ```text
 https://element_call.domain/room/#
@@ -12,7 +12,7 @@ https://element_call.domain/room/#
 ```

 The URL is split into two sections. The `https://element_call.domain/room/#`
-contains the app and the intend that the link brings you into a specific room
+contains the app and the intent that the link brings you into a specific room
 (`https://call.element.io/#` would be the homepage). The fragment is used for
 query parameters to make sure they never get sent to the element_call.domain
 server. Here we have the actual Matrix room ID and the password which are used
@@ -36,66 +36,66 @@ possible to support encryption.

 | Package                              | Deployment                    | URL                                                                           |
 | ------------------------------------ | ----------------------------- | ----------------------------------------------------------------------------- |
-| [Full](./embedded-standalone.md)     | All                           | `https://element_call.domain/room`                                            |
-| [Embedded](./embedded-standalone.md) | Remote URL                    | `https://element_call.domain/` n.b. no `/room` part                           |
-| [Embedded](./embedded-standalone.md) | Embedded within messenger app | Platform dependent, but you load the `index.html` file without a `/room` part |
+| [Full](./embedded_standalone.md)     | All                           | `https://element_call.domain/room`                                            |
+| [Embedded](./embedded_standalone.md) | Remote URL                    | `https://element_call.domain/` n.b. no `/room` part                           |
+| [Embedded](./embedded_standalone.md) | Embedded within messenger app | Platform dependent, but you load the `index.html` file without a `/room` part |

 ## Parameters

 ### Common Parameters

-These parameters are relevant to both [widget](./embedded-standalone.md) and [standalone](./embedded-standalone.md) modes:
+These parameters are relevant to both [widget](./embedded_standalone.md) and [standalone](./embedded_standalone.md) modes:

-| Name                                                    | Values                                                                                               | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `intent`                                                | `start_call`, `join_existing`, `start_call_dm`, `join_existing_dm.                                   | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
-| `allowIceFallback`                                      | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
-| `analyticsID` (deprecated: use `posthogUserId` instead) | Posthog analytics ID                                                                                 | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
-| `appPrompt`                                             | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config.                                                                                                                                                                                                                                                           |
-| `confineToRoom`                                         | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
-| `displayName`                                           |                                                                                                      | No                                                                                                | No                           | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
-| `enableE2EE` (deprecated)                               | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
-| `fontScale`                                             | A decimal number such as `0.9`                                                                       | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
-| `fonts`                                                 |                                                                                                      | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
-| `header`                                                | `none`, `standard` or `app_bar`                                                                      | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
-| `hideScreensharing`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
-| `homeserver`                                            |                                                                                                      | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
-| `lang`                                                  | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                 | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
-| `password`                                              |                                                                                                      | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
-| `perParticipantE2EE`                                    | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
-| `controlledAudioDevices`                                | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
-| `roomId`                                                | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                 | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
-| `showControls`                                          | `true` or `false`                                                                                    | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
-| `skipLobby` (deprecated: use `intent` instead)          | `true` or `false`                                                                                    | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
-| `theme`                                                 | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                 | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
-| `viaServers`                                            | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
-| `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
-| `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
-| `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
+| Name                                           | Values                                                                                                                                                             | Required for widget                                                                               | Required for SPA             | Description                                                                                                                                                                                                                                                                                                                                                                                         |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intent`                                       | `start_call`, `join_existing`, `start_call_voice`, `join_existing_voice`, `start_call_dm`, `join_existing_dm`, `start_call_dm_voice`, or `join_existing_dm_voice`. | No, defaults to `start_call`                                                                      | No, defaults to `start_call` | The intent is a special url parameter that defines the defaults for all the other parameters. In most cases it should be enough to only set the intent to setup element-call.                                                                                                                                                                                                                       |
+| `allowIceFallback`                             | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any.                                                                                                                                                                                                                                                                                                           |
+| `posthogUserId`                                | Posthog analytics ID                                                                                                                                               | No                                                                                                | No                           | Available only with user's consent for sharing telemetry in Element Web.                                                                                                                                                                                                                                                                                                                            |
+| `confineToRoom`                                | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Keeps the user confined to the current call/room.                                                                                                                                                                                                                                                                                                                                                   |
+| `displayName`                                  |                                                                                                                                                                    | No                                                                                                | No                           | Display name used for auto-registration.                                                                                                                                                                                                                                                                                                                                                            |
+| `enableE2EE` (deprecated)                      | `true` or `false`                                                                                                                                                  | No, defaults to `true`                                                                            | No, defaults to `true`       | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch.                                                                                                                                                                                                                                                                                                                      |
+| `fontScale`                                    | A decimal number such as `0.9`                                                                                                                                     | No, defaults to `1.0`                                                                             | No, defaults to `1.0`        | Factor by which to scale the interface's font size.                                                                                                                                                                                                                                                                                                                                                 |
+| `fonts`                                        |                                                                                                                                                                    | No                                                                                                | No                           | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`.                                                                                                                                                                                                                                                                            |
+| `header`                                       | `none`, `standard` or `app_bar`                                                                                                                                    | No, defaults to `standard`                                                                        | No, defaults to `standard`   | The style of headers to show. `standard` is the default arrangement, `none` hides the header entirely, and `app_bar` produces a header with a back button like you might see in mobile apps. The callback for the back button is `window.controls.onBackButtonPressed`.                                                                                                                             |
+| `hideScreensharing`                            | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Hides the screen-sharing button.                                                                                                                                                                                                                                                                                                                                                                    |
+| `homeserver`                                   |                                                                                                                                                                    | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
+| `lang`                                         | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                                                                               | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
+| `password`                                     |                                                                                                                                                                    | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
+| `perParticipantE2EE`                           | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
+| `controlledAudioDevices`                       | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
+| `roomId`                                       | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                                                                               | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
+| `showControls`                                 | `true` or `false`                                                                                                                                                  | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
+| `skipLobby` (deprecated: use `intent` instead) | `true` or `false`                                                                                                                                                  | No. If `intent` is explicitly `start_call` then defaults to `true`. Otherwise defaults to `false` | No, defaults to `false`      | Skips the lobby to join a call directly, can be combined with preload in widget. When `true` the audio and video inputs will be muted by default. (This means there currently is no way to start without muted video if one wants to skip the lobby. Also not in widget mode.)                                                                                                                      |
+| `theme`                                        | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                                                                               | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
+| `background`                                   | One of: `solid`, `gradient`                                                                                                                                        | No, defaults to `gradient`                                                                        | No, defaults to `gradient`   | Visual style of the page background.                                                                                                                                                                                                                                                                                                                                                                |
+| `viaServers`                                   | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name)                                                               | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
+| `sendNotificationType`                         | `ring` or `notification`                                                                                                                                           | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
+| `autoLeave`                                    | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
+| `waitForCallPickup`                            | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |

 ### Widget-only parameters

-These parameters are only supported in [widget](./embedded-standalone.md) mode.
+These parameters are only supported in [widget](./embedded_standalone.md) mode.

-| Name            | Values                                                                                    | Required                | Description                                                                                                                                                                                                                                                                                                                                        |
-| --------------- | ----------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `baseUrl`       |                                                                                           | Yes                     | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                           |
-| `deviceId`      | Matrix device ID                                                                          | Yes                     | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                          |
-| `parentUrl`     |                                                                                           | Yes                     | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself) |
-| `posthogUserId` | Posthog user identifier                                                                   | No                      | This replaces the `analyticsID` parameter                                                                                                                                                                                                                                                                                                          |
-| `preload`       | `true` or `false`                                                                         | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                            |
-| `returnToLobby` | `true` or `false`                                                                         | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                              |
-| `userId`        | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)      | Yes                     | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                |
-| `widgetId`      | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes                     | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`.                                                                                                                                        |
+| Name            | Values                                                                                    | Required                | Description                                                                                                                                                                                                                                                                                                                                                 |
+| --------------- | ----------------------------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `baseUrl`       |                                                                                           | Yes                     | The base URL of the homeserver to use for media lookups.                                                                                                                                                                                                                                                                                                    |
+| `deviceId`      | Matrix device ID                                                                          | Yes                     | The Matrix device ID for the widget host.                                                                                                                                                                                                                                                                                                                   |
+| `parentUrl`     |                                                                                           | Yes                     | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (In case the widget is not in an Iframe but in a dedicated webview, we send the postMessages in the same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself.) |
+| `posthogUserId` | Posthog user identifier                                                                   | No                      | This replaces the `analyticsID` parameter                                                                                                                                                                                                                                                                                                                   |
+| `preload`       | `true` or `false`                                                                         | No, defaults to `false` | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading.                                                                                                                                                                                                                                                     |
+| `returnToLobby` | `true` or `false`                                                                         | No, defaults to `false` | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms.                                                                                                                                                                                                                                       |
+| `userId`        | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers)      | Yes                     | The Matrix user ID.                                                                                                                                                                                                                                                                                                                                         |
+| `widgetId`      | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes                     | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`.                                                                                                                                                 |

 ### Embedded-only parameters

-These parameters are only supported in the [embedded](./embedded-standalone.md) package of Element Call and will be ignored in the [full](./embedded-standalone.md) package.
+These parameters are only supported in the [embedded](./embedded_standalone.md) package of Element Call and will be ignored in the [full](./embedded_standalone.md) package.

 | Name                 | Values                                                                     | Required | Description                                                                                                                        |
 | -------------------- | -------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
 | `posthogApiHost`     | Posthog server URL                                                         | No       | e.g. `https://posthog-element-call.element.io`. Only supported in embedded package. In full package the value from config is used. |
 | `posthogApiKey`      | Posthog project API key                                                    | No       | Only supported in embedded package. In full package the value from config is used.                                                 |
-| `rageshakeSubmitUrl` | Rageshake server URL endpoint                                              | No       | e.g. `https://element.io/bugreports/submit`. In full package the value from config is used.                                        |
+| `rageshakeSubmitUrl` | Rageshake server URL endpoint                                              | No       | e.g. `https://rageshakes.element.io/api/submit`. In full package the value from config is used.                                    |
 | `sentryDsn`          | Sentry [DSN](https://docs.sentry.io/concepts/key-terms/dsn-explainer/)     | No       | In full package the value from config is used.                                                                                     |
 | `sentryEnvironment`  | Sentry [environment](https://docs.sentry.io/concepts/key-terms/key-terms/) | No       | In full package the value from config is used.                                                                                     |
@@ -0,0 +1,977 @@
+# Element Call oxidation plan
+
+Move Element Call's MatrixRTC participation logic off `matrix-js-sdk`'s
+`MatrixRTCSession` and onto the Rust `matrix-rtc` crate
+(`~/Projects/matrix-rust-rtc/MatrixSdkArchitectureDraft`), consumed through its
+uniffi wasm bindings. The Element Call **component** then depends on one
+host-supplied object, a `MatrixDriver`, and never on a `MatrixClient`. The
+standalone app and the widget become hosts like any other: they build a
+`MatrixDriver` from their `matrix-js-sdk` client and hand it to the component.
+
+Revision 2 — incorporates the independent review (§10 lists what changed and
+the assumptions taken where only the user can decide).
+
+Status legend: ☐ todo · ◐ in progress · ☑ done.
+
+**Where things stand (2026-09-14):** S0a, S0b, S1a, S1b and S2 are
+implemented and green (`pnpm lint`, `pnpm format:check`, `pnpm test:unit`:
+101 files / 785 tests). Nothing is committed yet, in either repository: the
+crate changes C2–C12 (C1 reverted in favour of slot opening) are done; C2–C8,
+C11 and C12 are committed in the draft repo as `a8e21b3`, C5 (final form), C9
+and C10 are still uncommitted there. In Element Call everything sits
+uncommitted in
+`~/Projects/matrix-rust-rtc/MatrixSdkArchitectureDraft`, and Element Call's
+branch `toger5/oxidation` holds the vendored bindings, the driver layer
+(`src/driver/**`), the participation layer (`src/state/rtc/**`) and the
+config/lint changes. S3a is the next slice; its design is in §6 and the
+files it touches are listed there.
+
+---
+
+## 1. Goals and non-goals
+
+**Goals**
+
+1. `ElementCall` (component) takes `driver: MatrixDriver` instead of
+   `client: MatrixClient`. Nothing rendered under `CallView` imports
+   `MatrixClient`, `Room`, `RoomMember`, `MatrixEvent` or
+   `matrix-js-sdk/lib/matrixrtc`.
+2. All MatrixRTC participation logic (session projection, own membership
+   join/leave/keep-alive, transport tokens, media key exchange) comes from the
+   crate's `FfiParticipationManager`. Element Call keeps only what the crate
+   deliberately leaves to the host: the LiveKit media plane, tiles, room
+   metadata, reactions, notifications, UI.
+3. The standalone SPA, widget mode and `sdk/main.ts` construct a
+   `JsSdkMatrixDriver` (a port of the draft's `web-test-app/src/jsSdkDriver.ts`
+   that also works on js-sdk's `RoomWidgetClient`, extended with what Element
+   Call needs beyond RTC) and stop using `client.matrixRTC`.
+4. Every existing gate stays green: `pnpm lint` (tsc, oxlint, knip, component
+   externals), `pnpm format:check`, `pnpm test` (unit + storybook),
+   `pnpm i18n:check`, all four builds, Playwright (standalone, widget,
+   component).
+
+**Non-goals**
+
+- Replacing `matrix-js-sdk` in the standalone shell (login, registration, room
+  creation, home page, crypto bootstrap). The shell keeps its client and wraps
+  it. `src/home/useGroupCallRooms.ts` stays on `client.matrixRTC` for now.
+- Removing `matrix-js-sdk/lib/logger`. It is isolated behind
+  `src/utils/logger.ts` (S6) so a later swap is one line.
+- Writing a matrix-rust-sdk-backed driver (Element X). The interface is shaped
+  so one can be written; none is written here.
+- Publishing the crate as an npm package: done upstream (`@element-hq/matrix-rtc`,
+  built and published by `npm-web-bindings.yml` in matrix-rust-rtc; consumed
+  here since 2026-09-16, §5.1).
+- Turning on MSC4153 (cross-signed sender) enforcement. Parity first (§5.8).
+
+---
+
+## 2. Where the code is today (inventory)
+
+Entry: `component/index.tsx` → `src/room/CallView.tsx` → `LobbyView` |
+`ActiveCall` (`src/room/InCallView.tsx`) | `CallEndedView`. `ActiveCall`
+builds the view model with
+`createCallViewModel$(scope, rtcSession, matrixRoom, mediaDevices, muteStates, options, raisedHands$, reactions$, trackProcessorState$)`.
+
+| Concern                          | Files                                                                                                                                                                                                                                              | js-sdk surface used                                                                                                                                                                                            |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Session memberships              | `src/state/SessionBehaviors.ts`, `src/useMatrixRTCSessionMemberships.ts`                                                                                                                                                                           | `rtcSession.memberships`, `MembershipsChanged`, `membership.getTransport`, `isKeyRotationSuppressed`                                                                                                           |
+| Own membership                   | `localMember/LocalMember.ts` (`enterRTCSession`), `localMember/HomeserverConnected.ts`                                                                                                                                                             | `joinRTCSession`, `leaveRoomSession(1000)`, `updateCallIntent`, `MembershipManagerEvent.*`, `ClientEvent.Sync`; delegation probe at `LocalMember.ts:298-313`, delegation through the JWT service at `:731-756` |
+| SFU / JWT                        | `src/livekit/openIDSFU.ts`, `localMember/LocalTransport.ts`, `localMember/RtcTransportAutoDiscovery.ts`, `remoteMembers/Connection.ts`, `ConnectionFactory.ts`, `ConnectionManager.ts`                                                             | `getOpenIdToken`, `_unstable_getRTCTransports`, `POST /get_token` (+ `delay_id`, `delay_timeout`, `delay_cs_api_url`), legacy `/sfu/get`                                                                       |
+| Remote member ↔ LiveKit identity | `remoteMembers/MatrixLivekitMembers.ts`                                                                                                                                                                                                            | `rtcBackendIdentity`, `userId`, `deviceId`, `memberId`                                                                                                                                                         |
+| E2EE media keys                  | `src/e2ee/matrixKeyProvider.ts`, `src/e2ee/sharedKeyManagement.ts`                                                                                                                                                                                 | `EncryptionKeyChanged`, `reemitEncryptionKeys`, `room.hasEncryptionStateEvent`                                                                                                                                 |
+| Room metadata                    | `remoteMembers/MatrixMemberMetadata.ts`, `src/utils/displayname.ts`, `src/room/useRoomName.ts`, `useRoomState.ts`, `useRoomAvatar.ts`, `useJoinRule.ts`, `InviteModal.tsx`, `CallView.tsx`                                                         | `getMembersWithMembership`, `RoomStateEvent.Members`, `room.name`, `getMxcAvatarUrl`, `getJoinRule`, `getCanonicalAlias`                                                                                       |
+| Own profile / avatars            | `src/profile/useProfile.ts`, `src/Avatar.tsx`                                                                                                                                                                                                      | `getUser`, `UserEvent.*`, `setDisplayName`, `setAvatarUrl`, `uploadContent`, `mxcUrlToHttp`, `getAccessToken`                                                                                                  |
+| Reactions / hand raise           | `src/reactions/ReactionsReader.ts`, `useReactionsSender.tsx`, `src/reactions/index.ts`                                                                                                                                                             | `RoomEvent.Timeline/Redaction/LocalEchoUpdated`, `MatrixEventEvent.Decrypted`, `relations.getChildEventsForEvent`, `sendEvent`, `redactEvent`, membership `eventId`, `RelationType`                            |
+| Call notifications               | `CallViewModel/CallNotificationLifecycle.ts`                                                                                                                                                                                                       | `DidSendCallNotification`, `RoomEvent.Timeline` + `EventType.RTCDecline`                                                                                                                                       |
+| Rageshake / dev settings         | `src/settings/submit-rageshake.ts`, `rageshake.ts`, `FeedbackSettingsTab.tsx`, `DeveloperSettingsTab.tsx`                                                                                                                                          | `getCrypto`, `sendEvent(org.matrix.rageshake_request)`, `ClientEvent.Event`, `secureRandomString`, `doesServerSupportUnstableFeature`, `getSFUConfigWithOpenID`                                                |
+| Analytics                        | `src/analytics/PosthogEvents.ts`, `PosthogAnalytics.ts`                                                                                                                                                                                            | `rtcSession.statistics`, account data                                                                                                                                                                          |
+| Types only                       | `src/UrlParams.ts`, `src/state/MediaDevices.ts`, `AndroidControlledAudioOutput.ts`, `IOSControlledAudioOutput.ts`, `initialMuteState.ts`, `state/media/RingingMediaViewModel.ts` (`RTCCallIntent`), `src/useEvents.ts` (`TypedEventEmitter` types) | replaced by a local `CallIntent` type / kept as generic emitter typing                                                                                                                                         |
+| Runtime misc                     | `src/useLocalStorage.ts` (`TypedEventEmitter`), `src/room/GroupCallErrorBoundary.tsx` (`MatrixError`), `src/room/KnockLobbyView.tsx` (shell)                                                                                                       | see S6                                                                                                                                                                                                         |
+| Context                          | `src/ClientContext.tsx`                                                                                                                                                                                                                            | `useClient`/`useClientState` used by `Avatar`, `sharedKeyManagement`, `useReactionsSender`, `submit-rageshake`                                                                                                 |
+
+Hosts: `component/index.tsx:291`, `src/room/useLoadGroupCall.ts:335`,
+`sdk/main.ts:128` (own `MatrixRTCSessionManager`; waits on
+`MatrixRTCSessionEvent.JoinStateChanged` at `:292`). Test kit:
+`src/utils/test.ts` (`MockRTCSession`, `mockRtcMembership`, `mockMatrixRoom`),
+`src/utils/test-viewmodel.ts`, `CallViewModelTestUtils.ts`. Baseline on
+`main` (fe911628): tsc green, 97 unit files / 757 tests green.
+
+Component build: `vite-component.config.ts` (single string `fileName`,
+externals list with 18 `matrix-js-sdk/lib/*` subpaths), `pnpm lint:externals`,
+`component/package.json` (`matrix-js-sdk: "*"` peer, `exports` without a
+wildcard).
+
+---
+
+## 3. What the crate gives us, what it does not, and what must change in it
+
+Verified against `src/uniffi_api/mod.rs`, `src/participation/mod.rs`,
+`src/session/state.rs`, `src/own_membership/machine.rs`,
+`src/encryption/matrix_encryption_event.rs` and the generated
+`web-test-app/src/generated/matrix_rtc.ts` (acceptance suites: 32 pass).
+
+**Provided** (`FfiParticipationManager`, one per `(room, slot)`, any number
+share one `FfiMatrixDriver`):
+
+- `join(FfiTransportIntent, FfiJoinParams)` / `leave(code?, reason?)`; a
+  `Publish` intent with a bare LiveKit transport triggers discovery through
+  `driver.getRtcTransports()` (`connections/mod.rs:470-499`); a driver _error_
+  there is `NoTransport`, not a fallback.
+- `memberships()` + listener: `FfiMembership { member { memberId, userId,
+deviceId, displayName?, avatarUrl?, intent?, applicationType?,
+publishedTransports, canSubscribe }, state: Joined | LeftWithKeys,
+connections: serviceUrl[] (the FFI doc comment saying ws urls is wrong),
+transportIdentity?, mediaKey? }`. `transportIdentity` is today's
+  `rtcBackendIdentity`. `LeftWithKeys` entries have empty `connections`.
+- `connections()` + listener: `{ connection { serviceUrl, wsUrl, jwtToken,
+expiresAtTs }, members }[]`; tokens re-minted a minute before `exp`.
+- `keyMap()` + `setKeyMapListener(map, change)`: `FfiMediaKey { memberId, key:
+ArrayBuffer, index, creationTsMs: bigint }`, inbound keys **and our own**
+  (`encryption/inbound.rs:251-257`).
+- `status()` + listener: `Disconnected{cause} | Joining | Connected{keepAlive,
+membership, roster, encryption, impairments} | Leaving`.
+- `session()`, `ownMemberId()` (available as soon as `join()` starts),
+  `ownMembership()`, `connectionProblems()`, `debugSnapshot()`.
+- Member display names and avatars, from the room's `m.room.member` state
+  (C8): the session keeps them current, so a rename is a memberships change.
+- Slots are required: once the seed has read slot state, a slot with no event
+  is closed, so a room without an `m.rtc.slot` has no call, in every dialect.
+  `openSlot(application, encrypted)` / `closeSlot()` send the state event;
+  the slot id `m.call#ROOM` matches js-sdk's default.
+- `FfiElementCallCompat.{Off, StateEvents}`: spec MSC4143, or MSC3401 state
+  events for the clients that predate sticky events (C9 removed the never
+  deployed 2025 sticky dialect).
+- All `u64` fields are `bigint` in TypeScript; `Vec<u8>` is `ArrayBuffer`.
+- Listener callbacks arrive one timer tick after the emitting call (pumps
+  sleep through `setTimeout`, `executor.rs:86`); getters are fresh.
+
+**Not provided — Element Call keeps it, through the driver** (§4.1 slices):
+
+| Need                                                                           | Why not in the crate                                 | Where it goes                                                                                                                            |
+| ------------------------------------------------------------------------------ | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Room name, alias, avatar, join rule, encryption flag                           | room metadata                                        | `RoomDriver.getRoomInfo`                                                                                                                 |
+| Profiles of room members who are not in the call (ringing, name-tag threshold) | not RTC                                              | `RoomDriver.subscribeRoomMembers`                                                                                                        |
+| Reactions, hand raise, `org.matrix.rageshake_request`                          | application events                                   | `TimelineDriver`                                                                                                                         |
+| MSC4075 notification + decline                                                 | out of scope (only `wire_event_type` knows the type) | `TimelineDriver.sendRoomEvent`, decided in `CallNotificationLifecycle` (§4.3)                                                            |
+| Own profile read/write                                                         | not RTC                                              | `ProfileDriver`                                                                                                                          |
+| `mxc://` thumbnails with auth                                                  | not RTC                                              | `MediaDriver.thumbnailUrl`                                                                                                               |
+| Homeserver sync connectivity                                                   | needed by the crate too                              | `RtcMatrixDriver` (`isHomeserverConnected`, `subscribeConnectivity`, C12); reaches Element Call as `HomeserverUnreachable` in the status |
+| Sticky-events support probe                                                    | capability probe                                     | `MatrixDriver.getMatrixClientFeatures()`                                                                                                 |
+
+**Must change in the crate (S0a) — each blocks a later slice:**
+
+| #   | Problem                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Change                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| C1  | A successful `read_state("m.rtc.slot")` returning `[]` marks slot state supplied and every slot other than the legacy `""` resolves `Closed` (`session/state.rs`); `join()` then fails with `SlotClosed` and every MSC4143 peer is excluded. Element Call never sent `m.rtc.slot`.                                                                                                                                                                      | **Kept as the crate has it: no slot means no call.** Element Call opens the slot when nobody has (`RtcParticipationManager.join` with a `SlotPolicy`: `openSlot("m.call", encrypted)`, then wait for the echo), which needs the power level to send `org.matrix.msc4143.rtc.slot`; without it the join fails with `NoOpenSlotError`. Existing rooms keep working because the first call in a room opens its slot. A compat-mode relaxation was tried and reverted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| C2  | `manage_media_keys`, `require_cross_signed_sender`, `use_key_delay_ms` are not settable over the FFI; defaults are `true`, `true`, 1000 ms.                                                                                                                                                                                                                                                                                                             | New record `FfiParticipationConfig { compat, manage_media_keys, require_cross_signed_sender, use_key_delay_ms }` as the constructor argument (replaces the bare `compat`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| C3  | `StickyEvents` compat sent keys as `org.matrix.msc4143.rtc.encryption_key` while deployed clients read only `io.element.call.encryption_keys`.                                                                                                                                                                                                                                                                                                          | Made moot by C9 and reverted with it: the sticky dialect goes away entirely, so `Off` sends the spec key message and `StateEvents` the legacy one, with no middle case.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| C4  | `FfiMember` has no membership `event_id`; reactions relate to it (§4.3).                                                                                                                                                                                                                                                                                                                                                                                | `Member.event_id: Option<String>` threaded through `session/dispatch.rs` → `convert/*` → `state.rs` (currently dropped at `state.rs:402`) → `FfiMember.event_id`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| C5  | **Done.** Delegating the delayed leave (MSC4195) is split between the crate and the host: the draft's driver method makes the _adapter_ perform the whole delegation, its demo adapter calls a homeserver endpoint that 401s on a widget client, and Element Call today does it differently (probe, then the authorisation service's `get_token` with `delay_id`/`delay_timeout`/`delay_cs_api_url`). Nothing of this exists in the real `crates/` yet. | **The crate owns the policy; the driver keeps two primitives.** (a) `delegate_delayed_leave_via_homeserver(room, slot, member, delay_id)`: one authenticated POST to the CS API endpoint (`/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave`, the spelling Element Call probes today; a widget client answers `Unsupported`). (b) `LivekitTokenRequest.delegation: Option<{ delay_id, delay_timeout_ms }>`: the adapter appends `delay_id`, `delay_timeout` and `delay_cs_api_url` (its own homeserver URL) to the `get_token` / `sfu/get` body it already sends. The own-membership machine tries (a) first and, on `Unsupported` or any failure, (b) against the transport we publish on, i.e. Element Call's OpenID → JWT → scheduled-event path; only if both fail does it keep restarting the switch itself. **Arm-after-confirm:** the short delayed leave stays armed through the join; delegation arms a second, ≥ 1 h delayed leave, delegates _that_, and cancels the short one on success (or the long one on failure), so no moment is left without an armed leave and a failed delegation costs nothing. `KeepAlive::Delegated` says which route succeeded. The interim C5 (service URL and delay on the request) and Element Call's driver-side probe and JWT delegation are replaced by this. **Real-backend check (2026-09-15):** both routes send the MSC4195 `member` _claims_ (`{ id, claimed_user_id, claimed_device_id }`), not the member block of the event. The homeserver route body is what lk-jwt-service 0.7 accepts behind a Synapse that proxies `rtc/livekit/*` to it (MSC4512, `backend/app-service.yaml`): `{ url, room_id, slot_id, member, delay_id, delay_timeout }`, where `url` is the SFU websocket URL the transport's token named (the service checks it is its own). The transport resolver therefore returns `ResolvedTransport { transport, sfu_url }` and the machine carries the url into `Action::DelegateViaHomeserver`; without an SFU url it goes straight to the service route, and a receive-only member (no transport) delegates nothing. Verified end to end against `pnpm backend`: the homeserver route takes the 1 h leave (`KeepAlive::Delegated { via: Homeserver }`, one delayed event of 3 600 000 ms on the server). |
+| C6  | The transport identity is a pure function (`connections/mod.rs:116-135`) but not exported; the own identity is needed before our membership echo to set our own media key.                                                                                                                                                                                                                                                                              | Export `FfiParticipationManager.own_transport_identity(): Option<String>`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| C7  | Doc comment on `FfiMembership.connections` says `ws_url`s.                                                                                                                                                                                                                                                                                                                                                                                              | Fix the comment.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| C8  | Both converters set `display_name` / `avatar_url` to `None`, so every host would re-derive them from room members.                                                                                                                                                                                                                                                                                                                                      | The session records each `m.room.member` profile (whether or not the roster condition is enforced) and stamps it on members at projection time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| C9  | `ElementCallCompat::StickyEvents` models the 2025 Element Call sticky dialect (`member: {user_id, device_id, id}`, flat `rtc_transports`, `versions`, legacy key message). No deployment uses it: sticky-event calls have not shipped.                                                                                                                                                                                                                  | **Done.** Removed: `own_membership/compat_2025.rs`, the 2025 block in `session/convert/msc4143.rs` and its dispatch arm, the `StickyEvents` variants of `ElementCallCompat` / `FfiElementCallCompat`, and their tests and acceptance tests; `outbound_event_type` / `build_content` keep two arms (`Off`, `StateEvents`). Element Call then maps `Matrix_2_0 → Off`: spec MSC4143 sticky events with slots (which Element Call opens, C1) and the spec key message.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| C10 | `MediaKeyState` has `holds_our_key`, `have_their_key` and `rejection`, so a tile learns about an unsigned sender only when `require_cross_signed_sender` is on (the key is discarded, `rejection: NotCrossSigned`). With the check off the verdict is dropped on accept and the tile cannot show an unverified sender.                                                                                                                                  | **Done.** The inbound key store keeps the MSC4153 verdict of the accepted key per member and exposes it as `FfiMediaKeyState.sender_cross_signed: Option<bool>` (`None` when the host could not tell). Element Call runs with the check off (§5.8) and wants to show the state on the tile until it is turned on.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| C11 | No way to change `application["m.call.intent"]` while joined; Element Call flips it between `audio` and `video` when the camera is toggled (`updateCallIntent`).                                                                                                                                                                                                                                                                                        | `update_application(intent)` on the own-membership manager, facade and FFI: while connected the membership is re-published at once on the refresh path (a failure retries like a refresh); during a join the join event carries it; refused with `NotJoined` otherwise.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| C12 | Homeserver connectivity lived only in Element Call's driver; the crate could not tell a dead homeserver from a quiet one, and a participation's status said nothing about it.                                                                                                                                                                                                                                                                           | **Done.** `ConnectivityDriver` (`is_homeserver_connected`, `subscribe_connectivity`) joins the `MatrixDriver` sum; the FFI adds `ConnectivitySink`, the two callback methods and `FfiParticipationManager.is_homeserver_connected()`; the facade pump consumes the stream and reports `Impairment::HomeserverUnreachable { since_ts }` (Critical, sorted first) in every non-disconnected status until the driver reports the homeserver back. The web-test-app mock and js-sdk driver implement it. A matrix-rust-sdk adapter implements the same two methods later.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| C13 | `session()` moved (seed done, slot opened by somebody else) without any listener firing, so a host's `session$` stayed stale until a membership or status change happened to refresh it. Found by the real-backend check.                                                                                                                                                                                                                               | **Done.** `SessionListener` / `set_session_listener` on the FFI manager (`on_session_change` on the facade), fired publish-on-change from `refresh_outputs`; `RtcParticipationManager.session$` is fed from it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| C14 | The crate logs through the `log` facade (104 call sites) but installed no logger, so in wasm every line was dropped: seeding, joins, delegation fallbacks and key rotation left no trace in a rageshake.                                                                                                                                                                                                                                                | **Done (2026-09-16).** `LogSink` foreign trait (`log(level, target, message)`), `FfiLogLevel`, and `set_log_sink(sink, max_level)`, which installs a `log::Log` forwarding to the sink (a host that already installed a Rust logger keeps it). Element Call installs `matrixRtcLogSink` under `[matrix-rtc]` on the js-sdk root logger from `initMatrixRtcSdk()` at debug; the web-test-app installs a console sink (warn in tests).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+
+No crate work is deferred: `update_application` is C11.
+
+---
+
+## 4. Target architecture
+
+```text
+host (SPA · widget · sdk · a third-party page)
+  ├─ RtcMatrixDriver             = the crate's MatrixDriverCallback, verbatim
+  │                                (events, to-device, tokens, sinks, connectivity)
+  └─ ElementCallMatrixClientDriver = RoomDriver + TimelineDriver + ProfileDriver
+                                     + MediaDriver + capabilities
+        │
+        ▼  component/index.tsx  <ElementCall rtcDriver clientDriver …/>
+  ┌─ MatrixDriverProvider (src/driver/MatrixDriverContext.tsx) ─────────────┐
+  │  CallView owns one RtcParticipationManager for lobby → call → ended               │
+  │  RtcParticipationManager (src/state/rtc/RtcParticipationManager.ts)                          │
+  │    FfiMatrixDriver(driver) → FfiParticipationManager(room, slot, me, cfg)│
+  │    memberships$ · connections$ · keyChanges$ · status$ · session$        │
+  │    ownMemberId$ · ownMembership$ · ownTransportIdentity$                 │
+  │    join(intent, params) · leave(reason)                                  │
+  │        │                                                                 │
+  │        ▼                                                                 │
+  │  createCallViewModel$(scope, callParticipation, roomInfo, mediaDevices, …)   │
+  │    ConnectionManager  ← connections$ (wsUrl + jwt; no OpenID in EC)      │
+  │    RemoteMembers      ← memberships$ (transportIdentity ↔ LK participant)│
+  │    MatrixKeyProvider  ← keyChanges$ (memberId → transportIdentity)        │
+  │    LocalMember        ← status$, ownMembership; join/leave → participation│
+  │    MemberMetadata     ← driver.room members                              │
+  │    Notifications      ← driver.timeline + memberships$                   │
+  │  React: Lobby / InCall / Settings / Avatar / Reactions                   │
+  │    read the driver via useMatrixDriver(), never a client                 │
+  └──────────────────────────────────────────────────────────────────────────┘
+```
+
+### 4.1 The two drivers (host-facing, framework-neutral)
+
+Two files, two objects. `src/driver/RtcMatrixDriver.ts` is one line: the
+crate's `MatrixDriverCallback`, re-exported. Everything MatrixRTC, including
+homeserver connectivity (C12), goes through it and is consumed by the crate.
+`src/driver/ElementCallMatrixClientDriver.ts` is what a call needs beyond
+MatrixRTC. Plain TypeScript: async methods and
+`subscribeX(listener) → unsubscribe` pairs, mirroring the crate's sink style.
+No RxJS crosses this boundary; Element Call wraps subscriptions into
+`Behavior`s internally (`src/driver/observe.ts`).
+
+```ts
+export interface ElementCallMatrixClientDriver
+  extends RoomDriver, TimelineDriver, ProfileDriver, MediaDriver {
+  readonly userId: string;
+  readonly deviceId: string;
+  /** The room this driver is bound to (one driver per room, as in the crate). */
+  readonly roomId: string;
+  getMatrixClientFeatures(): Promise<MatrixClientFeatures>;
+  /** Free-form diagnostics for rageshakes (crypto version, sync state, …). */
+  getDiagnostics?(): Promise<Record<string, string>>;
+}
+export interface MatrixClientFeatures {
+  stickyEvents: boolean;
+  /** The host's events carry decryption metadata (false on a widget client). */
+  verifiedEventOrigins: boolean;
+  /** The host can evaluate MSC4153 cross-signing of senders. */
+  crossSigningVerdicts: boolean;
+}
+
+// src/driver/RtcMatrixDriver.ts
+export type RtcMatrixDriver = MatrixDriverCallback;
+
+export interface RoomInfo {
+  name: string;
+  canonicalAlias: string | null;
+  avatarUrl: string | null;
+  joinRule: string | null;
+  encrypted: boolean;
+}
+export interface RoomMemberProfile {
+  userId: string;
+  displayName: string | null;
+  avatarUrl: string | null;
+  membership: "join" | "invite";
+}
+export interface RoomDriver {
+  getRoomInfo(): RoomInfo;
+  subscribeRoomInfo(listener: (info: RoomInfo) => void): () => void;
+  getRoomMembers(): RoomMemberProfile[];
+  subscribeRoomMembers(
+    listener: (members: RoomMemberProfile[]) => void,
+  ): () => void;
+}
+
+export interface TimelineEvent {
+  eventId: string;
+  type: string;
+  sender: string;
+  content: Record<string, unknown>;
+  originServerTs: number;
+  redacts?: string;
+}
+export interface TimelineDriver {
+  sendRoomEvent(
+    eventType: string,
+    content: unknown,
+  ): Promise<{ eventId: string }>;
+  redactEvent(eventId: string): Promise<void>;
+  /** Decrypted live room events (not sticky), incl. redactions; no local echoes. */
+  subscribeTimeline(listener: (event: TimelineEvent) => void): () => void;
+  /** Events already known that relate to `eventId` (hand-raise catch-up). */
+  getRelatedEvents(
+    eventId: string,
+    relType: string,
+    eventType: string,
+  ): TimelineEvent[];
+}
+
+export interface OwnProfile {
+  displayName: string | null;
+  avatarUrl: string | null;
+}
+export interface ProfileDriver {
+  getOwnProfile(): OwnProfile;
+  subscribeOwnProfile(listener: (profile: OwnProfile) => void): () => void;
+  /** Absent when the host does not allow profile changes. */
+  setDisplayName?(name: string): Promise<void>;
+  setAvatar?(file: Blob): Promise<void>;
+}
+
+export interface MediaDriver {
+  /** An `<img>`-usable URL for an mxc thumbnail (may be a blob: URL), or null. */
+  thumbnailUrl(
+    mxcUrl: string,
+    width: number,
+    height: number,
+    resizeMethod: "crop" | "scale",
+  ): Promise<string | null>;
+}
+```
+
+The client driver is a union of capability slices, the way the crate splits
+its own driver; the RTC driver is the crate's contract untouched, so a host
+with a crate-side adapter (matrix-rust-sdk) implements nothing extra for
+MatrixRTC.
+
+### 4.2 `RtcParticipationManager` (Element Call's RxJS view of the manager)
+
+Naming: _participation_ is the crate's FFI concept (`FfiParticipationManager`,
+`FfiParticipationConfig`); `RtcParticipationManager` is Element Call's RxJS wrapper
+over it.
+
+`src/state/rtc/RtcParticipationManager.ts`, a class taking the scope in its constructor:
+
+```ts
+new RtcParticipationManager(scope, driver, {
+  slotId: "m.call#ROOM", compat, manageMediaKeys, requireCrossSignedSender,
+  useKeyDelayMs, transportFallbackUrl?, logger })
+  memberships$: Behavior<Epoch<FfiMembership[]>>   // Joined only; LeftWithKeys filtered (v1)
+  connections$: Behavior<FfiConnectionWithMembers[]>
+  keyChanges$:  Observable<FfiMediaKey>             // one changed key per emission
+  keyMap$:      Behavior<FfiMediaKey[]>
+  status$:      Behavior<FfiStatus>
+  session$:     Behavior<FfiSessionSnapshot>
+  ownMemberId$: Behavior<string | null>
+  ownTransportIdentity$: Behavior<string | null>
+  ownMembership$: Behavior<FfiMembership | null>
+  join(intent: FfiTransportIntent, params: FfiJoinParams): Promise<void>
+  leave(code?: string, reason?: string): Promise<void>
+```
+
+- Wraps `new FfiMatrixDriver(driver)` and `new FfiParticipationManager(...)`;
+  `uniffiDestroy()` on scope end (leave first unless `Disconnected`).
+- `transportFallbackUrl` decorates `getRtcTransports`: when the host's call
+  **throws or returns no LiveKit transport**, answer with
+  `Config.get().livekit.livekit_service_url` (today's precedence,
+  `RtcTransportAutoDiscovery.ts:72-94`).
+- Lives at `CallView` level (the lobby reads memberships for the participant
+  count, auto-mute threshold and notification decision, `CallView.tsx:164-413`;
+  `useReactionsSender` needs the own membership). `join()` after `leave()` on
+  one manager is supported and mints a fresh member id.
+- Behaviors are seeded from the getters and updated by the listeners.
+
+### 4.3 `createCallViewModel$` after the change
+
+```ts
+createCallViewModel$(
+  scope,
+  participation,
+  roomInfo,
+  mediaDevices,
+  muteStates,
+  options,
+  handsRaised$,
+  reactions$,
+  trackProcessorState$,
+);
+// roomInfo: { roomId, userId, deviceId, members$: Behavior<RoomMemberProfile[]>,
+//             homeserverConnected$: Behavior<boolean>, timeline: TimelineDriver }
+```
+
+| Today                                                               | After                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `createMemberships$(scope, rtcSession)`                             | `callParticipation.memberships$`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `membershipsAndTransports$` (`getTransport(oldest)`)                | `membership.connections[]` (service urls)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `createLocalTransport$` + `RtcTransportAutoDiscovery` + `openIDSFU` | deleted; `join(Publish(custom url or bare))`; own transport = `ownMembership.member.publishedTransports[0]`                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `Connection.start()` fetching a JWT                                 | `Connection` takes `{ wsUrl, jwt, expiresAtTs }` from `connections$`, keyed by `serviceUrl`, holds `token$`; a refreshed token is used on the next full (re)connect; `expiresAtTs` logged on connect; `livekitAlias` decoded from the JWT stays                                                                                                                                                                                                                                                                                                                             |
+| `createRemoteMatrixLivekitMembers$` on `rtcBackendIdentity`         | matches `membership.transportIdentity`; key = `member.memberId`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `MatrixKeyProvider.setRTCSession`                                   | `MatrixKeyProvider.attach(participation)`: `keyChanges$` × `memberships$` × `ownTransportIdentity$` → `onSetEncryptionKey(material, identity, index)`; keys whose member has no identity yet are held per member id and replayed                                                                                                                                                                                                                                                                                                                                            |
+| `enterRTCSession` (`joinRTCSession(...)`)                           | `callParticipation.join(intent, joinParamsFromConfig(...), { encrypted: roomInfo.encrypted, canOpen: roomInfo.canOpenSlot })` in the same `scope.reconcile`: opens the room's slot first when none is open (power level permitting, otherwise `NoOpenSlotError`), then joins; cleanup calls `callParticipation.leave()`                                                                                                                                                                                                                                                     |
+| `createHomeserverConnected$`                                        | `status$` alone: `Impairment::HomeserverUnreachable` (C12) = disconnected; `Connected` with `keepAlive` `Armed`/`Delegated`/`Unavailable` = connected; `RestartFailing`/`Expired` = reconnecting (**behaviour change**: local media pauses in that window, today it does not). Outside a participation, `RtcParticipationManager.homeserverConnected$` from the manager's getter                                                                                                                                                                                            |
+| `delayId$` + JWT-service delegation                                 | gone from Element Call. `FfiJoinParams.delegateDelayedLeave` is always `true`; the crate tries the CS API, then the authorisation service's token endpoint (with `delay_id`, `delay_timeout`, `delay_cs_api_url`), then falls back to its own restarts (C5). `config.matrix_rtc_session.delegated_delayed_leave.delay_ms` becomes `FfiJoinParams.delegatedDelayMs` (default 1 h)                                                                                                                                                                                            |
+| `createMatrixMemberMetadata$(scope, matrixRoom)`                    | tiles read `member.displayName` / `avatarUrl` from the crate; disambiguation runs over the call's members; `roomInfo.members$` remains only for the ringing name and the name-tag threshold                                                                                                                                                                                                                                                                                                                                                                                 |
+| `createSentCallNotification$` / `createReceivedDecline$`            | `CallNotificationLifecycle`: after **our own membership echo** (`ownMembership$` non-null) and when no other member was in the session before our join, send `m.rtc.notification` (wire `org.matrix.msc4075.rtc.notification`) via `driver.sendRoomEvent` with the fields js-sdk sends today (`m.mentions`, `notification_type`, `sender_ts`, `lifetime` 90 s, `m.call.intent`, `m.relates_to: m.reference → own membership event id`, `MatrixRTCSession.ts:725-756`); decline from `driver.subscribeTimeline` on both `org.matrix.msc4310.rtc.decline` and `m.rtc.decline` |
+| `updateCallIntent` on camera toggle                                 | `callParticipation.updateApplication(videoEnabled ? "video" : "audio")` (C11); Element X's room-header intent keeps following the camera                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `createKeyRotationSuppressed$` + `key_rotation_participant_limit`   | dropped (the crate has no participant limit; the indicator has no equivalent)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `rtcSession.statistics` (PostHog)                                   | counts of `keyChanges$` (sent = own member id, received = others)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `MembershipManagerError` → `StickyEventsRequiredError`              | `status$` `Disconnected{cause: JoinFailed{error: Driver/Unsupported}}` → `StickyEventsRequiredError`; `NoTransport` → `MatrixRTCTransportMissingError`; `ManagerStopped`/`SlotClosed` → `ConnectionLostError`                                                                                                                                                                                                                                                                                                                                                               |
+| `impairments`                                                       | fed into the inert `src/state/ServiceInterruptionsViewModel.ts` (S6)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+
+Join parameters (`joinParamsFromConfig`, from `Config.get().matrix_rtc_session`):
+`stickyDurationMs = BigInt(Math.min(membership_event_expiry_ms ?? 4 h, 1 h))`
+(js-sdk caps sticky at 1 h, the crate clamps to 1 h; the config default is
+undefined today); `keepAliveTimeoutMs = BigInt(delayed_leave.delay_ms)`;
+`degradedLifetimeMs = undefined`; `applicationType = "m.call"`;
+`intent = options.callIntent`. Config keys that stop having an effect and are
+documented as such in `docs/`: `delayed_leave.restart_ms`,
+`restart_timeout_ms`, `network_error_retry_ms`,
+`key_rotation_participant_limit`, `delegated_delayed_leave.*` (the crate arms
+1 h when delegating). `wait_for_key_rotation_ms` maps to
+`FfiParticipationConfig.useKeyDelayMs`.
+
+Compat: `MatrixRTCMode.Compatibility → StateEvents`, `Matrix_2_0 → Off` (spec
+MSC4143: sticky member events, slots, the spec key message), in
+`compatForMode`.
+
+### 4.4 React tree
+
+- `src/driver/MatrixDriverContext.tsx`: `MatrixDriverProvider` holding both
+  drivers, `useRtcMatrixDriver()` / `useClientDriver()`; replaces every
+  `useClient()`/`useClientState()` under `CallView`. `ClientContext` stays for the shell.
+- `CallView` props: `{ driver, isPasswordlessUser, confineToRoom, preload, skipLobby }`.
+  It creates the `RtcParticipationManager` (scope tied to its mount) and hands it to
+  `LobbyView`, `ActiveCall`, `useReactionsSender`. `MatrixInfo` comes from
+  `driver.getRoomInfo()` / `driver.getOwnProfile()`.
+- `InCallView`'s own id becomes `${driver.userId}:${driver.deviceId}`.
+- `Avatar` → `driver.thumbnailUrl` (host bridge `downloadMedia` first).
+- `useProfile(client)` → `useOwnProfile()`; `ProfileSettingsTab` hides editing
+  when `setDisplayName` is absent.
+- `ReactionsReader(scope, participation, driver)`, `useReactionsSender` over
+  `TimelineDriver`. Relation target stays the **current own membership event
+  id** (`member.eventId`, C4) — protocol status quo; the reader keys raised
+  hands by `memberId` and re-resolves the event id on re-send instead of
+  dropping the hand.
+- `useRoomEncryptionSystem` reads `getRoomInfo().encrypted`.
+- `submit-rageshake`: `useMatrixDriver()` for ids and `getDiagnostics?()`;
+  rageshake requests via `subscribeTimeline`.
+- `DeveloperSettingsTab`: sticky probe → `getMatrixClientFeatures()`; custom LiveKit
+  URL validation → `driver.getLivekitToken(...)`.
+- `window.rtcSession` debug handle → `window.matrixRtc = { participation }`.
+
+### 4.5 Hosts
+
+- **Component**: `ElementCallProps.rtcDriver: RtcMatrixDriver` and
+  `clientDriver: ElementCallMatrixClientDriver`; `roomId` stays as an
+  **optional** prop for one release and must equal `clientDriver.roomId` when given
+  (assertion), then goes. `initializeElementCall(config, { matrixRtcWasm? })`
+  awaits `initMatrixRtcSdk()`. Externals shrink to `react*`, `livekit-client`,
+  `matrix-js-sdk/lib/logger`. `JsSdkRtcMatrixDriver` and `JsSdkElementCallMatrixClientDriver` are
+  exported from a second entry `@element-hq/element-call-component/matrix-js-sdk` (needs
+  `lib.fileName` as a function and a new `exports` key); only that entry has
+  `matrix-js-sdk` as a peer.
+- **SPA / widget**: `useLoadGroupCall` returns the `Room`; `RoomPage` memoises
+  the two js-sdk drivers and renders `<CallView rtcDriver clientDriver>`. The
+  widget capability list in `src/widget.ts` grows by: send and receive state
+  `m.rtc.slot` and `org.matrix.msc4143.rtc.slot` (opening the slot), `m.room.avatar`,
+  `m.room.canonical_alias`, `m.room.join_rules`; send/receive to-device
+  `org.matrix.msc4143.rtc.encryption_key` and `m.rtc.encryption_key`
+  (alongside `io.element.call.encryption_keys`); events `m.rtc.decline`.
+- **`sdk/main.ts`**: builds the driver from the widget client, a
+  `RtcParticipationManager`, and waits on `status$` instead of `JoinStateChanged`.
+- **`component/dev` harness**: the two js-sdk drivers per pane.
+
+### 4.6 The js-sdk drivers — two classes, two clients each
+
+`src/driver/jsSdk/JsSdkRtcMatrixDriver.ts` (the crate seam, a port of the
+draft's `jsSdkDriver.ts`, connectivity from `ClientEvent.Sync`) and
+`JsSdkElementCallMatrixClientDriver.ts` (the §4.1 slices), both written so
+that they work on a full `MatrixClient`
+**and** on js-sdk's `RoomWidgetClient` (`node_modules/matrix-js-sdk/src/embedded.ts`).
+Differences from the draft, all required by the widget client:
+
+- to-device inbound: listen on `ClientEvent.ToDeviceEvent` (the widget client
+  never emits `ReceivedToDeviceMessage`, `embedded.ts:788-802`); on a full
+  client use `ReceivedToDeviceMessage` for the `encryptionInfo`.
+- to-device outbound: always `encryptAndSendToDevice` (works without a crypto
+  backend on the widget client, `embedded.ts:598-612`; plain `sendToDevice`
+  there is **unencrypted**, `:614-619`).
+- transports: `client._unstable_getRTCTransports()` (the widget override,
+  `embedded.ts:641-646`), never a raw `http.authedRequest`; `.well-known`
+  fallback only on a full client.
+- event origins: on a full client from decryption metadata (as the draft); on
+  a widget client events arrive decrypted without metadata, so the driver
+  reports `Encrypted{ senderDeviceId: content.member.device_id }` for member
+  events and `Encrypted{ senderDeviceId: content.device_id }` for key
+  events, i.e. the _claimed_ trust level js-sdk applies today
+  (`ToDeviceKeyTransport.ts:133-140`). `getMatrixClientFeatures().verifiedEventOrigins`
+  says which.
+- cross-signing verdict: `undefined` on a widget client
+  (`crossSigningVerdicts: false`); Element Call then forces
+  `requireCrossSignedSender = false`.
+- delegation: two primitives and no policy. `delegateDelayedLeaveViaHomeserver`
+  is one `authedRequest` on a full client and `Unsupported` on a widget
+  client; `getLivekitToken` appends `delay_id`, `delay_timeout` and
+  `delay_cs_api_url` (`client.baseUrl`) when the request carries a
+  delegation. The crate decides when to call which (C5). Element Call carries no
+  delegation probe or policy.
+- sticky listener attached after `startClient()` resolves (the widget room
+  only exists then, `embedded.ts:326`).
+- `getLivekitToken` reuses today's request shapes (`slot_id: "m.call#ROOM"`,
+  legacy `/sfu/get`), errors mapped to `RtcError` incl. `M_LIMIT_EXCEEDED →
+RateLimited`, 403 → `Rejected`, 404/`M_UNRECOGNIZED` → `Unsupported`.
+
+---
+
+## 5. Decisions and assumptions
+
+1. **The SDK is an npm package.** `@element-hq/matrix-rtc` (the draft's
+   `web-test-app/`, built by `npm-web-bindings.yml`: uniffi bindings, the
+   wasm-bindgen glue, a `wasm-opt`'d ~760 KB wasm, `.d.ts`, and `@ubjs/core`
+   as its own dependency) is a devDependency, aliased in `package.json` to
+   `@billcarsonfr/matrix-rtc@next` while it is published from the fork, so
+   the imports already say `@element-hq/matrix-rtc`. It lives on the GitHub
+   Packages registry: `.npmrc` maps the scope, a `read:packages` token goes
+   in `~/.npmrc` (CI: the `MATRIX_RTC_NPM_TOKEN` secret). **The GitHub
+   Packages registry is a stop-gap** for the phase in which the crate's API
+   moves with every push; once the SDK is ready for consumers beyond Element
+   Call it belongs on npmjs.com as `@element-hq/matrix-rtc`, which drops the
+   alias, `.npmrc`, the CI secret and every token requirement
+   (`docs/matrix_rtc_sdk.md`). `src/matrix-rtc-sdk/`
+   keeps only the loader (`initMatrixRtcSdk`: package `initAsync` + our log
+   sink, wasm via `@element-hq/matrix-rtc/wasm?url`) and the curated
+   re-exports. _History:_ until 2026-09-16 the bindings were vendored under
+   `src/matrix-rtc-sdk/generated/` by `scripts/sync-matrix-rtc-sdk.sh`; local
+   crate work now goes through `pnpm links:on` (`docs/linking.md`).
+2. **Wasm loading.** Verified: Vite 8 library mode inlines `?url` and
+   `new URL(…, import.meta.url)` assets as base64 regardless of
+   `assetsInlineLimit`; `?url&no-inline` emits a file. App builds use `?url`;
+   the component build uses `?url&no-inline` plus an `exports` entry for
+   `./dist/assets/*`, and `initializeElementCall(config, { matrixRtcWasm })`
+   lets a host point elsewhere. Wasm boot is **lazy** everywhere: in the app
+   `useRtcParticipationManager` awaits `initMatrixRtcSdk()` before constructing
+   the participation (so the js-sdk path never fetches it, §5.15), not the
+   `Initializer`; vitest reads the file from disk and only suites that need
+   it call `initMatrixRtcSdk()`, never in
+   `src/vitest.setup.ts`; Storybook boots it in `.storybook/preview.tsx`
+   `beforeAll`. Suites using `vi.useFakeTimers` never share a file with
+   real-wasm tests (pumps sleep on `setTimeout`).
+3. **Own identity via the driver.** `userId`/`deviceId` are properties of the
+   driver, not props.
+4. **One driver per room**, as in the crate.
+5. **`matrix-js-sdk/lib/logger` stays** behind `src/utils/logger.ts`.
+6. **`updateCallIntent` stays**, through the crate's `update_application` (C11).
+7. **Reactions relate to the current own membership event id** (status quo);
+   reader keys by `memberId`. Alternatives (stable join event id, or
+   `memberId` as relation target) are protocol changes left to the user.
+8. **MSC4153 default off** (`requireCrossSignedSender = false`) for every
+   host, confirmed: js-sdk performs no such check today, and a passwordless
+   SPA peer would otherwise be inaudible to everyone. The intent is to turn
+   it on; the default carries a TODO (`src/state/rtc/joinParams.ts`), and C10
+   puts the sender's verdict on the tile so the UI can show it meanwhile.
+9. **Delegation is the crate's alone.** Element Call always asks for it; the
+   crate tries the CS API, then the authorisation service's token endpoint,
+   then its own restarts, and arms the long delegated leave only once
+   delegation is confirmed (C5, done). Element Call keeps no probe and no
+   delegation code; `delegated_delayed_leave.delay_ms` feeds
+   `FfiJoinParams.delegatedDelayMs`.
+10. **Widget trust model:** origins synthesised from claimed device ids equal
+    today's js-sdk trust level; the crate records them as
+    `DeviceAttribution::Verified` because it cannot tell. Documented in the
+    driver; a `Claimed` attribution flag on the sink is a follow-up crate ask.
+11. **Scratch files** go to `agent-workspace/oxidation/`; this plan lives at
+    the repo root because it was asked for by name.
+12. **Branch** `toger5/oxidation`, one commit per slice.
+13. **Compatibility mode has no slot.** Under `StateEvents` the crate projects
+    the session from the MSC3401 state events alone and requires the legacy
+    slot id `""` (`LEGACY_SLOT_ID` in `src/state/rtc/slot.ts`,
+    `slotIdForCompat`); `RtcParticipationManager` picks it from the config and skips
+    the slot check and the slot open. Found by the real-backend check: with
+    `m.call#ROOM` the crate saw its own legacy membership as a candidate but
+    never projected it. Element Call's own rooms already let every member send
+    the legacy member state event (`state_default: 0`); a plain room does not,
+    which the backend test reproduces.
+14. **Member events in encrypted rooms are Megolm-encrypted** by matrix-js-sdk
+    (sticky events are timeline events; the SDK exempts only reactions and
+    redactions), as they are with the js-sdk MatrixRTC code today. The driver
+    decrypts them on the way in; the sticky marker (`msc4354_sticky`) stays in
+    the clear. To cross-check against Element X before relying on it.
+15. **The two view models stay switchable for one release.** A developer
+    setting, `callViewModelImplementation` (`"matrix-js-sdk"` |
+    `"matrix-rtc"`, `src/settings/settings.ts`, next to `matrixRTCMode`),
+    picks between `createJsClientCallViewModel$` and the driver-based
+    `createCallViewModel$` in the same build. Like `matrixRTCMode` it is
+    shown in the Developer Settings tab, sampled when the call is joined
+    (switching mid-call needs a rejoin), and a deployment can pin it through
+    `config.json` (`call_view_model_implementation`), which overrides the
+    user's choice and greys the control out. The default is
+    `"matrix-js-sdk"` when the setting lands (S4a) and flips to
+    `"matrix-rtc"` once the S5 gate is green; S6 removes the setting together
+    with the js-sdk path. The point is that a broken call can be compared
+    against the old path in the same session, and that Playwright can run
+    both paths from one build. Everything the js-sdk path needs (the client,
+    the `MatrixRTCSession`, `ReactionsReader` over the session) therefore
+    stays reachable from `CallView` until S6, and the `RtcParticipationManager` is
+    created only when the crate path is selected, so neither path pays for
+    the other.
+
+---
+
+## 6. Work breakdown
+
+Each slice is independently green (`pnpm lint && pnpm test:unit` at least).
+
+### S0a — crate changes ☑ (in `MatrixSdkArchitectureDraft`)
+
+C2–C12 from §3 (C1 reverted), each with a Rust unit test; acceptance tests in
+`web-test-app/test/`: a slot-less room refuses joins until `openSlot`, in every dialect;
+`FfiParticipationConfig` with `manageMediaKeys: false` exchanges no keys;
+no `StickyEvents` variant left anywhere (C9); `member.eventId` present;
+delegation tries the homeserver first, then the token endpoint with the delay fields, and keeps the short leave armed until one succeeds;
+`ownTransportIdentity()` equals the joined membership's `transportIdentity`.
+Gate: `cargo test --features uniffi`, `cargo clippy --all-targets --features uniffi -- -D warnings`,
+`npm run ubrn:web && npm test`.
+
+### S0b — SDK intake ☑
+
+- ~~`scripts/sync-matrix-rtc-sdk.sh`, `src/matrix-rtc-sdk/generated/**`~~
+  (replaced by the `@element-hq/matrix-rtc` package on 2026-09-16, §5.1),
+  `src/matrix-rtc-sdk/index.ts` (loader + curated re-exports),
+  `src/matrix-rtc-sdk/index.test.ts` (boot, one join round-trip against the
+  TS mock driver).
+- `package.json` (~~`@ubjs/core`~~ now `@element-hq/matrix-rtc`; the
+  `generated/**` carve-outs in `knip.ts`, `.oxlintrc.json`, `.oxfmtrc.json`,
+  `vitest.config.ts` and `.gitattributes` went with the vendored files),
+  `vite.config.ts` (nothing needed for `?url`; verified `vite-plugin-wasm`
+  ignores it), `tsconfig.json` untouched thanks to the `.d.ts`.
+- Gate: `pnpm lint && pnpm format:check && pnpm test:unit`.
+
+### S1a — driver interface, mock driver ☑
+
+- `src/driver/RtcMatrixDriver.ts`, `src/driver/ElementCallMatrixClientDriver.ts`,
+  `src/driver/observe.ts`, `MockRtcMatrixDriver.ts` (port of
+  `web-test-app/src/mockDriver.ts`) and `MockElementCallMatrixClientDriver.ts`
+  (in-memory room info, members, timeline, profile), with a test each.
+- `knip.ts` `ignore` for `src/driver/**` until consumed, with the reason.
+
+### S1b — `JsSdkMatrixDriver` ☑
+
+- `src/driver/jsSdk/JsSdkRtcMatrixDriver.ts` and
+  `JsSdkElementCallMatrixClientDriver.ts` (§4.6) + tests against **two**
+  fakes: a `MatrixClient`-shaped one (`mockMatrixRoom`) and a
+  `RoomWidgetClient`-shaped one (`ToDeviceEvent`, no crypto,
+  `_unstable_getRTCTransports`, sticky updates after `startClient`).
+  Asserts request shapes of `_unstable_sendStickyEvent`,
+  `_unstable_sendStickyDelayedEvent`, `_unstable_updateDelayedEvent`,
+  `encryptAndSendToDevice`, `/get_token` body with and without the delegation fields, `delegateDelayedLeaveViaHomeserver` on both clients,
+  sink emission and origin synthesis, room-info/member updates.
+
+### S2 — `RtcParticipationManager` ☑
+
+- `src/state/rtc/RtcParticipationManager.ts`, `joinParams.ts`, `transportIntent.ts`,
+  `errors.ts` (cause → `ElementCallError`).
+- `RtcParticipationManager.test.ts` through the real wasm + `MockMatrixDriver`:
+  memberships follow a remote join/leave; `LeftWithKeys` filtered; join →
+  `Connected`; `connections$` carries the token; `keyChanges$` fires for a
+  peer key; `ownTransportIdentity$` set before the echo; leave →
+  `Disconnected{LeftByHost}`; join → leave → join; scope end destroys the
+  manager; fallback transport when the host throws or advertises none.
+
+### S3 — view model, four slices ☑ (side by side with the js-sdk view model)
+
+- **Shape (2026-09-15):** the existing factory is renamed
+  `createJsClientCallViewModel$` and the new `createCallViewModel$(scope,
+participation, clientDriver, …)` sits next to it; both build a
+  `CallViewModelCore` and hand it to the shared `assembleCallViewModel`, so
+  the layout/tile half is one piece of code and the two Matrix sides can be
+  reviewed side by side. `MatrixLivekitMember.membership$` is a neutral
+  `CallMember` (`userId`, `deviceId`, `memberId`, `rtcBackendIdentity`) that
+  js-sdk's `CallMembership` satisfies; `CallNotificationLifecycle` takes a
+  neutral `DeclineEvent`. Nothing js-sdk is deleted yet (that is S6).
+- **S3a** `remoteMembers/ParticipationConnections.ts`: one `Connection` per
+  service URL in `participation.connections$`, started with the crate's
+  token; a refreshed token keeps the connection (used on the next
+  (re)connect). `Connection`/`ECConnectionFactory` accept a `null` client.
+  Test fakes live in `src/utils/test-participation.ts`
+  (`FakeParticipation`, `fakeMembership`, `fakeConnection`, `fakeMediaKey`).
+- **S3b** `remoteMembers/ParticipationMembers.ts` (remote members matched by
+  `transportIdentity`, keyed by `memberId`; `callMemberOf`) and
+  `e2ee/participationKeyProvider.ts` (`keyMap$` × `memberships$` ×
+  `ownTransportIdentity$` → `onSetEncryptionKey`, once per (member, index,
+  identity); a key that arrives before the identity waits for the roster).
+- **S3c** `localMember/LocalMedia.ts` is the LiveKit half extracted from
+  `LocalMember.ts` (publisher, tracks, screen share, upstream pausing, host
+  notify) and shared; `localMember/ParticipationLocalMember.ts` joins and
+  leaves through the participation (slot policy from `roomInfo`, custom
+  LiveKit URL as a `Publish` intent, `updateApplication` on camera toggle),
+  derives connected / reconnecting / `probablyLeft` from `status$`
+  (`HomeserverUnreachable` → "sync", `RestartFailing`/`Expired` →
+  "probablyLeft") and the fatal error from `errorForStatus`. Deletions
+  (`LocalTransport.ts`, `RtcTransportAutoDiscovery.ts`,
+  `HomeserverConnected.ts`, `openIDSFU.ts`, `enterRTCSession`) wait for S6.
+- **S3d** `ParticipationCallNotification.ts` sends `org.matrix.msc4075.rtc.notification`
+  after our own echo when nobody was in the session before us (resets on
+  leave) and reads declines from the `TimelineDriver`;
+  `remoteMembers/ParticipationMemberMetadata.ts` adapts the client driver's
+  roster to `RoomMemberMap` so `createMatrixMemberMetadata$` and the ringing
+  name work unchanged. Still open: `ReactionsReader` on `participation` +
+  `TimelineDriver` (the new factory takes the hands/reactions observables
+  as inputs like the old one; S4b), `keyRotationSuppressed$` is `constant(false)`,
+  and the js-sdk test kit stays until S6. Tests:
+  `CallViewModel.participation.test.ts` (real wasm, mock drivers, mocked
+  LiveKit: join → connection → own tile → peer → leave; transport-missing →
+  `fatalError$`), plus one file per module.
+
+### S4 — React tree, two slices ☑ (2026-09-16)
+
+- **S4a-0, the switch (§5.15) ☑:** `CallViewModelImplementation` enum,
+  `callViewModelImplementation` setting (`src/settings/settings.ts`),
+  `call_view_model_implementation` pin (`ConfigOptions.ts`, validated in
+  `Config.ts`), the radio group in `DeveloperSettingsTab.tsx`, the
+  implementation logged at join and sent as `call_view_model_implementation`
+  in rageshakes, `effectiveCallViewModelImplementation()` in
+  `src/state/rtc/implementation.ts`. `CallView` samples it once per mount;
+  with `matrix-rtc` and no drivers it warns and lets matrix-js-sdk carry the
+  call. Still open from this item: the Playwright helper and the second CI
+  run.
+- **S4a done so far:** `MatrixDriverProvider` / `useMatrixDrivers()`
+  (`src/driver/MatrixDriverContext.tsx`), provided by the component from its
+  props and by `RoomPage` through `useJsSdkDrivers(client, room)`;
+  `useRtcParticipationManager(drivers, config)` owned by `CallView`, created only
+  when the crate path is selected; `ActiveCall` takes `participation` and
+  builds either view model; the lobby's member count, the big-call auto-mute
+  and the error boundary's "were we joined" read from whichever side carries
+  the call; `window.matrixRtc = { participation }` next to `window.rtcSession`.
+- (The original S4a-0 description follows for reference.) `callViewModelImplementation` setting and
+  `config.json` pin (`ConfigOptions.ts`, validated at load like
+  `matrix_rtc_mode`); a radio group in `DeveloperSettingsTab.tsx` beside the
+  MatrixRTC mode; `ActiveCall` reads the sampled value and calls either
+  factory — for `"matrix-rtc"` it takes the drivers from the
+  `MatrixDriverProvider` and the `RtcParticipationManager` from `CallView`, for
+  `"matrix-js-sdk"` it keeps `rtcSession`/`matrixRoom` as today. The chosen
+  implementation is logged at join and added to the rageshake fields so a
+  report says which path it came from. Playwright gets a helper that sets
+  the setting (local storage) before the call so every call spec can run
+  under both values; CI runs the suite twice until the default flips.
+  Lands first in S4a, before anything else in the tree moves, so that every
+  later S4 change is verifiable against the old path.
+- **S4a** views/hooks/settings on the driver: `CallView.tsx` (owns
+  `RtcParticipationManager` when the crate path is selected), `InCallView.tsx`, `LobbyView.tsx`, `CallEndedView.tsx`,
+  `VideoPreview.tsx`, `useRoomInfo()` (replaces `useRoomName/Avatar/JoinRule/State`),
+  `InviteModal.tsx`, `Avatar.tsx`, `useOwnProfile.ts`, `ProfileSettingsTab.tsx`,
+  `SettingsModal.tsx`, `DeveloperSettingsTab.tsx`, `submit-rageshake.ts`,
+  `analytics/PosthogEvents.ts`, `controls.ts`, and a
+  first `CallView.stories.tsx` (lobby, in call, ended) driven by
+  `MockMatrixDriver`.
+- **S4b ☑ (2026-09-16):** `ReactionsSenderProvider` takes `ownIdentifier`,
+  `ownMembershipEventId` and a `ReactionsTimeline` (`jsSdkReactionsTimeline`
+  over a client, or the client driver); `ParticipationReactionsReader`
+  (`src/reactions/`) reads hands and reactions from the participation and
+  the timeline driver, keyed by the member's media id
+  (`memberMediaId`, `src/state/rtc/mediaId.ts`), and re-resolves a hand on a
+  re-sent membership instead of dropping it blindly. Notifications went
+  through the driver in S3d. Tests: `ParticipationReactionsReader.test.ts`,
+  `useRtcParticipationManager.test.tsx`, three `CallView.test.tsx` cases for the
+  switch.
+- **S4a views on the drivers (2026-09-16):** `CallView` now requires the
+  drivers (`useMatrixDrivers()`; both hosts provide them) and reads the
+  room through `useRoomInfo()` (`src/room/useRoomInfo.ts`; `useRoomAvatar`,
+  `useJoinRule`, `useRoomState` deleted, `useRoomName` stays for `RoomPage`),
+  our own profile through `useOwnProfile()` (`src/profile/useOwnProfile.ts`)
+  and the encryption system through `useEncryptionSystemFor(roomId,
+roomInfo.encrypted)` (`useRoomEncryptionSystem` keeps the client for the
+  home page). `MatrixInfo` is built from those. `InviteModal` takes
+  `roomId`/`roomName`/`e2eeSystem`; `CallEndedView` lost its `client` prop;
+  `Avatar` resolves thumbnails through `clientDriver.thumbnailUrl` when
+  drivers are provided (host `downloadMedia` first, client fallback for the
+  shell); rageshakes carry the driver's `getDiagnostics()` as `driver_*`
+  fields and the crate's `matrix_rtc_snapshot`.
+- **The component is client-free (2026-09-16):** `CallView`'s `client` and
+  `rtcSession` are optional; without them the crate carries the call
+  whatever the setting says (`useMatrixRtc = setting || no session`), and
+  every js-sdk-only piece (the `MembershipManagerError` listener, the room
+  sanity check, `ReactionsReader`, `mediaKeyStatisticsOf`) is skipped.
+  `ActiveCall`/`InCallView` take `roomId` instead of `matrixRoom`, and
+  `client`/`rtcSession` optionally. `ProfileSettingsTab` edits through the
+  client driver's optional `setDisplayName`/`setAvatar(file | null)` and
+  shows read-only fields without them; `DeveloperSettingsTab` reads the
+  sticky probe from `getMatrixClientFeatures()`, the crypto version from
+  `getDiagnostics()` and validates a custom LiveKit URL through
+  `rtcDriver.getLivekitToken` when there is no client; the rageshake request
+  event goes through the client driver's timeline; reactions are supported
+  unless a client state forbids them. `ElementCall` renders no
+  `ClientProvider` and no shim — it hands its two drivers down and nothing
+  below asks for a client; `initializeElementCall(config, { matrixRtcWasm })`
+  can preload the wasm. `PosthogEvents.eventCallEnded.track` takes
+  `MediaKeyStatistics` (from the session on the js-sdk path, zero on the
+  crate path until the crate counts). `useTypedEventEmitter` and the js-sdk
+  client driver's public `client`/`room` are gone. **Consequence:** the
+  component and its dev harness (`ElementCallClientBased`) now run every
+  call on the crate.
+- **Banner dropped (2026-09-17):** the disconnected banner, its
+  `useHomeserverConnected` hook and the client state's `disconnected` flag
+  are gone. The local membership already carries the connection state, so
+  the reconnecting overlay covers the in-call case where it matters; in the
+  lobby the banner added little. `HomeserverConnected` in
+  `state/CallViewModel/localMember/` remains the one consumer of
+  `rtcDriver.isHomeserverConnected()` / `subscribeConnectivity` and of
+  `sync_disconnect_grace_period_ms`. The mock RTC driver keeps several
+  connectivity sinks (the crate's and the UI's).
+- **S4 closed (2026-09-16):** `CallView.stories.tsx` (Lobby with a peer,
+  NoTransport as the error path, Ended) over the mock drivers, no client;
+  `.storybook/preview.tsx` initialises the config; the Storybook vitest
+  project passes. The Playwright switch is `CALL_VIEW_MODEL_IMPLEMENTATION`
+  read by `playwright.config.ts` into `use.storageState` (the developer
+  setting in local storage for every context), and the CI Playwright job is
+  a matrix over both implementations (`matrix-rtc` non-blocking until it
+  has passed once). `RtcParticipationManager.mediaKeyStatistics()` counts sent
+  and received keys and their age from the crate's key changes for the
+  ended-call event. Found on the way: `CallView` rendered `ActiveCall`
+  before the participation existed (wasm loads on first use) — it now waits;
+  and `onLeft` had gained the member count as a dependency, which rebuilt
+  the view model on every roster change on both paths — read through
+  `useLatest` now. `create-call.spec.ts` passes in Chromium on both
+  implementations with two view model creations each (StrictMode): the
+  crate path's first full call in a browser.
+
+### S5 — hosts ☐ (component props done 2026-09-15)
+
+- **Done:** `ElementCallProps` takes `rtcDriver` + `clientDriver` (`roomId`
+  optional, asserted equal); `ElementCallClientBased` takes `client` +
+  `roomId` and builds the two js-sdk drivers (the dev harness uses it); the
+  driver types and the js-sdk drivers are exported from the component index.
+  **Temporary:** until S4 the tree under `CallView` still runs on the
+  client, so `ElementCall` requires the client driver to be
+  `JsSdkElementCallMatrixClientDriver` (its `client`/`room` are public for
+  this) and throws for any other driver.
+- `component/matrix-js-sdk.ts`, `component/package.json`
+  (`exports`, peers), `vite-component.config.ts` (two entries, `fileName`
+  function, externals shrink, `?url&no-inline`), `component/tsconfig.build.json`,
+  `component/dev/Harness.tsx`, `README.md`.
+- `src/room/useLoadGroupCall.ts`, `RoomPage.tsx`, `src/widget.ts`
+  (capabilities, §4.5), `sdk/main.ts`, `playwright/spa-helpers.ts`
+  (delegation route helper), `docs/` config notes.
+- Gate: all four builds; Playwright standalone + widget + component against
+  `pnpm backend`; a widget media-key round trip and `reconnect.spec.ts`
+  re-checked under the new delegation path.
+
+### S6 — fence and cleanup ☐
+
+- `src/utils/logger.ts`; local `CallIntent` type for the six `RTCCallIntent`
+  users; `useLocalStorage.ts` on a local emitter; oxlint
+  `no-restricted-imports` scoped to the call tree (allow-list: `src/home`,
+  `src/auth`, `src/utils/spa.ts`, `src/utils/matrix.ts`, `src/driver/jsSdk/**`,
+  `src/ClientContext.tsx`, `src/widget.ts`, `src/initializer.tsx`,
+  `src/IndexedDBWorker.ts`, `src/room/KnockLobbyView.tsx`, `src/settings/rageshake.ts`)
+  banning `matrix-js-sdk` except `matrix-js-sdk/lib/logger`.
+- `ServiceInterruptionsViewModel` fed from `status$.impairments`.
+- `callViewModelImplementation` setting, its `config.json` pin and the
+  Developer Settings control removed with `createJsClientCallViewModel$`
+  (§5.15); Playwright runs the suite once again.
+- `docs/agents/architecture.md`, `docs/matrix_rtc_modes.md` updated;
+  `src/@types/matrix-js-sdk.d.ts` removed if nothing merges into js-sdk types.
+
+---
+
+## 7. Risks and mitigations
+
+| Risk                                                                           | Mitigation                                                                                 |
+| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| A user without the power level to open a slot, in a room that never had a call | `NoOpenSlotError` names the remedy; a room admin opens the slot by starting the first call |
+| A client on the removed sticky dialect (none is deployed)                      | Not supported: `Off` and `StateEvents` are the only dialects (C9)                          |
+| Component bundle size / wasm delivery                                          | `?url&no-inline` + `exports` wildcard + `matrixRtcWasm` override; verified in S0b and S5   |
+| Token refresh vs LiveKit reconnect                                             | `Connection.token$`; full reconnect uses the latest token; `expiresAtTs` logged            |
+| Own identity before the echo                                                   | C6 export; JWT `sub` only as a logged cross-check                                          |
+| Keys before identity                                                           | key provider buffers per member id and replays                                             |
+| Widget mode regressions (origins, to-device event, capabilities)               | S1b tests against a `RoomWidgetClient` fake; S5 widget e2e adds a media-key round trip     |
+| Delegation fails after the long leave was armed                                | Arm-after-confirm (C5): the short leave stays armed until delegation is confirmed          |
+| Behaviour drift in keep-alive (6 s vs 4 s restarts) and dropped config keys    | documented in `docs/`                                                                      |
+| Test time: wasm per file                                                       | lazy boot in the suites that need it only                                                  |
+
+---
+
+## 8. Verification matrix
+
+| Check                                                                        | S0a | S0b | S1  | S2  | S3  | S4  | S5  | S6  |
+| ---------------------------------------------------------------------------- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `cargo test/clippy`, `web-test-app` suites                                   | ●   |     |     |     |     |     |     |     |
+| `pnpm lint` + `format:check`                                                 |     | ●   | ●   | ●   | ●   | ●   | ●   | ●   |
+| `pnpm test:unit`                                                             |     | ●   | ●   | ●   | ●   | ●   | ●   | ●   |
+| `pnpm test:storybook`                                                        |     |     |     |     |     | ●   | ●   | ●   |
+| four builds                                                                  |     | ●   |     |     |     |     | ●   | ●   |
+| Playwright standalone + widget + component                                   |     |     |     |     |     |     | ●   | ●   |
+| Manual: two harness panes hear each other, E2EE, hand raise, reaction, leave |     |     |     |     |     |     | ●   |     |
+| Real backend (`RtcParticipationManager.backend.test.ts`, opt-in, both modes) |     |     |     | ●   |     |     | ●   |     |
+
+---
+
+## 9. Open questions for the user (answered by the assumptions in §5 until told otherwise)
+
+1. Slot semantics, **answered**: no slot means no call; Element Call opens the
+   slot on the first call in a room, power level permitting.
+2. Delegation, **answered**: CS API endpoint first, then Element Call's
+   OpenID → JWT → scheduled-event path, all inside the crate and invisible to
+   Element Call (C5).
+3. Media-key type under the sticky compat, **answered**: there are no deployed
+   sticky-event clients, so the compat mode is removed (C9) and the question
+   with it.
+4. MSC4153, **answered**: off everywhere for now, with a TODO to turn it on
+   and C10 so tiles show unverified senders in the meantime.
+5. Reactions relation target: current membership event id (taken), stable join
+   event id, or `memberId`?
+6. Committing the 6.5 MB wasm (taken) vs a build-time fetch.
+7. `roomId` prop: optional for one release (taken) vs removed outright.
+8. `updateCallIntent`, **answered**: added to the crate as `update_application`
+   (C11); Element Call keeps the behaviour.
+
+---
+
+## 10. Review log
+
+Independent review findings incorporated in this revision: slot enforcement
+blocker (C1); delegation protocol and 1 h arm (C5, §5.9; later redefined as crate-only with arm-after-confirm); `StickyEvents` key
+type interop (C3, then made moot by removing the mode, C9); MSC4153 default (§5.8); widget-client differences for the
+js-sdk drivers (§4.6) and missing widget capabilities (§4.5); own identity
+export (C6); `RtcParticipationManager` lifetime at `CallView` (§4.2); notification
+timing and content (§4.3); reactions/event-id semantics (§5.7); config mapping
+defaults and dropped keys (§4.3); `bigint`/`ArrayBuffer` types; inventory
+gaps (§2); knip `ignore` vs `ignoreFiles`, oxlint/oxfmt ignores, `.d.ts` for
+the glue, lazy wasm boot, Storybook `beforeAll`; slice re-cut (S0a/b, S1a/b,
+S3a–d, S4a/b, temporary `CallView` shim); `sdk/main.ts` status wiring and the
+Playwright delegation helper.
+
+**Real-backend check (2026-09-15), `pnpm backend` + `src/state/rtc/RtcParticipationManager.backend.test.ts`**
+(`MATRIX_RTC_BACKEND=1 NODE_TLS_REJECT_UNAUTHORIZED=0 pnpm vitest run --project unit src/state/rtc/RtcParticipationManager.backend.test.ts`;
+two registered users with rust crypto in an encrypted room, `matrix_2_0` and
+`compatibility`): passes end to end — transport discovery from
+`/rtc/transports`, slot open + echo, sticky member event with `msc4354_sticky`,
+delayed leave, delegation via the homeserver, roster with display names,
+Olm-encrypted media keys both ways with `senderCrossSigned`, leave cancelling
+the delayed event, and `HomeserverUnreachable` raised and cleared across a
+simulated network outage. Fixed on the way: MSC4195 `member` claims and the
+homeserver route's body (`url`, `delay_timeout`; C5), the missing session
+listener (C13), the legacy slot id under compatibility mode (§5.13). Noted:
+`vite-plugin-node-polyfills` shadows `process`, so tests read the environment
+through `node:process`; Synapse develop already proxies the MSC4195 endpoint
+to lk-jwt-service; member events are Megolm-encrypted in encrypted rooms
+(§5.14). Not verified here: the widget host path (Element Web) and the
+authorisation-service route (the homeserver route is taken first on this
+stack; it is covered by unit tests only).
+
+**S3 (2026-09-15):** the driver-based `createCallViewModel$` landed next to
+the renamed `createJsClientCallViewModel$` (shared `assembleCallViewModel`,
+neutral `CallMember`/`DeclineEvent`, `LocalMedia.ts` extracted); component
+props moved to the two drivers with `ElementCallClientBased` on top. Gates:
+`pnpm lint`, `format:check`, `test:unit` (803), `i18n:check`,
+`build:component` green. Open from this slice: reactions reader on the
+participation (S4b), the `?url&no-inline` wasm asset for the component build
+(the wasm is loaded lazily and inlined into the component bundle today), and
+the S6 deletions.
+
+**S4 (2026-09-16):** the implementation switch (§5.15) is in with its
+config pin, developer control and rageshake field; `CallView` owns a
+`RtcParticipationManager` when the crate path is selected and `ActiveCall` builds
+the matching view model; the reactions reader and sender have participation
+and driver counterparts. Both paths run in the same build. Gates: `pnpm
+lint`, `format:check`, `i18n:check`, `test:unit` (815), `build:component`
+green. Not verified: a real call on the crate path through the UI (the
+`pnpm backend` check covers the view model's Matrix side; the browser run is
+the S5 gate).
+
+**Logging (2026-09-16):** C14 — the crate's log lines reach the host through
+a `LogSink`; Element Call routes them to its rageshake logger under
+`[matrix-rtc]`, the web-test-app to the console. Verified by a unit test that
+sees the crate's "session created" line through the sink.
+
+**S4 views (2026-09-16):** room info, own profile, encryption system,
+avatars, the invite and ended views and the rageshake fields read the
+drivers; `CallView` requires drivers. Three room hooks deleted. Gates:
+`pnpm lint`, `format:check`, `test:unit` (819), `build:component` green.
+
+**Client-free component (2026-09-16):** `CallView` and everything under it
+run without a matrix-js-sdk client on the crate path; the component passes
+only its drivers. Gates: `pnpm lint`, `format:check`, `test:unit` (819),
+`build:component` green. Not yet done: a browser run of the component on
+the crate path (the dev harness now is that run).
+
+**S4 done (2026-09-16):** stories, Playwright switch and CI matrix, key
+statistics. `create-call.spec.ts` green on `matrix-js-sdk` and `matrix-rtc`
+in Chromium against the dev server; the rest of the suite under
+`matrix-rtc` is the S5 gate. Gates: `pnpm lint`, `format:check`,
+`test:unit` (822), `test:storybook` (28), `build:component` green.
@@ -2,11 +2,11 @@
 # https://docs.gradle.org/current/userguide/platforms.html#sub::toml-dependencies-format

 [versions]
-android_gradle_plugin = "8.11.1"
+android_gradle_plugin = "8.13.2"

 [libraries]
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "android_gradle_plugin" }

 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.34.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.5-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
@@ -11,7 +11,7 @@ pushd $CURRENT_DIR > /dev/null
 function build_assets() {
 	echo "Generating Element Call assets..."
 	pushd ../..  > /dev/null
-	yarn build
+	pnpm build
 	popd  > /dev/null
 }

@@ -26,7 +26,7 @@ function copy_assets() {
 }

 getopts :sh opt
-case $opt in 
+case $opt in
 	s)
 		SKIP=1
 		;;
@@ -41,7 +41,7 @@ if [ ! $SKIP ]; then
  echo ""
  if [[ $REPLY =~ ^[Yy]$ ]]; then
    build_assets
-  else 
+  else
    echo "Using existing assets from ../../dist"
  fi
  copy_assets
@@ -56,4 +56,4 @@ echo "Publishing the Android project"

 ./gradlew publishAndReleaseToMavenCentral --no-daemon

-popd  > /dev/null
+popd  > /dev/null
--- a/Show More
+++ b/Show More