v1.12.7

[Backport staging] Amend e2e normal icon from lock-solid to info (#31559 )
* Amend e2e normal icon from lock-solid to info (#31555) * Amend e2e normal icon from lock-solid to info Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> (cherry picked from commit 773662e018) Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-16 14:49:39 +00:00 · 2025-12-16 14:16:43 +00:00 · 2025-12-16 13:52:36 +00:00 · 2025-12-15 16:39:44 +00:00 · 2025-12-12 15:47:29 +00:00 · 2025-12-11 17:21:53 +00:00
948 changed files with 21576 additions and 14765 deletions
@@ -10,6 +10,7 @@ module.exports = {
    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
    parserOptions: {
        project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
    },
    env: {
        browser: true,
@@ -167,6 +168,10 @@ module.exports = {
                        group: ["@vector-im/compound-design-tokens/icons/*"],
                        message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
                    },
+                    {
+                        group: ["**/packages/shared-components/**", "../packages/shared-components/**"],
+                        message: "Please use @element-hq/web-shared-components",
+                    },
                ],
            },
        ],
@@ -279,3 +279,6 @@
 - name: "Z-Flaky-Test-Disabled"
  description: "The flaking test has been disabled"
  color: "ededed"
+- name: "Z-Skip-Coverage"
+  description: "Skip SonarQube coverage for this PR"
+  color: "ededed"
@@ -42,7 +42,7 @@ jobs:
            run:
                shell: bash
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -14,7 +14,7 @@ jobs:
            R2_URL: ${{ vars.CF_R2_S3_API }}
            VERSION: ${{ github.ref_name }}
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - name: Download package
              run: |
@@ -26,7 +26,7 @@ jobs:
            R2_URL: ${{ vars.CF_R2_S3_API }}
            R2_PUBLIC_URL: "https://element-web-develop.element.io"
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -34,7 +34,7 @@ jobs:
        env:
            SITE: ${{ inputs.site || 'staging.element.io' }}
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - name: Load GPG key
              run: |
@@ -20,7 +20,7 @@ jobs:
        env:
            TEST_TAG: vectorim/element-web:test
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  fetch-depth: 0 # needed for docker-package to be able to calculate the version

@@ -29,7 +29,7 @@ jobs:
              if: github.event_name != 'pull_request'

            - name: Set up QEMU
-              uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
+              uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3

            - name: Set up Docker Buildx
              uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
@@ -96,7 +96,7 @@ jobs:

            - name: Docker meta
              id: meta
-              uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5
+              uses: docker/metadata-action@318604b99e75e41977312d83839a89be02ca4893 # v5
              if: github.event_name != 'pull_request'
              with:
                  images: |
@@ -141,7 +141,7 @@ jobs:
                  repository: vectorim/element-web

            - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@5fc4efd1a4797ddb68ffd0714a238564e4cc0e6f # v4
+              uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4
              if: github.event_name != 'pull_request'
              with:
                  repository: element-hq/element-web-pro
@@ -17,18 +17,18 @@ jobs:
        runs-on: ubuntu-24.04
        steps:
            - name: Fetch element-desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  repository: element-hq/element-desktop
                  path: element-desktop

            - name: Fetch element-web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  path: element-web

            - name: Fetch matrix-js-sdk
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  repository: matrix-org/matrix-js-sdk
                  path: matrix-js-sdk
@@ -43,13 +43,13 @@ jobs:
              working-directory: element-web
              run: |
                  yarn install --frozen-lockfile
-                  yarn ts-node ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
+                  yarn node ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
                  echo "-   [Automations](automations.md)" >> docs/SUMMARY.md

            - name: Setup mdBook
              uses: peaceiris/actions-mdbook@ee69d230fe19748b7abf22df32acaa93833fad08 # v2
              with:
-                  mdbook-version: "0.4.10"
+                  mdbook-version: "0.5.1"

            - name: Install mdbook extensions
              run: cargo install mdbook-combiner mdbook-mermaid
@@ -50,7 +50,7 @@ jobs:
            runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
        steps:
            - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  repository: element-hq/element-web

@@ -122,7 +122,7 @@ jobs:
                    - runAllTests: false
                      project: Pinecone
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  persist-credentials: false
                  repository: element-hq/element-web
@@ -194,7 +194,7 @@ jobs:
        if: always()
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              if: inputs.skip != true
              with:
                  persist-credentials: false
@@ -10,7 +10,7 @@ jobs:
        permissions:
            pull-requests: write
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - name: Update synapse image
              run: |
@@ -32,7 +32,7 @@ jobs:

            - name: Create Pull Request
              id: cpr
-              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
+              uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7
              with:
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                  branch: actions/playwright-image-updates
@@ -41,7 +41,7 @@ jobs:
            REPOS: matrix-js-sdk element-web element-desktop
        steps:
            - name: Checkout Element Desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              if: inputs.element-desktop
              with:
                  repository: element-hq/element-desktop
@@ -51,7 +51,7 @@ jobs:
                  fetch-tags: true
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
            - name: Checkout Element Web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              if: inputs.element-web
              with:
                  repository: element-hq/element-web
@@ -61,7 +61,7 @@ jobs:
                  fetch-tags: true
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
            - name: Checkout Matrix JS SDK
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              if: inputs.matrix-js-sdk
              with:
                  repository: matrix-org/matrix-js-sdk
@@ -13,7 +13,7 @@ jobs:

        steps:
            - name: 🧮 Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - name: 🔧 Set up node environment
              uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
@@ -21,7 +21,7 @@ jobs:
            issues: read
            pull-requests: read
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  persist-credentials: false
                  repository: element-hq/element-web
@@ -22,7 +22,7 @@ jobs:
        name: "Typescript Syntax Check"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -63,7 +63,7 @@ jobs:
        name: "Rethemendex Check"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - run: ./res/css/rethemendex.sh

@@ -73,7 +73,7 @@ jobs:
        name: "ESLint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -97,7 +97,7 @@ jobs:
        name: "Style Lint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -115,7 +115,7 @@ jobs:
        name: "Workflow Lint"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -133,7 +133,7 @@ jobs:
        name: "Analyse Dead Code"
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -39,7 +39,7 @@ jobs:
                runner: [1, 2]
        steps:
            - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

@@ -118,7 +118,7 @@ jobs:
        runs-on: ubuntu-24.04
        steps:
            - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6
              with:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

@@ -9,7 +9,7 @@ jobs:
        name: Move PRs asking for design review to the design board
        runs-on: ubuntu-24.04
        steps:
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@abaeca7ba4f0325d63b8de7ef943c2418d161b93 # v3.0.0
              id: find_team_members
              with:
                  headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -52,7 +52,7 @@ jobs:
                  fi
              env:
                  TEAM: "design"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@abaeca7ba4f0325d63b8de7ef943c2418d161b93 # v3.0.0
              id: add_to_project
              if: steps.any_matching_reviewers.outputs.match == 'true'
              with:
@@ -76,7 +76,7 @@ jobs:
        name: Move PRs asking for design review to the design board
        runs-on: ubuntu-24.04
        steps:
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@abaeca7ba4f0325d63b8de7ef943c2418d161b93 # v3.0.0
              id: find_team_members
              with:
                  headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -119,7 +119,7 @@ jobs:
                  fi
              env:
                  TEAM: "product"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@abaeca7ba4f0325d63b8de7ef943c2418d161b93 # v3.0.0
              id: add_to_project
              if: steps.any_matching_reviewers.outputs.match == 'true'
              with:
@@ -9,7 +9,7 @@ jobs:
    update:
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6

            - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
              with:
@@ -23,7 +23,7 @@ jobs:
              run: "yarn update:jitsi"

            - name: Create Pull Request
-              uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7
+              uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7
              with:
                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
                  branch: actions/jitsi-update
@@ -26,13 +26,13 @@ jobs:
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
-                  PUBLIC_ROOM_ID: "!IemiTbwVankHTFiEoh:matrix.org"
-                  ANNOUNCEMENT_ROOM_ID: "!bijaLdadorKgNGtHdA:matrix.org"
+                  PUBLIC_DISCUSSION_ROOM_ID: "!xUW4PpAe1CmThA3r2wI8IrgwwsK006-zqWdJCljpd10"
+                  ANNOUNCEMENT_ROOM_ID: "!ars5ndgI6IIYZXECiJ-u8YljHNzShJn3nHdB-3rYI2M"
                  TOKEN: ${{ secrets.BETABOT_ACCESS_TOKEN }}
                  RELEASE_STATUS: "Release status: ${{ inputs.expected_status }} expected ${{ inputs.expected_date }}"
              with:
                  script: |
-                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;
+                      const { HS_URL, TOKEN, RELEASE_STATUS, LOBBY_ROOM_ID, PUBLIC_DISCUSSION_ROOM_ID, ANNOUNCEMENT_ROOM_ID } = process.env;

                      const repo = context.repo;
                      const { data } = await github.rest.repos.getLatestRelease({
@@ -71,18 +71,23 @@ jobs:
                          const data = await res.json();
                          console.log(roomId, "got event", data);

+                          if (!regex.test(data.topic)) {
+                              core.setFailed("Topic format is incorrect for room " + roomId);
+                              return;
+                          }
+
                          const topic = data.topic.replace(regex, releaseTopic);
                          if (topic === data.topic) {
                              console.log(roomId, "nothing to do");
                              return;
                          }
                          if (data["org.matrix.msc3765.topic"]) {
-                              data["org.matrix.msc3765.topic"].forEach(d => {
+                              data["org.matrix.msc3765.topic"]?.["m.text"].forEach(d => {
                                  d.body = d.body.replace(regex, releaseTopic);
                              });
                          }
                          if (data["m.topic"]) {
-                              data["m.topic"].forEach(d => {
+                              data["m.topic"]?.["m.text"].forEach(d => {
                                  d.body = d.body.replace(regex, releaseTopic);
                              });
                          }
@@ -97,12 +102,18 @@ jobs:
                          });

                          if (res.ok) {
-                              console.log(roomId, "topic updated:", topic);
+                              const resJson = res.json();
+                              if (resJson.errcode) {
+                                  core.setFailed(`Error updating ${roomId}: ${resJson.error}`);
+                              } else {
+                                  console.log(roomId, "topic updated:", topic);
+                              }
                          } else {
-                              console.log(roomId, await res.text());
+                              const errText = await res.text();
+                              core.setFailed(`Error updating ${roomId}: ${errText}`);
                          }
                      }

                      await updateReleaseInTopic(LOBBY_ROOM_ID);
-                      await updateReleaseInTopic(PUBLIC_ROOM_ID);
+                      await updateReleaseInTopic(PUBLIC_DISCUSSION_ROOM_ID);
                      await updateReleaseInTopic(ANNOUNCEMENT_ROOM_ID);
@@ -2,7 +2,6 @@
 /dist
 /lib
 /node_modules
-/packages/
 /webapp
 /*.log
 yarn.lock
@@ -1,3 +1,88 @@
+Changes in [1.12.7](https://github.com/element-hq/element-web/releases/tag/v1.12.7) (2025-12-16)
+================================================================================================
+## ✨ Features
+
+* Replace legacy icons with compound ([#31424](https://github.com/element-hq/element-web/pull/31424)). Contributed by @t3chguy.
+* Update polls UX to match EX Mobile and improve accessibility ([#31245](https://github.com/element-hq/element-web/pull/31245)). Contributed by @langleyd.
+* Add option to enable read receipt and marker when user interact with UI ([#31353](https://github.com/element-hq/element-web/pull/31353)). Contributed by @florianduros.
+* Introduce a hook to auto dispose view models ([#31178](https://github.com/element-hq/element-web/pull/31178)). Contributed by @MidhunSureshR.
+* Update settings toggles to use consistent design across app. ([#30169](https://github.com/element-hq/element-web/pull/30169)). Contributed by @Half-Shot.
+* Add ability to the room view to hide widgets ([#31400](https://github.com/element-hq/element-web/pull/31400)). Contributed by @langleyd.
+* call: Pass the echo cancellation and noise suppression settings to EC ([#31317](https://github.com/element-hq/element-web/pull/31317)). Contributed by @BillCarsonFr.
+* Tweak rendering of icons for a11y ([#31358](https://github.com/element-hq/element-web/pull/31358)). Contributed by @t3chguy.
+* Implement new `renderNotificationDecoration` from module API  ([#31389](https://github.com/element-hq/element-web/pull/31389)). Contributed by @MidhunSureshR.
+* Replace more icons with compound ([#31381](https://github.com/element-hq/element-web/pull/31381)). Contributed by @t3chguy.
+* Replace more icons with compound ([#31378](https://github.com/element-hq/element-web/pull/31378)). Contributed by @t3chguy.
+* `<Banner/>`: Hide `Dismiss` button if `onClose` handler is not provided. ([#31362](https://github.com/element-hq/element-web/pull/31362)). Contributed by @kaylendog.
+* Replace batch of legacy icons with compound design tokens ([#31360](https://github.com/element-hq/element-web/pull/31360)). Contributed by @t3chguy.
+* MSC4380: Invite blocking ([#31268](https://github.com/element-hq/element-web/pull/31268)). Contributed by @richvdh.
+* Tweak rendering of icons for accessibility ([#31346](https://github.com/element-hq/element-web/pull/31346)). Contributed by @t3chguy.
+* Implement a shared `Banner` component. ([#31266](https://github.com/element-hq/element-web/pull/31266)). Contributed by @kaylendog.
+* Allow the Login screen to use the dark theme ([#31293](https://github.com/element-hq/element-web/pull/31293)). Contributed by @richvdh.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Amend e2e normal icon from lock-solid to info ([#31559](https://github.com/element-hq/element-web/pull/31559)). Contributed by @t3chguy.
+* [Backport staging] Fix CSS specificity causing icon issues in e2e verification ([#31548](https://github.com/element-hq/element-web/pull/31548)). Contributed by @RiotRobot.
+* [Backport staging] Fix e2e icons in CompleteSecurity \& SetupEncryptionBody ([#31522](https://github.com/element-hq/element-web/pull/31522)). Contributed by @RiotRobot.
+* [Backport staging] Remove an extra paragraph in advanced room settings ([#31511](https://github.com/element-hq/element-web/pull/31511)). Contributed by @RiotRobot.
+* [Backport staging] Don't show the key storage out of sync toast when backup disabled ([#31507](https://github.com/element-hq/element-web/pull/31507)). Contributed by @RiotRobot.
+* Fix composer button visibility in contrast colour mode ([#31255](https://github.com/element-hq/element-web/pull/31255)). Contributed by @t3chguy.
+* Ensure correct room version is used and permissions are appropriately sert when creating rooms ([#31464](https://github.com/element-hq/element-web/pull/31464)). Contributed by @Half-Shot.
+* Fix e2e icon rendering ([#31454](https://github.com/element-hq/element-web/pull/31454)). Contributed by @t3chguy.
+* EventIndexer: ensure we add initial checkpoints when the db is first opened ([#31448](https://github.com/element-hq/element-web/pull/31448)). Contributed by @richvdh.
+* Fix `/join <alias>` command failing due to race condition ([#31433](https://github.com/element-hq/element-web/pull/31433)). Contributed by @MidhunSureshR.
+* MessageEventIndexDialog: distinguish indexed rooms ([#31436](https://github.com/element-hq/element-web/pull/31436)). Contributed by @richvdh.
+* Move `EditInPlace` out of `Form` (Fixes: reloading EW on EC url update) ([#31434](https://github.com/element-hq/element-web/pull/31434)). Contributed by @toger5.
+* Fixes issue where cursor would jump to the beginning of the input field after converting Japanese text and pressing Tab ([#31432](https://github.com/element-hq/element-web/pull/31432)). Contributed by @shinaoka.
+* Fix widgets getting stuck in loading states ([#31314](https://github.com/element-hq/element-web/pull/31314)). Contributed by @robintown.
+* Room list: fix room options remaining on room item after mouse leaving ([#31414](https://github.com/element-hq/element-web/pull/31414)). Contributed by @florianduros.
+* Make `RoomList.showMessagePreview` configurable by `config.json` ([#31419](https://github.com/element-hq/element-web/pull/31419)). Contributed by @florianduros.
+* Fix bug which caused app not to load correctly when `force_verification` is enabled ([#31265](https://github.com/element-hq/element-web/pull/31265)). Contributed by @richvdh.
+* Room list: display the menu option on the room list item when clicked/opened ([#31380](https://github.com/element-hq/element-web/pull/31380)). Contributed by @florianduros.
+* Fix handling of SVGs ([#31359](https://github.com/element-hq/element-web/pull/31359)). Contributed by @t3chguy.
+* Fix word wrapping in expanded left panel buttons ([#31377](https://github.com/element-hq/element-web/pull/31377)). Contributed by @t3chguy.
+* Fix aspect ratio on error view background ([#31361](https://github.com/element-hq/element-web/pull/31361)). Contributed by @t3chguy.
+* Fix failure to request persistent storage perms ([#31299](https://github.com/element-hq/element-web/pull/31299)). Contributed by @richvdh.
+* Fix calls sometimes not knowing that they're presented ([#31313](https://github.com/element-hq/element-web/pull/31313)). Contributed by @robintown.
+
+
+Changes in [1.12.6](https://github.com/element-hq/element-web/releases/tag/v1.12.6) (2025-12-03)
+================================================================================================
+This release fixes a bug where 1:1 calling was incorrectly not available if no Element Call focus was set.
+
+## 🐛 Bug Fixes
+
+* Add option to pick call options for voice calls. ([#31413](https://github.com/element-hq/element-web/pull/31413)).
+
+Changes in [1.12.5](https://github.com/element-hq/element-web/releases/tag/v1.12.5) (2025-12-02)
+================================================================================================
+## ✨ Features
+
+* Update Emojibase to v17 ([#31307](https://github.com/element-hq/element-web/pull/31307)). Contributed by @t3chguy.
+* Adds tooltip for compose menu ([#31122](https://github.com/element-hq/element-web/pull/31122)). Contributed by @byteplow.
+* Add option to hide pinned message banner in room view ([#31296](https://github.com/element-hq/element-web/pull/31296)). Contributed by @florianduros.
+* update twemoji to not monochromise emoji with BLACK in their name ([#31281](https://github.com/element-hq/element-web/pull/31281)). Contributed by @ara4n.
+* upgrade to twemoji 17.0.2 and fix #14695 ([#31267](https://github.com/element-hq/element-web/pull/31267)). Contributed by @ara4n.
+* Add options to hide right panel in room view ([#31252](https://github.com/element-hq/element-web/pull/31252)). Contributed by @florianduros.
+* Delayed event management: split endpoints, no auth  ([#31183](https://github.com/element-hq/element-web/pull/31183)). Contributed by @AndrewFerr.
+* Support using Element Call for voice calls in DMs ([#30817](https://github.com/element-hq/element-web/pull/30817)). Contributed by @Half-Shot.
+* Improve screen reader accessibility of auth pages ([#31236](https://github.com/element-hq/element-web/pull/31236)). Contributed by @t3chguy.
+* Add posthog tracking for key backup toasts ([#31195](https://github.com/element-hq/element-web/pull/31195)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Return to using Fira Code as the default monospace font ([#31302](https://github.com/element-hq/element-web/pull/31302)). Contributed by @ara4n.
+* Fix case of home screen being displayed erroneously  ([#31301](https://github.com/element-hq/element-web/pull/31301)). Contributed by @langleyd.
+* Fix message edition and reply when multiple rooms at displayed the same moment ([#31280](https://github.com/element-hq/element-web/pull/31280)). Contributed by @florianduros.
+* Key storage out of sync: reset key backup when needed ([#31279](https://github.com/element-hq/element-web/pull/31279)). Contributed by @uhoreg.
+* Fix invalid events crashing entire room rather than just their tile ([#31256](https://github.com/element-hq/element-web/pull/31256)). Contributed by @t3chguy.
+* Fix expand button of space panel getting cut off at the edges ([#31259](https://github.com/element-hq/element-web/pull/31259)). Contributed by @MidhunSureshR.
+* Fix pill buttons in dialogs ([#31246](https://github.com/element-hq/element-web/pull/31246)). Contributed by @dbkr.
+* Fix blank sections at the top and bottom of the member list when scrolling ([#31198](https://github.com/element-hq/element-web/pull/31198)). Contributed by @langleyd.
+* Fix emoji category selection with keyboard ([#31162](https://github.com/element-hq/element-web/pull/31162)). Contributed by @langleyd.
+
+
 Changes in [1.12.4](https://github.com/element-hq/element-web/releases/tag/v1.12.4) (2025-11-18)
 ================================================================================================
 ## ✨ Features
@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.19-labs@sha256:dce1c693ef318bca08c964ba3122ae6248e45a1b96d65c4563c8dc6fe80349a2
+# syntax=docker.io/docker/dockerfile:1.20-labs@sha256:dbcde2ebc4abc8bb5c3c499b9c9a6876842bf5da243951cd2697f921a7aeb6a9

 # Builder
-FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:c102f42d665c164b4e5e5549813b1547ac8a9f1d343c7d17ddac106905a1c30b AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:b36a1eab6bdeb43cf4808370d18b6706452e810e3563b1ce669d2965af3c0464 AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:65a7f97c299b919190e96e38e2ff8358132732000d3bc5c00c07cc8763fca53f
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:8e23ab31c214ee1d7f832d63b2ee768d5cbc270a94a2cba0752fed93ad83e345

 # Need root user to install packages & manipulate the usr directory
 USER root
@@ -4,7 +4,6 @@
 title = "Element Web & Desktop"
 authors = ["New Vector Ltd.", "The Matrix.org Foundation C.I.C."]
 language = "en"
-multilingual = false

 # The directory that documentation files are stored in
 src = "docs"
@@ -79,7 +79,7 @@ Unless otherwise specified, the following applies to all code:
 11. If a variable is not receiving a value on declaration, its type must be defined.

    ```typescript
-    let errorMessage: Optional<string>;
+    let errorMessage: string;
    ```

 12. Objects can use shorthand declarations, including mixing of types.
@@ -5,6 +5,7 @@ export default {
        "src/serviceworker/index.ts",
        "src/workers/*.worker.ts",
        "src/utils/exportUtils/exportJS.js",
+        "src/vector/localstorage-fix.ts",
        "scripts/**",
        "playwright/**",
        "test/**",
@@ -41,6 +42,8 @@ export default {
        "util",
        // Embedded into webapp
        "@element-hq/element-call-embedded",
+        // Transitive dep of jest
+        "jsdom",

        // Used by matrix-js-sdk, which means we have to include them as a
        // dependency so that // we can run `tsc` (since we import the typescript
@@ -55,7 +58,6 @@ export default {
    ignoreBinaries: [
        // Used in scripts & workflows
        "jq",
-        "wait-on",
    ],
    ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import * as YAML from "yaml";
-import * as fs from "fs";
+import * as fs from "node:fs";

 export type BuildConfig = {
    // Dev note: make everything here optional for user safety. Invalid
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import * as fs from "fs";
-import * as childProcess from "child_process";
+import * as fs from "node:fs";
+import * as childProcess from "node:child_process";
 import * as semver from "semver";

-import { type BuildConfig } from "./BuildConfig";
+import { type BuildConfig } from "./BuildConfig.ts";

 // This expects to be run from ./scripts/install.ts

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { readBuildConfig } from "../BuildConfig";
-import { installer } from "../installer";
+import { readBuildConfig } from "../BuildConfig.ts";
+import { installer } from "../installer.ts";

 const buildConf = readBuildConfig();
 installer(buildConf);
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.12.4",
+    "version": "1.12.7",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -38,16 +38,16 @@
        "clean": "rimraf lib webapp",
        "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
        "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
-        "build:res": "ts-node scripts/copy-res.ts",
+        "build:res": "node scripts/copy-res.ts",
        "build:genfiles": "yarn build:res && yarn build:module_system",
        "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
        "build:bundle": "webpack --progress --mode production",
        "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
-        "build:module_system": "ts-node --project ./tsconfig.module_system.json module_system/scripts/install.ts",
+        "build:module_system": "node module_system/scripts/install.ts",
        "dist": "./scripts/package.sh",
        "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"yarn build:module_system\" \"yarn build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
        "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --server-type https\"",
-        "start:res": "ts-node scripts/copy-res.ts -w",
+        "start:res": "node scripts/copy-res.ts -w",
        "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
        "lint": "yarn lint:types && yarn lint:js && yarn lint:style && yarn lint:workflows",
        "lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
@@ -70,32 +70,30 @@
    },
    "resolutions": {
        "**/pretty-format/react-is": "19.2.0",
-        "@playwright/test": "1.56.1",
-        "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.2",
-        "@types/serve-static": "1.15.10",
-        "oidc-client-ts": "3.3.0",
+        "@types/react": "19.2.6",
+        "@types/react-dom": "19.2.3",
+        "oidc-client-ts": "3.4.1",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001751",
+        "caniuse-lite": "1.0.30001756",
        "testcontainers": "^11.0.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
    "dependencies": {
        "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.5.0",
+        "@element-hq/element-web-module-api": "1.9.0",
        "@element-hq/web-shared-components": "link:packages/shared-components",
-        "@fontsource/inconsolata": "^5",
+        "@fontsource/fira-code": "^5",
        "@fontsource/inter": "^5",
        "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.29.2",
-        "@matrix-org/emojibase-bindings": "^1.3.4",
+        "@matrix-org/analytics-events": "^0.30.0",
+        "@matrix-org/emojibase-bindings": "^1.5.0",
        "@matrix-org/react-sdk-module-api": "^2.4.0",
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^10.0.0",
        "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-design-tokens": "6.4.1",
+        "@vector-im/compound-web": "^8.3.1",
        "@vector-im/matrix-wysiwyg": "2.40.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
@@ -110,7 +108,7 @@
        "diff-dom": "^5.0.0",
        "diff-match-patch": "^1.0.5",
        "domutils": "^3.2.2",
-        "emojibase-regex": "15.3.2",
+        "emojibase-regex": "^17.0.0",
        "escape-html": "^1.0.3",
        "file-saver": "^2.0.5",
        "filesize": "11.0.13",
@@ -120,7 +118,7 @@
        "html-entities": "^2.0.0",
        "html-react-parser": "^5.2.2",
        "is-ip": "^3.1.0",
-        "js-xxhash": "^4.0.0",
+        "js-xxhash": "^5.0.0",
        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
@@ -131,16 +129,15 @@
        "lodash": "^4.17.21",
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
-        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "39.2.0",
-        "matrix-widget-api": "^1.10.0",
+        "matrix-js-sdk": "39.4.0",
+        "matrix-widget-api": "^1.14.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
        "oidc-client-ts": "^3.0.1",
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.280.1",
+        "posthog-js": "1.297.2",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -182,14 +179,14 @@
        "@babel/preset-react": "^7.12.10",
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
-        "@casualbot/jest-sonar-reporter": "2.2.7",
+        "@casualbot/jest-sonar-reporter": "2.4.0",
        "@element-hq/element-call-embedded": "0.16.1",
        "@element-hq/element-web-playwright-common": "^2.0.0",
        "@peculiar/webcrypto": "^1.4.3",
-        "@playwright/test": "^1.50.1",
+        "@playwright/test": "1.57.0",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@sentry/webpack-plugin": "^4.0.0",
-        "@storybook/react-vite": "^9.1.10",
+        "@storybook/react-vite": "^10.0.7",
        "@stylistic/eslint-plugin": "^5.0.0",
        "@svgr/webpack": "^8.0.0",
        "@testing-library/dom": "^10.4.0",
@@ -205,7 +202,7 @@
        "@types/express": "^5.0.0",
        "@types/file-saver": "^2.0.3",
        "@types/glob-to-regexp": "^0.4.1",
-        "@types/jest": "29.5.12",
+        "@types/jest": "30.0.0",
        "@types/jitsi-meet": "^2.0.2",
        "@types/jsrsasign": "^10.5.4",
        "@types/katex": "^0.16.0",
@@ -216,9 +213,9 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.2.2",
+        "@types/react": "19.2.6",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.2.2",
+        "@types/react-dom": "19.2.3",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.16.0",
        "@types/sdp-transform": "^2.4.10",
@@ -227,7 +224,7 @@
        "@types/ua-parser-js": "^0.7.36",
        "@typescript-eslint/eslint-plugin": "^8.19.0",
        "@typescript-eslint/parser": "^8.19.0",
-        "babel-jest": "^29.0.0",
+        "babel-jest": "^30.0.0",
        "babel-loader": "^10.0.0",
        "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
        "blob-polyfill": "^9.0.0",
@@ -259,10 +256,10 @@
        "html-webpack-plugin": "^5.5.3",
        "husky": "^9.0.0",
        "identity-obj-proxy": "^3.0.0",
-        "jest": "^29.6.2",
+        "jest": "^30.0.0",
        "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.7.0",
-        "jest-mock": "^29.6.2",
+        "jest-environment-jsdom": "^30.0.0",
+        "jest-mock": "^30.0.0",
        "jest-raw-loader": "^1.0.1",
        "jsqr": "^1.4.0",
        "knip": "^5.36.2",
@@ -290,19 +287,18 @@
        "rimraf": "^6.0.0",
        "semver": "^7.5.2",
        "source-map-loader": "^5.0.0",
-        "storybook": "^9.1.10",
+        "storybook": "^10.0.7",
        "stylelint": "^16.23.0",
        "stylelint-config-standard": "^39.0.0",
        "stylelint-scss": "^6.0.0",
        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
        "terser-webpack-plugin": "^5.3.9",
        "testcontainers": "^11.0.0",
-        "ts-node": "^10.9.1",
        "typescript": "5.8.3",
        "util": "^0.12.5",
        "web-streams-polyfill": "^4.0.0",
        "webpack": "^5.89.0",
-        "webpack-bundle-analyzer": "^4.8.0",
+        "webpack-bundle-analyzer": "^5.0.0",
        "webpack-cli": "^6.0.0",
        "webpack-dev-server": "^5.0.0",
        "webpack-retry-chunk-load-plugin": "^3.1.1",
@@ -315,7 +311,7 @@
        "relativePaths": true
    },
    "engines": {
-        "node": ">=20.0.0"
+        "node": ">=22.18"
    },
    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
@@ -16,6 +16,7 @@ module.exports = {
    ],
    parserOptions: {
        project: ["./tsconfig.json"],
+        tsconfigRootDir: __dirname,
    },
    env: {
        browser: true,
@@ -6,6 +6,7 @@ import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { StoryContext } from "storybook/internal/csf";
+import { I18nApi, I18nContext } from "../src";

 export const globalTypes = {
    theme: {
@@ -70,9 +71,17 @@ const withTooltipProvider: Decorator = (Story) => {
    );
 };

+const withI18nProvider: Decorator = (Story) => {
+    return (
+        <I18nContext.Provider value={new I18nApi()}>
+            <Story />
+        </I18nContext.Provider>
+    );
+};
+
 const preview: Preview = {
    tags: ["autodocs"],
-    decorators: [withThemeProvider, withTooltipProvider],
+    decorators: [withThemeProvider, withTooltipProvider, withI18nProvider],
    parameters: {
        options: {
            storySort: {
@@ -5,17 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { waitForPageReady } from "@storybook/test-runner";
+import { waitForPageReady, TestRunnerConfig } from "@storybook/test-runner";
 import { toMatchImageSnapshot } from "jest-image-snapshot";

 const customSnapshotsDir = `${process.cwd()}/playwright/snapshots/`;
 const customReceivedDir = `${process.cwd()}/playwright/received/`;

-/**
- * @type {import('@storybook/test-runner').TestRunnerConfig}
- */
-const config = {
-    setup(page) {
+const config: TestRunnerConfig = {
+    setup() {
        expect.extend({ toMatchImageSnapshot });
    },
    async postVisit(page, context) {
@@ -30,7 +30,7 @@ const config: Config = {
        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
    },
    transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs)).+$",
+        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|@storybook|storybook)).+$",
    ],
    collectCoverageFrom: [
        "<rootDir>/src/**/*.{js,ts,tsx}",
@@ -1,6 +1,6 @@
 {
    "name": "@element-hq/web-shared-components",
-    "version": "0.0.0-test.7",
+    "version": "0.0.0-test.11",
    "description": "Shared components for Element",
    "author": "New Vector Ltd.",
    "repository": {
@@ -35,7 +35,7 @@
    ],
    "scripts": {
        "test": "jest",
-        "prepare": "patch-package && yarn --cwd ../.. build:res && ts-node scripts/gatherTranslationKeys.ts && vite build",
+        "prepare": "patch-package && yarn --cwd ../.. build:res && node scripts/gatherTranslationKeys.ts && vite build",
        "storybook": "storybook dev -p 6007",
        "build-storybook": "storybook build",
        "lint": "yarn lint:types && yarn lint:js",
@@ -43,9 +43,14 @@
        "lint:types": "tsc --noEmit --jsx react",
        "test:storybook": "test-storybook --url http://localhost:6007/",
        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "test:storybook:update": "playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+        "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
+    },
+    "resolutions": {
+        "playwright": "1.57.0"
    },
    "dependencies": {
+        "@element-hq/element-web-module-api": "^1.8.0",
+        "@vector-im/compound-design-tokens": "^6.3.0",
        "classnames": "^2.5.1",
        "counterpart": "^0.18.6",
        "lodash": "^4.17.21",
@@ -56,28 +61,28 @@
    },
    "devDependencies": {
        "@element-hq/element-web-playwright-common": "^2.0.0",
-        "@playwright/test": "^1.50.1",
-        "@storybook/addon-a11y": "^9.1.10",
-        "@storybook/addon-designs": "^10.0.2",
-        "@storybook/addon-docs": "^9.1.10",
-        "@storybook/icons": "^1.6.0",
-        "@storybook/react-vite": "^9.1.10",
-        "@storybook/test-runner": "^0.23.0",
+        "@playwright/test": "1.57.0",
+        "@storybook/addon-a11y": "^10.0.7",
+        "@storybook/addon-designs": "^11.0.1",
+        "@storybook/addon-docs": "^10.0.7",
+        "@storybook/icons": "^2.0.0",
+        "@storybook/react-vite": "^10.0.7",
+        "@storybook/test-runner": "^0.24.1",
        "@testing-library/dom": "^10.4.1",
        "@testing-library/react": "^16.3.0",
        "@types/counterpart": "^0.18.4",
+        "@types/jest-image-snapshot": "^6.4.0",
        "@types/lodash": "^4.17.20",
        "@types/react": "^19.2.2",
        "concurrently": "^9.2.1",
        "eslint": "8",
        "eslint-plugin-matrix-org": "^3.0.0",
-        "eslint-plugin-storybook": "^10.0.0",
+        "eslint-plugin-storybook": "^10.0.7",
        "jest": "^30.2.0",
        "jest-image-snapshot": "^6.5.1",
        "patch-package": "^8.0.1",
        "prettier": "^3.6.2",
-        "storybook": "^9.1.10",
-        "ts-node": "^10.9.2",
+        "storybook": "^10.0.7",
        "typescript": "^5.9.3",
        "vite": "^7.1.9",
        "vite-plugin-dts": "^4.5.4",
@@ -88,7 +93,6 @@
    },
    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
    "peerDependencies": {
-        "@vector-im/compound-design-tokens": "^6.0.0",
        "@vector-im/compound-web": "^8.2.5"
    }
 }
@@ -15,7 +15,10 @@ Please see LICENSE files in the repository root for full details.

 import * as fs from "fs";
 import * as path from "path";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";

+const __dirname = dirname(fileURLToPath(import.meta.url));
 const i18nStringsPath = path.resolve(__dirname, "../../../src/i18n/strings/en_EN.json");
 const outPath = path.resolve(__dirname, "../src/i18nKeys.d.ts");

@@ -56,6 +59,9 @@ function main() {
    console.log(`Wrote ${keys.length} keys to ${outPath}`);
 }

-if (require.main === module) {
-    main();
+if (import.meta.url.startsWith("file:")) {
+    const modulePath = fileURLToPath(import.meta.url);
+    if (process.argv[1] === modulePath) {
+        main();
+    }
 }
@@ -14,6 +14,8 @@ import { fireEvent } from "@testing-library/dom";
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
 import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
+import { I18nContext } from "../../utils/i18nContext.ts";
+import { I18nApi } from "../../index.ts";

 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);

@@ -64,7 +66,9 @@ describe("AudioPlayerView", () => {
            error: false,
        });

-        render(<AudioPlayerView vm={vm} />);
+        render(<AudioPlayerView vm={vm} />, {
+            wrapper: ({ children }) => <I18nContext.Provider value={new I18nApi()}>{children}</I18nContext.Provider>,
+        });
        await user.click(screen.getByRole("button", { name: "Play" }));
        expect(togglePlay).toHaveBeenCalled();

@@ -14,7 +14,7 @@ import { Flex } from "../../utils/Flex";
 import styles from "./AudioPlayerView.module.css";
 import { PlayPauseButton } from "../PlayPauseButton";
 import { type PlaybackState } from "../playback";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";
 import { formatBytes } from "../../utils/FormattingUtils";
 import { Clock } from "../Clock";
 import { SeekBar } from "../SeekBar";
@@ -90,6 +90,8 @@ interface AudioPlayerViewProps {
 * ```
 */
 export function AudioPlayerView({ vm }: Readonly<AudioPlayerViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
    const {
        playbackState,
        mediaName = _t("timeline|m.audio|unnamed_audio"),
@@ -23,7 +23,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
        tabindex="-1"
      >
        <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
@@ -114,7 +114,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
        tabindex="-1"
      >
        <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
@@ -210,7 +210,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
        tabindex="-1"
      >
        <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
@@ -301,7 +301,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
        tabindex="-1"
      >
        <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
          style="--cpd-icon-button-size: 100%;"
        >
          <svg
@@ -11,7 +11,7 @@ import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";

 import styles from "./PlayPauseButton.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";

 export interface PlayPauseButtonProps extends HTMLAttributes<HTMLButtonElement> {
    /**
@@ -46,6 +46,8 @@ export function PlayPauseButton({
    togglePlay,
    ...rest
 }: Readonly<PlayPauseButtonProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
    const label = playing ? _t("action|pause") : _t("action|play");

    return (
@@ -13,7 +13,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
    tabindex="0"
  >
    <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
      style="--cpd-icon-button-size: 100%;"
    >
      <svg
@@ -45,7 +45,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
    tabindex="0"
  >
    <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
      style="--cpd-icon-button-size: 100%;"
    >
      <svg
@@ -10,7 +10,7 @@ import { throttle } from "lodash";
 import classNames from "classnames";

 import style from "./SeekBar.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";

 export interface SeekBarProps extends React.InputHTMLAttributes<HTMLInputElement> {
    /**
@@ -33,6 +33,8 @@ interface ISeekCSS extends CSSProperties {
 * ```
 */
 export function SeekBar({ value = 0, className, ...rest }: Readonly<SeekBarProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+
    const [newValue, setNewValue] = useState(value);
    // Throttle the value setting to avoid excessive re-renders
    const setThrottledValue = useMemo(() => throttle(setNewValue, 10), []);
@@ -6,7 +6,7 @@
 */

 import React from "react";
-import { type Meta, type StoryObj } from "@storybook/react-vite/*";
+import { type Meta, type StoryObj } from "@storybook/react-vite";

 import { AvatarWithDetails } from "./AvatarWithDetails";

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+:root {
+    --cpd-color-gradient-critical-linear: linear-gradient(
+        180deg,
+        var(--cpd-color-alpha-red-500) 0%,
+        var(--cpd-color-alpha-red-400) 20%,
+        var(--cpd-color-alpha-red-300) 40%,
+        var(--cpd-color-alpha-red-200) 60%,
+        var(--cpd-color-alpha-red-100) 80%,
+        var(--cpd-color-transparent) 100%
+    );
+}
+
+.banner {
+    container-type: inline-size;
+    container-name: banner;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--cpd-space-3x);
+    padding: var(--cpd-space-4x);
+
+    border-top: 1px solid var(--cpd-color-gray-400);
+
+    white-space: nowrap;
+}
+
+.banner[data-type="success"] {
+    background: var(--cpd-color-gradient-subtle-linear);
+    border-color: var(--cpd-color-green-900);
+}
+
+.banner[data-type="critical"] {
+    background: var(--cpd-color-gradient-critical-linear);
+    border-color: var(--cpd-color-border-critical-primary);
+}
+
+.banner[data-type="info"] {
+    background: var(--cpd-color-gradient-info-linear);
+    border-color: var(--cpd-color-blue-900);
+}
+
+.banner[data-type="info"] :is(svg) {
+    color: var(--cpd-color-blue-900);
+}
+
+.banner[data-type="success"] :is(.content, svg) {
+    color: var(--cpd-color-green-900);
+}
+
+.banner[data-type="critical"] :is(.content, svg) {
+    color: var(--cpd-color-red-900);
+}
+
+.banner p {
+    margin: 0;
+}
+
+.icon {
+    /* lock icon dimensions */
+    min-width: 32px;
+    min-height: 32px;
+    max-width: 32px;
+    max-height: 32px;
+
+    margin: 4px;
+
+    /* centre svg icons, as they are not full width */
+    flex: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon img {
+    border-radius: 50%;
+}
+
+.actions {
+    margin-left: auto;
+
+    flex: 0;
+    display: flex;
+    flex-direction: row;
+    gap: var(--cpd-space-1x);
+    align-self: center;
+}
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { fn } from "storybook/test";
+import { type Meta, type StoryObj } from "@storybook/react-vite";
+import { Button } from "@vector-im/compound-web";
+
+import { Banner } from "./Banner";
+import { _t } from "../../utils/i18n";
+
+const meta = {
+    title: "room/Banner",
+    component: Banner,
+    tags: ["autodocs"],
+    args: {
+        children: <p>Hello! This is a status banner.</p>,
+        onClose: fn(),
+    },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Info: Story = {
+    args: {
+        type: "info",
+    },
+};
+export const Success: Story = {
+    args: {
+        type: "success",
+    },
+};
+export const Critical: Story = {
+    args: {
+        type: "critical",
+    },
+};
+export const WithAction: Story = {
+    args: {
+        children: (
+            <p>
+                {_t(
+                    "encryption|pinned_identity_changed",
+                    { displayName: "Alice", userId: "@alice:example.org" },
+                    {
+                        a: (sub) => <a href="https://example.org">{sub}</a>,
+                        b: (sub) => <b>{sub}</b>,
+                    },
+                )}
+            </p>
+        ),
+        actions: <Button kind="primary">{_t("encryption|withdraw_verification_action")}</Button>,
+    },
+};
+
+export const WithAvatarImage: Story = {
+    args: {
+        avatar: <img alt="Example" src="https://picsum.photos/32/32" />,
+    },
+};
+
+export const WithoutClose: Story = {
+    args: {
+        onClose: undefined,
+    },
+};
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./Banner.stories.tsx";
+
+const { Default, Info, Success, WithAction, WithAvatarImage, Critical } = composeStories(stories);
+
+describe("AvatarWithDetails", () => {
+    it("renders a default banner", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a info banner", () => {
+        const { container } = render(<Info />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a success banner", () => {
+        const { container } = render(<Success />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a critical banner", () => {
+        const { container } = render(<Critical />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a banner with an action", () => {
+        const { container } = render(<WithAction />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a banner with an avatar iamge", () => {
+        const { container } = render(<WithAvatarImage />);
+        expect(container).toMatchSnapshot();
+    });
+});
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import classNames from "classnames";
+import React, {
+    type MouseEventHandler,
+    type ReactElement,
+    type ReactNode,
+    type PropsWithChildren,
+    useMemo,
+} from "react";
+import { Button } from "@vector-im/compound-web";
+import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
+
+import styles from "./Banner.module.css";
+import { _t } from "../../utils/i18n";
+
+interface BannerProps {
+    /**
+     * The type of the status banner.
+     */
+    type?: "success" | "info" | "critical";
+
+    /**
+     * The banner avatar.
+     */
+    avatar?: React.ReactNode;
+
+    className?: string;
+
+    /**
+     * Actions presented to the user in the right-hand side of the banner alongside the dismiss button.
+     */
+    actions?: ReactNode;
+    /**
+     * Called when the user presses the "dismiss" button.
+     */
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * A banner component used for displaying user-facing information above the message composer.
+ *
+ * @example
+ * ```tsx
+ *   <Banner  onClose={onCloseHandler} />
+ * ```
+ */
+export function Banner({
+    type,
+    children,
+    avatar,
+    className,
+    actions,
+    onClose,
+    ...props
+}: PropsWithChildren<BannerProps>): ReactElement {
+    const classes = classNames(styles.banner, className);
+
+    const icon = useMemo(() => {
+        switch (type) {
+            case "critical":
+                return <ErrorIcon fontSize={24} {...props} />;
+            case "info":
+                return <InfoIcon fontSize={24} {...props} />;
+            case "success":
+                return <CheckCircleIcon fontSize={24} {...props} />;
+            default:
+                return <InfoIcon fontSize={24} {...props} />;
+        }
+    }, [type, props]);
+
+    return (
+        <div {...props} className={classes} data-type={type}>
+            <div className={styles.icon}>{avatar ?? icon}</div>
+            <span className={styles.content}>{children}</span>
+            <div className={styles.actions}>
+                {actions}
+                {onClose && (
+                    <Button kind="secondary" size="sm" onClick={onClose}>
+                        {_t("action|dismiss")}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`AvatarWithDetails renders a banner with an action 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        encryption|pinned_identity_changed
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        encryption|withdraw_verification_action
+      </button>
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <img
+        alt="Example"
+        src="https://picsum.photos/32/32"
+      />
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a critical banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="critical"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a default banner 1`] = `
+<div>
+  <div
+    class="banner"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a info banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="info"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AvatarWithDetails renders a success banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="success"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <p>
+        Hello! This is a status banner.
+      </p>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export * from "./Banner";
@@ -11,6 +11,7 @@ export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
+export * from "./composer/Banner";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";
 export * from "./pill-input/Pill";
@@ -22,10 +23,12 @@ export * from "./utils/Flex";

 // Utils
 export * from "./utils/i18n";
+export * from "./utils/i18nContext";
 export * from "./utils/humanize";
 export * from "./utils/DateUtils";
 export * from "./utils/numbers";
 export * from "./utils/FormattingUtils";
+export * from "./utils/I18nApi";

 // MVVM
 export * from "./viewmodel";
@@ -12,7 +12,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"

 import { Flex } from "../../utils/Flex";
 import styles from "./Pill.module.css";
-import { _t } from "../../utils/i18n";
+import { useI18n } from "../../utils/i18nContext";

 export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
    /**
@@ -39,6 +39,7 @@ export interface PillProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick
 */
 export function Pill({ className, children, label, onClick, ...props }: PropsWithChildren<PillProps>): JSX.Element {
    const id = useId();
+    const { translate: _t } = useI18n();

    return (
        <Flex
@@ -53,7 +54,13 @@ export function Pill({ className, children, label, onClick, ...props }: PropsWit
                {label}
            </span>
            {onClick && (
-                <IconButton aria-describedby={id} size="16px" onClick={onClick} aria-label={_t("action|delete")}>
+                <IconButton
+                    aria-describedby={id}
+                    size="16px"
+                    onClick={onClick}
+                    aria-label={_t("action|delete")}
+                    className="mx_Dialog_nonDialogButton"
+                >
                    <CloseIcon color="var(--cpd-color-icon-tertiary)" />
                </IconButton>
            )}
@@ -18,14 +18,14 @@ exports[`Pill renders the pill 1`] = `
    <button
      aria-describedby="_r_0_"
      aria-label="Delete"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1pz9o_8 mx_Dialog_nonDialogButton"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 16px;"
      tabindex="0"
    >
      <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
        style="--cpd-icon-button-size: 100%;"
      >
        <svg
@@ -8,8 +8,8 @@
 import React from "react";
 import { fn } from "storybook/test";

-import { RichItem } from "./RichItem";
 import type { Meta, StoryFn } from "@storybook/react-vite";
+import { RichItem } from "./RichItem";

 const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime();

@@ -9,8 +9,8 @@ import React, { type HTMLAttributes, type JSX, memo } from "react";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";

 import styles from "./RichItem.module.css";
-import { humanizeTime } from "../../utils/humanize";
 import { Flex } from "../../utils/Flex";
+import { useI18n } from "../../utils/i18nContext";

 export interface RichItemProps extends HTMLAttributes<HTMLLIElement> {
    /**
@@ -63,6 +63,8 @@ export const RichItem = memo(function RichItem({
    selected,
    ...props
 }: RichItemProps): JSX.Element {
+    const i18n = useI18n();
+
    return (
        <li
            className={styles.richItem}
@@ -77,7 +79,7 @@ export const RichItem = memo(function RichItem({
            <span className={styles.description}>{description}</span>
            {timestamp && (
                <span role="timer" className={styles.timestamp}>
-                    {humanizeTime(timestamp)}
+                    {i18n.humanizeTime(timestamp)}
                </span>
            )}
        </li>
@@ -16,16 +16,24 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";

+import { I18nApi, I18nContext } from "../..";
+
 const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
    return ({ children }: { children: React.ReactNode }) => {
        if (Wrapper) {
            return (
-                <Wrapper>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </Wrapper>
+                <I18nContext.Provider value={new I18nApi()}>
+                    <Wrapper>
+                        <TooltipProvider>{children}</TooltipProvider>
+                    </Wrapper>
+                </I18nContext.Provider>
            );
        } else {
-            return <TooltipProvider>{children}</TooltipProvider>;
+            return (
+                <I18nContext.Provider value={new I18nApi()}>
+                    <TooltipProvider>{children}</TooltipProvider>
+                </I18nContext.Provider>
+            );
        }
    };
 };
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type TranslationKey } from "../i18nKeys";
+import { I18nApi } from "./I18nApi";
+
+describe("I18nApi", () => {
+    it("can register a translation and use it", () => {
+        const i18n = new I18nApi();
+        i18n.register({
+            "hello.world": {
+                en: "Hello, World!",
+            },
+        });
+
+        expect(i18n.translate("hello.world" as TranslationKey)).toBe("Hello, World!");
+    });
+});
@@ -6,16 +6,17 @@ Please see LICENSE files in the repository root for full details.
 */

 import { type I18nApi as II18nApi, type Variables, type Translations } from "@element-hq/element-web-module-api";
-import { registerTranslations } from "@element-hq/web-shared-components";

-import { _t, getCurrentLanguage, type TranslationKey } from "../languageHandler.tsx";
+import { humanizeTime } from "./humanize";
+import { _t, getLocale, registerTranslations } from "./i18n";
+import { type TranslationKey } from "../i18nKeys";

 export class I18nApi implements II18nApi {
    /**
     * Read the current language of the user in IETF Language Tag format
     */
    public get language(): string {
-        return getCurrentLanguage();
+        return getLocale();
    }

    /**
@@ -44,4 +45,8 @@ export class I18nApi implements II18nApi {
    public translate(key: TranslationKey, variables?: Variables): string {
        return _t(key, variables);
    }
+
+    public humanizeTime(timeMillis: number): string {
+        return humanizeTime(timeMillis, this);
+    }
 }
@@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { _t } from "./i18n";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+import { _t as _tFromModule } from "./i18n";

 // These are the constants we use for when to break the text
 const MILLISECONDS_RECENT = 15000;
@@ -21,13 +23,15 @@ const HOURS_1_DAY = 26;
 * @param {number} timeMillis The time in millis to compare against.
 * @returns {string} The humanized time.
 */
-export function humanizeTime(timeMillis: number): string {
+export function humanizeTime(timeMillis: number, i18nApi?: I18nApi): string {
    const now = Date.now();
    let msAgo = now - timeMillis;
    const minutes = Math.abs(Math.ceil(msAgo / 60000));
    const hours = Math.ceil(minutes / 60);
    const days = Math.ceil(hours / 24);

+    const _t = i18nApi?.translate ?? _tFromModule;
+
    if (msAgo >= 0) {
        // Past
        if (msAgo <= MILLISECONDS_RECENT) return _t("time|few_seconds_ago");
@@ -0,0 +1,27 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { createContext, useContext } from "react";
+import { type I18nApi } from "@element-hq/element-web-module-api";
+
+export const I18nContext = createContext<I18nApi | null>(null);
+I18nContext.displayName = "I18nContext";
+
+/**
+ * A hook to get the i18n API from the context. Will throw if no i18n context is found.
+ * @throws If no i18n context is found
+ * @returns The i18n API from the context
+ */
+export function useI18n(): I18nApi {
+    const i18n = useContext(I18nContext);
+
+    if (!i18n) {
+        throw new Error("useI18n must be used within an I18nContext.Provider");
+    }
+
+    return i18n;
+}
@@ -0,0 +1,47 @@
+/*
+Copyright 2025 Element Creations Ltd.
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { renderHook } from "jest-matrix-react";
+
+import { BaseViewModel } from "../BaseViewModel";
+import { useCreateAutoDisposedViewModel } from "../useCreateAutoDisposedViewModel";
+
+class TestViewModel extends BaseViewModel<{ count: number }, { initial: number }> {
+    public constructor(props: { initial: number }) {
+        super(props, { count: props.initial });
+    }
+
+    public increment(): void {
+        const newCount = this.getSnapshot().count + 1;
+        this.snapshot.set({ count: newCount });
+    }
+}
+
+describe("useAutoDisposedViewModel", () => {
+    it("should return view-model", () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const { result } = renderHook(() => useCreateAutoDisposedViewModel(vmCreator));
+        const vm = result.current;
+        expect(vm).toBeInstanceOf(TestViewModel);
+        expect(vm.isDisposed).toStrictEqual(false);
+    });
+
+    it("should dispose view-model on unmount", () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const { result, unmount } = renderHook(() => useCreateAutoDisposedViewModel(vmCreator));
+        const vm = result.current;
+        vm.increment();
+        unmount();
+        expect(vm.isDisposed).toStrictEqual(true);
+    });
+
+    it("should recreate view-model on react strict mode", async () => {
+        const vmCreator = (): TestViewModel => new TestViewModel({ initial: 0 });
+        const output = renderHook(() => useCreateAutoDisposedViewModel(vmCreator), { reactStrictMode: true });
+        const vm = output.result.current;
+        expect(vm.isDisposed).toStrictEqual(false);
+    });
+});
@@ -0,0 +1,68 @@
+/*
+Copyright 2025 Element Creations Ltd.
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { useEffect, useState } from "react";
+
+import type { BaseViewModel } from "./BaseViewModel";
+
+type VmCreator<B extends BaseViewModel<unknown, unknown>> = () => B;
+
+/**
+ * Instantiate a view-model that gets disposed when the calling react component unmounts.
+ * In other words, this hook ties the lifecycle of a view-model to the lifecycle of a
+ * react component.
+ *
+ * @param vmCreator A function that returns a view-model instance
+ * @returns view-model instance from vmCreator
+ * @example
+ * const vm = useCreateAutoDisposedViewModel(() => new FooViewModel({prop1, prop2, ...});
+ */
+export function useCreateAutoDisposedViewModel<B extends BaseViewModel<unknown, unknown>>(vmCreator: VmCreator<B>): B {
+    /**
+     * The view-model instance may be replaced by a different instance in some scenarios.
+     * We want to be sure that whichever react component called this hook gets re-rendered
+     * when this happens, hence the state.
+     */
+    const [viewModel, setViewModel] = useState<B>(vmCreator);
+
+    /**
+     * Our intention here is to ensure that the dispose method of the view-model gets called
+     * when the component that uses this hook unmounts.
+     * We can do that by combining a useEffect cleanup with an empty dependency array.
+     */
+    useEffect(() => {
+        let toDispose = viewModel;
+
+        /**
+         * Because we use react strict mode, react will run our effects twice in dev mode to make
+         * sure that they are pure.
+         * This presents a complication - the vm instance that we created in our state initializer
+         * will get disposed on the first cleanup.
+         * So we'll recreate the view-model if it's already disposed.
+         */
+        if (viewModel.isDisposed) {
+            const newViewModel = vmCreator();
+            // Change toDispose so that we don't end up disposing the already disposed vm.
+            toDispose = newViewModel;
+            setViewModel(newViewModel);
+        }
+        return () => {
+            // Dispose the view-model when this component unmounts
+            toDispose.dispose();
+        };
+
+        /**
+         * We explicitly provide an empty dependency array as we don't expect the viewModel/viewCreator to
+         * change.
+         * Or to put it in another way, the only reason to use this hook is to create/dispose the view-model
+         * and that is something that should only happen at the start/end of the lifecycle of this component.
+         */
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return viewModel;
+}
@@ -7,7 +7,7 @@
        "esModuleInterop": true,
        "useDefineForClassFields": true,
        "module": "es2022",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
        "target": "es2022",
        "noUnusedLocals": true,
        "sourceMap": false,
@@ -21,11 +21,5 @@
            "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
        }
    },
-    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
-    "ts-node": {
-        "files": true,
-        "moduleTypes": {
-            "*": "cjs"
-        }
-    }
+    "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -0,0 +1,56 @@
+diff --git a/node_modules/jsdom/lib/jsdom/browser/Window.js b/node_modules/jsdom/lib/jsdom/browser/Window.js
+index 52d011c..f62f6d6 100644
+--- a/node_modules/jsdom/lib/jsdom/browser/Window.js
+++ b/node_modules/jsdom/lib/jsdom/browser/Window.js
+@@ -505,10 +505,10 @@ function installOwnProperties(window, options) {
+     event: makeReplaceablePropertyDescriptor("event", window),
+ 
+     // [LegacyUnforgeable]:
+-    window: { configurable: false },
+-    document: { configurable: false },
+-    location: { configurable: false },
+-    top: { configurable: false }
+    window: { configurable: true },
+    document: { configurable: true },
+    location: { configurable: true },
+    top: { configurable: true }
+   });
+ 
+ 
+diff --git a/node_modules/jsdom/lib/jsdom/living/generated/Location.js b/node_modules/jsdom/lib/jsdom/living/generated/Location.js
+index fc4d1dd..c855bd5 100644
+--- a/node_modules/jsdom/lib/jsdom/living/generated/Location.js
+++ b/node_modules/jsdom/lib/jsdom/living/generated/Location.js
+@@ -322,19 +322,19 @@ function getUnforgeables(globalObject) {
+       }
+     });
+     Object.defineProperties(unforgeables, {
+-      assign: { configurable: false, writable: false },
+-      replace: { configurable: false, writable: false },
+-      reload: { configurable: false, writable: false },
+-      href: { configurable: false },
+-      toString: { configurable: false, writable: false },
+-      origin: { configurable: false },
+-      protocol: { configurable: false },
+-      host: { configurable: false },
+-      hostname: { configurable: false },
+-      port: { configurable: false },
+-      pathname: { configurable: false },
+-      search: { configurable: false },
+-      hash: { configurable: false }
+      assign: { configurable: true, writable: false },
+      replace: { configurable: true, writable: false },
+      reload: { configurable: true, writable: false },
+      href: { configurable: true },
+      toString: { configurable: true, writable: false },
+      origin: { configurable: true },
+      protocol: { configurable: true },
+      host: { configurable: true },
+      hostname: { configurable: true },
+      port: { configurable: true },
+      pathname: { configurable: true },
+      search: { configurable: true },
+      hash: { configurable: true }
+     });
+     unforgeablesMap.set(globalObject, unforgeables);
+   }
@@ -49,7 +49,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
    /**
     * Take snapshots of mx_EventTile_last on each layout, outputting log for reference/debugging.
     * @param detail The snapshot name. Used for outputting logs too.
-     * @param monospace This changes the font used to render the UI from a default one to Inconsolata. Set to false by default.
+     * @param monospace This changes the font used to render the UI from a default one to Fira Code. Set to false by default.
     */
    const takeSnapshots = async (page: Page, app: ElementAppPage, detail: string, monospace = false) => {
        // Check that the audio player is rendered and its button becomes visible
@@ -65,7 +65,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {

            if (monospace) {
                // Assert that the monospace timer is visible
-                await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", "Inconsolata");
+                await expect(locator.locator("[role='timer']")).toHaveCSS("font-family", '"Fira Code"');
            }
        };

@@ -73,7 +73,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            // Enable system font and monospace setting
            await app.settings.setValue("useBundledEmojiFont", null, SettingLevel.DEVICE, false);
            await app.settings.setValue("useSystemFont", null, SettingLevel.DEVICE, true);
-            await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Inconsolata");
+            await app.settings.setValue("systemFont", null, SettingLevel.DEVICE, "Fira Code");
        }

        // Check the status of the seek bar
@@ -49,7 +49,10 @@ test.describe("Encryption state after registration", () => {
            "Pa$sW0rD!",
        );

-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await page
+            .getByRole("navigation", { name: "Room list" })
+            .getByRole("button", { name: "New conversation" })
+            .click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -78,7 +81,10 @@ test.describe("Key backup reset from elsewhere", () => {
        await page.getByRole("button", { name: "Continue" }).click();
        await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@email.com`, testPassword);

-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await page
+            .getByRole("navigation", { name: "Room list" })
+            .getByRole("button", { name: "New conversation" })
+            .click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -21,7 +21,7 @@ const checkDMRoom = async (page: Page) => {
 };

 const startDMWithBob = async (page: Page, bob: Bot) => {
-    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "New conversation" }).click();
    await page.getByRole("menuitem", { name: "Start chat" }).click();
    await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
    await page.getByRole("option", { name: bob.credentials.displayName }).click();
@@ -130,53 +130,68 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        await page.unrouteAll({ behavior: "ignoreErrors" });
    });

-    test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
-        // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
-        await logIntoElement(page, credentials);
+    test(
+        "Verify device with QR code during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            // A mode 0x02 verification: "self-verifying in which the current device does not yet trust the master key"
+            await logIntoElement(page, credentials);

-        // Launch the verification request between alice and the bot
-        const verificationRequest = await initiateAliceVerificationRequest(page);
+            // Launch the verification request between alice and the bot
+            const verificationRequest = await initiateAliceVerificationRequest(page);

-        const infoDialog = page.locator(".mx_InfoDialog");
-        // feed the QR code into the verification request.
-        const qrData = await readQrCode(infoDialog);
-        const verifier = await verificationRequest.evaluateHandle(
-            (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
-            [...qrData],
-        );
+            const infoDialog = page.locator(".mx_InfoDialog");
+            // feed the QR code into the verification request.
+            const qrData = await readQrCode(infoDialog);
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("qr-code.png", {
+                mask: [infoDialog.locator("img")],
+            });
+            const verifier = await verificationRequest.evaluateHandle(
+                (request, qrData) => request.scanQRCode(new Uint8ClampedArray(qrData)),
+                [...qrData],
+            );

-        // Confirm that the bot user scanned successfully
-        await expect(infoDialog.getByText("Confirm that you see a green shield on your other device")).toBeVisible();
-        await infoDialog.getByRole("button", { name: "Yes, I see a green shield" }).click();
-        await infoDialog.getByRole("button", { name: "Got it" }).click();
+            // Confirm that the bot user scanned successfully
+            await expect(
+                infoDialog.getByText("Confirm that you see a green shield on your other device"),
+            ).toBeVisible();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("confirm-green-shield.png");
+            await infoDialog.getByRole("button", { name: "Yes, I see a green shield" }).click();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("got-it.png");
+            await infoDialog.getByRole("button", { name: "Got it" }).click();

-        // wait for the bot to see we have finished
-        await verifier.evaluate((verifier) => verifier.verify());
+            // wait for the bot to see we have finished
+            await verifier.evaluate((verifier) => verifier.verify());

-        // the bot uploads the signatures asynchronously, so wait for that to happen
-        await page.waitForTimeout(1000);
+            // the bot uploads the signatures asynchronously, so wait for that to happen
+            await page.waitForTimeout(1000);

-        // our device should trust the bot device
-        await app.client.evaluate(async (cli, aliceBotCredentials) => {
-            const deviceStatus = await cli
-                .getCrypto()!
-                .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
-            if (!deviceStatus.isVerified()) {
-                throw new Error("Bot device was not verified after QR code verification");
-            }
-        }, aliceBotClient.credentials);
+            // our device should trust the bot device
+            await app.client.evaluate(async (cli, aliceBotCredentials) => {
+                const deviceStatus = await cli
+                    .getCrypto()!
+                    .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
+                if (!deviceStatus.isVerified()) {
+                    throw new Error("Bot device was not verified after QR code verification");
+                }
+            }, aliceBotClient.credentials);

-        // Check that our device is now cross-signed
-        await checkDeviceIsCrossSigned(app);
+            // Check that our device is now cross-signed
+            await checkDeviceIsCrossSigned(app);

-        // Check that the current device is connected to key backup
-        await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
-    });
+            // Check that the current device is connected to key backup
+            await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
+        },
+    );

-    test("Verify device with Security Phrase during login", async ({ page, app, credentials, homeserver }) => {
-        await logIntoElement(page, credentials);
-        await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase");
-    });
+    test(
+        "Verify device with Security Phrase during login",
+        { tag: "@screenshot" },
+        async ({ page, app, credentials, homeserver }) => {
+            await logIntoElement(page, credentials);
+            await enterRecoveryKeyAndCheckVerified(page, app, "new passphrase", true);
+        },
+    );

    test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
@@ -226,7 +241,12 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
    });

    /** Helper for the three tests above which verify by recovery key */
-    async function enterRecoveryKeyAndCheckVerified(page: Page, app: ElementAppPage, recoveryKey: string) {
+    async function enterRecoveryKeyAndCheckVerified(
+        page: Page,
+        app: ElementAppPage,
+        recoveryKey: string,
+        screenshot = false,
+    ) {
        await page.getByRole("button", { name: "Use recovery key" }).click();

        // Enter the recovery key
@@ -234,8 +254,12 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        // We use `pressSequentially` here to make sure that the FocusLock isn't causing us any problems
        // (cf https://github.com/element-hq/element-web/issues/30089)
        await dialog.getByTitle("Recovery key").pressSequentially(recoveryKey);
+        if (screenshot) {
+            await expect(page.locator(".mx_Dialog").filter({ hasText: "Enter your recovery key" })).toMatchScreenshot(
+                "recovery-key.png",
+            );
+        }
        await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
-
        await page.getByRole("button", { name: "Done" }).click();

        // Check that our device is now cross-signed
@@ -23,7 +23,10 @@ test.describe("Key storage out of sync toast", () => {
        await deleteCachedSecrets(page);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await page
+            .getByRole("navigation", { name: "Room list" })
+            .getByRole("button", { name: "New conversation" })
+            .click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -68,7 +71,10 @@ test.describe("'Turn on key storage' toast", () => {
        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await page
+            .getByRole("navigation", { name: "Room list" })
+            .getByRole("button", { name: "New conversation" })
+            .click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -438,7 +438,7 @@ export async function sendMessageInCurrentRoom(page: Page, message: string): Pro
 * @param isEncrypted - Whether the room should be encrypted
 */
 export async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
-    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "New conversation" }).click();
    await page.getByRole("menuitem", { name: "New room" }).click();

    const dialog = page.locator(".mx_Dialog");
@@ -29,5 +29,12 @@ test.describe("Devtools", () => {
                display: none;
            }`,
        });
+
+        // Try entering a value for the Developer.elementCallUrl setting
+        const input = page.getByRole("textbox", { name: "Element Call URL" });
+        await input.fill("https://example.com");
+        await input.press("Enter");
+        // expect EW NOT to reload
+        await page.getByText("Saved").isVisible();
    });
 });
@@ -73,7 +73,10 @@ test.describe("Invite dialog", function () {
        "should support inviting a user to Direct Messages",
        { tag: "@screenshot" },
        async ({ page, app, user, bot }) => {
-            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page
+                .getByRole("navigation", { name: "Room list" })
+                .getByRole("button", { name: "New conversation" })
+                .click();
            await page.getByRole("menuitem", { name: "Start chat" }).click();

            const other = page.locator(".mx_InviteDialog_other");
@@ -30,7 +30,7 @@ test.describe("Header section of the room list", () => {
        const roomListHeader = getHeaderSection(page);
        await expect(roomListHeader).toMatchScreenshot("room-list-header.png");

-        const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
+        const composeMenu = roomListHeader.getByRole("button", { name: "New conversation" });
        await composeMenu.click();

        await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
@@ -55,7 +55,7 @@ test.describe("Header section of the room list", () => {
        await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");

        await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
-        await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
+        await expect(roomListHeader.getByRole("button", { name: "New conversation" })).toBeVisible();

        const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
        await spaceMenu.click();
@@ -299,9 +299,7 @@ test.describe("Room list", () => {
            const publicRoom = roomListView.getByRole("option", { name: "low priority room" });

            // Make room low priority
-            await publicRoom.hover();
-            const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
-            await roomItemMenu.click();
+            await publicRoom.click({ button: "right" });
            await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();

            // Should have low priority decoration
@@ -309,13 +307,16 @@ test.describe("Room list", () => {
                "This is a low priority room",
            );

-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();
            await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
        });

        test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page
+                .getByRole("navigation", { name: "Room list" })
+                .getByRole("button", { name: "New conversation" })
+                .click();
            await page.getByRole("menuitem", { name: "New video room" }).click();
            await page.getByRole("textbox", { name: "Name" }).fill("video room");
            await page.getByRole("button", { name: "Create video room" }).click();
@@ -427,7 +428,9 @@ test.describe("Room list", () => {
            await app.settings.closeDialog();

            await app.settings.openUserSettings("Notifications");
-            await page.getByText("Show all activity in the room list (dots or number of unread messages)").click();
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
            await app.settings.closeDialog();

            // Switch to the other room to avoid the notification to be cleared
@@ -447,12 +450,11 @@ test.describe("Room list", () => {
            await bot.joinRoom(roomId);

            const room = roomListView.getByRole("option", { name: "mark as unread" });
-            await room.hover();
-            await room.getByRole("button", { name: "More Options" }).click();
+            await room.click({ button: "right" });
            await page.getByRole("menuitem", { name: "mark as unread" }).click();

-            // focus the user menu to avoid to have hover decoration
-            await page.getByRole("button", { name: "User menu" }).focus();
+            // focus the header to avoid to have hover decoration
+            await page.getByTestId("room-list-header").click();

            await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
        });
@@ -46,24 +46,21 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {

            await submitShareLocation(page);

-            await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
-                position: {
-                    x: 225,
-                    y: 150,
-                },
-            });
+            await page.getByRole("button", { name: "Map marker" }).click();

-            // Wait for map to load
-            await expect(page.getByRole("region", { name: "Map" })).toMatchScreenshot(
+            const dialog = page.getByRole("dialog");
+
+            // wait for the dialog to be visible
+            await expect(dialog).toBeVisible();
+
+            // screenshot the map within the dialog
+            await expect(dialog.getByRole("region", { name: "Map" })).toMatchScreenshot(
                "location-pin-drop-message-map.png",
            );

-            // clicking location tile opens maximised map
-            await expect(page.getByRole("dialog")).toBeVisible();
-
            await app.closeDialog();

-            await expect(page.locator(".mx_Marker")).toBeVisible();
+            await expect(page.getByRole("button", { name: "Map marker" })).toBeVisible();
        },
    );

@@ -129,6 +129,7 @@ test.describe("Login", () => {
            await expect(page.getByRole("heading", { name: "Welcome to Element!" })).toBeVisible();

            // Start the login process
+            await expect(axe).toHaveNoViolations();
            await page.getByRole("link", { name: "Sign in" }).click();

            // first pick the homeserver, as otherwise the user picker won't be visible
@@ -148,8 +149,6 @@ test.describe("Login", () => {
            await selectHomeserver(page, homeserver.baseUrl);

            await expect(page.getByRole("textbox", { name: "Username" })).toBeVisible();
-            // Disabled because flaky - see https://github.com/vector-im/element-web/issues/24688
-            // cy.percySnapshot("Login");
            await expect(axe).toHaveNoViolations();

            await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
@@ -0,0 +1,30 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from "../../element-web-test";
+import { logIntoElement } from "../crypto/utils.ts";
+
+test.describe(`With force_verification: true`, () => {
+    test.use({
+        config: {
+            force_verification: true,
+        },
+    });
+
+    test("Can reload after login", async ({ page, credentials }) => {
+        // The page should reload fine when going to the base client URL
+        // Regression test for https://github.com/element-hq/element-web/issues/31203
+        await logIntoElement(page, credentials);
+
+        // We should auto-upload the E2EE keys, and show a welcome page
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+
+        await page.goto("/");
+
+        await expect(page.getByRole("heading", { name: `Welcome ${credentials.displayName}` })).toBeVisible();
+    });
+});
@@ -42,7 +42,7 @@ export async function registerAccountMas(
    await page.getByRole("button", { name: "Continue" }).click();
    await page.getByRole("textbox", { name: "Display Name" }).fill(username);
    await page.getByRole("button", { name: "Continue" }).click();
-    await expect(page.getByText("Allow access to your account?")).toBeVisible();
+    await expect(page.getByText("Continue to Element?")).toBeVisible();
    await page.getByRole("button", { name: "Continue" }).click();
 }

@@ -56,6 +56,6 @@ export async function logInAccountMas(page: Page, username: string, password: st
    await page.getByRole("textbox", { name: "Password", exact: true }).fill(password);
    await page.getByRole("button", { name: "Continue" }).click();

-    await expect(page.getByText("Allow access to your account?")).toBeVisible();
+    await expect(page.getByText("Continue to Element?")).toBeVisible();
    await page.getByRole("button", { name: "Continue" }).click();
 }
@@ -80,13 +80,12 @@ test.describe("Memberlist", () => {
        await app.scrollListToBottom(memberListContainer);

        // Wait for the target member to be visible after scrolling
-        const targetName = "Member14";
+        // Member9 is the last in the list as they are lexicographically sorted
+        const targetName = "Member9";
        const targetMember = memberlist.locator(".mx_MemberTileView_name").filter({ hasText: targetName });
        await targetMember.waitFor({ state: "visible" });
-
-        // Verify Alice is not visible at this point
-        await expect(memberlist.locator(".mx_MemberTileView_name").filter({ hasText: "Alice" })).toHaveCount(0);
-
+        // Alice is not visible and will require scrolling to,
+        // but is likely in the dom as we have an overscan on the top and bottom of the list.
        // Click on a member near the bottom of the list
        await expect(targetMember).toBeVisible();
        await targetMember.click();
@@ -164,7 +164,7 @@ test.describe("RightPanel", () => {
                    css: `
                        /* Use monospace font for consistent mask width */
                        .mx_UserInfo_profile_mxid {
-                            font-family: Inconsolata !important;
+                            font-family: "Fira Code" !important;
                        }
                    `,
                });
@@ -38,12 +38,11 @@ test.describe("Room Directory", () => {
            // Publish into the public rooms directory
            const publishedAddresses = page.locator(".mx_SettingsFieldset", { hasText: "Published Addresses" });
            await expect(publishedAddresses.locator("#canonicalAlias")).toHaveValue(`#gaming:${user.homeServer}`);
-            const checkbox = publishedAddresses
-                .locator(".mx_SettingsFlag", {
-                    hasText: `Publish this room to the public in ${user.homeServer}'s room directory?`,
-                })
-                .getByRole("switch");
-            await checkbox.check();
+            const checkbox = publishedAddresses.getByRole("switch", {
+                name: `Publish this room to the public in ${user.homeServer}'s room directory?`,
+            });
+            // .click() rather than .check() as checking happens after publish
+            await checkbox.click();
            await expect(checkbox).toBeChecked();

            await app.closeDialog();
@@ -45,7 +45,7 @@ test.describe("Create Room", () => {
    );

    test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
-        await page.getByRole("button", { name: "Add", exact: true }).click();
+        await page.getByRole("button", { name: "New conversation", exact: true }).click();
        await page.getByRole("menuitem", { name: "Start chat" }).click();

        await page.getByTestId("invite-dialog-input").fill(user.userId);
@@ -47,12 +47,11 @@ test.describe("Mark as Unread", () => {
        await page.goto("/#/room/" + dummyRoomId);

        const roomTile = page.getByLabel(TEST_ROOM_NAME);
-        await roomTile.focus();
-        await roomTile.getByRole("button", { name: "More Options" }).click();
+        await roomTile.click({ button: "right" });
        await page.getByRole("menuitem", { name: "Mark as unread" }).click();

-        // focus the user menu to avoid to have hover decoration
-        await page.getByRole("button", { name: "User menu" }).focus();
+        // focus another room to make the notification decoration appear (room options are display on hover)
+        await page.getByRole("option", { name: "Open room Room of no consequence" }).click();

        await expect(roomTile.getByTestId("notification-decoration")).toBeVisible();
    });
@@ -50,8 +50,8 @@ test.describe("Appearance user settings tab", () => {
        // Click "Show advanced" link button
        await tab.getByRole("button", { name: "Show advanced" }).click();

-        await tab.getByLabel("Use bundled emoji font").click();
-        await tab.getByLabel("Use a system font").click();
+        await tab.getByRole("switch", { name: "Use bundled emoji font" }).click();
+        await tab.getByRole("switch", { name: "Use a system font" }).click();

        // Assert that the font-family value was removed
        await expect(page.locator("body")).toHaveCSS("font-family", '""');
@@ -84,7 +84,7 @@ class Helpers {
    /**
     * Return the system theme toggle
     */
-    getMatchSystemThemeCheckbox() {
+    getMatchSystemThemeSwitch() {
        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
    }

@@ -216,9 +216,9 @@ class Helpers {
    }

    /**
-     * Return the compact layout checkbox
+     * Return the compact layout switch
     */
-    getCompactLayoutCheckbox() {
+    getCompactLayoutSwitch() {
        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
    }

@@ -40,9 +40,9 @@ test.describe("Appearance user settings tab", () => {
        );

        test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
+            await expect(util.getCompactLayoutSwitch()).not.toBeChecked();

-            await util.getCompactLayoutCheckbox().click();
+            await util.getCompactLayoutSwitch().click();
            await util.assertCompactLayout();
        });

@@ -52,11 +52,11 @@ test.describe("Appearance user settings tab", () => {
            user,
            util,
        }) => {
-            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).not.toBeDisabled();

            // Select the bubble layout, which should disable the compact layout checkbox
            await util.getBubbleLayout().click();
-            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+            await expect(util.getCompactLayoutSwitch()).toBeDisabled();
        });
    });
 });
@@ -25,7 +25,7 @@ test.describe("Appearance user settings tab", () => {
            { tag: "@screenshot" },
            async ({ page, app, util }) => {
                // Assert that 'Match system theme' is not checked
-                await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+                await expect(util.getMatchSystemThemeSwitch()).not.toBeChecked();

                // Assert that the light theme is selected
                await expect(util.getLightTheme()).toBeChecked();
@@ -41,7 +41,7 @@ test.describe("Appearance user settings tab", () => {
            "should disable the themes when the system theme is clicked",
            { tag: "@screenshot" },
            async ({ page, app, util }) => {
-                await util.getMatchSystemThemeCheckbox().click();
+                await util.getMatchSystemThemeSwitch().click();

                // Assert that the themes are disabled
                await expect(util.getLightTheme()).toBeDisabled();
@@ -184,11 +184,9 @@ test.describe("Sliding Sync", () => {

    test("should update user settings promptly", async ({ page, app }) => {
        await app.settings.openUserSettings("Preferences");
-        const locator = page.locator(".mx_SettingsFlag").filter({ hasText: "Show timestamps in 12 hour format" });
+        const locator = page.getByRole("switch", { name: "Show timestamps in 12 hour format" });
        await expect(locator).toBeVisible();
-        await expect(locator.locator(".mx_ToggleSwitch_on")).not.toBeAttached();
-        await locator.locator(".mx_ToggleSwitch_ball").click();
-        await expect(locator.locator(".mx_ToggleSwitch_on")).toBeAttached();
+        await locator.check();
    });

    test("should send subscribe_rooms on room switch if room not already subscribed", async ({ page, app }) => {
@@ -373,7 +373,7 @@ test.describe("Threads", () => {

            // Exclude timestamp, read marker, and maplibregl-map from snapshots
            const css =
-                ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map { visibility: hidden !important; }";
+                ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .maplibregl-map, .maplibregl-ctrl-attrib { visibility: hidden !important; }";

            let locator = page.locator(".mx_RoomView_body");
            // User sends message
@@ -24,7 +24,7 @@ test.describe("UserView", () => {
            css: `
                /* Use monospace font for consistent mask width */
                .mx_UserInfo_profile_mxid {
-                    font-family: Inconsolata !important;
+                    font-family: "Fira Code" !important;
                }
            `,
        });
@@ -1,15 +1,25 @@
 /*
 Copyright 2025 New Vector Ltd.
-
+Copyright (C) 2025 Element Creations Ltd
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */

+import { readFile } from "node:fs/promises";
+import { type Page } from "playwright-core";
+
 import type { EventType, Preset } from "matrix-js-sdk/src/matrix";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { test, expect } from "../../element-web-test";
 import type { Credentials } from "../../plugins/homeserver";
-import type { Bot } from "../../pages/bot";
+import { Bot } from "../../pages/bot";
+
+// Load a copy of our fake Element Call app, and the latest widget API.
+// The fake call app does *just* enough to convince Element Web that a call is ongoing
+// and functions like PiP work. It does not actually do anything though, to limit the
+// surface we test.
+const widgetApi = readFile("node_modules/matrix-widget-api/dist/api.min.js", "utf-8");
+const fakeCallClient = readFile("playwright/sample-files/fake-element-call.html", "utf-8");

 function assertCommonCallParameters(
    url: URLSearchParams,
@@ -27,27 +37,28 @@ function assertCommonCallParameters(
    expect(hash.get("preload")).toEqual("false");
 }

-async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "notification") {
+async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "notification", intent?: string) {
    const resp = await bot.sendStateEvent(
        roomId,
        "org.matrix.msc3401.call.member",
        {
-            application: "m.call",
-            call_id: "",
-            device_id: "OiDFxsZrjz",
-            expires: 180000000,
-            foci_preferred: [
+            "application": "m.call",
+            "call_id": "",
+            "m.call.intent": intent,
+            "device_id": "OiDFxsZrjz",
+            "expires": 180000000,
+            "foci_preferred": [
                {
                    livekit_alias: roomId,
                    livekit_service_url: "https://example.org",
                    type: "livekit",
                },
            ],
-            focus_active: {
+            "focus_active": {
                focus_selection: "oldest_membership",
                type: "livekit",
            },
-            scope: "m.room",
+            "scope": "m.room",
        },
        `_@${bot.credentials.userId}_OiDFxsZrjz_m.call`,
    );
@@ -64,6 +75,7 @@ async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "n
            event_id: resp.event_id,
            rel_type: "org.matrix.msc4075.rtc.notification.parent",
        },
+        "m.call.intent": intent,
        "notification_type": notification,
        "sender_ts": 1758611895996,
    });
@@ -87,11 +99,13 @@ test.describe("Element Call", () => {
    });

    test.beforeEach(async ({ page, user, app }) => {
-        // Mock a widget page. It doesn't need to actually be Element Call.
-        await page.route("/widget.html", async (route) => {
+        // Mock a widget page. We use a fake version of Element Call here.
+        // We should match on things after .html as these widgets get a ton of extra params.
+        await page.route(/\/widget.html.+/, async (route) => {
            await route.fulfill({
                status: 200,
-                body: "<p> Hello world </p>",
+                // Do enough to
+                body: (await fakeCallClient).replace("widgetCodeHere", await widgetApi),
            });
        });
        await app.settings.setValue(
@@ -103,15 +117,21 @@ test.describe("Element Call", () => {
    });

    test.describe("Group Chat", () => {
+        let charlie: Bot;
        test.use({
-            room: async ({ page, app, user, bot }, use) => {
-                const roomId = await app.client.createRoom({ name: "TestRoom", invite: [bot.credentials.userId] });
+            room: async ({ page, app, user, homeserver, bot }, use) => {
+                charlie = new Bot(page, homeserver, { displayName: "Charlie" });
+                await charlie.prepareClient();
+                const roomId = await app.client.createRoom({
+                    name: "TestRoom",
+                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                });
                await use({ roomId });
            },
        });
        test("should be able to start a video call", async ({ page, user, room, app }) => {
            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();

            await page.getByRole("button", { name: "Video call" }).click();
            await page.getByRole("menuitem", { name: "Element Call" }).click();
@@ -126,9 +146,16 @@ test.describe("Element Call", () => {
            expect(hash.get("skipLobby")).toEqual(null);
        });

+        test("should NOT be able to start a voice call", async ({ page, user, room, app }) => {
+            // Voice calls do not exist in group rooms
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+            await expect(page.getByRole("button", { name: "Voice call" })).not.toBeVisible();
+        });
+
        test("should be able to skip lobby by holding down shift", async ({ page, user, bot, room, app }) => {
            await app.viewRoomById(room.roomId);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();

            await page.getByRole("button", { name: "Video call" }).click();
            await page.keyboard.down("Shift");
@@ -147,8 +174,8 @@ test.describe("Element Call", () => {
        test("should be able to join a call in progress", async ({ page, user, bot, room, app }) => {
            await app.viewRoomById(room.roomId);
            // Allow bob to create a call
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
            await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
-            await expect(page.getByText("Bob joined the room")).toBeVisible();
            // Fake a start of a call
            await sendRTCState(bot, room.roomId);
            const button = page.getByTestId("join-call-button");
@@ -156,7 +183,6 @@ test.describe("Element Call", () => {
            // And test joining
            await button.click();
            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            console.log(frameUrlStr);
            await expect(frameUrlStr).toBeDefined();
            const url = new URL(frameUrlStr);
            const hash = new URLSearchParams(url.hash.slice(1));
@@ -168,29 +194,29 @@ test.describe("Element Call", () => {

        [true, false].forEach((skipLobbyToggle) => {
            test(
-                `should be able to join a call via incoming call toast (skipLobby=${skipLobbyToggle})`,
+                `should be able to join a call via incoming video call toast (skipLobby=${skipLobbyToggle})`,
                { tag: ["@screenshot"] },
                async ({ page, user, bot, room, app }) => {
                    await app.viewRoomById(room.roomId);
                    // Allow bob to create a call
+                    await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
                    await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
-                    await expect(page.getByText("Bob joined the room")).toBeVisible();
                    // Fake a start of a call
-                    await sendRTCState(bot, room.roomId, "notification");
+                    await sendRTCState(bot, room.roomId, "notification", "video");
                    const toast = page.locator(".mx_Toast_toast");
                    const button = toast.getByRole("button", { name: "Join" });
+
                    if (skipLobbyToggle) {
                        await toast.getByRole("switch").check();
-                        await expect(toast).toMatchScreenshot("incoming-call-group-video-toast-checked.png");
+                        await expect(toast).toMatchScreenshot(`incoming-call-group-video-toast-checked.png`);
                    } else {
                        await toast.getByRole("switch").uncheck();
-                        await expect(toast).toMatchScreenshot("incoming-call-group-video-toast-unchecked.png");
+                        await expect(toast).toMatchScreenshot(`incoming-call-group-video-toast-unchecked.png`);
                    }

                    // And test joining
                    await button.click();
                    const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    console.log(frameUrlStr);
                    await expect(frameUrlStr).toBeDefined();
                    const url = new URL(frameUrlStr);
                    const hash = new URLSearchParams(url.hash.slice(1));
@@ -201,6 +227,34 @@ test.describe("Element Call", () => {
                },
            );
        });
+
+        test(
+            `should be able to join a call via incoming voice call toast`,
+            { tag: ["@screenshot"] },
+            async ({ page, user, bot, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                // Allow bob to create a call
+                await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+                await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+                // Fake a start of a call
+                await sendRTCState(bot, room.roomId, "notification", "audio");
+                const toast = page.locator(".mx_Toast_toast");
+                const button = toast.getByRole("button", { name: "Join" });
+
+                await expect(toast).toMatchScreenshot(`incoming-call-group-voice-toast.png`);
+
+                // And test joining
+                await button.click();
+                const frameUrlStr = await page.locator("iframe").getAttribute("src");
+                await expect(frameUrlStr).toBeDefined();
+                const url = new URL(frameUrlStr);
+                const hash = new URLSearchParams(url.hash.slice(1));
+                assertCommonCallParameters(url.searchParams, hash, user, room);
+
+                expect(hash.get("intent")).toEqual("join_existing");
+                expect(hash.get("skipLobby")).toEqual("true");
+            },
+        );
    });

    test.describe("DMs", () => {
@@ -253,7 +307,6 @@ test.describe("Element Call", () => {

        test("should be able to join a call in progress", async ({ page, user, bot, room, app }) => {
            await app.viewRoomById(room.roomId);
-            // Allow bob to create a call
            await expect(page.getByText("Bob joined the room")).toBeVisible();
            // Fake a start of a call
            await sendRTCState(bot, room.roomId);
@@ -262,7 +315,6 @@ test.describe("Element Call", () => {
            // And test joining
            await button.click();
            const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            console.log(frameUrlStr);
            await expect(frameUrlStr).toBeDefined();
            const url = new URL(frameUrlStr);
            const hash = new URLSearchParams(url.hash.slice(1));
@@ -278,24 +330,31 @@ test.describe("Element Call", () => {
                { tag: ["@screenshot"] },
                async ({ page, user, bot, room, app }) => {
                    await app.viewRoomById(room.roomId);
-                    // Allow bob to create a call
                    await expect(page.getByText("Bob joined the room")).toBeVisible();
                    // Fake a start of a call
-                    await sendRTCState(bot, room.roomId, "ring");
+                    await sendRTCState(bot, room.roomId, "ring", "video");
                    const toast = page.locator(".mx_Toast_toast");
-                    const button = toast.getByRole("button", { name: "Join" });
+                    const button = toast.getByRole("button", { name: "Accept" });
                    if (skipLobbyToggle) {
                        await toast.getByRole("switch").check();
-                        await expect(toast).toMatchScreenshot("incoming-call-dm-video-toast-checked.png");
                    } else {
                        await toast.getByRole("switch").uncheck();
-                        await expect(toast).toMatchScreenshot("incoming-call-dm-video-toast-unchecked.png");
                    }
+                    await expect(toast).toMatchScreenshot(
+                        `incoming-call-dm-video-toast-${skipLobbyToggle ? "checked" : "unchecked"}.png`,
+                        {
+                            // Hide UserId
+                            css: `
+                            .mx_IncomingCallToast_AvatarWithDetails span:nth-child(2) {
+                                opacity: 0;
+                            }
+                        `,
+                        },
+                    );

                    // And test joining
                    await button.click();
                    const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    console.log(frameUrlStr);
                    await expect(frameUrlStr).toBeDefined();
                    const url = new URL(frameUrlStr);
                    const hash = new URLSearchParams(url.hash.slice(1));
@@ -306,6 +365,39 @@ test.describe("Element Call", () => {
                },
            );
        });
+
+        test(
+            `should be able to join a call via incoming voice call toast`,
+            { tag: ["@screenshot"] },
+            async ({ page, user, bot, room, app }) => {
+                await app.viewRoomById(room.roomId);
+                await expect(page.getByText("Bob joined the room")).toBeVisible();
+                // Fake a start of a call
+                await sendRTCState(bot, room.roomId, "ring", "audio");
+                const toast = page.locator(".mx_Toast_toast");
+                const button = toast.getByRole("button", { name: "Accept" });
+
+                await expect(toast).toMatchScreenshot(`incoming-call-dm-voice-toast.png`, {
+                    // Hide UserId
+                    css: `
+                        .mx_IncomingCallToast_AvatarWithDetails span:nth-child(2) {
+                            opacity: 0;
+                        }
+                    `,
+                });
+
+                // And test joining
+                await button.click();
+                const frameUrlStr = await page.locator("iframe").getAttribute("src");
+                await expect(frameUrlStr).toBeDefined();
+                const url = new URL(frameUrlStr);
+                const hash = new URLSearchParams(url.hash.slice(1));
+                assertCommonCallParameters(url.searchParams, hash, user, room);
+
+                expect(hash.get("intent")).toEqual("join_existing_dm_voice");
+                expect(hash.get("skipLobby")).toEqual("true");
+            },
+        );
    });

    test.describe("Video Rooms", () => {
@@ -318,7 +410,10 @@ test.describe("Element Call", () => {
            },
        });
        test("should be able to create and join a video room", async ({ page, user }) => {
-            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page
+                .getByRole("navigation", { name: "Room list" })
+                .getByRole("button", { name: "New conversation" })
+                .click();
            await page.getByRole("menuitem", { name: "New video room" }).click();
            await page.getByRole("textbox", { name: "Name" }).fill("Test room");
            await page.getByRole("button", { name: "Create video room" }).click();
@@ -336,4 +431,150 @@ test.describe("Element Call", () => {
            expect(hash.get("returnToLobby")).toEqual("true");
        });
    });
+
+    test.describe("Switching rooms", () => {
+        let charlie: Bot;
+        test.use({
+            room: async ({ page, app, user, homeserver, bot }, use) => {
+                charlie = new Bot(page, homeserver, { displayName: "Charlie" });
+                await charlie.prepareClient();
+                const roomId = await app.client.createRoom({
+                    name: "TestRoom",
+                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                });
+                await app.client.createRoom({
+                    name: "OtherRoom",
+                });
+                await use({ roomId });
+            },
+        });
+
+        async function openAndJoinCall(page: Page, existing = false) {
+            if (existing) {
+                await page.getByTestId("join-call-button").click();
+            } else {
+                await page.getByRole("button", { name: "Video call" }).click();
+                await page.getByRole("menuitem", { name: "Element Call" }).click();
+            }
+            const iframe = page.locator("iframe");
+            await expect(iframe).toBeVisible();
+            const frameUrlStr = await page.locator("iframe").getAttribute("src");
+            const callFrame = page.frame({ url: frameUrlStr });
+            await callFrame.getByRole("button", { name: "Join Call" }).click();
+            await expect(callFrame.getByText("In call", { exact: true })).toBeVisible();
+
+            // Wait for Element Web to pickup the RTC session and update the room list entry.
+            await expect(await page.getByTestId("notification-decoration")).toBeVisible();
+        }
+
+        test("should be able to switch rooms and have the call persist", async ({ page, user, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+
+            // We should have a PiP container here.
+            await expect(page.locator(".mx_AppTile_persistedWrapper")).toBeVisible();
+        });
+
+        test("should be able to start a call, close it via PiP, and start again in the same room", async ({
+            page,
+            user,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+            const pipContainer = page.locator(".mx_WidgetPip");
+
+            // We should have a PiP container here.
+            await expect(pipContainer).toBeVisible();
+
+            // Leave the call.
+            const overlay = page.locator(".mx_WidgetPip_overlay");
+            await overlay.hover({ timeout: 2000 }); // Show the call footer.
+            await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+            // PiP container goes.
+            await expect(pipContainer).not.toBeVisible();
+
+            // Wait for call to stop.
+            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
+            await app.viewRoomById(room.roomId);
+            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+
+            // Join the call again.
+            await openAndJoinCall(page);
+        });
+
+        test("should be able to start a call, close it via PiP, and start again in a different room", async ({
+            page,
+            user,
+            room,
+            app,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+
+            await openAndJoinCall(page);
+            await app.viewRoomByName("OtherRoom");
+            const pipContainer = page.locator(".mx_WidgetPip");
+
+            // We should have a PiP container here.
+            await expect(pipContainer).toBeVisible();
+
+            // Leave the call.
+            const overlay = page.locator(".mx_WidgetPip_overlay");
+            await overlay.hover({ timeout: 2000 }); // Show the call footer.
+            await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+            // PiP container goes.
+            await expect(pipContainer).not.toBeVisible();
+
+            // Wait for call to stop.
+            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
+            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+
+            // Join the call again, but from the other room.
+            await openAndJoinCall(page);
+        });
+
+        // For https://github.com/element-hq/element-web/issues/30838
+        test("should be able to join a call, leave via PiP, and rejoin the call", async ({
+            page,
+            user,
+            room,
+            app,
+            bot,
+        }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
+            await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+
+            await sendRTCState(bot, room.roomId);
+            await openAndJoinCall(page, true);
+
+            await app.viewRoomByName("OtherRoom");
+            const pipContainer = page.locator(".mx_WidgetPip");
+
+            // We should have a PiP container here.
+            await expect(pipContainer).toBeVisible();
+
+            // Leave the call.
+            const overlay = page.locator(".mx_WidgetPip_overlay");
+            await overlay.hover({ timeout: 2000 }); // Show the call footer.
+            await overlay.getByRole("button", { name: "Leave", exact: true }).click();
+
+            // PiP container goes.
+            await expect(pipContainer).not.toBeVisible();
+
+            // Rejoin the call
+            await app.viewRoomById(room.roomId);
+            await openAndJoinCall(page, true);
+        });
+    });
 });
@@ -133,6 +133,7 @@ export const expect = baseExpect.extend<Expectations>({
            }
            .mx_BaseAvatar {
                background-color: var(--cpd-color-fuchsia-1200) !important;
+                border-color: var(--cpd-color-fuchsia-1200) !important;
                color: white !important;
            }
            .mx_ReplyChain {
@@ -144,7 +145,7 @@ export const expect = baseExpect.extend<Expectations>({
            }
            /* Use monospace font for timestamp for consistent mask width */
            .mx_MessageTimestamp {
-                font-family: Inconsolata !important;
+                font-family: "Fira Code" !important;
            }
        `;

@@ -53,7 +53,10 @@ export class ElementAppPage {
     */

    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
-        await this.page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await this.page
+            .getByRole("navigation", { name: "Room list" })
+            .getByRole("button", { name: "New conversation" })
+            .click();
        await this.page.getByRole("menuitem", { name: roomKindname }).click();
        return this.page.locator(".mx_CreateRoomDialog");
    }
@@ -0,0 +1,87 @@
+<!doctype html>
+<style>
+    body {
+        background: rgb(139, 192, 253);
+    }
+</style>
+
+<!-- element-call.spec.ts will insert the widget API in this block -->
+<script>
+    widgetCodeHere;
+</script>
+
+<div>
+    <p>Fake Element Call</p>
+    <p>State: <span id="state">Loading</span></p>
+    <button id="join-button">Join Call</button>
+    <button id="close-button">Close</button>
+</div>
+
+<!-- Minimal fake implementation of Element Call. Just enough for testing persistent widgets.-->
+<script>
+    const content = {
+        "application": "m.call",
+        "call_id": "",
+        "device_id": "gycSobuY0z",
+        "expires": 14400000,
+        "foci_preferred": [
+            {
+                livekit_alias: "any-alias",
+                livekit_service_url: "https://example.org",
+                type: "livekit",
+            },
+        ],
+        "focus_active": {
+            focus_selection: "oldest_membership",
+            type: "livekit",
+        },
+        "m.call.intent": "video",
+        "scope": "m.room",
+    };
+    const stateIndicator = document.querySelector("#state");
+    const { WidgetApi, WidgetApiToWidgetAction, MatrixCapabilities } = mxwidgets();
+    const widgetId = new URLSearchParams(window.location.search).get("widgetId");
+    const params = new URLSearchParams(window.location.hash.slice(1));
+    const userId = params.get("userId");
+    const deviceId = params.get("deviceId");
+    const roomId = params.get("roomId");
+    const api = new WidgetApi(widgetId, "*");
+
+    const stateKey = `_${userId}_${deviceId}_m.call`;
+
+    async function hangup() {
+        await api.sendStateEvent("org.matrix.msc3401.call.member", stateKey, {}, roomId);
+        await api.setAlwaysOnScreen(false);
+        await api.transport.send("io.element.close", {});
+        stateIndicator.innerHTML = "Ended";
+    }
+
+    document.querySelector("#join-button").onclick = async () => {
+        await api.setAlwaysOnScreen(true);
+        await api.transport.send("io.element.join", {});
+        await api.sendStateEvent("org.matrix.msc3401.call.member", stateKey, content, roomId);
+        stateIndicator.innerHTML = "In call";
+    };
+
+    document.querySelector("#close-button").onclick = () => {
+        hangup();
+    };
+
+    api.requestCapability(MatrixCapabilities.AlwaysOnScreen);
+    api.requestCapability(`org.matrix.msc2762.timeline:${roomId}`);
+    api.requestCapabilityToSendState("org.matrix.msc3401.call.member", stateKey);
+
+    api.on("ready", (ev) => {
+        stateIndicator.innerHTML = "Ready";
+        // Pretend to join a call.
+    });
+    api.on("action:im.vector.hangup", async () => {
+        await hangup();
+    });
+
+    // Start the messaging
+    api.start();
+
+    // If waitForIframeLoad is false, tell the client that we're good to go
+    api.sendContentLoaded();
+</script>
--- a/Show More
+++ b/Show More