fix(desktop): Custom Window Chrome toggle breaks the timeline (P5-47)

Toggling custom chrome expanded the screen and sent the message feed
auto-scrolling into the past. Two causes:
- DesktopChrome used height:100vh while html/#root use 100dvh; in the Tauri
  webview 100vh can exceed the visible height after decorations are stripped,
  making the timeline's scroll container taller than the viewport → the virtual
  paginator runs away paginating backwards. Switched to 100dvh.
- Toggling live reflowed the whole app while the timeline was mounted. The
  setting now persists + reloads so the layout is rebuilt cleanly (description
  updated: "reloads to apply").

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

HANDOFF_ELEMENT_CALL_FORK.md

@@ -1,666 +0,0 @@
-# HANDOFF — Forking & Self-Building Element Call ("Lotus Call")
-
-> **Audience:** a fresh Claude/engineer session with **no prior context** on this
-> project. Read this top-to-bottom before touching anything. This document is the
-> single source of truth for the Element Call (EC) fork initiative.
->
-> **Status:** **PHASE 0–2 IMPLEMENTED (build-verified, not yet live-tested)**
-> (2026-06-30). The fork exists, builds, is published, and cinny consumes it
-> (Phase 0/1). **All 7 Phase-2 EC features are implemented on the fork's `lotus`
-> branch**, each additive + flag-gated, build+typecheck-clean, per-feature
-> reviewed (+ a holistic multi-agent review), and pushed. **None are live-tested
-> yet** — every one needs the `LOTUS_TESTING.md` §D sweep, and the **cinny host
-> side must be wired** (set flags / send actions / handle call_state) — see §12.
-> See **§9** Phase 0/1 results, **§10** cutover, **§11** Phase-2 seams, **§12**
-> Phase-2 status + cinny integration checklist. Created 2026-06 from `LotusGuild/cinny`.
-
----
-
-## 9. Phase 0 Results (verified 2026-06-29)
-
-**Decisions taken with the user:** scope = Phase 0 recon; consumption model =
-**private npm package** (§5 option 1). Recommended registry = **Gitea's built-in
-npm registry** (`code.lotusguild.org`) — zero new infra.
-
-### 9.1 Version → tag → commit mapping (LOCKED)
-
-| Source                                               | Value                                      |
-| :--------------------------------------------------- | :----------------------------------------- |
-| cinny `package.json` pin                             | `@element-hq/element-call-embedded@0.20.1` |
-| Bundle self-report (`VITE_APP_VERSION`/`appVersion`) | `embedded-v0.20.1`                         |
-| npm registry `gitHead` for 0.20.1                    | `2d74c48151d9edc01c65a22a91478aac81bf24d0` |
-| GitHub tag `v0.20.1` → commit                        | `2d74c48…` ✅ **same commit**              |
-
-→ **Fork from upstream tag `v0.20.1` (commit `2d74c48`).** The embedded package
-version equals the element-call release tag; repo `package.json` version is
-`0.0.0` and the real version is stamped at publish time from the tag.
-
-### 9.2 The shipped npm dist is a CLEAN upstream build
-
-No `lotus`/`denoise`/`rnnoise` strings anywhere in
-`node_modules/@element-hq/element-call-embedded/dist`. **All Lotus customization
-(denoise shim) is injected at cinny build time, not baked into the package** — so
-swapping the source does not disturb cinny's denoise injection layer. The
-ringtone/reaction assets (`baduntss`, `cat`, `clap`, `call_declined`, …) are
-upstream EC's own, not ours.
-
-### 9.3 Build toolchain & mechanism
-
-- **Node `24`** (`.node-version`), **pnpm `10.33.0`** (`packageManager` field,
-  via corepack).
-- Build: **`pnpm run build:embedded`** = `vite build --config
-vite-embedded.config.ts` with `NODE_OPTIONS=--max-old-space-size=16384`.
-- Output dir is **repo-root `dist/`**; CI stages it into **`embedded/web/dist`**
-  (the `embedded/web/` dir holds the publish template: `package.json`, README,
-  both LICENSE files).
-- Publish workflow upstream = `.github/workflows/publish-embedded-packages.yaml`:
-  builds → `npm version <tag> --no-git-tag-version` → `npm publish --provenance
---access public` to npmjs as `@element-hq/element-call-embedded`. (Also
-  Android/Maven + iOS/SwiftPM — irrelevant; we are web-only.)
-
-### 9.4 Build reproduction — PARITY CONFIRMED
-
-Cloned `element-call@v0.20.1` to `/root/code/element-call` (shallow), built with
-isolated Node 24 / pnpm 10.33.0 (system Node 20 / cinny untouched). Result vs the
-shipped npm dist:
-
-- **137 of 147 files byte-identical** (same Vite content-hash): all CSS, fonts,
-  wasm, audio, JSON locale files, and `IndexedDBWorker`.
-- **Only 5 JS chunks differ** (`index`, `pako.esm`, `polyfill-force`,
-  `rust-crypto`, `spa`) — **cause isolated to the version define**: our local
-  build baked `appVersion:\`dev\``(because`VITE_APP_VERSION`was unset) vs the
-npm build's`appVersion:\`embedded-v0.20.1\``. `index.html` is identical modulo
-  the hashed asset filenames. **Benign** — our CI sets the version from the git
-  tag, so a tagged CI build will match.
-
-### 9.5 Fork CI (drafted)
-
-`.gitea/workflows/ci.yml` is staged in the clone (models cinny's
-`.gitea/workflows/ci.yml` + upstream's publish flow). Linux-only (`ubuntu-latest`)
-— the Windows worker is for cinny-desktop/Tauri, not the EC web bundle. Build job
-on PR/push to `lotus`; publish job on `v*` tag → `@lotusguild/element-call-embedded`
-to the Gitea npm registry (needs `secrets.GITEA_NPM_TOKEN`).
-
-### 9.6 Phase 1 — DONE (2026-06-29)
-
-1. ✅ **Fork repo live:** `code.lotusguild.org/LotusGuild/element-call` (public,
-   AGPL), default branch `lotus`, full history (7018 commits) + tag `v0.20.1`.
-   Branch `lotus` = `v0.20.1` + 2-file diff (CI workflow + embedded package
-   rename).
-2. ✅ **Package published:** `@lotusguild/element-call-embedded@0.20.1` on the
-   Gitea npm registry (published manually from the version-faithful build while
-   the admin token was available). **Publicly readable** (unauth `npm install`
-   works → devs/CI need no token to consume; only publishing needs one).
-3. ✅ **cinny wired & built clean** (Node 24): `.npmrc` scope line +
-   `package.json` dep + `vite.config.js` `viteStaticCopy` src. `npm install`
-   swapped the package (resolved from Gitea), `npm run build` succeeded,
-   `dist/public/element-call/` populated, bundle reports `appVersion:
-embedded-v0.20.1`, **denoise shim injected + all denoise assets copied**
-   (injection layer unchanged). **These cinny edits are staged in the working
-   tree, NOT committed/pushed** — pushing triggers CI → desktop → deploy, so it's
-   gated on the §D live test (see §10).
-
-### 9.8 Reproducibility note (important)
-
-A from-source rebuild is **NOT byte-identical** to upstream's npm tarball.
-137/147 files match exactly (CSS, fonts, wasm, audio, worker); the 5 JS chunks
-(`index`, `pako.esm`, `polyfill-force`, `rust-crypto`, `spa`) differ because the
-rolldown/oxc **minifier mangles export names differently** across build
-environments (and the version-define is one input). This is normal and benign —
-the code is functionally equivalent. **Do not chase byte-parity; the §D live call
-test is the real parity gate.**
-
-### 9.9 Remaining follow-ups (not blocking the cutover)
-
-- **CI publishing:** `.gitea/workflows/ci.yml` publishes on a `v*` tag but needs
-  (a) a Gitea Actions runner for `LotusGuild/element-call`, and (b) a **durable**
-  `GITEA_NPM_TOKEN` repo secret with package read/write (the admin token used for
-  the manual publish is being deleted, so it was deliberately NOT baked in). Until
-  then, publishing is manual (`npm version <tag>` in `embedded/web` →
-  `npm publish`).
-- Decide rebase cadence vs upstream (0.20.2 / 0.20.3 already out — see §9.1).
-
-### 9.7 Ready-to-apply artifacts (staged 2026-06-29)
-
-**Fork side — already committed** on branch `lotus` in `/root/code/element-call`
-(remote `lotus` = `code.lotusguild.org/LotusGuild/element-call.git`, push deferred
-until the repo exists). Minimal 2-file diff vs tag `v0.20.1`:
-`.gitea/workflows/ci.yml` (new) + `embedded/web/package.json` (rename to
-`@lotusguild/element-call-embedded`). Push with:
-`git push -u lotus lotus && git push lotus v0.20.1` (and tag `v0.20.1` on our side
-to trigger the first publish, or push our own `v0.20.1` tag).
-
-**cinny side — NOT yet applied** (applying before the package is published breaks
-`npm ci`). Exactly 3 edits + a lockfile regen:
-
-1. `.npmrc` — append the scoped-registry line:
-   ```
-   @lotusguild:registry=https://code.lotusguild.org/api/packages/LotusGuild/npm/
-   ```
-   (CI/auth: `//code.lotusguild.org/api/packages/LotusGuild/npm/:_authToken=${GITEA_NPM_TOKEN}`
-   — inject via env in CI, do not commit a plaintext token.)
-2. `package.json:104` —
-   `"@element-hq/element-call-embedded": "0.20.1"` →
-   `"@lotusguild/element-call-embedded": "0.20.1"`.
-3. `vite.config.js:25` — `viteStaticCopy` src:
-   `node_modules/@element-hq/element-call-embedded/dist` →
-   `node_modules/@lotusguild/element-call-embedded/dist`.
-   **`stripBase: 4` stays unchanged** — `node_modules/@lotusguild/element-call-embedded/dist`
-   is still exactly 4 leading segments. (Update the comment's path reference too.)
-4. `package-lock.json` — regenerated by `npm install`, not hand-edited (drops the
-   `registry.npmjs.org/@element-hq/...` resolved URL for the Gitea one).
-
-The denoise injection (`lotusDenoise()` in `vite.config.js`) is **unchanged** — it
-keys off `dist/public/element-call/index.html`, which our fork's bundle still
-produces identically (verified: `index.html` byte-identical modulo asset hashes).
-
----
-
-## 0. TL;DR / The Goal
-
-We embed **Element Call** (the Matrix group-VoIP/video app) inside Lotus Chat to
-power voice/video channels. Today we consume Element's **pre-compiled npm
-bundle** and can only steer it from the outside (a limited widget API + fragile
-same-origin DOM hacks). Several in-call problems are **unfixable from outside**
-because they live in EC's compiled JS.
-
-**We want true ownership: fork `element-hq/element-call`, build it from source
-ourselves, host our build, and replace the npm bundle with our fork.** Then
-every in-call behavior becomes editable code.
-
-**This requires standing up a brand-new repo and build pipeline for our EC fork.**
-
----
-
-## 1. Why fork? (What we cannot fix today)
-
-These came out of live testing and are documented in `LOTUS_BUGS.md` →
-"Known Element Call iframe limitations":
-
-| Issue                                                  | What's wrong                                                               | Why outside-fixes fail                                                                                                                                      |
-| :----------------------------------------------------- | :------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **A6** — avatar decorations in-call                    | Our profile-decoration overlays don't appear on in-call video tiles        | The video grid is rendered by EC's React app inside the iframe. We can only inject overlay DOM (fragile) — we can't make it a first-class part of the tile. |
-| **A5** — focus camera / fullscreen during screenshare  | Can't reliably spotlight a participant's camera while someone screenshares | EC's **layout logic** (screenshare priority, spotlight) is compiled JS we don't control. We currently DOM-click tiles as a hack.                            |
-| **A7** — mic dead after EC's "Reconnect"               | After EC's own mid-call reconnect, the local mic isn't re-published        | EC's reconnect/track-republish path is internal. (Partly entangled with our denoise shim — see §6.)                                                         |
-| Native theming                                         | EC's UI doesn't match Lotus design; we inject CSS hacks                    | Real theming needs source-level component/token changes.                                                                                                    |
-| Decorations, custom controls, custom layouts, branding | all blocked                                                                | all require source access                                                                                                                                   |
-
-**Bottom line:** the iframe is **same-origin** (we self-host it), so we can read
-and even write its DOM — but we **do not own its source**, so we can't change its
-**behavior/logic**, only poke at its rendered output. Forking removes that wall.
-
----
-
-## 2. How EC is integrated TODAY (the current architecture)
-
-Understand this fully before changing it — the fork must slot into the same
-integration seams.
-
-### 2.1 Where the EC bundle comes from
-
-- npm package: **`@element-hq/element-call-embedded`**, pinned to **`0.20.1`** in
-  `cinny/package.json` (line ~104).
-- It ships a **pre-built `dist/`**. At cinny build time,
-  `vite-plugin-static-copy` copies that `dist/` flat into
-  **`public/element-call/`** (see `cinny/vite.config.js`, the `copyFiles`
-  target with `rename: { stripBase: 4 }` — note the stripBase gotcha documented
-  there; getting this wrong 404s the widget).
-- It is **NOT committed** to git (`git ls-files public/element-call` → 0). It's a
-  build artifact materialized from `node_modules`.
-
-### 2.2 How EC is loaded & controlled
-
-- The widget iframe `src` is **same-origin**:
-  `${BASE_URL}/public/element-call/index.html?<params>` (see
-  `cinny/src/app/plugins/call/CallEmbed.ts`, `getWidget()` /
-  `getIframe()`). Sandbox: `allow-forms allow-scripts allow-same-origin
-allow-popups allow-modals allow-downloads`; `allow="microphone; camera;
-display-capture; autoplay; clipboard-write;"`.
-- **Control surface #1 — the official widget API** (`matrix-widget-api`):
-  `ClientWidgetApi` + a custom `CallWidgetDriver`. This is the robust,
-  version-stable channel (theme change, hangup, capabilities, timeline events).
-  Files: `plugins/call/CallEmbed.ts`, `plugins/call/CallWidgetDriver.ts`,
-  `plugins/call/utils.ts` (capabilities), `plugins/call/CallControl.ts`.
-- **Control surface #2 — same-origin DOM poking** (fragile, version-coupled):
-  reading `iframe.contentDocument` to detect speakers/mute state and
-  `.click()`-ing tiles to focus a camera. Files:
-  `hooks/useCallSpeakers.ts` (reads `[data-muted]`, `[data-video-fit]`),
-  `plugins/call/CallControl.ts` (`focusCameraParticipant` — tile selectors).
-  **These selectors break on every EC version bump.** A fork lets us replace
-  these hacks with real APIs/props.
-- **Control surface #3 — URL params + build-time injection** for our denoise
-  shim (see §6).
-
-### 2.3 Full file inventory (everything that touches EC in cinny)
-
-Plugin / core:
-
-- `src/app/plugins/call/CallEmbed.ts` — iframe creation, widget API wiring, theme sync, hangup, load watchdog/self-heal, denoise URL params.
-- `src/app/plugins/call/CallControl.ts` — control state + **DOM-poking** (`focusCameraParticipant`, spotlight).
-- `src/app/plugins/call/CallControl.tsx` _(call-status variant)_ and `features/call-status/CallControl.tsx`.
-- `src/app/plugins/call/CallWidgetDriver.ts` — widget driver (capabilities, event relay).
-- `src/app/plugins/call/utils.ts` — widget capabilities set.
-- `src/app/plugins/call/hooks.ts`, `index.ts` — plugin exports/hooks.
-- `src/app/state/callEmbed.ts` — jotai atoms for the active embed.
-
-React / UI:
-
-- `src/app/components/CallEmbedProvider.tsx` — the big one: incoming-call ring/banner, RTCNotification + **RTCDecline** listeners, PiP, mute badges, fullscreen, ringtones.
-- `src/app/features/call/CallView.tsx` — prescreen lobby vs joined (the iframe placement target), load-error recovery UI.
-- `src/app/features/call/CallControls.tsx` — in-call control bar (mic/cam/deafen/screenshare/fullscreen/more/PiP).
-- `src/app/features/call/CallMemberCard.tsx` — **lobby** participant roster (this is where `AvatarDecoration` works today; in-call grid is EC's).
-- `src/app/features/call/PrescreenControls.tsx` — join controls.
-- `src/app/features/call-status/*` — `CallStatus.tsx`, `MemberGlance.tsx` (the "Focus camera" menu lives here), `LiveChip.tsx`.
-- `src/app/features/room-nav/RoomNavItem.tsx`, `features/room/Room.tsx`, `features/room/RoomViewHeader.tsx`, `pages/client/space/Space.tsx`, `pages/CallStatusRenderer.tsx`, `pages/Router.tsx` — call entry points / status surfacing.
-
-Hooks:
-
-- `src/app/hooks/useCallEmbed.ts`, `useCall.ts`, `useCallSpeakers.ts` (DOM-poking), `useCallJoinLeaveSounds.ts`, `useAfkAutoMute.ts`.
-
-Build:
-
-- `cinny/vite.config.js` — `copyFiles` (EC dist copy) + `lotusDenoise()` plugin (denoise asset copy + index.html shim injection, in `closeBundle`).
-
-Utils:
-
-- `src/app/utils/ringtones.ts`, `utils/denoisePipeline.ts`, `utils/lotusDenoiseUtils.ts`.
-
----
-
-## 3. Hosting / infra context (the OTHER repo)
-
-There are **two repos**:
-
-1. **`LotusGuild/cinny`** (`/root/code/cinny`) — this Lotus Chat fork. Consumes EC.
-2. **`LotusGuild/matrix`** (`/root/code/matrix`) — the **infra/homeserver** repo.
-   Subdirs: `livekit/` (the SFU EC talks to), `deploy/`, `draupnir/`,
-   `hookshot/`, `landing/`, `matrixbot/`, `systemd/`. Gitea remote
-   `code.lotusguild.org/LotusGuild/matrix`, branch `main`.
-
-EC needs a **LiveKit SFU** + the **livekit-jwt-service**; those live in
-`matrix/livekit/`. A self-hosted EC build must be configured to point at our
-homeserver (`matrix.lotusguild.org` / synapse) and our LiveKit. EC's runtime
-`config.json` (homeserver, livekit URL, feature flags) is part of what we'll own
-once we build it ourselves.
-
-Deployment today: `chat.lotusguild.org` (the cinny web build, which embeds EC at
-`/public/element-call/`). cinny-desktop (`LotusGuild/cinny-desktop`, a Tauri
-wrapper, bumped by cinny CI) embeds the same.
-
----
-
-## 4. The plan (proposed — confirm with the user before executing)
-
-### Decision: **YES, create a new repo.** `LotusGuild/element-call`
-
-Rationale: EC is a large standalone app (React + LiveKit client SDK + matrixRTC +
-its own Vite build + heavy deps). Keep it out of cinny so cinny's build stays
-clean — cinny keeps consuming a **built EC `dist/`**, exactly as today, just
-sourced from **our fork** instead of npm.
-
-### Phase 0 — Recon (no code)
-
-- Fork `github.com/element-hq/element-call` → `LotusGuild/element-call` on Gitea.
-- Pin to the upstream tag matching **0.20.1** (`element-call-embedded` 0.20.1's
-  corresponding `element-call` release) so behavior matches what's shipping now.
-  Verify the embedded-package version ↔ element-call repo tag mapping.
-- Read EC's own build docs: it builds the "embedded" widget bundle (the thing
-  currently published as `@element-hq/element-call-embedded`). Reproduce that
-  build locally and confirm the output matches `public/element-call/` today.
-- **License:** element-call is **AGPL-3.0**, same as Lotus Chat — compatible.
-  Our fork must remain AGPL and publish source.
-
-### Phase 1 — Reproduce current behavior from our fork (parity, no features)
-
-- Build our fork's embedded bundle; wire cinny to consume it instead of the npm
-  package (see §5 for the consumption options). Smoke-test: a call works exactly
-  as today (web + desktop), denoise shim still injects, widget API + theme still
-  work. **No behavior change yet** — this de-risks the swap.
-
-### Phase 2 — Replace the outside hacks with source-level features
-
-Tackle the §1 issues in EC's source:
-
-- **A6:** render avatar decorations as part of the video-tile component
-  (read decoration data we pass in via widget data / URL param / a small bridge).
-- **A5:** fix focus/spotlight + screenshare-coexistence in EC's layout code;
-  expose a clean widget action so cinny can trigger it (kill the DOM `.click()`).
-- **A7:** fix mic re-publish on reconnect; reconcile with our denoise shim (§6) —
-  ideally move denoise INTO the fork as a real audio-processing step instead of a
-  `getUserMedia` monkeypatch.
-- Native Lotus theming/branding at the source (kill the injected-CSS hacks).
-- Then retire the DOM-poking in `useCallSpeakers.ts` / `CallControl.ts` in favor
-  of real widget messages.
-
-### Phase 3 — Maintenance posture
-
-- Decide rebase cadence vs. upstream element-call releases. Keep customizations
-  isolated (feature flags / minimal-diff patches) to ease rebasing.
-- CI in the new repo builds + publishes the embedded dist as a versioned
-  artifact; cinny CI consumes a pinned version.
-
----
-
-## 5. How cinny should consume the fork (pick one — decide with user)
-
-1. **Private npm package** (mirror the current model): our fork's CI publishes
-   `@lotusguild/element-call-embedded` to a registry; cinny depends on it and
-   `viteStaticCopy` keeps working almost unchanged. _Cleanest swap; needs a
-   registry._
-2. **Git submodule + build in cinny CI:** add the fork as a submodule, build it
-   during cinny's build, copy its `dist/` to `public/element-call/`. _No
-   registry; heavier cinny CI._
-3. **CI artifact copy:** fork CI uploads a `dist` tarball; cinny CI downloads a
-   pinned version at build. _Decoupled; needs artifact plumbing._
-
-**Recommendation: Option 1** — it changes the least in cinny (just swap the
-package name in `package.json` + the `viteStaticCopy` src path) and preserves the
-clean cinny/EC separation.
-
----
-
-## 6. The denoise shim — critical interaction (don't break this)
-
-Lotus ships ML noise suppression by **injecting a same-origin pre-init shim into
-EC's `index.html` at build time** (cinny `vite.config.js` → `lotusDenoise()`,
-`closeBundle`). The shim monkeypatches `getUserMedia` **before EC captures the
-mic** and routes audio through RNNoise/Speex/DTLN AudioWorklets, then EC/LiveKit
-publishes the processed track. It's activated via URL params
-(`lotusDenoise=ml&lotusModel=…&lotusGate=…`) set in `CallEmbed.ts`.
-
-- Assets copied to `public/element-call/denoise/` at build (sapphi RNNoise/Speex/
-  gate worklets + `@workadventure/noise-suppression` DTLN tree).
-- Related: `utils/denoisePipeline.ts`, `utils/lotusDenoiseUtils.ts`,
-  `settings/general/DenoiseTester.tsx`, `VoiceMessageRecorder.tsx`.
-- **Known issues:** denoise quality is still poor (tracked separately); and the
-  mic-after-reconnect bug (A7) is suspected to involve the shim's getUserMedia
-  patch handing back a stale processed stream when EC re-acquires the mic.
-
-**Once we own the fork, the right move is to make denoise a first-class
-audio-processing stage inside EC** (not an index.html monkeypatch) — more robust,
-survives reconnects, and removes the build-time injection hack. Until then, the
-fork's `index.html` must remain injectable the same way, or the shim must be
-re-homed into the fork.
-
----
-
-## 7. Doc-accuracy notes / corrections for the new session
-
-- `LOTUS_TODO.md` (~line 533) calls EC a **"cross-origin iframe"** — **outdated.**
-  EC is **same-origin** today (self-hosted under our domain;
-  `iframe.sandbox` includes `allow-same-origin`; we read `contentDocument`), and
-  **as of 2026-06-29 we own the fork's source** (`@lotusguild/element-call-embedded`).
-  The _practical_ point it made still holds _until we ship the audio-inject API_:
-  **LiveKit's `LocalAudioTrack` lives in EC's module scope**, not on `window`, so
-  cinny can't reach it even same-origin — which is why the in-call soundboard had
-  to be local-playback-only. **The fork removes this wall:** EC can expose a real
-  `io.lotus.inject_audio` widget action (Phase 2) that mixes into the published
-  track from inside its own module scope.
-- `LOTUS_FEATURES.md` documents the EC upgrade history (0.16.3 → 0.19.4 →
-  0.20.1), the dark-mode CSS injection, and AFK auto-mute — all relevant prior
-  art for what the fork must preserve.
-- `LOTUS_TESTING.md` §D is the **EC regression sweep** to re-run after the fork
-  swap (Phase 1 parity check).
-
----
-
-## 8. First actions for the new session
-
-1. Read this file, then skim §2.3's files in `cinny` to internalize the seams.
-2. Confirm with the user: new repo name, consumption model (§5), rebase cadence.
-3. Phase 0: fork element-call, map 0.20.1 ↔ element-call tag, reproduce the
-   embedded build locally, diff against `public/element-call/`.
-4. Phase 1: wire cinny to the fork, run `LOTUS_TESTING.md` §D parity sweep.
-5. Only then start Phase 2 features (A5/A6/A7, theming, denoise-in-source).
-
-**Cross-references:** `LOTUS_BUGS.md` (EC limitations + verify queue),
-`LOTUS_TODO.md` (denoise/soundboard constraints), `LOTUS_FEATURES.md` (EC history),
-`LOTUS_TESTING.md` §D (regression sweep). Infra: `/root/code/matrix` (`livekit/`,
-`deploy/`).
-
----
-
-## 10. Live cutover — the remaining steps (Phase 1 finish)
-
-The fork is published and cinny builds against it locally (§9.6). What's left to
-go live:
-
-1. **Run `LOTUS_TESTING.md` §D** against a local cinny build (`npm run build` is
-   already proven; serve `dist/` or `npm run dev`). Verify a real call: join,
-   mic/cam, screenshare, theme sync, denoise on, widget hangup — web first.
-2. **Commit the cinny edits** (currently staged, uncommitted in the working tree):
-   `.npmrc`, `package.json`, `package-lock.json`, `vite.config.js`. Suggested
-   message: `chore(call): consume self-built @lotusguild/element-call-embedded`.
-3. **Push to `lotus`** → cinny CI builds, then `trigger-desktop` bumps
-   cinny-desktop → Tauri release. Re-run §D on **cinny-desktop** (the path where
-   the old `stripBase` bug bit — verify the widget loads, not a 404).
-4. Only then start **Phase 2** (A5/A6/A7, theming, denoise-in-source).
-
----
-
-## 11. Phase 2 — implementation seams (mapped 2026-06-29)
-
-The exact integration points for each Phase 2 item, found by reading the EC fork
-
-- cinny source. **All of these are media-path / in-call features that cannot be
-  functionally verified without a live Matrix + LiveKit call** — implement each as
-  a minimal, **feature-flagged, additive** diff (no behavior change unless cinny
-  opts in), build-verify the fork (`pnpm build:embedded`, ~15s) AND cinny
-  (`npm run build`), then gate shipping on `LOTUS_TESTING.md` §D.
-
-**Shared widget channel (the backbone for #2/#3/#4/#7):**
-
-- EC→cinny: `widget.api.transport.send("io.lotus.<x>", data)` (see
-  `element-call/src/widget.ts`).
-- cinny→EC actions: add the action name to the `lazyActions` allow-list in
-  `widget.ts` (the array at ~L101) and handle it in EC; cinny sends via
-  `this.call.transport.send(...)`.
-- cinny receives EC→cinny actions via the existing `listenAction(type, cb)`
-  helper in `plugins/call/CallEmbed.ts:626` (auto-replies `{}` so the transport
-  doesn't time out — same pattern as `io.element.device_mute`).
-
-**#2 mute/speaker events** — Source: subscribe to `vm.userMedia$`
-(`CallViewModel`), per member `speaking$` + `audioEnabled$`
-(`state/media/UserMediaViewModel.ts:47-48`); aggregate and
-`transport.send("io.lotus.call_state", {participants:[{id,speaking,audioEnabled}]})`.
-Mount in `room/InCallView.tsx` via `useEffect` guarded by `widget !== null`.
-cinny: `listenAction("io.lotus.call_state")` in `CallEmbed.ts`, feed
-`hooks/useCallSpeakers.ts` → delete its `contentDocument` `[data-muted]` /
-`[data-video-fit]` scrape. _Additive, low risk._
-
-**#4 spotlight/focus** — EC: add `io.lotus.focus_participant` to the `lazyActions`
-list (`widget.ts`), drive `vm`'s spotlight (`spotlightSpeaker$` /
-`spotlight$` in `CallViewModel.ts:898/1001`) to pin a given identity, coexisting
-with `hasRemoteScreenShares$` (L1008). cinny: replace
-`CallControl.ts` `focusCameraParticipant` `.click()` walk with
-`transport.send("io.lotus.focus_participant", {userId})`. _Additive, low risk._
-
-**#3 audio-inject** — EC: add `io.lotus.inject_audio` action; mix an
-`AudioBufferSourceNode` into the published mic track. The local publish path is
-`state/CallViewModel/localMember/Publisher.ts` + `LocalMember.ts` (LiveKit
-`localParticipant`); create a `MediaStreamAudioDestinationNode`, mix mic + clip,
-`replaceTrack`. cinny soundboard calls the action instead of local-only playback.
-_Medium; touches publish path → live-test carefully._
-
-**#1 denoise-in-source** — replace the cinny `lotusDenoise()` `getUserMedia`
-monkeypatch with a real processing stage in EC's mic capture
-(`Publisher.ts`/`LocalMember.ts`; note EC has a `TrackProcessorContext` +
-`BlurBackgroundTransformer` precedent in `livekit/`). EC re-runs it on every
-(re)publish → fixes A7. Remove `vite.config.js` `lotusDenoise()` + URL params in
-`CallEmbed.ts`; move `denoise/` assets into the fork. _Highest value, highest
-risk — most live testing._
-
-**#5 theming** — add a Lotus/TDS theme in EC's theme system (`src/useTheme.ts` +
-EC theme tokens / CSS); driven by the existing `setTheme()` channel cinny already
-calls (`CallEmbed.ts:277`). Bake transparent background. Delete cinny's
-`applyStyles()` injection + `background:none !important`. _Medium._
-
-**#6 in-call decorations** — render the decoration APNG in EC's tile component
-(`tile/GridTile.tsx`); pass slugs via widget member data. cinny already has the
-decoration data + `AvatarDecoration` (lobby `CallMemberCard.tsx`). _Medium-Large._
-
-**#7 quality controls** — set audio `maxBitrate` via
-`RTCRtpSender.setParameters` and screenshare `getDisplayMedia` constraints in
-EC's publish path (`Publisher.ts`); configurable via `config.json` / a widget
-message. Keep the server `voice-limit-guard` as enforcement. _Medium._
-
-**Rollback:** revert the 4 cinny files (restores `@element-hq/...@0.20.1` from
-npmjs). The fork repo/package can stay; nothing else depends on it until pushed.
-
-### Local repro/build environment (this session, 2026-06-29)
-
-- Upstream cloned + our `lotus` branch at `/root/code/element-call` (remote
-  `lotus` → Gitea; origin → github upstream, now un-shallowed/full history).
-- Isolated **Node 24.18.0** lives in the session scratchpad (system Node is 20);
-  cinny's `.node-version` is `24.13.1`, so use Node 24 to build cinny too.
-- Build the embedded bundle: in `/root/code/element-call`, with Node 24 + pnpm
-  10.33.0 on PATH, `VITE_APP_VERSION=embedded-v0.20.1 pnpm run build:embedded`
-  → output in `dist/`; stage to `embedded/web/dist` before publishing.
-
----
-
-## 12. Phase 2 — IMPLEMENTED on the fork (2026-06-30)
-
-All 7 EC features are on the `lotus` branch of `LotusGuild/element-call`, each
-**additive + feature-flagged** (a vanilla call with no `lotus*` params / no Lotus
-actions behaves exactly like upstream), build + `tsc` clean, per-feature reviewed
-(fixes applied) and holistically reviewed. **Not yet live-tested** — all need the
-`LOTUS_TESTING.md` §D sweep.
-
-Fork modules live under `element-call/src/lotus/*`; mounts are `useEffect`s in
-`src/room/InCallView.tsx`. Custom widget actions are in `src/lotus/lotusActions.ts`
-(toWidget ones allow-listed in `src/widget.ts`).
-
-| #   | Feature                                                  | Enable via                                                                                                                                                                                                        | EC module                                         |
-| :-- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------ | ---------------------------------------------------- |
-| 2   | Speaker/mute/camera state → host                         | URL `lotusCallState=1`                                                                                                                                                                                            | `lotusCallState.ts` (sends `io.lotus.call_state`) |
-| 4   | Focus/spotlight a participant (works during screenshare) | action `io.lotus.focus_participant {userId                                                                                                                                                                        | null}`                                            | `lotusFocus.ts` + `CallViewModel` spotlight override |
-| 3   | Soundboard audio-inject (heard by peers)                 | URL `lotusAudioInject=1` + action `io.lotus.inject_audio {url,volume?}`                                                                                                                                           | `lotusAudioInject.ts`                             |
-| 7   | Audio/screenshare quality caps                           | action `io.lotus.set_quality {audioMaxBitrate?,screenshareMaxBitrate?,screenshareMaxFramerate?}`                                                                                                                  | `lotusQuality.ts`                                 |
-| 5   | Transparent bg + Lotus theme                             | URL `lotusTransparent=1` / `lotusTheme=1`                                                                                                                                                                         | `useTheme.ts` + `index.css`                       |
-| 6   | In-call avatar decorations                               | action `io.lotus.decorations {decorations:{userId:url}}`                                                                                                                                                          | `lotusDecorations.ts` + `MediaView.tsx`           |
-| 1   | ML denoise in-source (fixes A7)                          | URL **`lotusDenoiseSource=1`** (+`lotusModel`,`lotusGate`,`lotusGateThreshold`,`lotusDenoiseBase`) — deliberately NOT the existing `lotusDenoise=ml` (that drives the host shim; reusing it would double-process) | `lotusDenoise.ts` + `lotusDenoiseProcessor.ts`    |
-
-**Security hardening applied** (holistic audit): `lotusDenoiseBase` forced
-same-origin before `audioWorklet.addModule` (was an arbitrary-code-load vector
-via a crafted link); audio-inject gated behind `lotusAudioInject=1`; decoration
-roster capped. Only `https`/`blob` URLs accepted for inject/decoration assets.
-
-### 12.1 cinny host integration checklist (REQUIRED to light these up)
-
-> ✅ **STATUS (2026-06): COMPLETE.** All items below are shipped. call_state,
-> focus_participant, decorations, and transparent background are active; the
-> in-source denoise cutover is done (flag `lotusDenoiseSource=1`, **all four**
-> models in-source); and the two formerly-dormant capabilities now have cinny
-> UI — **soundboard** (`io.lotus.inject_audio`, P5-15) and **quality controls +
-> room permissions** (`io.lotus.set_quality` + `io.lotus.room_quality`, P5-31,
-> with server-side enforcement in `LotusGuild/matrix`). See `LOTUS_FEATURES.md`
-> → "Element Call — Self-Built Fork". The checklist is kept below as the record
-> of what was wired. (One open denoise item tracked separately: the "Series
-> Suppression" native-NS toggle is not wired to the real call path.)
-
-The EC side is additive and dormant until cinny opts in. Host work (in
-`src/app/plugins/call/CallEmbed.ts` unless noted) — **done**:
-
-> ⚠️ **CRITICAL TIMING (protocol audit F1):** only send `io.lotus.*` **toWidget**
-> actions (#3 focus, #6 decorations, #7 quality, audio-inject) **after** the call
-> is joined (`CallEmbed.onCallJoined` / `this.joined`). Those actions are
-> allow-listed at EC app-init (so `preventDefault` suppresses the auto-error)
-> but their handlers only mount with `InCallView` (post-join). Sending earlier
-> leaves the host's `transport.send` pending until the **10s timeout**. Queue and
-> flush on join, or no-op before join.
->
-> Also: **F3 (RESOLVED)** — all four models (`rnnoise`/`speex`/`dtln`/
-> `deepfilternet`) are now implemented in-source in `lotusDenoiseProcessor.ts`;
-> the picker offers all four. **F4** — cinny no longer forwards a native-NS flag
-> in the `ml` branch (the "Series Suppression" toggle is currently a no-op in
-> real calls — open item). **F7** — no widget _capability_ changes needed;
-> custom actions bypass capability checks.
-
-1. **Set the URL flags** on the widget iframe params (the `URLSearchParams` in
-   `CallEmbed`): `lotusCallState=1`, `lotusTransparent=1`/`lotusTheme=1`,
-   `lotusAudioInject=1` as desired. (Denoise sets `lotusDenoiseSource=1` + `lotusModel`/`lotusGate`/`lotusGateThreshold` in the `ml` tier.)
-2. **Ack `io.lotus.call_state`**: add `listenAction('io.lotus.call_state', …)` —
-   without a reply the fork's sends time out every 250ms. Feed the payload into
-   `useCallSpeakers` and RETIRE its `contentDocument` DOM scrape.
-3. **Send actions** via `this.call.transport.send(...)`:
-   `io.lotus.focus_participant` (replace `CallControl.focusCameraParticipant`’s
-   `.click()`), `io.lotus.inject_audio` (from the soundboard), `io.lotus.set_quality`
-   (from quality settings), `io.lotus.decorations` (push the MSC4133 decoration
-   map; resolve mxc→https first).
-4. **#1 denoise cutover**: once verified, STOP injecting the `lotusDenoise()`
-   shim in `cinny/vite.config.js` and remove the `index.html` injection — the
-   fork now does denoise in-source. Keep shipping the `denoise/` assets (the
-   fork loads `./denoise/…` at runtime) until those move into the fork build.
-5. Re-run `LOTUS_TESTING.md` §D for each feature; only then ship.
-
-### 12.2 Holistic multi-agent review — outstanding follow-ups (non-blocking)
-
-Four aspect-agents reviewed the whole fork. Criticals were fixed in-branch (the
-denoise restart-silence/A7 bug; the `lotusDenoiseBase` code-load vector;
-audio-inject opt-in gate; #6 rendering in the wrong component; #7 simulcast cap).
-Remaining, deliberately deferred:
-
-- **Denoise H2 (double-processing):** if cinny is set to `lotusDenoise=ml` while
-  ALSO still injecting its build-time `getUserMedia` shim, audio is denoised
-  twice. The #1 cutover MUST remove the cinny-side injection (it currently has
-  none injected into the iframe — keep it that way). Hard requirement, not code.
-- **Denoise M1 (perf):** in-source uses non-SIMD `rnnoise.wasm`; the reference
-  preferred SIMD with detection. Perf-only; add SIMD detection later.
-- **dtln/deepfilternet (F3): RESOLVED** — all four models
-  (rnnoise/speex/dtln/deepfilternet) are now implemented in
-  `lotusDenoiseProcessor.ts` (faithful port of cinny's `build/lotus-denoise.js`
-  pipeline). This also fixed a real bug (the gate worklet name was `noiseGate`;
-  correct is the hyphenated `noise-gate`) and added per-model sample rates
-  (DTLN 16 kHz, others 48 kHz), context `resume()`, and SIMD wasm selection.
-  Still needs live §D testing per model, and depends on cinny shipping the
-  DTLN (`denoise/workadventure/`) + DeepFilterNet (`denoise/deepfilternet/`)
-  asset trees (it already does).
-- **Rebase-fragility (build agent MED):** the `CallViewModel` spotlight override
-  edits hot upstream lines (renamed `spotlightSpeaker$`→`autoSpotlightSpeaker$`).
-  For cheaper future rebases, refactor it into a `src/lotus/lotusSpotlight.ts`
-  wrapper that takes the upstream stream and returns the overridden one, leaving
-  upstream's definition byte-identical (a single import + two token swaps).
-- **Denoise asset coupling (build agent HIGH):** the fork loads `./denoise/*`
-  shipped by cinny, not by the fork build (documented in the processor). Add an
-  integration smoke-check that `GET …/element-call/denoise/rnnoise.wasm` == 200,
-  and pin the `@sapphi-red/web-noise-suppressor` version both repos expect.
-- **Unconditional effect registration (build agent LOW):** focus/audio-inject/
-  quality/decorations register widget handlers on every embedded call (true
-  no-ops for a non-Lotus host). Intentional; gate behind a coarse `lotus=1` flag
-  if strict zero-footprint is desired.
-- **Privacy (security agent):** decoration/inject URLs accept any `https`; ideally
-  restrict to the homeserver media origin host-side. Call-state exposes
-  userId/deviceId/speaking to the (trusted, same-origin) host — documented.
-
-**Nothing here blocks the §D live test — but every feature still needs it.**
-
-### 12.3 Safe rollout when prod is the only test environment
-
-Every Phase-2 feature is now **dormant by default** — with the flags cinny sets
-today, the fork behaves identically to the parity build (`#1` was decoupled onto
-`lotusDenoiseSource=1` so it no longer collides with the host's `lotusDenoise=ml`
-shim). This enables a low-risk incremental rollout even without a staging env:
-
-1. **Ship dormant first.** Publish the `lotus` branch (e.g. `0.20.1-lotus.1`),
-   bump cinny's pin, deploy. With no Lotus flags set / no Lotus actions sent,
-   this is upstream-equivalent (only inert, holistically-reviewed code runs).
-   "Testing" here = confirm a normal call still works.
-2. **Enable ONE feature at a time**, each independently revertable:
-   - URL-flag features (#2 `lotusCallState`, #5 `lotusTransparent`/`lotusTheme`,
-     #1 `lotusDenoiseSource`): add the flag in `CallEmbed.getWidget`, deploy,
-     test that one feature, roll back just that flag if needed.
-   - Action features (#3,#4,#6,#7): wire the host send + (for #2) the
-     `listenAction` ack, gated on join (§12.1 F1).
-3. **#1 denoise cutover is a coordinated 2-step** (do together): set
-   `lotusDenoiseSource=1` AND remove the `lotusDenoise()` shim injection +
-   `lotusDenoise=ml` param in cinny — otherwise audio is denoised twice.
-   Roll back = revert both.
-4. Baseline is always upstream-equivalent, so any single feature can be disabled
-   by flipping its flag/send off without touching the rest.
-
-**Blocker to step 1:** publishing the `lotus` branch needs a Gitea npm token
-(the admin token used for the `0.20.1` parity publish was deleted). Either
-provide a token for a manual `npm publish`, or stand up the Gitea Actions runner
-
-- `GITEA_NPM_TOKEN` secret so a `v0.20.1-lotus.1` tag auto-publishes.

LOTUS_BUGS.md

@@ -1,166 +0,0 @@
-# Lotus Chat — Open Bugs & Technical Debt
-
-**Only OPEN and awaiting-verification items live here.** Resolved findings
-(fixed-and-verified, false-positives, won't-fix) have been removed to keep this
-actionable — the full history is in git. Items fixed in code but not yet
-verified in a real environment are in **Needs Verification** below and have
-step-by-step checks in [`LOTUS_TESTING.md`](./LOTUS_TESTING.md).
-
-> Design rules for any fix here: follow the **Native-Cinny Law** and **TDS
-> Design Law** in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
-
----
-
-## ⚠️ Needs Verification — fixed in code, awaiting live testing
-
-Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
-
-| ID   | Item                                                                                   | File / area                                          | Test                                                                              |
-| :--- | :------------------------------------------------------------------------------------- | :--------------------------------------------------- | :-------------------------------------------------------------------------------- |
-| #2   | Chat-background animation flicker (`contain:paint`)                                    | `lotus/chatBackground.ts`                            | F1                                                                                |
-| #4   | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live)                | `CallEmbedProvider.tsx`, `ringtones.ts`              | A1,A3,A4                                                                          |
-| #6   | Background vs. seasonal theme mutual exclusion                                         | `state/settings.ts`, `General.tsx`                   | F2                                                                                |
-| #7   | Composer toolbar touch targets (≥44px)                                                 | `room/RoomInput.tsx`                                 | E1                                                                                |
-| #8   | Room Settings horizontal overflow (mobile)                                             | `components/page/style.css.ts`                       | E2                                                                                |
-| #9   | Modal fullscreen on mobile (`useModalStyle`)                                           | 22+ modal files                                      | E3                                                                                |
-| #10  | Composer not hidden by keyboard (`100dvh`)                                             | `src/index.css`                                      | E4                                                                                |
-| #12  | PiP "All muted" badge re-fixed (was firing on any single mute)                         | `hooks/useCallSpeakers.ts`                           | G1                                                                                |
-| N96  | Call-recovery overlay single "Back" button                                             | `call/CallView.tsx`                                  | A7                                                                                |
-| N95  | AFK-monitor mic released on mute (OS indicator clears)                                 | `hooks/useAfkAutoMute.ts`                            | L1                                                                                |
-| N108 | Maskable PWA icons (Android adaptive)                                                  | `public/manifest.json` + `res/android/maskable-*`    | L2                                                                                |
-| EC   | EC iframe load watchdog + self-heal + recovery UI                                      | `plugins/call/CallEmbed.ts`, `CallView.tsx`          | A7                                                                                |
-| N105 | Notification clicks work after tab close (SW `notificationclick` + `showNotification`) | `sw.ts`, `utils/dom.ts`, `ClientNonUIFeatures.tsx`   | get a msg notif, close the tab, click it → app focuses/opens + routes to the room |
-| Gal  | MediaGallery lazy-decrypt (true virtualization deferred)                               | `room/MediaGallery.tsx`                              | H1                                                                                |
-| a11y | aria-labels: edit-history / reaction / thread / reply                                  | `message/*` (`FallbackContent`, `Reaction`, `Reply`) | I                                                                                 |
-| P3-8 | Thread Panel (side drawer, chips, threaded receipts, thread composer)                 | `features/room/thread/*`, `RoomTimeline/RoomInput`  | 6-step checklist in LOTUS_TODO §P3-8                                              |
-| P4-4 | KaTeX math (`$…$`, `$$…$$`, data-mx-maths; lazy chunk)                                | `utils/mathParse.ts`, `components/math/`             | send `$x^2$`, `$$\int f$$`, `$5 and $10` (stays text), math inside code block (stays text) |
-| P4-8 | Encrypted-search cache (opt-in toggle, clear button, logout wipe)                      | `utils/searchCache.ts`, message-search               | enable in search panel → search → reload → coverage persists; logout wipes        |
-| N97a | Session blob migration + cross-tab logout sync                                        | `state/sessions.ts`, `useSessionSync`                | login on old build → new build migrates; logout in tab A → tab B drops to auth    |
-| P4-1 | Slack-style thread notifications (participating default, All/Mentions/Mute, badge math) | `utils/threadNotifications.ts`, `ClientNonUIFeatures`, `roomToUnread` | 6-step checklist in LOTUS_TODO §P4-1                                              |
-
-**Verified working in live testing (2026-06):** A2, B1–B4, C1, C3, D (mic/camera/deafen/screenshare/fullscreen/more-menu/PiP). Denoise quality in D is still poor — tracked under the denoise project, not a regression.
-
----
-
-## 🧩 Element Call source-level items — now actionable via the fork
-
-> 🔱 **[EC-FORK]** **UPDATE 2026-06-30: Phase 2 IMPLEMENTED.** We own and
-> self-build Element Call (`LotusGuild/element-call` →
-> `@lotusguild/element-call-embedded@0.20.1-lotus.1`, cinny wired). A5/A6/A7
-> below are **fixed in the fork** — they are now ⚠️ awaiting **live
-> verification** (`LOTUS_TESTING.md` §D2), not open work. See
-> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md) §10. Delete each
-> row once verified live.
-
-The in-call participant grid is rendered **inside EC's app** — now editable source
-(previously a prebuilt npm bundle we could only style around). Status of the items
-from testing:
-
-- **A5 — "Focus camera": ⚠️ FIXED in fork, awaiting verify (D2-3).** cinny now
-  sends an `io.lotus.focus_participant` widget action that pins a participant in
-  EC's layout (coexisting with / overriding the screenshare spotlight); the old
-  `.click()`-the-tile DOM hack in `CallControl.ts` is deleted.
-- **A6 — avatar decorations in-call: ⚠️ FIXED in fork, awaiting verify (D2-4).**
-  cinny pushes `io.lotus.decorations` (per-user APNG URLs) and the fork renders
-  them on EC's participant video-tile avatars — not just our pre-join lobby roster.
-- **A7 — mic dead after EC's "Reconnect": ⚠️ FIXED in fork, awaiting verify
-  (D2-1).** Denoise moved into EC's mic-capture/publish pipeline as a first-class
-  LiveKit `TrackProcessor` (flag `lotusDenoiseSource=1`); EC re-runs it on every
-  (re)publish, so reconnects keep denoise alive natively. The build-time
-  `getUserMedia`/`index.html` injection (the root cause) is removed. **Highest
-  blast radius — everyone's mic; verify D2-1 carefully.**
-
----
-
-## 🔴 Open — Actionable
-
-### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED · 👤 SENIOR ENGINEER
-
-> 🧰 **Investigation kit ready (2026-07):** [`LOTUS_E2EE_INVESTIGATION.md`](./LOTUS_E2EE_INVESTIGATION.md)
-> has the per-KE capture runbook (console signatures, synapse-side queries, the
-> KE-1→KE-2 causality decision tree, ranked remediations), and the client now
-> ships a **Crypto Diagnostics** capture helper (Settings) — run it during the
-> next affected call and download the report before starting any fix.
-
-> **Observed live in prod 2026-06-30** on `chat.lotusguild.org` during a 2-person
-> **Element Call** (E2EE enabled). These span **client rust-crypto (via
-> `matrix-js-sdk@41.6.0-rc.0`) ↔ Synapse ↔ Element Call's MatrixRTC E2EE** and are
-> very likely **interrelated** (see KE-1 → KE-2). Do **not** spot-fix — they need
-> a dedicated cross-system planning session with the homeserver owner. Capture
-> full client console + a synapse-side trace for the same call before starting.
-> **None of these are caused by the EC fork work** (the issues reproduce on the
-> old build; the local mic/denoise path is unrelated to key distribution).
-
-- **KE-1 — One-time-key (OTK) upload conflict storm (CRITICAL, root-cause candidate).**
-  `POST /_matrix/client/v3/keys/upload` returns `400 M_UNKNOWN: One time key
-signed_curve25519:AAAAAAAAAGQ already exists. Old key: {…} new key: {…}` —
-  firing **continuously** (many/sec). The client repeatedly tries to publish an
-  OTK at a key id the server already holds **with a different value**, i.e. the
-  rust-crypto key store and Synapse have **diverged OTK state**. Impact: floods
-  the crypto outgoing-request loop and is the prime suspect for the downstream
-  missing-key failures (no fresh OTKs ⇒ no new Olm sessions ⇒ undecryptable
-  to-device key events). _Investigate:_ device/key-store reset-or-restore
-  mismatch, OTK id-counter desync, RC-SDK (`41.6.0-rc.0`) regression, or a
-  Synapse OTK bug. Repro signature: grep console for `already exists`.
-  **Extreme — planning session.**
-
-- **KE-2 — Element Call media keys not arriving/decrypting → audio & video cut out (CRITICAL).**
-  `MissingKey: missing key at index N for participant @user`, `skipping decryption
-due to missing key`, `MissingKey: key set not found for @user at index 0`, and
-  rust-crypto `WARN … Received an unexpected encrypted to-device event …
-event_type="io.element.call.encryption_keys"`. EC distributes per-participant
-  media keys as **encrypted to-device `io.element.call.encryption_keys`** events;
-  these aren't being received/decrypted in order, so remote LiveKit audio/video
-  can't be decrypted — **this is the "friend's audio cuts out occasionally"
-  symptom.** Almost certainly downstream of **KE-1** (broken Olm sessions). Spans
-  EC's MatrixRTC E2EE + rust-crypto to-device + Synapse. **Extreme — planning
-  session.**
-
-- **KE-3 — Timeline decryption error: missing `algorithm` field (HIGH).**
-  `Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg:
-missing field 'algorithm' at line 1 column 138 …]`. A malformed/legacy
-  encrypted event (or a serialization mismatch in the RC SDK) that rust-crypto
-  can't parse. Lower frequency than KE-1/2 but a distinct decode-path failure —
-  capture the offending event id (`$SASBBzoqj…` seen) and inspect its raw content.
-
-- **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH, reliability).**
-  `[MembershipManager] Network local timeout error while sending event, immediate
-retry … AbortError: Restart delayed event timed out before the HS responded`,
-  with repeated `org.matrix.msc4157.update_delayed_event`. MSC4140/4157
-  delayed-event reliability against `matrix.lotusguild.org` — can cause stale/ghost
-  call membership and missed leave events. May be partly **homeserver
-  responsiveness**; correlate with synapse latency/load. Include in the same
-  planning session since it shares the call-reliability + HS-interaction surface.
-
-### Security & Privacy
-
-- **N97 — Access token stored in plaintext `localStorage`** (`state/sessions.ts`), vulnerable to XSS; device ID likewise. Architectural — needs a token-protection / session-storage redesign.
-- **Session writes are non-atomic and not cross-tab synced** (`state/sessions.ts`) — risks inconsistent state / races across tabs.
-- **Persisted PII without encryption:** user status message + expiry (`settings/account/Profile.tsx`), unsent composer drafts (`room/RoomInput.tsx`). Leak risk on shared devices.
-
-### PWA / Offline / Notifications
-
-- **N107 — SW has no `push` handler** — Web Push delivery is entirely non-functional. Needs a `push` listener + a Matrix push-gateway integration.
-- **No app-asset caching strategy** (`src/sw.ts`) — no offline capability.
-- ~~**`manifest: false`** may block PWA install~~ — **verified OK (2026-06):** `index.html` links `/manifest.json`, which exists in `public/` and is copied to `dist/`; VitePWA intentionally doesn't generate one. Not a bug.
-
-### Dependencies & Build
-
-- **`matrix-js-sdk` pinned to a Release Candidate** (`41.6.0-rc.0`); `@atlaskit` and build tools (`vite`, `typescript`, `eslint`) on unstable/experimental pins — review for stable versions; RC SDK is a tree-shaking/bundle-size risk.
-- **Build-time overhead:** `lotusDenoise` does heavy sequential `fs` work in `closeBundle`; `viteStaticCopy` config is complex with redundant renames — could be streamlined.
-
-### Code Hygiene / DevEx
-
-- **Automated test suite — 561+ tests across 65+ modules, a hard CI gate.** `npm test` runs Node's built-in runner via `tsx` (not vitest — Vite 8 is ahead of vitest's range) and **blocks the build job on failure**. Broad pure-logic coverage: utils (common, regex, sanitize/XSS, time, matrix, matrix-uia, mimeTypes, sort, accentColor, findAndReplace, AsyncSearch, ASCIILexicalTable, keyboard, room, matrix-crypto, featureCheck, syntaxHighlight, imageCompression, user-agent, callSounds), state (settings, sessions, recentSearches, upload, typingMembers, lists, room-list, toast, scheduledMessages, backupRestore, callEmbed/callPreferences, spaceRooms, …), plugins (matrix-to, call/utils, via-servers, bad-words, recent-emoji, custom-emoji, markdown block/inline/utils), OIDC (cs-api, useParsedLoginFlows, oidcState), lotus/avatarDecorations, message-search, search filters. Prevention work has caught + fixed **4 real bugs** (`findAndReplace` infinite-loop; `getSettings` crash-on-load when storage is blocked; `isMacOS` never matching modern Macs; `isMLDenoiseSupported` throwing `ReferenceError` instead of returning false on browsers lacking the `AudioWorkletNode` binding). **Next:** component/integration tests (the untestable-under-tsx DOM/React surface).
-- **Extensive `as any` casts** across `src/` — gradual typing cleanup.
-- **`types/matrix/` mirrors SDK types** instead of importing them — drift risk.
-- ~~**Hardcoded CDN URL** should move to an env var~~ — **done:** `avatarDecorations.ts` already honors a `VITE_DECORATION_CDN` env override (lines 14-16); the in-repo literal is only the default. Nothing left.
-- **`patch-folds.mjs` edits `node_modules` directly** — consider `patch-package`.
-- **Infra docs:** `contrib/nginx` lacks security headers (HSTS/CSP) + uses rewrites over `try_files`; `contrib/caddy` has a placeholder path. CI/CD (`prod-deploy.yml`): sequential deploy, aggressive 1-min Netlify timeout, `package-manager-cache: false`.
-- **README:** keep the fork-sync version + logo path current. (`CONTRIBUTING.md` is intentionally left as upstream Cinny's — not a Lotus concern.)
-- **Architecture notes (low priority):** deep `features/` + `hooks/` nesting, many small coupled hooks, possible dead CSS/components, `SpacingVariant` / `DropTarget` recipe simplification.
-- **Git workflow (forward-looking):** keep commits scoped — past monolithic "fix all bugs" commits and inconsistent prefixes hurt `git bisect`.
-
-### Big Projects
-
-- ~~**#5 — Seasonal themes & chat-background redesign.**~~ **DONE (2026-06/07):** 11 seasonal/holiday overlays shipped and later toned down + given a settings preview grid; all 19 chat backgrounds redesigned (Carbon + Aurora kept per user preference), one design sprint each, GPU-friendly CSS with `prefers-reduced-motion` + pause toggle. Remaining polish rides normal bug flow, not a "big project."

LOTUS_E2EE_INVESTIGATION.md

@@ -1,402 +0,0 @@
-# Lotus Chat — E2EE Investigation Runbook (KE-1 → KE-4)
-
-> **Scope:** evidence-gathering only. Do **not** apply fixes from this document
-> without a cross-system planning session (client rust-crypto ↔ Synapse ↔
-> Element Call MatrixRTC). Symptom source: `LOTUS_BUGS.md` §"Encryption / E2EE"
-> (KE-1..KE-4), observed live 2026-06-30 on `chat.lotusguild.org` during a
-> 2-person Element Call.
->
-> **Client:** Lotus Cinny fork, `matrix-js-sdk@41.6.0-rc.0`, rust-crypto.
-> **Server:** Synapse `1.155.0` on **LXC 151** (`10.10.10.29`), PostgreSQL 17.9
-> on **LXC 109** (`10.10.10.44`). Facts below are copy-pasteable against that
-> deployment (paths/IPs from `/root/code/matrix/README.md`).
-
----
-
-## 0. Deployment facts used by this runbook
-
-From the matrix infra README (`/root/code/matrix/README.md`):
-
-| Thing | Value |
-|-------|-------|
-| Synapse host | LXC **151**, `10.10.10.29` (Synapse 1.155.0) |
-| Synapse log | `/var/log/matrix-synapse/homeserver.log` |
-| Synapse config | `/etc/matrix-synapse/homeserver.yaml` (+ `conf.d/`) |
-| Synapse HTTP | `10.10.10.29:8008` |
-| PostgreSQL host | LXC **109**, `10.10.10.44` (PG 17.9), db `synapse` |
-| synapse-admin UI | `http://10.10.10.29:8080` |
-| LiveKit / lk-jwt / guard | LXC 151: LiveKit `:7880/:7881`, guard `:8070`, lk-jwt `:8071` |
-| SSH path to Synapse | `ssh root@10.10.10.4` then `pct enter 151` |
-| SSH path to PG | `ssh root@10.10.10.4` then `pct enter 109` |
-
-**Getting a psql shell** (run on LXC 109, or from 151 over the network):
-
-```bash
-# On LXC 109:
-sudo -u postgres psql synapse
-# From LXC 151 (pg_hba allows 10.10.10.29):
-psql "host=10.10.10.44 user=synapse dbname=synapse"
-```
-
-**Tailing Synapse during a call** (on LXC 151):
-
-```bash
-tail -F /var/log/matrix-synapse/homeserver.log | tee /tmp/lotus-call-$(date +%s).log
-```
-
-Synapse E2EE/to-device logging is chatty at `INFO`; if a category is silent,
-temporarily raise it in `/etc/matrix-synapse/conf.d/log.yaml` (or the
-`log_config` file referenced by `homeserver.yaml`):
-
-```yaml
-loggers:
-  synapse.rest.client.keys:            { level: DEBUG }
-  synapse.handlers.e2e_keys:           { level: DEBUG }
-  synapse.storage.databases.main.end_to_end_keys: { level: DEBUG }
-  synapse.handlers.devicemessage:      { level: DEBUG }   # to-device
-```
-
-Then `systemctl reload matrix-synapse` (reload re-reads log config without a
-full restart). **Revert to `INFO` after the capture** — DEBUG is very verbose.
-
----
-
-## 1. Per-KE evidence matrix
-
-Client greps assume Chrome/Firefox DevTools console (filter box or, better,
-"Preserve log" + save-as). The **Crypto Diagnostics** card (Settings →
-Developer Tools) auto-captures every signature below into a downloadable JSON —
-use it as the primary client artifact and DevTools as the raw backup.
-
-### KE-1 — OTK upload conflict storm (root-cause candidate)
-
-- **Console signature (grep):**
-  - `already exists`
-  - full: `POST /_matrix/client/v3/keys/upload … 400 M_UNKNOWN: One time key signed_curve25519:<id> already exists. Old key: {…} new key: {…}`
-- **Capture client-side:**
-  - Timestamp (first occurrence + rate — "N/sec"), **device id**, **user id**.
-  - DevTools → **Network** → filter `keys/upload`: for a failing call save the
-    **request body** (the `one_time_keys` map — note the exact `signed_curve25519:<id>`)
-    and the **response body** (the `Old key` / `new key` JSON). This diff is the
-    smoking gun: same key-id, different value ⇒ store vs server divergence.
-  - Whether it self-heals or loops forever (KE-1 loops).
-- **Synapse log grep (LXC 151):**
-  ```bash
-  grep -E "keys/upload|One time key .* already exists|OneTimeKey" \
-    /var/log/matrix-synapse/homeserver.log | grep "<user_id>"
-  ```
-- **Synapse SQL (LXC 109) — what the server thinks it holds:**
-  ```sql
-  -- Current OTK inventory for the device (compare key_id set against the
-  -- request body the client keeps retrying).
-  SELECT algorithm, key_id, ts_added_ms
-  FROM e2e_one_time_keys_json
-  WHERE user_id = '@user:matrix.lotusguild.org'
-    AND device_id = '<DEVICE_ID>'
-  ORDER BY algorithm, key_id;
-
-  -- Server's advertised counts (this is what /sync tells the client it has,
-  -- and drives whether the client decides to upload more).
-  SELECT algorithm, count(*) FROM e2e_one_time_keys_json
-  WHERE user_id = '@user:matrix.lotusguild.org' AND device_id = '<DEVICE_ID>'
-  GROUP BY algorithm;
-
-  -- Fallback key state (used when OTKs are exhausted).
-  SELECT algorithm, key_id, used, ts_added_ms
-  FROM e2e_fallback_keys_json
-  WHERE user_id = '@user:matrix.lotusguild.org' AND device_id = '<DEVICE_ID>';
-  ```
-  > Table names are Synapse 1.155 (`e2e_one_time_keys_json`,
-  > `e2e_fallback_keys_json`). If a name is absent, list with `\dt e2e*` in psql.
-- **Confirms:** if the offending `key_id` (from the 400) is **present** in
-  `e2e_one_time_keys_json` with a **different** stored value than the client's
-  request body → OTK state has diverged (rust-crypto store vs Synapse). That is
-  the KE-1 root condition.
-
-### KE-2 — EC media keys not arriving/decrypting (audio/video cutouts)
-
-- **Console signature (grep):**
-  - `MissingKey`
-  - `missing key at index` (e.g. `MissingKey: missing key at index N for participant @user`)
-  - `key set not found`
-  - `io.element.call.encryption_keys` (rust-crypto: `WARN … Received an unexpected encrypted to-device event … event_type="io.element.call.encryption_keys"`)
-- **Capture client-side:**
-  - Timestamp windows where a participant's audio/video cut out, and the
-    `@participant` + `index N` from the message.
-  - The `io.element.call.encryption_keys` warnings (these are the media-key
-    to-device events failing to decrypt) with their timestamps.
-  - Own device id + user id (to correlate with the sender's Olm session).
-- **Synapse log grep (LXC 151) — to-device delivery of the media keys:**
-  ```bash
-  grep -E "io.element.call.encryption_keys|m.room.encrypted|/sendToDevice|to_device" \
-    /var/log/matrix-synapse/homeserver.log | grep -E "<user_id>|<participant_id>"
-  ```
-- **Synapse SQL (LXC 109) — undelivered / queued to-device events:**
-  ```sql
-  -- Backlog of to-device messages queued for the affected device. A growing
-  -- count here = the HS has the media-key events but the device isn't draining
-  -- them via /sync (or they were sent to a stale device id).
-  SELECT user_id, device_id, count(*) AS pending
-  FROM device_inbox
-  WHERE user_id = '@user:matrix.lotusguild.org'
-  GROUP BY user_id, device_id;
-
-  -- Cross-check the device id the sender is targeting actually exists / is current.
-  SELECT device_id, display_name, last_seen, ts
-  FROM devices WHERE user_id = '@user:matrix.lotusguild.org';
-  ```
-- **Confirms:** to-device events present but undecryptable (client shows the
-  `io.element.call.encryption_keys` "unexpected encrypted" warning) ⇒ there is
-  **no valid Olm session** to decrypt them — the expected downstream of KE-1.
-
-### KE-3 — Timeline decryption error: missing `algorithm` field
-
-- **Console signature (grep):**
-  - `DecryptionError`
-  - full: `Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg: missing field 'algorithm' at line 1 column 138 …]`
-- **Capture client-side:**
-  - The **event id** (`$SASBBzoqj…` was one) and the **room id**.
-  - Pull the raw event JSON via DevTools or the Developer Tools account-data/event
-    viewer, or directly:
-    ```
-    GET https://matrix.lotusguild.org/_matrix/client/v3/rooms/<roomId>/event/<eventId>
-    ```
-    Inspect `content` — confirm whether `algorithm` (should be
-    `m.megolm.v1.aes-sha2`) is truly absent vs a serialization mismatch.
-- **Synapse log grep (LXC 151):**
-  ```bash
-  grep -E "<eventId>" /var/log/matrix-synapse/homeserver.log
-  ```
-- **Synapse SQL (LXC 109) — the stored event content as the HS holds it:**
-  ```sql
-  SELECT ej.event_id, e.type, e.sender, e.origin_server_ts,
-         (ej.json::json -> 'content' -> 'algorithm') AS algorithm
-  FROM event_json ej
-  JOIN events e USING (event_id)
-  WHERE ej.event_id = '$SASBBzoqj...';
-  ```
-- **Confirms:** if the stored `content.algorithm` is **NULL/absent** on the HS →
-  a malformed/legacy event was persisted (sender-side or federation). If it is
-  **present** on the HS but the client throws → an RC-SDK deserialization bug.
-  This distinction decides whether KE-3 is a data problem or a client problem.
-
-### KE-4 — MatrixRTC delayed-event / membership timeouts
-
-- **Console signature (grep):**
-  - `update_delayed_event` (`org.matrix.msc4157.update_delayed_event`)
-  - `delayed event` / `Restart delayed event timed out`
-  - full: `[MembershipManager] Network local timeout error while sending event, immediate retry … AbortError: Restart delayed event timed out before the HS responded`
-- **Capture client-side:**
-  - Timestamps of each timeout; whether they correlate with call join/leave or
-    with general sync slowness.
-  - DevTools → Network: the `…/delayed_events…` / `update_delayed_event`
-    requests — their **HTTP status and latency** (timed-out vs slow-200).
-- **Synapse log grep (LXC 151):**
-  ```bash
-  grep -E "delayed_event|msc4140|msc4157|update_delayed" \
-    /var/log/matrix-synapse/homeserver.log | grep "<user_id>"
-  # HS responsiveness in the same window (KE-4 may be pure latency):
-  grep -E "Processed request|/sync" /var/log/matrix-synapse/homeserver.log | tail -50
-  ```
-- **Server-side corroboration (Grafana, `dashboard.lotusguild.org`):** Synapse
-  p99 response time (excl. `/sync`), event-processing lag, DB query latency for
-  the call window. High latency here ⇒ KE-4 is (partly) homeserver
-  responsiveness, not a client bug.
-- **Confirms:** timeouts that line up with HS latency spikes → reliability/load;
-  timeouts with a healthy HS → client MembershipManager retry logic.
-
----
-
-## 2. Causality hypothesis
-
-```
-KE-1  OTK upload conflict storm
-      (rust-crypto store ↔ Synapse OTK state DIVERGED; server rejects re-uploads)
-        │  no fresh OTKs can be published/claimed
-        ▼
-      No new Olm (1:1) sessions can be established with this device
-        │
-        ▼
-KE-2  EC media-key to-device events (io.element.call.encryption_keys)
-      arrive but cannot be decrypted  ⇒  MissingKey at index N
-      ⇒  friend's audio/video cuts out
-```
-
-KE-3 (missing `algorithm`) and KE-4 (delayed-event timeouts) are **likely
-independent** of the KE-1→KE-2 chain: KE-3 is a decode/serialization path,
-KE-4 is a MatrixRTC-vs-HS reliability path. Confirm/refute independence with the
-decision tree below.
-
-### Decision tree — which capture confirms/refutes each link
-
-```
-Q1. Does the KE-1 offending key_id from the 400 response exist in
-    e2e_one_time_keys_json with a DIFFERENT value than the client request body?
-    ├─ YES → OTK divergence CONFIRMED (KE-1 root). Go to Q2.
-    └─ NO  → Not divergence. Check: are OTK counts at 0 with fallback key `used=true`?
-             ├─ YES → OTK exhaustion, not divergence — different remediation.
-             └─ NO  → Suspect RC-SDK 41.6.0-rc.0 upload-loop regression (see §3).
-
-Q2. During the same call, are io.element.call.encryption_keys to-device events
-    present in device_inbox / Synapse to-device logs for our device id?
-    ├─ YES + client shows "unexpected encrypted"/MissingKey
-    │        → KE-1 ⇒ KE-2 LINK CONFIRMED (events delivered, no Olm session to open them).
-    ├─ YES + client decrypts fine, but LiveKit still silent
-    │        → KE-2 is downstream of LiveKit/SFU, NOT KE-1. Decouple from crypto.
-    └─ NO (nothing queued/targeted our device)
-             → media keys never sent to us: stale device id / membership (see KE-4)
-               → KE-2 is a device-targeting problem, weakly linked to KE-1.
-
-Q3. KE-3: is content.algorithm NULL in event_json on the HS?
-    ├─ YES → malformed persisted event (sender/federation). Independent of KE-1.
-    └─ NO  → client-side RC-SDK deserialization bug. Independent of KE-1.
-
-Q4. KE-4: do delayed-event timeouts coincide with Synapse p99 latency spikes
-    (Grafana) in the same minute?
-    ├─ YES → homeserver responsiveness/load. Independent of KE-1..KE-3.
-    └─ NO  → client MembershipManager retry behavior. Independent.
-```
-
----
-
-## 3. Ranked remediation options (with blast radius)
-
-> Ordered least-destructive → most-destructive. **Do not run any of these as a
-> "fix" before the planning session** — they are listed so evidence collection
-> can be paired with a recovery plan. Confirm the root condition (Q1/Q2) first.
-
-1. **Per-device logout + re-login of the affected device** *(lowest blast radius)*
-   - **What:** log the one glitching device out and back in. Forces a fresh
-     device id, fresh device keys, and a clean OTK batch — sidesteps a diverged
-     OTK store without touching other sessions.
-   - **Blast radius:** that device only. Other sessions/devices untouched.
-   - **Cost:** the new device must be re-verified (cross-signing) and will need
-     to restore room keys from **key backup** to read old encrypted history.
-   - **Confirms/uses:** if KE-1 stops after this, OTK-store divergence (Q1) was
-     the cause.
-
-2. **Client crypto-store reset (`clearLoginData` path)** *(medium)*
-   - **What:** `clearLoginData()` in `src/client/initMatrix.ts` (coordinator's
-     file — do not edit) **deletes ALL IndexedDB databases** (incl.
-     `web-sync-store` and the rust-crypto store `crypto-store`), **unregisters
-     service workers**, **clears all Cache Storage**, and **`localStorage.clear()`**,
-     then reloads. `clearCacheAndReload()` is lighter — it only calls
-     `mx.store.deleteAllData()` (sync cache) and does **not** wipe crypto.
-   - **Blast radius:** this browser profile only, but total: you are logged out,
-     lose all cached sync state, drafts, settings, and **the local
-     megolm/room-key store**.
-   - **⚠️ Message-history / backup implication:** wiping `crypto-store` destroys
-     locally-held **room keys (megolm inbound sessions)**. Any history **not
-     backed up to server-side Key Backup** becomes **permanently undecryptable
-     on this device**. Before doing this: verify Key Backup is enabled and the
-     recovery key / passphrase is available (Settings → Security), or the user
-     loses readable history. Cross-signing must be re-established too.
-   - **Use when:** the rust-crypto store itself is corrupt/diverged and option 1
-     didn't clear it.
-
-3. **SDK pin change off the RC** *(medium — codebase change, needs rebuild)*
-   - **Current pin:** `package.json` → `"matrix-js-sdk": "41.6.0-rc.0"` (a
-     release candidate).
-   - **Finding (npm / GitHub changelog, checked 2026-07):** stable **`41.6.0`**
-     was released **2026-05-26**. Its only changelog line is *"Throw sane error
-     on completeLoginOnNewDevice IdP rejection"* — **no OTK / keys-upload / Olm /
-     to-device fix** relative to the RC. Later stable lines exist
-     (`41.7.0`, `41.8.0`; `41.7.0-rc.3` / `41.9.0-rc.0` seen as pre-releases).
-     Nearby crypto-relevant entries: `41.5.0` *"Enable encrypted history sharing
-     by default"*; `41.4.0` key-backup handling. **No changelog entry directly
-     addresses the KE-1 OTK-conflict symptom** in the immediate range — so
-     moving RC→`41.6.0` stable is a low-risk hygiene step but is **not expected
-     to fix KE-1 by itself**. Before pinning, re-read the CHANGELOG for any
-     `41.7.x`/`41.8.x` OTK/one-time-key/olm entry that post-dates this note.
-   - **Blast radius:** all users after the next `cinny-build.sh` deploy. Test the
-     rust-crypto IndexedDB schema — a downgrade triggers the `IDB_VERSION_CONFLICT`
-     path in `initMatrix.ts`.
-
-4. **Synapse-side OTK row surgery** *(LAST RESORT — highest danger)*
-   - **What:** deleting/rewriting rows in `e2e_one_time_keys_json` (and/or
-     `e2e_fallback_keys_json`, `device_inbox`) for the affected device to force
-     the client to re-upload a clean batch.
-   - **⚠️ Danger:** direct writes to Synapse crypto tables can **desync every
-     device of that user**, break Olm sessions **for everyone who has claimed one
-     of those keys**, and are easy to get wrong (wrong `key_id`, cache not
-     invalidated). Synapse caches OTK counts — a raw DELETE without a restart can
-     leave the advertised count wrong, **worsening** the KE-1 loop.
-   - **Guardrails if ever done (planning session + HS owner only):** full
-     `pg_dump` of `synapse` first; do it during **zero active calls**; delete only
-     the exact diverged `key_id` for the exact `device_id`; `systemctl restart
-     matrix-synapse` to flush caches; then log the device out/in (option 1) so it
-     republishes. **Never** run this speculatively.
-
----
-
-## 4. "Capture session" checklist (run during the next call)
-
-Do these **in order**. Aim to have client + server capturing the **same call**.
-
-1. **Prep server tail (LXC 151):** SSH in, start
-   `tail -F /var/log/matrix-synapse/homeserver.log | tee /tmp/lotus-call-$(date +%s).log`.
-   (Optionally raise the `synapse.rest.client.keys` / `handlers.e2e_keys` /
-   `handlers.devicemessage` loggers to DEBUG per §0 and `systemctl reload
-   matrix-synapse` — remember to revert after.)
-2. **Prep client:** open Lotus Chat → Settings → Developer Tools → **enable
-   Developer Tools** so the **Crypto Diagnostics** card is visible; note its
-   entry count starts at (or reset by reload to) 0.
-3. **Open DevTools** (F12) → Console: enable **Preserve log**; Network tab:
-   enable **Preserve log** + **Record**. Note your **device id** and **user id**
-   (Settings → Devices / Developer Tools → Copy access token page shows ids).
-4. **Note wall-clock start time** (ISO/UTC) on both machines so logs align.
-5. **Join the Element Call** with the second participant; reproduce the fault
-   (wait for the audio/video cutouts and let KE-1 storm run ~30–60s).
-6. **When a fault occurs, note the wall-clock timestamp** and which symptom
-   (audio cut / video freeze / etc.) — this bounds the log window.
-7. **Client artifacts:** in the Crypto Diagnostics card click **Download report**
-   (`lotus-crypto-diag-<ts>.json`); in DevTools Network, save the failing
-   `keys/upload` request+response (right-click → Save/Copy), and the raw HAR
-   (Network → Save all as HAR) for the call window.
-8. **Grab KE-3 event id / KE-2 participant+index** from the console (or the
-   diag JSON `entries[]`) for the SQL lookups.
-9. **Server artifacts:** stop the tail; run the per-KE greps and SQL from §1
-   against the noted device id / user id / event id, saving output alongside the
-   client JSON. Screenshot the Grafana Synapse latency panels for the window
-   (for KE-4).
-10. **Bundle & label:** put client JSON + HAR + server log slice + SQL output in
-    one folder named with the call's UTC start time. Revert any DEBUG log config
-    (`systemctl reload matrix-synapse`). Hand off to the planning session — **do
-    not apply §3 remediations yet.**
-
----
-
-## 5. Client diagnostics helper (this kit)
-
-- **`src/app/utils/cryptoDiagLog.ts`** — capture-only console instrumentation.
-  - `installCryptoDiagLog()` — idempotent; wraps `console.warn`/`console.error`
-    with pass-through wrappers (originals always called) that ring-buffer (max
-    **200**) any line matching the KE signatures. No network, no timers.
-  - `getCryptoDiagEntries()` — snapshot copy of the buffer (`{ ts, level, ke,
-    signature, message }`, most-recent-last).
-  - `buildCryptoDiagReport(mx)` — JSON string: SDK version, device id, user id,
-    sync state, `cryptoReady` (`mx.getCrypto()` presence), per-KE counts, and the
-    entry buffer. No tokens/PII beyond those ids; captured log lines are retained
-    verbatim as evidence.
-  - **Signatures → KE mapping:** `already exists`→KE-1; `missing key at index` /
-    `io.element.call.encryption_keys` / `MissingKey`→KE-2; `DecryptionError`→KE-3;
-    `update_delayed_event` / `delayed event`→KE-4.
-- **`src/app/features/settings/developer/CryptoDiagnostics.tsx`** — a folds
-  `SequenceCard`/`SettingTile` card (mirrors `developer-tools/DevelopTools.tsx`)
-  showing the live matched-entry count (Badge) and a **Download report** button
-  (Blob → `lotus-crypto-diag-<ts>.json`, same download idiom as
-  `room-settings/ExportRoomHistory.tsx`).
-
-### Recommended mount points (coordinator)
-
-- **Install call:** call `installCryptoDiagLog()` **as early as possible during
-  boot** so it captures crypto errors from first sync — ideally at the top of
-  the client entry module or inside `ClientRoot` before/around `initClient`
-  (e.g. `src/app/pages/client/ClientRoot.tsx`). It is idempotent, side-effect
-  only, and needs no `mx`, so a module-scope call at app entry is safe. (Do
-  **not** put it in `initMatrix.ts` — that file is off-limits.)
-- **Settings card:** render `<CryptoDiagnostics />` inside the Developer Tools
-  page — in `src/app/features/settings/developer-tools/DevelopTools.tsx`, add it
-  to the `Box direction="Column" gap="700"` list (guarded by the existing
-  `developerTools` flag), right after the "Access Token" card. It pulls `mx`
-  from `useMatrixClient()` itself, so it just needs to be placed in the tree.

LOTUS_FEATURES.md

@@ -330,7 +330,7 @@ Users can set a custom background color for `@mention` chips that highlight thei
 > pre-built npm bundle. Several in-call behaviors below are now first-class
 > source changes rather than DOM/widget hacks. Background, plan, and the Phase-2
 > work list are in
-> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md).
+> the Element Call fork reference in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
 
 ### Element Call — Self-Built Fork (`0.20.1-lotus.1`)
 
@@ -905,6 +905,14 @@ Hook: `src/app/hooks/useUserNotes.ts`
 
 ## UX & Composer
 
+### Forward to Multiple Rooms (P6-3)
+
+The Forward Message dialog is a checkbox multi-select: pick any number of rooms (search + select persist across queries) and **"Send to N rooms"** forwards in one batch (`Promise.allSettled`). Full success auto-closes; a partial failure keeps the dialog open with a "Forwarded to X/N — failed: …" summary. The forwarded content (latest edit via `m.new_content`, reply-quote stripped, undecryptable refused) is built by the shared, unit-tested `forwardContent.ts`.
+
+### Live Bookmark Previews (P6-3)
+
+`BookmarksPanel` resolves each saved message's **live event** (`useRoomEvent`) so previews reflect **edits** and show a **deleted** indicator for redactions, instead of the save-time snapshot. The stored snapshot (`previewText`) remains the fallback while loading, on fetch failure, or when you've **left the room**.
+
 ### Message Length Counter
 
 A character count indicator is shown in the composer when `charCount > 0`. The counter resets to zero when switching rooms.
@@ -1179,6 +1187,18 @@ Three one-tap presets at the top of **Settings → Notifications** that apply a
 
 ---
 
+## Accessibility (P3-4)
+
+WCAG 2.1 AA hardening of the golden path (find room → read → reply → send) for keyboard and screen-reader users.
+
+- **Timeline for screen readers:** each message is `role="article"`; **collapsed messages announce their sender + time** (they drop the visible header, so AT would otherwise hear the body with no attribution). The timeline is a `role="log"` `aria-live="polite"` region so new messages are announced; emoji/emoticons carry text labels.
+- **Live status:** typing indicators announce via a `role="status"` region; editing a message announces "Editing message from <sender>".
+- **Forms & overlays:** all inputs have associated labels (visible `<label htmlFor>` or `aria-label`); the Media Gallery and Search overlays are named.
+- **Focus management:** skip-to-content link + `nav`/`main` landmarks; genuine dialogs return focus to their trigger on close (inline popouts intentionally keep focus in context).
+- **Keyboard-shortcuts help:** press <kbd>?</kbd> for a dialog of the existing shortcuts (Escape, type-to-focus composer, Enter/Shift+Enter send, message actions).
+- **Regression gate:** a curated `eslint-plugin-jsx-a11y` rule set (ARIA correctness + label association) runs in CI. Files: `components/message/*`, `features/room/RoomViewTyping.tsx`, `features/shortcuts/*`, `utils/a11y.ts`, `eslint.config.mjs`.
+- _Known limitation:_ list virtualization keeps far-scrolled history out of the a11y tree (perf trade-off); newly-arriving messages are announced.
+
 ## Infrastructure
 
 ### Authenticated Media
@@ -1215,7 +1235,7 @@ The session persists as ONE atomic `cinny_session_v1` JSON write (previously ~10
 
 ### Crypto Diagnostics (E2EE investigation kit)
 
-**Settings → Developer Tools → Crypto Diagnostics**: a capture-only ring buffer (max 200) hooks `console.warn/error` for E2EE failure signatures (OTK upload conflicts, missing call media keys, decryption errors, delayed-event timeouts) and downloads a JSON report — the evidence input for the KE-1→4 investigation. Companion runbook: [`LOTUS_E2EE_INVESTIGATION.md`](./LOTUS_E2EE_INVESTIGATION.md). `utils/cryptoDiagLog.ts`, `features/settings/developer/CryptoDiagnostics.tsx`.
+**Settings → Developer Tools → Crypto Diagnostics**: a capture-only ring buffer (max 200) hooks `console.warn/error` for E2EE failure signatures (OTK upload conflicts, missing call media keys, decryption errors, delayed-event timeouts) and downloads a JSON report — the evidence input for the KE-1→4 investigation. Companion diagnosis: the Encryption / E2EE section of [`LOTUS_TODO.md`](./LOTUS_TODO.md). `utils/cryptoDiagLog.ts`, `features/settings/developer/CryptoDiagnostics.tsx`.
 
 ---
 
@@ -1255,6 +1275,15 @@ Windows toasts with **click-to-open-room** and **inline quick reply** (WinRT `To
 
 When Windows Focus Assist / Quiet Hours is active, Lotus suppresses its own notifications + sounds (reuses the quiet-hours gate). `useTauriFocusAssist` + `focusAssistActiveAtom` ↔ `native/focus_assist.rs` (`SHQueryUserNotificationState`).
 
+### Linux parity + cross-platform extras (P6-1)
+
+Rounds out the native app beyond Windows (macOS out of scope):
+
+- **No-sleep during calls on Linux** — a D-Bus `org.freedesktop.ScreenSaver` inhibit (zbus) keeps the display awake mid-call, matching the Windows behavior. `native/power.rs`.
+- **Launcher unread badge on Linux** — best-effort Unity `LauncherEntry` D-Bus signal (Ubuntu/Dash-to-Dock/KDE), mirroring the Windows taskbar badge.
+- **Launch on login** — `tauri-plugin-autostart` + a **Settings → General "Launch on login"** toggle (desktop-only).
+- **Tray "Do Not Disturb"** — a tray checkbox that silences Lotus notifications (feeds `manualDndAtom` into the same quiet-gate as Focus Assist). `useTauriDnd`.
+
 ### Custom Window Chrome (P5-47)
 
 Opt-in (Settings → General → **Custom Window Chrome**): replaces the OS title bar with a TDS-styled titlebar (min / max / close + drag region), runtime-reversible via `set_decorations`. `features/desktop/TitleBar.tsx` + `useTauriWindowChrome` ↔ `native/chrome.rs`.

LOTUS_TESTING.md

@@ -1,6 +1,6 @@
 # Lotus Chat — Manual Testing Guide
 
-**Generated:** June 2026
+**Generated:** June 2026 · **Updated:** July 2026 (added §O — threads, per-thread notifications, math, search cache, session hardening, audit wave, desktop CSP)
 **Scope:** Everything landed on the `lotus` branch since the v4.12.3 merge that I (Claude) could **not** verify statically and that needs a human in a real environment to confirm. Work through it top-to-bottom; the highest-risk / hardest-to-reproduce items are first.
 
 > **How to report back:** For each numbered check, tell me **PASS** / **FAIL** (or **partial**). On any FAIL, include: what you saw vs. expected, the browser/OS (and whether web LXC 106 or the desktop/Tauri build), the theme you were on, and any **browser console** errors (F12 → Console). Screenshots help for anything visual.
@@ -328,7 +328,7 @@ _(Requires the guard deployed on LXC 151 — auto-deploys on a `matrix` repo pus
 
 # Backlog of previously-fixed-but-unverified items
 
-> Sections A–D above are **this session's** work. Everything below was fixed in earlier waves and is still flagged **⚠️ UNTESTED** in `LOTUS_BUGS.md` / `LOTUS_TODO.md`. They're grouped by what kind of environment you need (mobile, desktop, screen reader, etc.) so you can knock out a whole category at once. None of these are urgent the way A–D are; do them as you have the right device handy.
+> Sections A–D above are **this session's** work. Everything below was fixed in earlier waves and is still flagged **⚠️ UNTESTED** (see the outstanding-verification backlog below / `LOTUS_TODO.md`). They're grouped by what kind of environment you need (mobile, desktop, screen reader, etc.) so you can knock out a whole category at once. None of these are urgent the way A–D are; do them as you have the right device handy.
 
 ## E. Mobile / responsive (needs a real phone, or devtools device emulation)
 
@@ -573,10 +573,146 @@ Log into **matrix.lotusguild.org** (password) and **matrix.org**.
 
 ---
 
+## O. July 2026 batch — threads, notifications, math, search cache, audit wave
+
+Everything landed after the OIDC work. These mirror the checklists in `LOTUS_TODO.md` (§P3-8, §P4-1) and the outstanding-verification backlog below (P3-8/P4-1/P4-4/P4-8/N97a/AW-1…4). **⚠️ Threads change the main timeline** — thread replies no longer render inline; that's intended (see O1).
+
+### O1. Thread Panel (P3-8) — 👥 2 people help for live replies
+
+1. Hover a message → **Reply in Thread** (message menu). The right-side **thread panel** opens with that message as the root.
+2. Send text, an emoji, and a file upload into the thread; have the second person reply too.
+3. Reply to a reply _inside_ the panel.
+
+**Expected:** the panel shows the root at top + an "N replies" divider + the reply timeline (own composer at the bottom). Your sends appear immediately (pending → confirmed). A reply-to-a-reply is a proper thread reply. In the **main** timeline the replies do **not** appear inline — the root message instead shows a **"N replies · time"** chip. Clicking the chip (or a reply's thread indicator) opens the panel. **×** or **Escape** closes it; on mobile the panel is fullscreen. Scrolled up in a long thread → a **Jump to Latest** chip appears. Reload the page → the root/reply split persists; in an **encrypted** room the thread replies decrypt (not "Unable to decrypt").
+
+### O2. Per-thread notifications (P4-1, Slack-style) — 👥 2 people
+
+1. Have the second person reply in a thread **you have posted in** → expect a notification + sound.
+2. Have them reply in a thread **you have never touched** and don't @mention you → expect **silence** (only the chip's unread badge updates).
+3. Have them **@mention** you in any thread → expect a notification regardless of participation.
+4. Open the panel's **bell menu** (header) → set the thread to **Mute** → expect no notifications, the chip's unread badge gone (bell-mute glyph shown), and the room's **sidebar badge drops** by that thread's count. Try **All** (every reply notifies) and **Mentions only** (only @mentions).
+5. On a **second device**, confirm the same per-thread modes are set (they sync via account data).
+6. Room-level **Mute** (room context menu) still silences everything, including thread overrides.
+
+**Known caveat:** Mentions-only can under-notify in E2EE rooms (the decision runs before decryption). Muted-thread badge subtraction is Lotus-only.
+
+### O3. Math / LaTeX (P4-4)
+
+Send each and confirm rendering: `$x^2 + y^2$` (inline), `$$\int_0^1 f(x)\,dx$$` (block, centered), `$5 and $10 for lunch` (**stays plain text** — currency guard), and a code block containing `$x$` (**stays literal** inside the code block). **Expected:** the first two render as math (KaTeX); the last two are untouched. First math of the session may show the raw `$…$` for a beat while the KaTeX chunk lazy-loads, then renders.
+
+### O4. Encrypted search cache (P4-8) — opt-in
+
+In an **encrypted** room's message search, enable **"Persist search index on this device"** (Encrypted Rooms panel). Search, then **reload** and search the same term. **Expected:** coverage survives the reload (results without re-paginating everything). **Clear cached index** empties it. **Log out** → the cache is wiped (privacy). Toggling the setting OFF does **not** wipe (only Clear/logout do).
+
+### O5. Session hardening (N97a) — cross-tab
+
+1. Log in on a build that predates the change, then load this build → you stay logged in (legacy keys migrate to the `cinny_session_v1` blob; check DevTools → Application → Local Storage).
+2. Open the app in **two tabs**; **log out** in tab A → tab B reloads to the auth screen within a moment. Log in again in one tab → the other reloads too.
+
+### O6. Audit-wave correctness fixes (AW-1)
+
+- **Scheduled-message cancel:** schedule a message, then cancel it **with the network cut** (DevTools offline) → the item **stays** with an inline error (it does **not** silently disappear and still send). Restore network, retry → cancels cleanly.
+- **Escape coordination:** in a thread panel, open the mention autocomplete or set a reply draft, press **Escape** → it dismisses the autocomplete/reply **without** closing the panel. A bare Escape (nothing to dismiss) still marks the room read / closes the panel as before.
+- **Panel exclusivity:** on mobile, opening a thread while the media gallery (or members drawer) is open shows only **one** right panel (thread wins), not stacked fullscreen overlays.
+- **Emoji board (AW-2):** the **first** time you open the emoji board / autocomplete in a session, the grid **and search** populate with unicode emoji (they don't stay empty). Reactions still show a label.
+
+### O7. Desktop (Tauri) — CSP tighten + native stack (AW-4) — 🖥️ desktop build only
+
+The webview CSP was tightened and the full native module set now compiles. Smoke-test the desktop build:
+
+1. App **boots**, avatars + media thumbnails load, the **VT323** terminal font renders (Lotus Terminal theme), a **location message** embeds its OpenStreetMap map, **calls** connect (EC iframe), **deep links** (`matrix:` / clicking a room link) navigate.
+2. **Native features:** minimize to tray (notifications still arrive), a message notification is a **rich toast** (click opens the room; reply box sends), the taskbar **Jump List** lists recent rooms, in a call the taskbar thumbnail shows **Mute/Deafen/End**, Windows **Focus Assist** silences Lotus.
+3. **Console** (desktop devtools) shows **no CSP violations** during normal use. If something visual/media is blocked, that's the CSP to loosen — note exactly what and where.
+
+### O8. E2EE / call-key cluster (KE-1→4) — 👥 2 people, during a real call
+
+We shipped the diagnostics kit + a **Crypto Diagnostics** card (**Settings → Developer Tools**). During your next call that glitches (audio cutouts, "Unable to decrypt"), open it and **Download report**, and note whether the symptoms even still occur now that we're on **matrix-js-sdk 41.7.0** (crypto-wasm 18.3.1). Send me the report; the KE-1..4 diagnosis + capture guidance is in `LOTUS_TODO.md` (Encryption / E2EE), with the full original runbook in git history.
+
+---
+
+## P. Accessibility (P3-4) — needs a browser + a screen reader
+
+The compliance fixes are gate-verified in code; these confirm the runtime a11y behavior only a human + AT can check. Tools: browser DevTools "axe" extension / Lighthouse a11y, plus **VoiceOver** (macOS ⌘F5) or **NVDA** (Windows).
+
+### P1. Keyboard-only golden path (no mouse)
+
+Tab from page load: **skip-to-content** link appears first (Enter jumps to the timeline). Tab reaches the room list (rooms are focusable, active room announced), open a room (Enter), type a character → focus lands in the composer, send with Enter (or Shift+Enter per your `enterForNewline` setting). No keyboard trap; visible focus ring throughout.
+
+### P2. `?` shortcuts dialog
+
+Press **?** (Shift+/) with focus NOT in a text field → the keyboard-shortcuts dialog opens, is focus-trapped, Escape closes it and focus returns to where you were. Pressing `?` while typing in the composer/search inserts a literal `?` (does NOT open the dialog).
+
+### P3. Screen-reader: reading messages
+
+With VoiceOver/NVDA on, arrow through the timeline: each message is announced as an article with **sender name + time** — critically, this includes **collapsed messages** (consecutive messages from the same person), which previously announced only the body with no sender. Reactions, "edited", replies, and delivery status are announced with labels.
+
+### P4. Screen-reader: live announcements
+
+- **New message** arrives while you're reading → announced (polite).
+- **Someone starts typing** → "X is typing" announced once (not spammed per keystroke).
+- **Editing a message** → the edit box announces "Editing message from X".
+
+### P5. Focus return from dialogs
+
+Open then close (Escape or ×): the **room topic viewer**, a **reaction viewer** (click a reaction count), and **Search** → focus returns to the button/element you opened them from (not lost to `<body>`). Inline popouts (emoji picker, autocomplete, hover menus) intentionally keep focus in context — that's expected, not a bug.
+
+### P6. axe / Lighthouse scan
+
+Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view, Settings, and the login screen. Expect **no critical/serious** "missing accessible name" or "ARIA" violations on the golden path. Report any that appear (note: far-scrolled timeline history being virtualized out is a known, accepted limitation — not a finding).
+
+---
+
 ## Priority if you're short on time
 
-1. **A4** (in-call banner) + **A3** (ringtone) — newest, most logic, hardest to reproduce.
-2. **B1–B3** (polls on a default theme) — the confirmed visual bug.
-3. **D** (EC 0.20.1 control sweep) — guards against the upstream merge breaking calls.
-4. **A7** false-positive check (normal joins don't show the error overlay).
-5. Everything else.
+1. **O1 + O2** (threads + per-thread notifications) — the largest new surface; the main-timeline change is user-visible.
+2. **O7** (desktop CSP smoke) — CI can't catch CSP breakage; a wrong directive silently breaks media/fonts/maps.
+3. **O5** (session cross-tab) + **O6** (scheduled-cancel ghost-send) — auth-critical + a real data-loss-class fix.
+4. **A4** (in-call banner) + **A3** (ringtone) — newest call logic, hardest to reproduce.
+5. **D** (EC control sweep) — guards against the fork breaking calls.
+6. Everything else.
+
+---
+
+## Outstanding verification backlog
+
+**Custom Window Chrome (Beta) fix (2026-07):** on the desktop build, Settings → General → toggle **Custom Window Chrome** — it should reload and come up with the Lotus title bar and a normal, stable feed (no screen-expand / auto-scroll-into-the-past). Toggle back off → reloads to the native frame.
+
+_Ported from the retired `LOTUS_BUGS.md` (2026-07). Compact index of shipped-but-not-live-tested items; the detailed steps are in the lettered sections above._
+
+Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
+
+| ID   | Item                                                                                                                                    | File / area                                                                | Test                                                                                                                                                                                      |
+| :--- | :-------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| #2   | Chat-background animation flicker (`contain:paint`)                                                                                     | `lotus/chatBackground.ts`                                                  | F1                                                                                                                                                                                        |
+| #4   | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live)                                                                 | `CallEmbedProvider.tsx`, `ringtones.ts`                                    | A1,A3,A4                                                                                                                                                                                  |
+| #6   | Background vs. seasonal theme mutual exclusion                                                                                          | `state/settings.ts`, `General.tsx`                                         | F2                                                                                                                                                                                        |
+| #7   | Composer toolbar touch targets (≥44px)                                                                                                  | `room/RoomInput.tsx`                                                       | E1                                                                                                                                                                                        |
+| #8   | Room Settings horizontal overflow (mobile)                                                                                              | `components/page/style.css.ts`                                             | E2                                                                                                                                                                                        |
+| #9   | Modal fullscreen on mobile (`useModalStyle`)                                                                                            | 22+ modal files                                                            | E3                                                                                                                                                                                        |
+| #10  | Composer not hidden by keyboard (`100dvh`)                                                                                              | `src/index.css`                                                            | E4                                                                                                                                                                                        |
+| #12  | PiP "All muted" badge re-fixed (was firing on any single mute)                                                                          | `hooks/useCallSpeakers.ts`                                                 | G1                                                                                                                                                                                        |
+| N96  | Call-recovery overlay single "Back" button                                                                                              | `call/CallView.tsx`                                                        | A7                                                                                                                                                                                        |
+| N95  | AFK-monitor mic released on mute (OS indicator clears)                                                                                  | `hooks/useAfkAutoMute.ts`                                                  | L1                                                                                                                                                                                        |
+| N108 | Maskable PWA icons (Android adaptive)                                                                                                   | `public/manifest.json` + `res/android/maskable-*`                          | L2                                                                                                                                                                                        |
+| EC   | EC iframe load watchdog + self-heal + recovery UI                                                                                       | `plugins/call/CallEmbed.ts`, `CallView.tsx`                                | A7                                                                                                                                                                                        |
+| N105 | Notification clicks work after tab close (SW `notificationclick` + `showNotification`)                                                  | `sw.ts`, `utils/dom.ts`, `ClientNonUIFeatures.tsx`                         | get a msg notif, close the tab, click it → app focuses/opens + routes to the room                                                                                                         |
+| Gal  | MediaGallery lazy-decrypt (true virtualization deferred)                                                                                | `room/MediaGallery.tsx`                                                    | H1                                                                                                                                                                                        |
+| a11y | aria-labels: edit-history / reaction / thread / reply                                                                                   | `message/*` (`FallbackContent`, `Reaction`, `Reply`)                       | I                                                                                                                                                                                         |
+| P3-8 | Thread Panel (side drawer, chips, threaded receipts, thread composer)                                                                   | `features/room/thread/*`, `RoomTimeline/RoomInput`                         | 6-step checklist in LOTUS_TODO §P3-8                                                                                                                                                      |
+| P4-4 | KaTeX math (`$…$`, `$$…$$`, data-mx-maths; lazy chunk)                                                                                  | `utils/mathParse.ts`, `components/math/`                                   | send `$x^2$`, `$$\int f$$`, `$5 and $10` (stays text), math inside code block (stays text)                                                                                                |
+| P4-8 | Encrypted-search cache (opt-in toggle, clear button, logout wipe)                                                                       | `utils/searchCache.ts`, message-search                                     | enable in search panel → search → reload → coverage persists; logout wipes                                                                                                                |
+| N97a | Session blob migration + cross-tab logout sync                                                                                          | `state/sessions.ts`, `useSessionSync`                                      | login on old build → new build migrates; logout in tab A → tab B drops to auth                                                                                                            |
+| P4-1 | Slack-style thread notifications (participating default, All/Mentions/Mute, badge math)                                                 | `utils/threadNotifications.ts`, `ClientNonUIFeatures`, `roomToUnread`      | 6-step checklist in LOTUS_TODO §P4-1                                                                                                                                                      |
+| AW-1 | Scheduled-message cancel no longer ghost-sends (error row on failure)                                                                   | `ScheduledMessagesTray.tsx`                                                | schedule → cancel with network cut → item stays + error; retry works                                                                                                                      |
+| AW-2 | Emoji lazy-load (search/autocomplete/recents fill in; board opens fast)                                                                 | `plugins/emoji.ts` + consumers                                             | first emoji-board open of a session: grid+search populate; reactions still label                                                                                                          |
+| AW-3 | SW precache (repeat-visit near-instant; deploys still picked up immediately)                                                            | `sw.ts`, `vite.config.js`                                                  | load app twice (2nd = cached assets); deploy → reload picks new version                                                                                                                   |
+| AW-4 | Desktop CSP tighten + Escape/panel fixes + thread Jump to Latest                                                                        | `tauri.conf.json`, Room/ThreadPanel                                        | desktop: boots, avatars/media load, VT323 font renders, location maps embed, calls connect, deep links work                                                                               |
+| P3-4 | Accessibility compliance pass (collapsed-msg SR sender, form/overlay labels, typing announce, focus-return, `?` help, jsx-a11y CI gate) | `message/*`, `RoomViewTyping`, `features/shortcuts/*`, `eslint.config.mjs` | LOTUS_TESTING §P — axe-core + VoiceOver/NVDA on the golden path                                                                                                                           |
+| P6-1 | Desktop Linux parity (no-sleep in calls, launcher badge), autostart toggle, tray Do-Not-Disturb                                         | `native/power.rs`, `lib.rs`, `useTauriDnd`, `General.tsx`                  | Linux desktop: no display sleep during a call; tray DND silences notifications; launch-on-login persists; Unity badge (Ubuntu); DND toggle polarity                                       |
+| P6-2 | EC deafen/screenshare-audio-mute via `io.lotus.set_deafen` (retires the `<audio>.muted` iframe hack)                                    | fork `lotusDeafen.ts`, cinny `CallControl.ts`                              | AFTER publish+pin-bump: deafen silences remote audio + survives a reconnect / new screenshare / late joiner (the cases the DOM hack failed); screenshare-audio-mute toggles independently |
+| P6-3 | Forward-to-multiple-rooms (multi-select + partial-failure summary) + live bookmark previews (edits/redactions, snapshot fallback)       | `ForwardMessageDialog.tsx`+`forwardContent.ts`, `BookmarksPanel.tsx`       | forward one msg to 3 rooms (incl. 1 you cannot post to = partial summary); bookmark then edit shows edited; redact shows deleted; leave room shows snapshot                               |
+| P6-4 | HSTS + Permissions-Policy on prod nginx (+ contrib examples)                                                                            | `matrix/cinny/nginx.conf`, `contrib/nginx`, `contrib/caddy`                | after `nginx -s reload`: `curl -sI https://chat.lotusguild.org` shows HSTS + Permissions-Policy; a call (cam/mic/screenshare) + location share still work                                 |
+
+**Verified working in live testing (2026-06):** A2, B1–B4, C1, C3, D (mic/camera/deafen/screenshare/fullscreen/more-menu/PiP). Denoise quality in D is still poor — tracked under the denoise project, not a regression.
+
+---

LOTUS_TODO.md

@@ -35,7 +35,7 @@ Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md).
 
 ## ✅ Done — Awaiting Verification
 
-Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then they graduate to LOTUS_FEATURES.md. (Bug-side fixes awaiting verification live in LOTUS_BUGS.md.)
+Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then they graduate to LOTUS_FEATURES.md. (Open bugs + the verification backlog now live in this file and LOTUS_TESTING.md.)
 
 | Feature                                                                           | Test guide        |
 | :-------------------------------------------------------------------------------- | :---------------- |
@@ -141,7 +141,12 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 
 ## Priority 3 — Higher complexity / lower daily frequency
 
-### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
+### [~] P3-4 · Accessibility Improvements (WCAG 2.1 AA) — COMPLIANCE PASS DONE (2026-07), ⚠️ AWAITING LIVE AXE/SR AUDIT
+
+**Shipped (compliance + shortcuts-help tier):** messages `role="article"` + collapsed-message sender/time announced to AT (the biggest gap — collapsed rows had no sender for a screen reader); ~10 unlabeled form inputs + Media Gallery / Search overlays named; emoji/emoticon aria-labels; typing indicator now announced via a `role="status"` live region; editing a message announces "Editing message from X"; focus now returns to the trigger on close of 4 genuine dialogs (RoomIntro/Reactions/RoomViewHeader-topic/Search — inline popouts correctly left); a `?` keyboard-shortcuts help dialog; and a **jsx-a11y lint gate** (curated ARIA-correctness + label rules, enforced in CI) to prevent regressions. Already-good before this pass: skip link + landmarks, timeline `role="log"`/`aria-live`, ~99% icon-button labels, labeled editor.
+**DEFERRED (documented):** virtualization keeps scrolled-away history out of the a11y tree (architectural; the live-region announces newly-arriving messages) — not re-architected to avoid perf regression; roving-tabindex + command palette + section-jump shortcuts (user-deferred); the live axe-core / VoiceOver+NVDA audit → LOTUS_TESTING §P.
+
+_Original scope (for reference):_
 
 **What:** Comprehensive audit and fix pass targeting the critical user paths:
 
@@ -167,13 +172,14 @@ Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 Built per the design below (4-agent build + 2-agent review). Gates green (tsc/eslint/build/tests). **Release note: threaded replies no longer render inline in the main timeline — roots show a "N replies" chip that opens the panel.**
 
 **Manual QA checklist (post-deploy):**
+
 1. Reply in Thread (message menu) → panel opens; send text/upload/emoji into it (appears pending → confirmed)
 2. Reply to a reply inside the panel → event carries `m.thread` + `m.in_reply_to` with `is_falling_back:false`
 3. Main timeline: root + chip only (replies absent); chip count/time updates live; unread badge appears for others' thread replies and clears after viewing the panel
 4. Room badge clears via normal markAsRead even with unread threads (unthreaded receipt)
 5. Reload: partitioning persists; encrypted-room threads decrypt (back-pagination too)
 6. Escape / × closes; mobile = fullscreen panel; switching rooms and back restores the open thread  
-**What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
+   **What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
 
 Features:
 
@@ -209,23 +215,23 @@ Features:
 **What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.  
 **Status:** Done in a prior session — `MessageSearch.tsx` already uses `useVirtualizer` (~line 336) over the result groups AND auto-fetches the `nextToken` page when the last virtual item scrolls into view (~line 469) via `useInfiniteQuery`. Nothing left to build.
 
-### [ ] P4-8 · Encrypted Message Search Indexing & Caching
+### [~] P4-8 · Encrypted Message Search Indexing & Caching — IMPLEMENTED (2026-07), opt-in
 
-**What:** Implement a persistent local cache for search results, optimized for encrypted rooms.  
-**Approach:** Use `IndexedDB` to store search metadata (event IDs, timestamps) to prevent redundant server-side decryption/fetching.
+**Shipped:** `src/app/utils/searchCache.ts` — raw-IndexedDB per-room index (`lotus-search-cache`) of decrypted search rows + coverage markers, merged into local search (in-memory-wins dedupe). **Opt-in, default OFF** (stores plaintext at rest) with a privacy note, Clear button, and logout wipe. Awaiting live QA (LOTUS_TESTING outstanding-verification backlog).
 
 ### [~] P4-1 · Thread Notification Mode Per-Thread — IMPLEMENTED (2026-07), ⚠️ AWAITING LIVE QA
 
 **Shipped (Slack-style):** default = **Participating** (notified only for threads you've posted in or where you're @mentioned); per-thread override **All / Mentions-only / Mute** via the bell menu in the thread panel header; modes sync across devices (`io.lotus.thread_notifications` account data, pruned on write). Mute also suppresses the chip badge and subtracts the thread from the room's sidebar badge (client-side). Also fixed the underlying path: thread replies are notified via exactly one handler (room-level `ThreadEvent.NewReply`), with the main-timeline notifier + unread binder thread-guarded, and live badge refresh on `RoomEvent.UnreadNotifications`.
 
 **Manual QA checklist (post-deploy):**
+
 1. Friend replies in a thread YOU posted in → notification + sound; in a thread you never touched → silent (chip badge only)
 2. @mention in any thread → notified regardless of participation
 3. Set a thread to Mute → no notifications, chip badge gone (bell-mute glyph), room sidebar badge drops by that thread's count
 4. Set to All → every reply notifies; Mentions-only → only @mentions
 5. Second device shows the same per-thread modes (account-data sync)
 6. Room-level Mute still silences everything incl. thread overrides
-**Known caveats:** Mentions-only can under-notify in E2EE rooms (decision runs pre-decryption — same class as the existing notifier); muted-thread badge subtraction is Lotus-only (other clients still count them).
+   **Known caveats:** Mentions-only can under-notify in E2EE rooms (decision runs pre-decryption — same class as the existing notifier); muted-thread badge subtraction is Lotus-only (other clients still count them).
 
 ---
 
@@ -310,7 +316,7 @@ Features:
 
 **What:** High-end background noise cancellation using a pre-trained ML model (RNNoise) running in the browser. Removes dogs, fans, and keyboard clicks from the mic stream.  
 **Shipped:** 3-tier setting (Off / Browser-native / ML) in Settings → General → Calls.  
-**🔱 [EC-FORK] DONE — moved in-source (2026-06).** ML denoise is now a first-class audio stage **inside** the forked Element Call: a LiveKit `TrackProcessor<Audio>` activated by `lotusDenoiseSource=1` (cinny sets it when ML is selected). The old build-time `getUserMedia`/`index.html` monkeypatch is **removed**. Because EC re-runs the processor on every (re)publish, denoise now **survives reconnects and mic-device switches** — this is the A7 fix (see `LOTUS_BUGS.md` A7, `LOTUS_TESTING.md` §D2-1). The processor degrades to the raw mic rather than going silent.  
+**🔱 [EC-FORK] DONE — moved in-source (2026-06).** ML denoise is now a first-class audio stage **inside** the forked Element Call: a LiveKit `TrackProcessor<Audio>` activated by `lotusDenoiseSource=1` (cinny sets it when ML is selected). The old build-time `getUserMedia`/`index.html` monkeypatch is **removed**. Because EC re-runs the processor on every (re)publish, denoise now **survives reconnects and mic-device switches** — this is the A7 fix (see `LOTUS_TESTING.md` §D2-1). The processor degrades to the raw mic rather than going silent.  
 **Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. Owning the fork let us implement the in-source stage directly.
 
 **Models — all in-source in the fork:**
@@ -418,10 +424,11 @@ Features:
 **Decision:** Deferred (reviewed 2026-07). Multi-sprint, and it touches the auth/crypto/storage core — not worth the risk/effort for a niche need right now. Kept here with a concrete spec so it's actionable later.
 
 **Future-work spec (why it's big):** the app is currently **single-session**.
+
 - Session lives in `src/app/state/sessions.ts` under fixed localStorage keys — `cinny_access_token`, `cinny_device_id`, `cinny_user_id`, `cinny_hs_base_url`, plus the OIDC keys (`cinny_refresh_token`, `cinny_expires_at`, `cinny_oidc_*`).
 - Persistence lives in `src/client/initMatrix.ts`: two fixed IndexedDB stores — `web-sync-store` (`IndexedDBStore`) and `crypto-store` (`IndexedDBCryptoStore`) — feeding one `createClient(...)`.
 
-True per-context isolation would require: (1) namespace every localStorage key per context (`ctx:<id>:cinny_*`); (2) per-context IndexedDB dbNames for **both** the sync store and the crypto store; (3) a context registry + switcher UI (create/rename/delete/switch); (4) full client teardown + re-init on switch (`initMatrix` currently assumes one global client); (5) per-context settings + notification/quiet-hours state; (6) careful crypto-store isolation so device keys never bleed across contexts. **Smaller intermediate step** if demand appears: plain multi-account (fast account switch) *without* the hard isolation boundary — much less risky, reuses most of the login flow.  
+True per-context isolation would require: (1) namespace every localStorage key per context (`ctx:<id>:cinny_*`); (2) per-context IndexedDB dbNames for **both** the sync store and the crypto store; (3) a context registry + switcher UI (create/rename/delete/switch); (4) full client teardown + re-init on switch (`initMatrix` currently assumes one global client); (5) per-context settings + notification/quiet-hours state; (6) careful crypto-store isolation so device keys never bleed across contexts. **Smaller intermediate step** if demand appears: plain multi-account (fast account switch) _without_ the hard isolation boundary — much less risky, reuses most of the login flow.  
 **Priority:** Extreme Low (Multi-sprint/Architectural).
 
 ### [DROPPED] P5-52 · Desktop — Room-Level Sync Governor (Performance Control)
@@ -502,6 +509,66 @@ Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `
 
 ---
 
+## Priority 6 — Post-audit batches (2026-07)
+
+Buildable follow-ups surfaced by the deep-audit wave. Web Push (N107) deliberately deferred. **macOS is out of scope for all of these — Linux is the parity target (Windows already has most native features).**
+
+### [~] P6-1 · Desktop — cross-platform parity (Linux + Windows; NO macOS) — IMPLEMENTED (2026-07); native CI-compile-pending, runtime-verify on Linux
+
+From the desktop audit. Round out the native app now that the full Rust stack compiles:
+
+- **No-sleep during calls on Linux** — `power.rs` is Windows-only (`SetThreadExecutionState`); add a Linux inhibitor (`org.freedesktop.login1.Manager.Inhibit` / ScreenSaver inhibit via zbus/D-Bus) so the display/system doesn't sleep mid-call.
+- **Taskbar/launcher unread badge on Linux** — `set_badge_count` is Windows-only; add Unity/`com.canonical.Unity.LauncherEntry` (D-Bus) count where supported.
+- **Launch-on-login** — add `tauri-plugin-autostart` (cross-platform) + a Settings/tray toggle.
+- **Tray "Do Not Disturb" toggle** — the tray menu is Open/Quit only; add a DND item (reuses the Focus-Assist suppression atom path) so users can silence notifications from the tray.
+  CI-compile-verified (Windows + Linux runners); no local Rust.
+
+### [~] P6-2 · Element Call fork — retire the remaining DOM hacks — DEAFEN DONE (2026-07), Phase-2 pending publish
+
+**Shipped (Phase 1):** new `io.lotus.set_deafen` action in the fork (`lotusDeafen.ts`) sets remote `RemoteParticipant.setVolume` per source (mic + screenshare-audio), persisting to late joiners — replaces the brittle `CallControl.setSound`/`applyScreenshareAudioMuted` `<audio>.muted` iframe-DOM hack. cinny now sends it (join-gated) alongside the retained DOM hack (transitional). Folded into unpublished fork `0.20.1-lotus.2`.
+**Phase 2 (needs user publish):** publish `0.20.1-lotus.2` to npm → bump cinny pin `lotus.1`→`lotus.2` → delete the DOM `.muted` code. See HANDOFF §12.4.
+**DEFERRED (rationale):** the `useCallSpeakers` DOM-scrape is a dormant _fallback_ behind `io.lotus.call_state` (deleting only removes the safety net); the `.click()`-by-`data-testid` UI toggles (screenshare/grid/spotlight/reactions/settings) are low-value and would balloon fork surface for buttons that just trigger EC's own UI.
+**Divergence:** deafen doesn\'t silence soundboard/`Unknown`-source audio (setVolume type limit) — confirm UX.
+
+_Original scope below._
+
+### [ ] P6-2b · Element Call fork — remaining DOM hacks (deferred pieces)
+
+Replace cinny's fragile iframe-`contentDocument` reaches with proper `io.lotus.*` widget actions in the fork (`LotusGuild/element-call`), which break on EC re-renders/version bumps:
+
+- **Deafen / screenshare-audio-mute** → an `io.lotus` action that mutes/attenuates `RemoteAudioTrack`s at the LiveKit source (replaces `CallControl.ts` `setSound`/`applyScreenshareAudioMuted` DOM `.muted` poking).
+- **UI-toggle actions** (screenshare/spotlight/reactions/settings) → replace the `.click()`-by-`data-testid` calls.
+- Retire the `useCallSpeakers` DOM-scrape fallback once `io.lotus.call_state` is verified.
+  Fork commits are local (coordinator); publishing needs the user's npm token.
+
+### [~] P6-3 · Web UX wins - DONE (2026-07): forward multi-select + live bookmark previews
+
+**Shipped:** Forward Message multi-select (checkbox rooms + "Send to N", batch `Promise.allSettled` with partial-failure summary; content builder extracted to tested `forwardContent.ts`). Live bookmark previews (`BookmarksPanel` renders the live event via `useRoomEvent` - edits + redactions - snapshot as fallback / left-room). Both `lotus`, gate-green (665 tests).
+
+_Original scope:_
+
+### [ ] P6-3-orig · Web UX wins (from the audit ADD list)
+
+- **Forward to multiple rooms** — multi-select (checkbox + "Send to N") in `ForwardMessageDialog` (currently one room per open, capped at 60).
+- **Live bookmark previews** — `BookmarksPanel` shows a stale snapshot captured at save time; resolve live from the event when cached (edits/redactions), fall back to the snapshot.
+- Other small paper-cuts as scoped.
+
+### [~] P6-4 · Hygiene sweep - TRIMMED (2026-07): security headers only
+
+**Shipped:** HSTS + Permissions-Policy on the real prod nginx (`matrix/cinny/nginx.conf`, already had X-Frame/CSP/Referrer) + synced the `contrib/nginx` + `contrib/caddy` examples (also fixed the caddy `try_files` SPA fallback). Permissions-Policy allows `self` for the features the app uses (camera/mic/display-capture/geolocation/autoplay/fullscreen), denies unused. **User must `nginx -s reload` on the LXC + verify calls/location still work.**
+**WON'T-DO (rationale):** patch-package migration - the current `patch-folds.mjs` is already robust (fails hard on drift) and patch-package would be more brittle to folds restructuring; `types/matrix` drift - risky spot-fixes with no concrete bug; build-config streamlining - build is already ~5s. Known follow-up: nginx `add_header` isn't inherited by the cache `location` blocks (pre-existing; the SPA entry `/` still gets all headers, so HSTS is delivered).
+
+_Original scope:_
+
+### [ ] P6-4-orig · Hygiene sweep
+
+- `patch-folds.mjs` (edits `node_modules` directly) → `patch-package`.
+- `contrib/nginx` + `contrib/caddy`: security headers (HSTS/CSP), `try_files` over rewrites, fix the caddy placeholder path.
+- `types/matrix/` drift (mirrors SDK types) — spot-fix the highest-risk.
+- Build-config: streamline `lotusDenoise` sequential `fs` work + redundant `viteStaticCopy` renames.
+
+---
+
 ## 📚 Implementation Reference
 
 Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
@@ -510,20 +577,22 @@ Exhaustive, low-level implementation details for backlog items. Follow these pat
 
 **Decisions (each backed by SDK evidence in node_modules/matrix-js-sdk):**
 
-| Question | Decision |
-|---|---|
-| Thread rendering | **New lean `ThreadTimeline`** reusing `Message`, `useVirtualPaginator`, and RoomTimeline's exported timeline helpers (lines 156-227). Do NOT refactor 2214-line RoomTimeline (its ~35 hooks are hardwired to the room live timeline). |
-| threadSupport | **Enable `threadSupport: true`** in `initMatrix.ts` (~line 39). ⚠️ Thread replies then LEAVE the main timeline (`room.js eventShouldLiveIn` → `shouldLiveInRoom:false`), retroactively on reload — MUST ship the "N replies" summary chip in the same release. Roots stay in both timelines. |
-| State | `roomIdToActiveThreadIdAtomFamily` (per-room, mirrors `roomIdToReplyDraftAtomFamily`) in new `state/room/thread.ts` + `getThreadDraftKey(roomId, threadRootId)` = `` `${roomId}::${threadRootId}` `` |
-| Composer | **Reuse RoomInput**: add optional `threadRootId` prop; scope its 3 atom-family lookups by draftKey (isolates thread drafts from the main composer); pass `threadRootId ?? null` at all 7 `mx.sendMessage/sendEvent` call sites — the SDK's `addThreadRelationIfNeeded` then emits spec-correct `m.thread` relations incl. reply-in-thread. Separate `useEditor()` instance in the panel. Hide schedule + commands in thread mode v1. |
-| Unreads | v1 = unread badge on the summary chip (`room.getThreadUnreadNotificationCount` — counts already synced independent of threadSupport) + `markThreadAsRead` threaded receipt when panel open at bottom. |
-| Mobile | Pure CSS like `MembersDrawer.css.ts`: fixed width toRem(360) desktop, `position:fixed; inset:0` under 750px. |
+| Question         | Decision                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Thread rendering | **New lean `ThreadTimeline`** reusing `Message`, `useVirtualPaginator`, and RoomTimeline's exported timeline helpers (lines 156-227). Do NOT refactor 2214-line RoomTimeline (its ~35 hooks are hardwired to the room live timeline).                                                                                                                                                                                                |
+| threadSupport    | **Enable `threadSupport: true`** in `initMatrix.ts` (~line 39). ⚠️ Thread replies then LEAVE the main timeline (`room.js eventShouldLiveIn` → `shouldLiveInRoom:false`), retroactively on reload — MUST ship the "N replies" summary chip in the same release. Roots stay in both timelines.                                                                                                                                         |
+| State            | `roomIdToActiveThreadIdAtomFamily` (per-room, mirrors `roomIdToReplyDraftAtomFamily`) in new `state/room/thread.ts` + `getThreadDraftKey(roomId, threadRootId)` = `` `${roomId}::${threadRootId}` ``                                                                                                                                                                                                                                 |
+| Composer         | **Reuse RoomInput**: add optional `threadRootId` prop; scope its 3 atom-family lookups by draftKey (isolates thread drafts from the main composer); pass `threadRootId ?? null` at all 7 `mx.sendMessage/sendEvent` call sites — the SDK's `addThreadRelationIfNeeded` then emits spec-correct `m.thread` relations incl. reply-in-thread. Separate `useEditor()` instance in the panel. Hide schedule + commands in thread mode v1. |
+| Unreads          | v1 = unread badge on the summary chip (`room.getThreadUnreadNotificationCount` — counts already synced independent of threadSupport) + `markThreadAsRead` threaded receipt when panel open at bottom.                                                                                                                                                                                                                                |
+| Mobile           | Pure CSS like `MembersDrawer.css.ts`: fixed width toRem(360) desktop, `position:fixed; inset:0` under 750px.                                                                                                                                                                                                                                                                                                                         |
 
 **Critical side-effect fixes (one-liners, land FIRST):**
+
 1. `initMatrix.ts` → `threadSupport: true`.
 2. `utils/notifications.ts:24` → `sendReadReceipt(latestEvent, type, /*unthreaded*/ true)` — otherwise markAsRead becomes `main`-scoped and room badges stick permanently unread (room unread total includes thread counts).
 
 **Known SDK traps (verified):**
+
 - **Local echo gap:** chronological pending ordering means the thread timelineSet never receives pending events (`canContain` rejects; `room.getPendingEvents()` THROWS in this mode) — ThreadTimeline must render its own pending strip via `RoomEvent.LocalEchoUpdated` filtering on `threadRootId`, deduped against `thread.findEventById`.
 - **Bootstrap:** `room.getThread(id) ?? room.createThread(id, room.findEventById(id), [], false)` — the SDK auto-fetches via `/relations` and inserts the root at top; gate rendering on `thread.initialEventsFetched`; decrypt with `decryptAllTimelineEvent` after init + each pagination.
 - **Deep links:** `getEventTimeline(mainSet, threadEventId)` returns undefined for thread events — redirect jump-to-event to the panel (best-effort v1).
@@ -757,3 +826,136 @@ edit → commit → git push origin lotus
 - **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
 - **Config:** `/etc/matrix-synapse/homeserver.yaml`
 - **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`
+
+---
+
+## Element Call fork — operational reference
+
+_Ported from the retired `HANDOFF_ELEMENT_CALL_FORK.md` (2026-07; full history in git). The fork lives at `LotusGuild/element-call` (branch `lotus`, forked from upstream tag `v0.20.1`); cinny consumes it as the npm package `@lotusguild/element-call-embedded`, whose built bundle is copied into `public/element-call/`._
+
+**Publish a new fork version (manual; needs the Gitea npm token):**
+
+1. In the fork, bump `embedded/web/package.json` version (current unpublished: `0.20.1-lotus.2`).
+2. Build: `pnpm run build:embedded` (Node 24, pnpm 10.33.0; output → repo `dist/`, staged into `embedded/web/dist`).
+3. `cd embedded/web && npm version <tag> --no-git-tag-version && npm publish` to the Gitea registry (`code.lotusguild.org`). Publicly readable; only publishing needs the token.
+4. In cinny: bump the `@lotusguild/element-call-embedded` pin (`package.json`, currently `0.20.1-lotus.1`) → the new version, `npm install`, build.
+
+**`io.lotus.*` widget actions (fork ↔ cinny host):**
+| Action | Direction | Purpose | Fork module |
+| :-- | :-- | :-- | :-- |
+| `io.lotus.call_state` | EC→host | speaker/mute/camera state stream (URL `lotusCallState=1`) | `lotusCallState.ts` |
+| `io.lotus.focus_participant` | host→EC | spotlight a participant (works during screenshare) | `lotusFocus.ts` |
+| `io.lotus.inject_audio` | host→EC | soundboard clip mixed into the call (URL `lotusAudioInject=1`) | `lotusAudioInject.ts` |
+| `io.lotus.set_quality` | host→EC | audio/screenshare bitrate/fps caps | `lotusQuality.ts` |
+| `io.lotus.decorations` | host→EC | in-call avatar decorations | `lotusDecorations.ts` |
+| `io.lotus.set_deafen` | host→EC | deafen / screenshare-audio-mute at the LiveKit source (P6-2) | `lotusDeafen.ts` |
+
+Also flag-gated (URL params): `lotusTransparent`/`lotusTheme` (theme), `lotusDenoiseSource=1` (in-source ML denoise). New toWidget actions must be added to the enum + `LOTUS_TO_WIDGET_ACTIONS` in `src/lotus/lotusActions.ts` and only SENT after call-join (else a 10s timeout). **P6-2 phase 2 pending:** after publishing lotus.2, bump the cinny pin + delete the `CallControl.ts` `<audio>.muted` fallback.
+
+---
+
+## 🔴 Open — Actionable
+
+### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED · 👤 SENIOR ENGINEER
+
+> 🧰 **Investigation kit ready (2026-07):** `LOTUS_E2EE_INVESTIGATION.md` (git history)
+> has the per-KE capture runbook (console signatures, synapse-side queries, the
+> KE-1→KE-2 causality decision tree, ranked remediations), and the client now
+> ships a **Crypto Diagnostics** capture helper (Settings) — run it during the
+> next affected call and download the report before starting any fix.
+
+> **Observed live in prod 2026-06-30** on `chat.lotusguild.org` during a 2-person
+> **Element Call** (E2EE enabled). These span **client rust-crypto (via
+> `matrix-js-sdk@41.6.0-rc.0`) ↔ Synapse ↔ Element Call's MatrixRTC E2EE** and are
+> very likely **interrelated** (see KE-1 → KE-2). Do **not** spot-fix — they need
+> a dedicated cross-system planning session with the homeserver owner. Capture
+> full client console + a synapse-side trace for the same call before starting.
+> **None of these are caused by the EC fork work** (the issues reproduce on the
+> old build; the local mic/denoise path is unrelated to key distribution).
+
+- **KE-1 — One-time-key (OTK) upload conflict storm (CRITICAL, root-cause candidate).**
+  `POST /_matrix/client/v3/keys/upload` returns `400 M_UNKNOWN: One time key
+signed_curve25519:AAAAAAAAAGQ already exists. Old key: {…} new key: {…}` —
+  firing **continuously** (many/sec). The client repeatedly tries to publish an
+  OTK at a key id the server already holds **with a different value**, i.e. the
+  rust-crypto key store and Synapse have **diverged OTK state**. Impact: floods
+  the crypto outgoing-request loop and is the prime suspect for the downstream
+  missing-key failures (no fresh OTKs ⇒ no new Olm sessions ⇒ undecryptable
+  to-device key events). _Investigate:_ device/key-store reset-or-restore
+  mismatch, OTK id-counter desync, RC-SDK (`41.6.0-rc.0`) regression, or a
+  Synapse OTK bug. Repro signature: grep console for `already exists`.
+  **Extreme — planning session.**
+  **Update 2026-07 (investigation §6):** upstream `matrix-rust-sdk#5200` (still
+  OPEN) confirms the mechanism — on the 400, `mark_request_as_sent()` never fires
+  so the SDK re-issues the identical upload forever. **`41.7.0` does NOT fix it**
+  (crypto-wasm 17→18.3.1 has no OTK/upload change; 18.3.x was to-device security
+  only) — the SDK-pin lever is closed. Root cause = **store↔server OTK
+  divergence**; the leading **web-specific** trigger is that cinny never calls
+  **`navigator.storage.persist()`**, so the IndexedDB crypto store is evictable
+  while the `localStorage` session/device-id survives → device resurrects with a
+  blank store → re-uploads OTKs the server still holds. **Actionable preventive
+  fix (buildable now, no call needed):** request persistent storage on login
+  (+ optional multi-tab guard + 400-loop→recovery-prompt). Healing an already-
+  diverged device still needs a clean **logout+login** (not just "clear
+  storage"). Full runbook (synapse SQL, capture checklist, §6 diagnosis) is in git history at `LOTUS_E2EE_INVESTIGATION.md` (removed 2026-07).
+
+- **KE-2 — Element Call media keys not arriving/decrypting → audio & video cut out (CRITICAL).**
+  `MissingKey: missing key at index N for participant @user`, `skipping decryption
+due to missing key`, `MissingKey: key set not found for @user at index 0`, and
+  rust-crypto `WARN … Received an unexpected encrypted to-device event …
+event_type="io.element.call.encryption_keys"`. EC distributes per-participant
+  media keys as **encrypted to-device `io.element.call.encryption_keys`** events;
+  these aren't being received/decrypted in order, so remote LiveKit audio/video
+  can't be decrypted — **this is the "friend's audio cuts out occasionally"
+  symptom.** Almost certainly downstream of **KE-1** (broken Olm sessions). Spans
+  EC's MatrixRTC E2EE + rust-crypto to-device + Synapse. **Extreme — planning
+  session.**
+
+- **KE-3 — Timeline decryption error: missing `algorithm` field (HIGH).**
+  `Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg:
+missing field 'algorithm' at line 1 column 138 …]`. A malformed/legacy
+  encrypted event (or a serialization mismatch in the RC SDK) that rust-crypto
+  can't parse. Lower frequency than KE-1/2 but a distinct decode-path failure —
+  capture the offending event id (`$SASBBzoqj…` seen) and inspect its raw content.
+
+- **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH, reliability).**
+  `[MembershipManager] Network local timeout error while sending event, immediate
+retry … AbortError: Restart delayed event timed out before the HS responded`,
+  with repeated `org.matrix.msc4157.update_delayed_event`. MSC4140/4157
+  delayed-event reliability against `matrix.lotusguild.org` — can cause stale/ghost
+  call membership and missed leave events. May be partly **homeserver
+  responsiveness**; correlate with synapse latency/load. Include in the same
+  planning session since it shares the call-reliability + HS-interaction surface.
+
+### Security & Privacy
+
+- **N97 — Access token stored in plaintext `localStorage`** (`state/sessions.ts`), vulnerable to XSS; device ID likewise. Architectural — needs a token-protection / session-storage redesign.
+- ~~**Session writes are non-atomic and not cross-tab synced**~~ — **done (2026-07):** atomic single-key `cinny_session_v1` blob (legacy-key migration + dual-write) + `subscribeSessionChanges`/`useSessionSync` cross-tab reload. (The plaintext-token concern in N97 above is the remaining, separate architectural item.)
+- **Persisted PII without encryption:** user status message + expiry (`settings/account/Profile.tsx`), unsent composer drafts (`room/RoomInput.tsx`). Leak risk on shared devices.
+
+### PWA / Offline / Notifications
+
+- **N107 — SW has no `push` handler** — Web Push delivery is entirely non-functional. Needs a `push` listener + a Matrix push-gateway integration.
+- **No app-asset caching strategy** (`src/sw.ts`) — no offline capability.
+- ~~**`manifest: false`** may block PWA install~~ — **verified OK (2026-06):** `index.html` links `/manifest.json`, which exists in `public/` and is copied to `dist/`; VitePWA intentionally doesn't generate one. Not a bug.
+
+### Dependencies & Build
+
+- ~~**`matrix-js-sdk` pinned to a Release Candidate**~~ — **done (2026-07):** moved to `41.7.0` stable (crypto-wasm 18.3.1 security bump). Deep-audit dep triage: all 16 npm advisories are dev-only/unreachable/dead-dep — zero shipped exposure; dead `dompurify` removed. `@atlaskit`/build-tool pins remain review-worthy but low priority.
+- **Build-time overhead:** `lotusDenoise` does heavy sequential `fs` work in `closeBundle`; `viteStaticCopy` config is complex with redundant renames — could be streamlined.
+
+### Code Hygiene / DevEx
+
+- **Automated test suite — 561+ tests across 65+ modules, a hard CI gate.** `npm test` runs Node's built-in runner via `tsx` (not vitest — Vite 8 is ahead of vitest's range) and **blocks the build job on failure**. Broad pure-logic coverage: utils (common, regex, sanitize/XSS, time, matrix, matrix-uia, mimeTypes, sort, accentColor, findAndReplace, AsyncSearch, ASCIILexicalTable, keyboard, room, matrix-crypto, featureCheck, syntaxHighlight, imageCompression, user-agent, callSounds), state (settings, sessions, recentSearches, upload, typingMembers, lists, room-list, toast, scheduledMessages, backupRestore, callEmbed/callPreferences, spaceRooms, …), plugins (matrix-to, call/utils, via-servers, bad-words, recent-emoji, custom-emoji, markdown block/inline/utils), OIDC (cs-api, useParsedLoginFlows, oidcState), lotus/avatarDecorations, message-search, search filters. Prevention work has caught + fixed **4 real bugs** (`findAndReplace` infinite-loop; `getSettings` crash-on-load when storage is blocked; `isMacOS` never matching modern Macs; `isMLDenoiseSupported` throwing `ReferenceError` instead of returning false on browsers lacking the `AudioWorkletNode` binding). **Next:** component/integration tests (the untestable-under-tsx DOM/React surface).
+- **Extensive `as any` casts** across `src/` — gradual typing cleanup.
+- **`types/matrix/` mirrors SDK types** instead of importing them — drift risk.
+- ~~**Hardcoded CDN URL** should move to an env var~~ — **done:** `avatarDecorations.ts` already honors a `VITE_DECORATION_CDN` env override (lines 14-16); the in-repo literal is only the default. Nothing left.
+- **`patch-folds.mjs` edits `node_modules` directly** — consider `patch-package`.
+- **Infra docs:** `contrib/nginx` lacks security headers (HSTS/CSP) + uses rewrites over `try_files`; `contrib/caddy` has a placeholder path. CI/CD (`prod-deploy.yml`): sequential deploy, aggressive 1-min Netlify timeout, `package-manager-cache: false`.
+- **README:** keep the fork-sync version + logo path current. (`CONTRIBUTING.md` is intentionally left as upstream Cinny's — not a Lotus concern.)
+- **Architecture notes (low priority):** deep `features/` + `hooks/` nesting, many small coupled hooks, possible dead CSS/components, `SpacingVariant` / `DropTarget` recipe simplification.
+- **Git workflow (forward-looking):** keep commits scoped — past monolithic "fix all bugs" commits and inconsistent prefixes hurt `git bisect`.
+
+### Big Projects
+
+- ~~**#5 — Seasonal themes & chat-background redesign.**~~ **DONE (2026-06/07):** 11 seasonal/holiday overlays shipped and later toned down + given a settings preview grid; all 19 chat backgrounds redesigned (Carbon + Aurora kept per user preference), one design sprint each, GPU-friendly CSS with `prefers-reduced-motion` + pause toggle. Remaining polish rides normal bug flow, not a "big project."

README.md

@@ -180,10 +180,10 @@ avatar decorations on EC video tiles, and a native transparent background.
 (`io.lotus.inject_audio` → in-call soundboard) and quality controls
 (`io.lotus.set_quality`).
 
-The full plan and integration map is in
-**[`HANDOFF_ELEMENT_CALL_FORK.md`](HANDOFF_ELEMENT_CALL_FORK.md)**; infra/hosting +
-build-pipeline notes live in the `LotusGuild/matrix` repo README. Search the docs
-for the **`[EC-FORK]`** tag to find every related note.
+The fork's `io.lotus.*` action catalog + the publish procedure are in
+**[`LOTUS_TODO.md`](LOTUS_TODO.md)** ("Element Call fork — operational reference");
+infra/hosting + build-pipeline notes live in the `LotusGuild/matrix` repo README.
+Search the docs for the **`[EC-FORK]`** tag to find every related note.
 
 ### Build
 

contrib/caddy/caddyfile

@@ -1,6 +1,17 @@
 # more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
 cinny.domain.tld {
   root * /path/to/cinny/dist
-  try_files {path} / index.html
+  try_files {path} /index.html
   file_server
+
+  # Security headers (generic; add a Content-Security-Policy suited to your
+  # homeserver + any embedded services). Caddy serves HTTPS automatically, so
+  # HSTS is delivered over TLS.
+  header {
+    X-Frame-Options SAMEORIGIN
+    X-Content-Type-Options nosniff
+    Referrer-Policy strict-origin-when-cross-origin
+    Strict-Transport-Security "max-age=63072000; includeSubDomains"
+    Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()"
+  }
 }

contrib/nginx/cinny.domain.tld.conf

@@ -17,6 +17,15 @@ server {
     listen [::]:443 ssl;
     server_name cinny.domain.tld;
 
+    # Security headers (generic; add a Content-Security-Policy suited to your
+    # homeserver + any embedded services). NOTE: nginx does not inherit
+    # server-level add_header into a location that sets its own add_header.
+    add_header X-Frame-Options SAMEORIGIN always;
+    add_header X-Content-Type-Options nosniff always;
+    add_header Referrer-Policy strict-origin-when-cross-origin always;
+    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
+    add_header Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()" always;
+
     location / {
         root /opt/cinny/dist/;
 

dev/oidc-test/synapse-msc3861.yaml

@@ -5,11 +5,11 @@ experimental_features:
   msc3861:
     enabled: true
     issuer: http://localhost:8090/
-    client_id: "0000000000000000000SYNAPSE"
+    client_id: '0000000000000000000SYNAPSE'
     client_auth_method: client_secret_basic
-    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"
-    admin_token: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"
-    account_management_url: "http://localhost:8090/account"
+    client_secret: 'REPLACE_WITH_A_SHARED_CLIENT_SECRET'
+    admin_token: 'REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN'
+    account_management_url: 'http://localhost:8090/account'
 
 # With msc3861 enabled, Synapse disables its own password/SSO login and advertises
 # `m.authentication` in /.well-known/matrix/client — which is exactly what the

eslint.config.mjs

@@ -25,7 +25,7 @@ export default [
   tsPlugin.configs['flat/eslint-recommended'],
   ...tsPlugin.configs['flat/recommended'],
   reactPlugin.configs.flat.recommended,
-  reactHooksPlugin.configs.flat['recommended'],
+  reactHooksPlugin.configs.flat.recommended,
   // Register jsx-a11y plugin (rules selectively enabled below)
   { plugins: { 'jsx-a11y': jsxA11yPlugin } },
   // airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
@@ -115,6 +115,26 @@ export default [
       'jsx-a11y/media-has-caption': 'off',
       'jsx-a11y/no-noninteractive-element-interactions': 'off',
       'jsx-a11y/alt-text': 'off',
+      // A11y regression gate (P3-4). A CURATED set — correctness rules that catch
+      // real WCAG gaps (missing accessible names, malformed ARIA) without
+      // flooding on the pre-existing clickable-div patterns. The heavier
+      // interaction rules (no-static-element-interactions,
+      // click-events-have-key-events) are a separate cleanup and stay OFF.
+      'jsx-a11y/aria-props': 'error',
+      'jsx-a11y/aria-proptypes': 'error',
+      'jsx-a11y/aria-role': ['error', { ignoreNonDOM: true }],
+      'jsx-a11y/aria-unsupported-elements': 'error',
+      'jsx-a11y/role-has-required-aria-props': 'error',
+      'jsx-a11y/role-supports-aria-props': 'error',
+      'jsx-a11y/no-redundant-roles': 'error',
+      'jsx-a11y/anchor-has-content': 'error',
+      'jsx-a11y/heading-has-content': 'error',
+      'jsx-a11y/label-has-associated-control': ['error', { assert: 'either', depth: 5 }],
+      // NOT enabled: control-has-associated-label. This repo labels most inputs
+      // with folds `<Text as="label" htmlFor>` — a component the rule's static
+      // analysis can't see as a <label>, producing false positives on correctly
+      // labeled controls. The genuinely-unlabeled controls it surfaced (sliders,
+      // file input, media players, notes) were fixed directly with aria-label.
     },
   },
   {
@@ -123,4 +143,11 @@ export default [
       'no-undef': 'off',
     },
   },
+  {
+    // Test files commonly define several small mock/fake classes.
+    files: ['**/*.test.ts', '**/*.test.tsx'],
+    rules: {
+      'max-classes-per-file': 'off',
+    },
+  },
 ];

package-lock.json

@@ -24,7 +24,6 @@
         "@tanstack/react-query": "5.100.13",
         "@tanstack/react-query-devtools": "5.100.13",
         "@tanstack/react-virtual": "3.13.25",
-        "@types/dompurify": "3.2.0",
         "@workadventure/noise-suppression": "0.0.4",
         "await-to-js": "3.0.0",
         "badwords-list": "2.0.1-4",
@@ -36,7 +35,6 @@
         "dayjs": "1.11.20",
         "deepfilternet3-noise-filter": "1.2.1",
         "domhandler": "6.0.1",
-        "dompurify": "3.4.5",
         "emojibase": "17.0.0",
         "emojibase-data": "17.0.0",
         "file-saver": "2.0.5",
@@ -54,7 +52,7 @@
         "katex": "0.16.11",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
-        "matrix-js-sdk": "41.6.0-rc.0",
+        "matrix-js-sdk": "41.7.0",
         "matrix-widget-api": "1.17.0",
         "millify": "6.1.0",
         "pdfjs-dist": "5.7.284",
@@ -75,7 +73,8 @@
         "slate-history": "0.113.1",
         "slate-react": "0.124.2",
         "styled-components": "6.4.2",
-        "ua-parser-js": "2.0.10"
+        "ua-parser-js": "2.0.10",
+        "workbox-precaching": "7.4.1"
       },
       "devDependencies": {
         "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
@@ -2697,9 +2696,9 @@
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.0.tgz",
-      "integrity": "sha512-9a4feyt8QLysARu7PHKaRWT+wcCd+IYH074LXp9QK5WqfN4zUXueRhiSSMNT18Bm+8q3sBR/4zxDxOSDR0M8Kg==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.1.tgz",
+      "integrity": "sha512-VRjWhE1UgHnPpJ3b9B5+8z71ZC/HICFngPPFIN6ktzmUBKI5RusPujzbAQUoB3CgZ0yU58L99AfSQS4YTztSWw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 18"
@@ -3920,16 +3919,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/dompurify": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz",
-      "integrity": "sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==",
-      "deprecated": "This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.",
-      "license": "MIT",
-      "dependencies": {
-        "dompurify": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -4051,7 +4040,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/ua-parser-js": {
       "version": "0.7.39",
@@ -5550,12 +5539,16 @@
       "dev": true
     },
     "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/conventional-commit-types": {
@@ -6196,15 +6189,6 @@
         "node": ">=20.19.0"
       }
     },
-    "node_modules/dompurify": {
-      "version": "3.4.5",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.5.tgz",
-      "integrity": "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==",
-      "license": "(MPL-2.0 OR Apache-2.0)",
-      "optionalDependencies": {
-        "@types/trusted-types": "^2.0.7"
-      }
-    },
     "node_modules/domutils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
@@ -9971,16 +9955,16 @@
       "license": "Apache-2.0"
     },
     "node_modules/matrix-js-sdk": {
-      "version": "41.6.0-rc.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.6.0-rc.0.tgz",
-      "integrity": "sha512-FcTQyR+Nfh0ASEogYcX393hxGr1936Esg53Z+0f9O4SBsAxl1ZSkLXY3JfLZRLX9dNe38VVwQDQE6QuwnwV7Zw==",
+      "version": "41.7.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.7.0.tgz",
+      "integrity": "sha512-MP0xNv/VVRbshq00TE6EVo77IIXsQk0KjiVtgKV0t9j/V77a6Klt00QrrO0XykkTUsNC0+mQeBMxnx75rZO86Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^18.2.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^18.3.1",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",
-        "content-type": "^1.0.4",
+        "content-type": "^2.0.0",
         "jwt-decode": "^4.0.0",
         "loglevel": "^1.9.2",
         "matrix-events-sdk": "0.0.1",
@@ -13228,7 +13212,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.4.1.tgz",
       "integrity": "sha512-DT+vu46eh/2vRsSHTY4Xmc32Z1rr9PRlQUXr1Dx30ZuXRWwOsvZgGgcwxcasubQLQmbTNYZjv44LkBAQ4tT5tQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/workbox-expiration": {
@@ -13269,7 +13252,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.4.1.tgz",
       "integrity": "sha512-cdr/9qByww7yzEp7zg/qI4ukUrrNjQLgN+ONQRpjy/VqGQXwkgHwr00KksGJK8v0VifwDXBb8a4cWNZH71jn3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "workbox-core": "7.4.1",
@@ -13306,7 +13288,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.4.1.tgz",
       "integrity": "sha512-yubJGErZOusuidAenaL5ypfhQOa7urxP/f8E0ws7FPb4039RiWXUWBAyUkmUoOL/BcQGen3h0J8872d51IYxtA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "workbox-core": "7.4.1"
@@ -13316,7 +13297,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.4.1.tgz",
       "integrity": "sha512-GZxpaw9NbmOelj7667uZ2kpk5BFpOGbO4X0qjwh5ls8XQ8C+Lha5LQchTiUzsTFSS+NlUpftYAyOVXvQUrcqOQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "workbox-core": "7.4.1"

package.json

@@ -49,7 +49,6 @@
     "@tanstack/react-query": "5.100.13",
     "@tanstack/react-query-devtools": "5.100.13",
     "@tanstack/react-virtual": "3.13.25",
-    "@types/dompurify": "3.2.0",
     "@workadventure/noise-suppression": "0.0.4",
     "await-to-js": "3.0.0",
     "badwords-list": "2.0.1-4",
@@ -61,7 +60,6 @@
     "dayjs": "1.11.20",
     "deepfilternet3-noise-filter": "1.2.1",
     "domhandler": "6.0.1",
-    "dompurify": "3.4.5",
     "emojibase": "17.0.0",
     "emojibase-data": "17.0.0",
     "file-saver": "2.0.5",
@@ -79,7 +77,7 @@
     "katex": "0.16.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
-    "matrix-js-sdk": "41.6.0-rc.0",
+    "matrix-js-sdk": "41.7.0",
     "matrix-widget-api": "1.17.0",
     "millify": "6.1.0",
     "pdfjs-dist": "5.7.284",
@@ -100,7 +98,8 @@
     "slate-history": "0.113.1",
     "slate-react": "0.124.2",
     "styled-components": "6.4.2",
-    "ua-parser-js": "2.0.10"
+    "ua-parser-js": "2.0.10",
+    "workbox-precaching": "7.4.1"
   },
   "devDependencies": {
     "@lotusguild/element-call-embedded": "0.20.1-lotus.1",

src/app/components/AccountDataEditor.tsx

@@ -213,6 +213,7 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
           <Text size="L400">Account Data</Text>
           <Input
             variant="SurfaceVariant"
+            aria-label="Account data type"
             size="400"
             radii="300"
             readOnly

src/app/components/TauriDesktopFeatures.tsx

@@ -5,6 +5,7 @@ import { useTauriSmtc } from '../hooks/useTauriSmtc';
 import { useTauriNetwork } from '../hooks/useTauriNetwork';
 import { useTauriToastActions } from '../hooks/useTauriToastActions';
 import { useTauriFocusAssist } from '../hooks/useTauriFocusAssist';
+import { useTauriDnd } from '../hooks/useTauriDnd';
 
 /**
  * Mounts the client-scoped native desktop feature hooks (call/room aware). Each
@@ -21,5 +22,6 @@ export function TauriDesktopFeatures(): null {
   useTauriNetwork(); // P5-49 network-change awareness → sync retry
   useTauriToastActions(); // P5-41/35 rich toast click → open room, quick reply → send
   useTauriFocusAssist(); // P5-56 Windows Focus Assist → DND suppression atom
+  useTauriDnd(); // P6-1 tray "Do Not Disturb" → notification suppression atom
   return null;
 }

src/app/components/VoiceMessageRecorder.tsx

@@ -282,7 +282,12 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
     >
       {previewUrl && (
         <>
-          <audio ref={previewAudioRef} src={previewUrl} onEnded={() => setPreviewPlaying(false)} />
+          <audio
+            ref={previewAudioRef}
+            src={previewUrl}
+            onEnded={() => setPreviewPlaying(false)}
+            aria-hidden="true"
+          />
           <IconButton
             onClick={() => {
               const audio = previewAudioRef.current;

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -78,11 +78,14 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
 
   return (
     <Box shrink="No" direction="Column" gap="100">
-      <Text size="L400">Address (Optional)</Text>
+      <Text as="label" htmlFor="create-room-alias" size="L400">
+        Address (Optional)
+      </Text>
       <Text size="T200" priority="300">
         Pick an unique address to make it discoverable.
       </Text>
       <Input
+        id="create-room-alias"
         ref={aliasInputRef}
         onChange={handleAliasChange}
         before={

src/app/components/editor/Editor.tsx

@@ -66,6 +66,8 @@ type CustomEditorProps = {
   maxHeight?: string;
   editor: Editor;
   placeholder?: string;
+  /** Explicit accessible name for the textbox; falls back to the placeholder. */
+  ariaLabel?: string;
   onKeyDown?: KeyboardEventHandler;
   onKeyUp?: KeyboardEventHandler;
   onChange?: EditorChangeHandler;
@@ -82,6 +84,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       maxHeight = '50vh',
       editor,
       placeholder,
+      ariaLabel,
       onKeyDown,
       onKeyUp,
       onChange,
@@ -139,7 +142,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
-                aria-label={placeholder ?? 'Message input'}
+                aria-label={ariaLabel ?? placeholder ?? 'Message input'}
                 aria-multiline="true"
                 renderPlaceholder={renderPlaceholder}
                 renderElement={renderElement}

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
+import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo, useState } from 'react';
 import { Editor } from 'slate';
 import { Box, MenuItem, Text, toRem } from 'folds';
 import { Room } from 'matrix-js-sdk';
@@ -11,7 +11,7 @@ import { onTabPress } from '../../../utils/keyboard';
 import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
-import { IEmoji, emojis } from '../../../plugins/emoji';
+import { IEmoji, emojis, loadEmojiData } from '../../../plugins/emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -47,13 +47,32 @@ export function EmoticonAutocomplete({
   const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
   const recentEmoji = useRecentEmoji(mx, 20);
 
+  // Lazily load emojibase data (see plugins/emoji `loadEmojiData`). Until it
+  // resolves, `emojis` is empty and autocomplete matches only custom-emoji
+  // packs; the unicode emoji list fills in once loaded.
+  const [loadedEmojis, setLoadedEmojis] = useState<IEmoji[]>(() => emojis);
+  useEffect(() => {
+    let alive = true;
+    loadEmojiData()
+      // Fresh array reference: loadEmojiData populates the module-level array
+      // IN PLACE, so state set to the same ref would bail out of re-rendering
+      // and the search list would never gain the unicode emojis.
+      .then((loaded) => {
+        if (alive) setLoadedEmojis(loaded.emojis.slice());
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, []);
+
   const searchList = useMemo(() => {
     const list: Array<EmoticonSearchItem> = [];
     return list.concat(
       imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
-      emojis,
+      loadedEmojis,
     );
-  }, [imagePacks]);
+  }, [imagePacks, loadedEmojis]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,

src/app/components/emoji-board/EmojiBoard.tsx

@@ -8,6 +8,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import { Box, config, Icons, Scroll } from 'folds';
 import FocusTrap from 'focus-trap-react';
@@ -15,7 +16,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';
 import { atom, PrimitiveAtom, useAtom, useSetAtom } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { IEmoji, emojiGroups, emojis } from '../../plugins/emoji';
+import { EmojiData, IEmoji, emojiGroups, emojis, loadEmojiData } from '../../plugins/emoji';
 import { useEmojiGroupLabels } from './useEmojiGroupLabels';
 import { useEmojiGroupIcons } from './useEmojiGroupIcons';
 import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
@@ -56,6 +57,33 @@ import { VirtualTile } from '../virtualizer';
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
 
+/**
+ * Lazily pull in the emojibase data (see plugins/emoji `loadEmojiData`). The
+ * `emojis`/`emojiGroups` arrays are populated in place once the promise
+ * resolves; we wrap them in a fresh object on load so React re-renders and the
+ * board fills in. Before that, both are empty and the board shows only custom
+ * image packs / recents (which is fleeting — the load starts on mount).
+ */
+const useEmojiData = (): EmojiData => {
+  const [data, setData] = useState<EmojiData>(() => ({ emojis, emojiGroups }));
+  useEffect(() => {
+    let alive = true;
+    loadEmojiData()
+      // Fresh array references (not just a fresh wrapper): downstream memos
+      // depend on the arrays themselves, which are populated IN PLACE — same
+      // refs would skip recompute and leave emoji search empty until remount.
+      .then((loaded) => {
+        if (alive)
+          setData({ emojis: loaded.emojis.slice(), emojiGroups: loaded.emojiGroups.slice() });
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return data;
+};
+
 type EmojiGroupItem = {
   id: string;
   name: string;
@@ -75,6 +103,7 @@ const useGroups = (
 
   const recentEmojis = useRecentEmoji(mx, 21);
   const labels = useEmojiGroupLabels();
+  const { emojiGroups: loadedEmojiGroups } = useEmojiData();
 
   const emojiGroupItems = useMemo(() => {
     const g: EmojiGroupItem[] = [];
@@ -99,7 +128,7 @@ const useGroups = (
       });
     });
 
-    emojiGroups.forEach((group) => {
+    loadedEmojiGroups.forEach((group) => {
       g.push({
         id: group.id,
         name: labels[group.id],
@@ -108,7 +137,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab]);
+  }, [mx, recentEmojis, labels, imagePacks, tab, loadedEmojiGroups]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
@@ -177,6 +206,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
   const usage = ImageUsage.Emoticon;
   const labels = useEmojiGroupLabels();
   const icons = useEmojiGroupIcons();
+  const { emojiGroups: loadedEmojiGroups } = useEmojiData();
 
   const packLabels = useMemo(() => {
     const map = new Map<string, string | undefined>();
@@ -234,7 +264,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
         }}
       >
         <SidebarDivider />
-        {emojiGroups.map((group) => (
+        {loadedEmojiGroups.map((group) => (
           <GroupIcon
             key={group.id}
             active={activeGroupId === group.id}
@@ -409,13 +439,14 @@ export function EmojiBoard({
   const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks);
   const groups = emojiTab ? emojiGroupItems : stickerGroupItems;
   const renderItem = useItemRenderer(tab);
+  const { emojis: loadedEmojis } = useEmojiData();
 
   const searchList = useMemo(() => {
     let list: Array<PackImageReader | IEmoji> = [];
     list = list.concat(imagePacks.flatMap((pack) => pack.getImages(usage)));
-    if (emojiTab) list = list.concat(emojis);
+    if (emojiTab) list = list.concat(loadedEmojis);
     return list;
-  }, [emojiTab, usage, imagePacks]);
+  }, [emojiTab, usage, imagePacks, loadedEmojis]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,

src/app/components/image-pack-view/PackMeta.tsx

@@ -200,12 +200,24 @@ export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfil
         </Box>
       </Box>
       <Box direction="Inherit" gap="100">
-        <Text size="L400">Name</Text>
-        <Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
+        <Text as="label" htmlFor="image-pack-name" size="L400">
+          Name
+        </Text>
+        <Input
+          id="image-pack-name"
+          name="nameInput"
+          defaultValue={meta.name}
+          variant="Secondary"
+          radii="300"
+          required
+        />
       </Box>
       <Box direction="Inherit" gap="100">
-        <Text size="L400">Attribution</Text>
+        <Text as="label" htmlFor="image-pack-attribution" size="L400">
+          Attribution
+        </Text>
         <TextArea
+          id="image-pack-attribution"
           name="attributionTextArea"
           defaultValue={meta.attribution}
           variant="Secondary"

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -261,9 +261,12 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                 gap="400"
               >
                 <Box direction="Column" gap="100">
-                  <Text size="L400">User ID</Text>
+                  <Text as="label" htmlFor="invite-user-id" size="L400">
+                    User ID
+                  </Text>
                   <div>
                     <Input
+                      id="invite-user-id"
                       size="500"
                       ref={inputRef}
                       onChange={handleSearchChange}
@@ -334,8 +337,11 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   </div>
                 </Box>
                 <Box direction="Column" gap="100">
-                  <Text size="L400">Reason (Optional)</Text>
+                  <Text as="label" htmlFor="invite-reason" size="L400">
+                    Reason (Optional)
+                  </Text>
                   <TextArea
+                    id="invite-reason"
                     size="500"
                     name="reasonInput"
                     variant="Background"

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -108,8 +108,11 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
                 </Text>
               </Box>
               <Box direction="Column" gap="100">
-                <Text size="L400">Address</Text>
+                <Text as="label" htmlFor="join-address" size="L400">
+                  Address
+                </Text>
                 <Input
+                  id="join-address"
                   size="500"
                   autoFocus
                   name="addressInput"

src/app/components/page/style.css.ts

@@ -117,7 +117,6 @@ export const PageHeroSection = style([
   },
 ]);
 
-
 export const PageContentCenter = style([
   DefaultReset,
   {

src/app/components/room-intro/RoomIntro.tsx

@@ -95,7 +95,6 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
                     <FocusTrap
                       focusTrapOptions={{
                         initialFocus: false,
-                        returnFocusOnDeactivate: false,
                         clickOutsideDeactivates: true,
                         onDeactivate: () => setViewTopic(false),
                         escapeDeactivates: stopPropagation,

src/app/components/soundboard-pack-view/RoomSoundboardPack.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useMemo } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { SoundboardPackEditor } from './SoundboardPackEditor';
+import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
+import { StateEvent } from '../../../types/matrix/room';
+import { useRoomSoundboardPack } from '../../hooks/useSoundboardPacks';
+import { PackAddress } from '../../plugins/custom-emoji/PackAddress';
+import { randomStr } from '../../utils/common';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+
+type RoomSoundboardPackProps = {
+  room: Room;
+  stateKey: string;
+};
+
+export function RoomSoundboardPack({ room, stateKey }: RoomSoundboardPackProps) {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId()!;
+  const powerLevels = usePowerLevels(room);
+  const creators = useRoomCreators(room);
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canEdit = permissions.stateEvent(
+    StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
+    userId,
+  );
+
+  const fallbackPack = useMemo(
+    () => new SoundboardPack(randomStr(4), {}, new PackAddress(room.roomId, stateKey)),
+    [room.roomId, stateKey],
+  );
+  const pack = useRoomSoundboardPack(room, stateKey) ?? fallbackPack;
+
+  const handleUpdate = useCallback(
+    async (content: SoundboardContent) => {
+      await mx.sendStateEvent(
+        room.roomId,
+        StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
+        content as never,
+        stateKey,
+      );
+    },
+    [mx, room.roomId, stateKey],
+  );
+
+  return <SoundboardPackEditor pack={pack} canEdit={canEdit} onUpdate={handleUpdate} />;
+}

src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx

@@ -0,0 +1,408 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  Chip,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  PopOut,
+  Spinner,
+  Text,
+  color,
+  config,
+  toRem,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { EmojiBoard } from '../emoji-board';
+import { SoundboardClip, SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
+import { uniqueShortcode } from '../../plugins/soundboard/utils';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import {
+  playClipLocally,
+  resolveClipObjectUrl,
+  SOUNDBOARD_ACCEPT,
+  SOUNDBOARD_MAX_CLIP_BYTES,
+  SOUNDBOARD_MAX_CLIPS,
+} from '../../utils/soundboardClips';
+import { stopPropagation } from '../../utils/keyboard';
+
+type ClipDraft = {
+  url: string;
+  body: string;
+  emoji: string;
+  volume: number;
+  info?: SoundboardClip['info'];
+};
+
+type SoundboardPackEditorProps = {
+  pack: SoundboardPack;
+  canEdit?: boolean;
+  onUpdate: (content: SoundboardContent) => Promise<void>;
+};
+
+/**
+ * Reusable single-pack soundboard manager (used by the settings page and the
+ * in-call management mode). Mirrors image-pack-view/ImagePackContent's staged-
+ * edit + batched-save pattern, but per-clip fields are name + emoji + volume.
+ */
+export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPackEditorProps) {
+  const mx = useMatrixClient();
+
+  // Staged, unsaved state:
+  const [drafts, setDrafts] = useState<Map<string, ClipDraft>>(new Map()); // shortcode -> edits
+  const [deleted, setDeleted] = useState<Set<string>>(new Set());
+  const [uploads, setUploads] = useState<Array<{ shortcode: string } & ClipDraft>>([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [emojiFor, setEmojiFor] = useState<string>(); // shortcode currently picking an emoji
+  const [busyPreview, setBusyPreview] = useState<string>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const emojiAnchorRef = useRef<HTMLElement | null>(null);
+
+  const existing = useMemo(() => pack.getClips(), [pack]);
+  const clipCount = existing.filter((c) => !deleted.has(c.shortcode)).length + uploads.length;
+
+  const dirty = drafts.size > 0 || deleted.size > 0 || uploads.length > 0;
+
+  const draftFor = (shortcode: string, base: { body: string; emoji: string; volume: number }) =>
+    drafts.get(shortcode) ?? { url: '', ...base };
+
+  const setDraft = (shortcode: string, patch: Partial<ClipDraft>, base: ClipDraft) => {
+    setDrafts((prev) => {
+      const next = new Map(prev);
+      next.set(shortcode, { ...base, ...(next.get(shortcode) ?? {}), ...patch });
+      return next;
+    });
+  };
+
+  const preview = useCallback(
+    async (id: string, mxc: string, volume: number) => {
+      setBusyPreview(id);
+      try {
+        const url = await resolveClipObjectUrl(mx, mxc);
+        playClipLocally(url, volume / 100);
+      } catch {
+        /* ignore preview errors */
+      } finally {
+        setBusyPreview(undefined);
+      }
+    },
+    [mx],
+  );
+
+  const handleFiles = useCallback(
+    async (files: FileList | null) => {
+      if (!files || files.length === 0) return;
+      setUploading(true);
+      setError(undefined);
+      try {
+        const taken = new Set<string>([
+          ...existing.map((c) => c.shortcode),
+          ...uploads.map((u) => u.shortcode),
+        ]);
+        for (let i = 0; i < files.length; i += 1) {
+          const file = files[i];
+          if (clipCount + uploads.length >= SOUNDBOARD_MAX_CLIPS) {
+            throw new Error(`Soundboard is full (max ${SOUNDBOARD_MAX_CLIPS} clips).`);
+          }
+          if (file.size > SOUNDBOARD_MAX_CLIP_BYTES) {
+            throw new Error(`"${file.name}" is too large (max 1 MB).`);
+          }
+          // eslint-disable-next-line no-await-in-loop
+          const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
+          const mxc = res.content_uri;
+          if (!mxc) throw new Error('Upload failed.');
+          const name = file.name.replace(/\.[^/.]+$/, '');
+          const shortcode = uniqueShortcode(name, taken);
+          taken.add(shortcode);
+          setUploads((prev) => [
+            ...prev,
+            {
+              shortcode,
+              url: mxc,
+              body: name,
+              emoji: '',
+              volume: 100,
+              info: { mimetype: file.type || undefined, size: file.size },
+            },
+          ]);
+        }
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Upload failed.');
+      } finally {
+        setUploading(false);
+      }
+    },
+    [mx, existing, uploads, clipCount],
+  );
+
+  const [saveState, save] = useAsyncCallback(
+    useCallback(async () => {
+      const clips: Record<string, SoundboardClip> = {};
+      existing.forEach((c) => {
+        if (deleted.has(c.shortcode)) return;
+        const d = drafts.get(c.shortcode);
+        clips[c.shortcode] = {
+          url: c.url,
+          body: d ? d.body : c.body,
+          emoji: d ? d.emoji || undefined : c.emoji,
+          volume: d ? d.volume : c.volume,
+          info: c.info,
+        };
+      });
+      uploads.forEach((u) => {
+        clips[u.shortcode] = {
+          url: u.url,
+          body: u.body,
+          emoji: u.emoji || undefined,
+          volume: u.volume,
+          info: u.info,
+        };
+      });
+      await onUpdate({ pack: pack.meta.content, clips });
+      setDrafts(new Map());
+      setDeleted(new Set());
+      setUploads([]);
+    }, [existing, deleted, drafts, uploads, onUpdate, pack]),
+  );
+  const saving = saveState.status === AsyncStatus.Loading;
+
+  const renderRow = (key: string, base: ClipDraft, isUpload: boolean, markedDeleted: boolean) => {
+    const d = isUpload ? base : draftFor(key, base);
+    const rowVolume = isUpload ? base.volume : d.volume;
+    const rowBody = isUpload ? base.body : d.body;
+    const rowEmoji = isUpload ? base.emoji : d.emoji;
+    const commit = (patch: Partial<ClipDraft>) => {
+      if (isUpload) {
+        setUploads((prev) => prev.map((u) => (u.shortcode === key ? { ...u, ...patch } : u)));
+      } else {
+        setDraft(key, patch, base);
+      }
+    };
+    return (
+      <Box
+        key={key}
+        alignItems="Center"
+        gap="200"
+        style={{
+          padding: config.space.S200,
+          borderRadius: config.radii.R400,
+          background: color.SurfaceVariant.Container,
+          opacity: markedDeleted ? 0.5 : 1,
+        }}
+      >
+        <IconButton
+          size="300"
+          radii="300"
+          variant="Secondary"
+          disabled={busyPreview === key}
+          onClick={() => preview(key, base.url, rowVolume)}
+          aria-label={`Preview ${rowBody}`}
+        >
+          {busyPreview === key ? <Spinner size="100" /> : <Icon size="100" src={Icons.Play} />}
+        </IconButton>
+        <IconButton
+          size="300"
+          radii="300"
+          variant="Secondary"
+          disabled={!canEdit || markedDeleted}
+          onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
+            emojiAnchorRef.current = evt.currentTarget;
+            setEmojiFor(key);
+          }}
+          aria-label="Pick emoji"
+        >
+          <Text size="T400">{rowEmoji || '🔊'}</Text>
+        </IconButton>
+        <Box grow="Yes">
+          <Input
+            variant="Surface"
+            size="300"
+            defaultValue={rowBody}
+            readOnly={!canEdit || markedDeleted}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => commit({ body: e.target.value })}
+            aria-label="Clip name"
+          />
+        </Box>
+        <Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(120) }}>
+          <Icon size="50" src={Icons.VolumeHigh} />
+          <input
+            type="range"
+            min={0}
+            max={100}
+            step={5}
+            defaultValue={rowVolume}
+            disabled={!canEdit || markedDeleted}
+            onChange={(e) => commit({ volume: parseInt(e.target.value, 10) })}
+            style={{ flexGrow: 1 }}
+            aria-label="Clip volume"
+          />
+        </Box>
+        {canEdit && !isUpload && (
+          <IconButton
+            size="300"
+            radii="300"
+            variant={markedDeleted ? 'Success' : 'Critical'}
+            onClick={() =>
+              setDeleted((prev) => {
+                const next = new Set(prev);
+                if (next.has(key)) next.delete(key);
+                else next.add(key);
+                return next;
+              })
+            }
+            aria-label={markedDeleted ? 'Undo delete' : 'Delete clip'}
+          >
+            <Icon size="100" src={markedDeleted ? Icons.Plus : Icons.Delete} />
+          </IconButton>
+        )}
+        {canEdit && isUpload && (
+          <IconButton
+            size="300"
+            radii="300"
+            variant="Critical"
+            onClick={() => setUploads((prev) => prev.filter((u) => u.shortcode !== key))}
+            aria-label="Remove upload"
+          >
+            <Icon size="100" src={Icons.Cross} />
+          </IconButton>
+        )}
+      </Box>
+    );
+  };
+
+  return (
+    <Box direction="Column" gap="300">
+      <input
+        ref={fileInputRef}
+        aria-label="Upload soundboard clip"
+        type="file"
+        accept={SOUNDBOARD_ACCEPT}
+        multiple
+        hidden
+        onChange={(e) => {
+          handleFiles(e.target.files);
+          e.target.value = '';
+        }}
+      />
+
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
+        <Text size="H4">{pack.meta.name ?? 'Soundboard'}</Text>
+        {canEdit && (
+          <Chip
+            variant="Secondary"
+            radii="Pill"
+            disabled={uploading || clipCount >= SOUNDBOARD_MAX_CLIPS}
+            onClick={() => fileInputRef.current?.click()}
+            before={uploading ? <Spinner size="100" /> : <Icon size="100" src={Icons.Plus} />}
+          >
+            <Text size="B300">Upload</Text>
+          </Chip>
+        )}
+      </Box>
+
+      <Box direction="Column" gap="100">
+        {existing.map((c) =>
+          renderRow(
+            c.shortcode,
+            { url: c.url, body: c.body ?? c.shortcode, emoji: c.emoji ?? '', volume: c.volume },
+            false,
+            deleted.has(c.shortcode),
+          ),
+        )}
+        {uploads.map((u) => renderRow(u.shortcode, u, true, false))}
+        {existing.length === 0 && uploads.length === 0 && (
+          <Text size="T200" priority="300">
+            No clips yet. Upload a short audio clip (max 1 MB){canEdit ? '' : ' — ask an admin'}.
+          </Text>
+        )}
+      </Box>
+
+      {error && (
+        <Text size="T200" style={{ color: color.Critical.Main }}>
+          {error}
+        </Text>
+      )}
+
+      {canEdit && dirty && (
+        <Box gap="200">
+          <Button
+            size="300"
+            variant="Success"
+            radii="300"
+            disabled={saving}
+            onClick={() => save()}
+            before={saving ? <Spinner size="100" fill="Solid" /> : undefined}
+          >
+            <Text size="B300">Save changes</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Secondary"
+            fill="Soft"
+            radii="300"
+            disabled={saving}
+            onClick={() => {
+              setDrafts(new Map());
+              setDeleted(new Set());
+              setUploads([]);
+              setError(undefined);
+            }}
+          >
+            <Text size="B300">Reset</Text>
+          </Button>
+        </Box>
+      )}
+
+      <PopOut
+        anchor={emojiFor ? emojiAnchorRef.current?.getBoundingClientRect() : undefined}
+        position="Bottom"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setEmojiFor(undefined),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <EmojiBoard
+              imagePackRooms={[]}
+              returnFocusOnDeactivate={false}
+              onEmojiSelect={(unicode: string) => {
+                const key = emojiFor;
+                setEmojiFor(undefined);
+                if (!key) return;
+                const up = uploads.find((u) => u.shortcode === key);
+                if (up) {
+                  setUploads((prev) =>
+                    prev.map((u) => (u.shortcode === key ? { ...u, emoji: unicode } : u)),
+                  );
+                } else {
+                  const c = existing.find((x) => x.shortcode === key);
+                  if (c)
+                    setDraft(
+                      key,
+                      { emoji: unicode },
+                      {
+                        url: c.url,
+                        body: c.body ?? c.shortcode,
+                        emoji: c.emoji ?? '',
+                        volume: c.volume,
+                      },
+                    );
+                }
+              }}
+              requestClose={() => setEmojiFor(undefined)}
+            />
+          </FocusTrap>
+        }
+      >
+        <span />
+      </PopOut>
+    </Box>
+  );
+}

src/app/components/soundboard-pack-view/UserSoundboardPack.tsx

@@ -0,0 +1,32 @@
+import React, { useCallback, useMemo } from 'react';
+import { SoundboardPackEditor } from './SoundboardPackEditor';
+import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { useUserSoundboardPack } from '../../hooks/useSoundboardPacks';
+
+export function UserSoundboardPack() {
+  const mx = useMatrixClient();
+  const defaultPack = useMemo(
+    () =>
+      new SoundboardPack(
+        mx.getUserId() ?? '',
+        { pack: { display_name: 'My Soundboard' } },
+        undefined,
+      ),
+    [mx],
+  );
+  const pack = useUserSoundboardPack() ?? defaultPack;
+
+  const handleUpdate = useCallback(
+    async (content: SoundboardContent) => {
+      await mx.setAccountData(
+        AccountDataEvent.LotusSoundboard as unknown as keyof import('matrix-js-sdk').AccountDataEvents,
+        content as never,
+      );
+    },
+    [mx],
+  );
+
+  return <SoundboardPackEditor pack={pack} canEdit onUpdate={handleUpdate} />;
+}

src/app/components/soundboard-pack-view/index.ts

@@ -0,0 +1,3 @@
+export * from './SoundboardPackEditor';
+export * from './RoomSoundboardPack';
+export * from './UserSoundboardPack';

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -56,6 +56,7 @@ function PreviewVideo({ fileItem }: PreviewVideoProps) {
 
   return (
     <video
+      aria-label="Video attachment preview"
       style={{
         objectFit: 'contain',
         width: '100%',

src/app/components/user-profile/UserModeration.tsx

@@ -260,6 +260,7 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
           <Input
             ref={reasonInputRef}
             placeholder="Reason"
+            aria-label="Moderation reason"
             size="300"
             variant="Background"
             radii="300"

src/app/components/user-profile/UserRoomProfile.tsx

@@ -253,6 +253,7 @@ function UserPrivateNotes({ userId }: { userId: string }) {
         )}
       </Box>
       <textarea
+        aria-label="Private note about this user"
         value={draft}
         onChange={handleChange}
         maxLength={USER_NOTE_MAX_LENGTH}

src/app/features/bookmarks/BookmarksPanel.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, ReactNode, useCallback, useEffect, useState } from 'react';
+import { Room } from 'matrix-js-sdk';
 import {
   Avatar,
   Box,
@@ -16,6 +17,8 @@ import {
 import classNames from 'classnames';
 import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRoomEvent } from '../../hooks/useRoomEvent';
+import { MessageDeletedContent } from '../../components/message/content/FallbackContent';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { RoomAvatar } from '../../components/room-avatar';
@@ -42,9 +45,11 @@ type BookmarkItemProps = {
   bookmark: Bookmark;
   onJump: (roomId: string, eventId: string) => void;
   onRemove: (eventId: string) => void;
+  // Optional live-rendered preview node; falls back to the stored snapshot when absent.
+  preview?: ReactNode;
 };
 
-function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
+function BookmarkItem({ bookmark, onJump, onRemove, preview }: BookmarkItemProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = mx.getRoom(bookmark.roomId) ?? undefined;
@@ -104,18 +109,50 @@ function BookmarkItem({ bookmark, onJump, onRemove }: BookmarkItemProps) {
         style={{ justifyContent: 'flex-start', height: 'unset', padding: config.space.S200 }}
       >
         <Text className={css.BookmarkPreview} size="T200" priority="400">
-          {bookmark.previewText || '(no preview)'}
+          {preview ?? (bookmark.previewText || '(no preview)')}
         </Text>
       </Button>
     </Box>
   );
 }
 
+type LiveBookmarkItemProps = BookmarkItemProps & { room: Room };
+
+// Renders the same layout as BookmarkItem, but resolves the message body live so
+// edits (m.replace, applied by useRoomEvent) and redactions are reflected. The
+// stored snapshot (previewText) remains the fallback for loading/failed/empty states.
+function LiveBookmarkItem({ room, bookmark, onJump, onRemove }: LiveBookmarkItemProps) {
+  const liveEvent = useRoomEvent(room, bookmark.eventId, () =>
+    room.findEventById(bookmark.eventId),
+  );
+
+  const snapshot = bookmark.previewText || '(no preview)';
+  let preview: ReactNode = snapshot;
+
+  // undefined (loading) and null (fetch failed / not found) both keep the snapshot.
+  if (liveEvent) {
+    if (liveEvent.isRedacted()) {
+      preview = (
+        <MessageDeletedContent
+          reason={liveEvent.getUnsigned().redacted_because?.content?.reason as string | undefined}
+        />
+      );
+    } else {
+      // body is already the edited text since useRoomEvent applied m.replace.
+      const { body } = liveEvent.getContent();
+      preview = typeof body === 'string' && body ? body : snapshot;
+    }
+  }
+
+  return <BookmarkItem bookmark={bookmark} onJump={onJump} onRemove={onRemove} preview={preview} />;
+}
+
 type BookmarksPanelProps = {
   onClose: () => void;
 };
 
 export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
+  const mx = useMatrixClient();
   const { bookmarks, removeBookmark } = useBookmarks();
   const { navigateRoom } = useRoomNavigate();
   const [filter, setFilter] = useState('');
@@ -228,14 +265,27 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
             </Box>
           ) : (
             <Box className={css.BookmarksContent} direction="Column" gap="200">
-              {filtered.map((bk) => (
-                <BookmarkItem
-                  key={bk.eventId}
-                  bookmark={bk}
-                  onJump={handleJump}
-                  onRemove={removeBookmark}
-                />
-              ))}
+              {filtered.map((bk) => {
+                // Live render when the room is joined (useRoomEvent needs a non-null Room);
+                // otherwise fall back to the stored snapshot for rooms we've left.
+                const room = mx.getRoom(bk.roomId);
+                return room ? (
+                  <LiveBookmarkItem
+                    key={bk.eventId}
+                    room={room}
+                    bookmark={bk}
+                    onJump={handleJump}
+                    onRemove={removeBookmark}
+                  />
+                ) : (
+                  <BookmarkItem
+                    key={bk.eventId}
+                    bookmark={bk}
+                    onJump={handleJump}
+                    onRemove={removeBookmark}
+                  />
+                );
+              })}
             </Box>
           )}
         </Scroll>

src/app/features/call/CallControls.tsx

@@ -351,10 +351,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
             <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
-            <ScreenshareAudioButton
-              muted={screenshareAudioMuted}
-              onToggle={() => callEmbed.control.toggleScreenshareAudio()}
-            />
           </Box>
           {!compact && showVideoGroup && <ControlDivider />}
           {showVideoGroup && (
@@ -363,12 +359,20 @@ export function CallControls({ callEmbed }: CallControlsProps) {
                   user can stop it; once stopped it hides and can't be restarted. */}
               {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
               {showScreenshare && (
-                <ScreenShareButton
-                  enabled={screenshare}
-                  onToggle={() =>
-                    screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-                  }
-                />
+                <>
+                  <ScreenShareButton
+                    enabled={screenshare}
+                    onToggle={() =>
+                      screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
+                    }
+                  />
+                  {/* Mute-screenshare-audio sits directly next to the screenshare
+                      control since they're the same concern. */}
+                  <ScreenshareAudioButton
+                    muted={screenshareAudioMuted}
+                    onToggle={() => callEmbed.control.toggleScreenshareAudio()}
+                  />
+                </>
               )}
               {!!document.fullscreenEnabled && (
                 <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />

src/app/features/call/CallSoundboard.tsx

@@ -1,220 +1,254 @@
-import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
 import {
   Box,
-  Chip,
   Icon,
   IconButton,
   Icons,
   Menu,
   PopOut,
   RectCords,
+  Scroll,
   Spinner,
+  Switch,
   Text,
   Tooltip,
   TooltipProvider,
   color,
   config,
+  toRem,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { useAtomValue } from 'jotai';
 import { CallEmbed } from '../../plugins/call';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useSoundboard } from '../../hooks/useSoundboard';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { useImagePackRooms } from '../../hooks/useImagePackRooms';
+import { useRelevantSoundboardPacks } from '../../hooks/useSoundboardPacks';
+import { SoundboardClipReader } from '../../plugins/soundboard';
+import { UserSoundboardPack, RoomSoundboardPack } from '../../components/soundboard-pack-view';
 import { stopPropagation } from '../../utils/keyboard';
-import {
-  SOUNDBOARD_ACCEPT,
-  SOUNDBOARD_MAX_CLIPS,
-  playClipLocally,
-  resolveClipObjectUrl,
-} from '../../utils/soundboardClips';
+import { playClipLocally, resolveClipObjectUrl } from '../../utils/soundboardClips';
 
 type CallSoundboardProps = {
   callEmbed: CallEmbed;
 };
 
+type FlatClip = {
+  key: string; // packId|shortcode
+  packId: string;
+  packName: string;
+  clip: SoundboardClipReader;
+};
+
 /**
- * [P5-15] In-call soundboard: trigger user-uploaded clips into the call. Each
- * clip is published to peers as a separate track by the EC fork
- * (`io.lotus.inject_audio`) and also played locally for the presser's feedback.
- * Clips are uploadable/managed here and synced across devices via the
- * `io.lotus.soundboard` account data (like custom emoji/sticker packs).
+ * [P5-15 v2] In-call soundboard. Clips come from the aggregated soundboard packs
+ * relevant to the call room (the room + parent spaces ∪ the user's personal
+ * pack), just like custom emoji. Playing a clip publishes it into the call via
+ * the EC fork (`io.lotus.inject_audio`, max one at a time) and plays it locally.
+ * A management toggle reveals the pack editors (personal + this room, if
+ * permitted). Space-wide packs are managed from Space settings.
  */
 export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
   const mx = useMatrixClient();
-  const { clips, addClip, removeClip } = useSoundboard();
+  const { room } = callEmbed;
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const packRooms = useImagePackRooms(room.roomId, roomToParents);
+  const packs = useRelevantSoundboardPacks(packRooms);
   const [soundboardVolume] = useSetting(settingsAtom, 'soundboardVolume');
+  const master = Math.max(0, Math.min(1, soundboardVolume / 100));
 
   const [cords, setCords] = useState<RectCords>();
-  const [busyId, setBusyId] = useState<string>();
-  const [uploading, setUploading] = useState(false);
+  const [manage, setManage] = useState(false);
+  const [playingKey, setPlayingKey] = useState<string>(); // host-side spam guard
   const [error, setError] = useState<string>();
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const volume = Math.max(0, Math.min(1, soundboardVolume / 100));
+  const groups = useMemo(
+    () =>
+      packs
+        .map((pack) => ({
+          id: pack.id,
+          name: pack.meta.name ?? 'Soundboard',
+          clips: pack.getClips(),
+        }))
+        .filter((g) => g.clips.length > 0),
+    [packs],
+  );
 
   const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setError(undefined);
     setCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const handlePlay = useCallback(
-    async (id: string, mxc: string) => {
-      setBusyId(id);
+  const play = useCallback(
+    async (flat: FlatClip) => {
+      if (playingKey) return; // one at a time (fork also enforces this)
+      setPlayingKey(flat.key);
       setError(undefined);
+      const done = () => setPlayingKey((k) => (k === flat.key ? undefined : k));
       try {
-        const objectUrl = await resolveClipObjectUrl(mx, mxc);
-        callEmbed.control.injectAudio(objectUrl, volume);
-        playClipLocally(objectUrl, volume);
+        const url = await resolveClipObjectUrl(mx, flat.clip.url);
+        const vol = (flat.clip.volume / 100) * master;
+        callEmbed.control.injectAudio(url, vol);
+        const audio = playClipLocally(url, vol);
+        if (audio) {
+          audio.addEventListener('ended', done, { once: true });
+          audio.addEventListener('error', done, { once: true });
+        } else {
+          done();
+        }
+        // Safety: clear the guard even if the audio never signals end.
+        window.setTimeout(done, 30_000);
       } catch {
         setError('Could not play that clip.');
-      } finally {
-        setBusyId(undefined);
+        done();
       }
     },
-    [mx, callEmbed, volume],
-  );
-
-  const handleFile = useCallback(
-    async (file: File | undefined) => {
-      if (!file) return;
-      setUploading(true);
-      setError(undefined);
-      try {
-        await addClip(file);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : 'Upload failed.');
-      } finally {
-        setUploading(false);
-      }
-    },
-    [addClip],
+    [mx, callEmbed, master, playingKey],
   );
 
   return (
-    <>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={SOUNDBOARD_ACCEPT}
-        hidden
-        onChange={(e) => {
-          handleFile(e.target.files?.[0]);
-          e.target.value = '';
-        }}
-      />
-      <PopOut
-        anchor={cords}
-        position="Top"
-        align="Center"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setCords(undefined),
-              clickOutsideDeactivates: true,
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Menu style={{ maxWidth: '320px' }}>
-              <Box direction="Column" gap="200" style={{ padding: config.space.S200 }}>
-                <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-                  <Text size="L400">Soundboard</Text>
-                  <Chip
-                    variant="Secondary"
-                    radii="Pill"
-                    disabled={uploading || clips.length >= SOUNDBOARD_MAX_CLIPS}
-                    onClick={() => fileInputRef.current?.click()}
-                    before={
-                      uploading ? <Spinner size="100" /> : <Icon size="100" src={Icons.Plus} />
-                    }
-                  >
-                    <Text size="B300">Upload</Text>
-                  </Chip>
-                </Box>
-
-                {clips.length === 0 ? (
+    <PopOut
+      anchor={cords}
+      position="Top"
+      align="Center"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ maxWidth: manage ? toRem(420) : toRem(340), maxHeight: '70vh' }}>
+            <Box direction="Column" style={{ maxHeight: '70vh' }}>
+              <Box
+                shrink="No"
+                alignItems="Center"
+                justifyContent="SpaceBetween"
+                gap="200"
+                style={{
+                  padding: config.space.S200,
+                  borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                }}
+              >
+                <Text size="L400">Soundboard</Text>
+                <Box as="label" alignItems="Center" gap="200" style={{ cursor: 'pointer' }}>
                   <Text size="T200" priority="300">
-                    No clips yet. Upload a short audio clip (max 1 MB) to play it into the call.
-                    Clips sync across your devices.
+                    Manage
                   </Text>
-                ) : (
-                  <Box wrap="Wrap" gap="200">
-                    {clips.map((clip) => (
-                      <Box
-                        key={clip.id}
-                        direction="Column"
-                        gap="100"
-                        style={{ position: 'relative' }}
-                      >
-                        <Chip
-                          variant="SurfaceVariant"
-                          radii="300"
-                          disabled={busyId === clip.id}
-                          onClick={() => handlePlay(clip.id, clip.url)}
-                          before={
-                            busyId === clip.id ? (
-                              <Spinner size="100" />
-                            ) : (
-                              <Icon size="100" src={Icons.Play} />
-                            )
-                          }
-                          after={
-                            <Icon
-                              size="50"
-                              src={Icons.Cross}
-                              style={{ cursor: 'pointer' }}
-                              onClick={(e: React.MouseEvent) => {
-                                e.stopPropagation();
-                                removeClip(clip.id);
-                              }}
-                            />
-                          }
-                        >
-                          <Text size="B300" truncate style={{ maxWidth: '120px' }}>
-                            {clip.name}
-                          </Text>
-                        </Chip>
-                      </Box>
-                    ))}
-                  </Box>
-                )}
-
-                {error && (
-                  <Text size="T200" style={{ color: color.Critical.Main }}>
-                    {error}
-                  </Text>
-                )}
+                  <Switch variant="Primary" value={manage} onChange={setManage} />
+                </Box>
               </Box>
-            </Menu>
-          </FocusTrap>
+
+              <Scroll size="300" hideTrack visibility="Hover">
+                <Box direction="Column" gap="300" style={{ padding: config.space.S200 }}>
+                  {manage ? (
+                    <>
+                      <RoomSoundboardPack room={room} stateKey="" />
+                      <UserSoundboardPack />
+                    </>
+                  ) : (
+                    <>
+                      {groups.length === 0 && (
+                        <Text size="T200" priority="300">
+                          No soundboard clips here yet. Turn on <b>Manage</b> to upload some, or add
+                          a pack in Space settings.
+                        </Text>
+                      )}
+                      {groups.map((g) => (
+                        <Box key={g.id} direction="Column" gap="100">
+                          <Text size="L400">{g.name}</Text>
+                          <Box wrap="Wrap" gap="200">
+                            {g.clips.map((clip) => {
+                              const key = `${g.id}|${clip.shortcode}`;
+                              const flat: FlatClip = {
+                                key,
+                                packId: g.id,
+                                packName: g.name,
+                                clip,
+                              };
+                              return (
+                                <Box
+                                  key={key}
+                                  as="button"
+                                  direction="Column"
+                                  alignItems="Center"
+                                  justifyContent="Center"
+                                  gap="100"
+                                  disabled={!!playingKey}
+                                  onClick={() => play(flat)}
+                                  aria-label={`Play ${clip.name}`}
+                                  style={{
+                                    width: toRem(76),
+                                    height: toRem(76),
+                                    padding: config.space.S100,
+                                    borderRadius: config.radii.R400,
+                                    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                                    background:
+                                      playingKey === key
+                                        ? color.Primary.Container
+                                        : color.SurfaceVariant.Container,
+                                    cursor: playingKey ? 'default' : 'pointer',
+                                    opacity: playingKey && playingKey !== key ? 0.5 : 1,
+                                  }}
+                                >
+                                  <Text size="H4">
+                                    {playingKey === key ? (
+                                      <Spinner size="200" />
+                                    ) : (
+                                      clip.emoji || '🔊'
+                                    )}
+                                  </Text>
+                                  <Text size="T200" truncate style={{ maxWidth: '100%' }}>
+                                    {clip.name}
+                                  </Text>
+                                </Box>
+                              );
+                            })}
+                          </Box>
+                        </Box>
+                      ))}
+                    </>
+                  )}
+                  {error && (
+                    <Text size="T200" style={{ color: color.Critical.Main }}>
+                      {error}
+                    </Text>
+                  )}
+                </Box>
+              </Scroll>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <TooltipProvider
+        tooltip={
+          <Tooltip>
+            <Text>Soundboard</Text>
+          </Tooltip>
         }
       >
-        <TooltipProvider
-          tooltip={
-            <Tooltip>
-              <Text>Soundboard</Text>
-            </Tooltip>
-          }
-        >
-          {(triggerRef) => (
-            <IconButton
-              ref={triggerRef}
-              variant="Surface"
-              fill="Soft"
-              radii="400"
-              size="400"
-              onClick={handleOpen}
-              outlined
-              aria-label="Soundboard"
-              aria-expanded={!!cords}
-              aria-haspopup="menu"
-            >
-              <Icon size="400" src={Icons.BellRing} />
-            </IconButton>
-          )}
-        </TooltipProvider>
-      </PopOut>
-    </>
+        {(triggerRef) => (
+          <IconButton
+            ref={triggerRef}
+            variant="Surface"
+            fill="Soft"
+            radii="400"
+            size="400"
+            onClick={handleOpen}
+            outlined
+            aria-label="Soundboard"
+            aria-expanded={!!cords}
+            aria-haspopup="menu"
+          >
+            <Icon size="400" src={Icons.BellRing} />
+          </IconButton>
+        )}
+      </TooltipProvider>
+    </PopOut>
   );
 }

src/app/features/common-settings/permissions/PowersEditor.tsx

@@ -147,6 +147,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
             <Text size="L400">Name</Text>
             <Input
               name="nameInput"
+              aria-label="Power level name"
               defaultValue={tag?.name}
               placeholder="Bot"
               size="300"
@@ -160,6 +161,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
             <Input
               defaultValue={power}
               name="powerInput"
+              aria-label="Power level value"
               size="300"
               variant={typeof power === 'number' ? 'SurfaceVariant' : 'Secondary'}
               radii="300"

src/app/features/common-settings/soundboard/Soundboard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { useRoom } from '../../../hooks/useRoom';
+import { RoomSoundboardPack, UserSoundboardPack } from '../../../components/soundboard-pack-view';
+
+type SoundboardProps = {
+  requestClose: () => void;
+};
+
+/**
+ * Soundboard management page (Room/Space settings). Mirrors the Emojis &
+ * Stickers page: a shared room/space pack (admin-editable, inherited by child
+ * rooms like emoji packs) plus the user's personal pack. A single default room
+ * pack (state key "") is used per room/space.
+ */
+export function Soundboard({ requestClose }: SoundboardProps) {
+  const room = useRoom();
+
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text as="h2" size="H3" truncate>
+              Soundboard
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <Box direction="Column" gap="200">
+                <Text size="L400">This room / space (shared)</Text>
+                <Text size="T200" priority="300">
+                  Clips here are shared with everyone, and inherited by every room under this space
+                  — just like emoji/sticker packs. Only members with permission can edit.
+                </Text>
+                {room && <RoomSoundboardPack room={room} stateKey="" />}
+              </Box>
+              <Box direction="Column" gap="200">
+                <Text size="L400">Personal</Text>
+                <Text size="T200" priority="300">
+                  Your own clips, available in every call and synced across your devices.
+                </Text>
+                <UserSoundboardPack />
+              </Box>
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/common-settings/soundboard/index.ts

@@ -0,0 +1 @@
+export * from './Soundboard';

src/app/features/room-settings/RoomSettings.tsx

@@ -13,6 +13,7 @@ import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { General } from './general';
 import { Members } from '../common-settings/members';
 import { EmojisStickers } from '../common-settings/emojis-stickers';
+import { Soundboard } from '../common-settings/soundboard';
 import { Permissions } from './permissions';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { useRoom } from '../../hooks/useRoom';
@@ -53,6 +54,11 @@ const BASE_MENU_ITEMS: RoomSettingsMenuItem[] = [
     name: 'Emojis & Stickers',
     icon: Icons.Smile,
   },
+  {
+    page: RoomSettingsPage.SoundboardPage,
+    name: 'Soundboard',
+    icon: Icons.Bell,
+  },
   {
     page: RoomSettingsPage.DeveloperToolsPage,
     name: 'Developer Tools',
@@ -226,6 +232,9 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
       {activePage === RoomSettingsPage.EmojisStickersPage && (
         <EmojisStickers requestClose={handlePageRequestClose} />
       )}
+      {activePage === RoomSettingsPage.SoundboardPage && (
+        <Soundboard requestClose={handlePageRequestClose} />
+      )}
       {activePage === RoomSettingsPage.DeveloperToolsPage && (
         <DeveloperTools requestClose={handlePageRequestClose} />
       )}

src/app/features/room/MediaGallery.tsx

@@ -186,8 +186,8 @@ function LightboxMedia({
       )}
       {media.status === 'ok' &&
         (item.msgtype === MsgType.Video ? (
-          // eslint-disable-next-line jsx-a11y/media-has-caption
           <video
+            aria-label="Video attachment"
             src={media.url}
             controls
             autoPlay
@@ -261,7 +261,6 @@ function Lightbox({
           escapeDeactivates: false,
         }}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div
           role="dialog"
           aria-modal
@@ -640,13 +639,15 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
         className={classNames(css.MediaGalleryDrawer, ContainerColor({ variant: 'Background' }))}
         shrink="No"
         direction="Column"
+        role="region"
+        aria-labelledby="media-gallery-title"
       >
         {/* Header */}
         <Header variant="Background" size="600" className={css.MediaGalleryHeader}>
           <Box grow="Yes" alignItems="Center" gap="200">
             <Icon size="200" src={Icons.Photo} />
             <Box grow="Yes">
-              <Text size="H4" truncate>
+              <Text id="media-gallery-title" size="H4" truncate>
                 Media Gallery
               </Text>
             </Box>

src/app/features/room/PollCreator.tsx

@@ -142,7 +142,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
                   placeholder="Ask a question…"
                   value={question}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuestion(e.target.value)}
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
                   autoFocus
                 />
               </Box>
@@ -151,7 +150,6 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
               <Box direction="Column" gap="200">
                 <Text size="L400">Options</Text>
                 {options.map((opt, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
                   <Box key={index} alignItems="Center" gap="200">
                     <Input
                       style={{ flex: 1 }}

src/app/features/room/Room.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
@@ -49,15 +49,46 @@ export function Room() {
     useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
+          // Skip when a composer already consumed Escape (it preventDefaults).
+          if (evt.defaultPrevented) return;
+          // Skip while a thread panel is open: listener registration order
+          // means this can run BEFORE the panel's own Escape handler, and the
+          // user's intent there is "close the panel", not "mark room read".
+          if (activeThreadId) return;
           markAsRead(mx, room.roomId, hideActivity);
         }
       },
-      [mx, room.roomId, hideActivity],
+      [mx, room.roomId, hideActivity, activeThreadId],
     ),
   );
 
   const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
 
+  // Thread panel and media gallery are mutually exclusive on every screen size:
+  // opening one closes the other. Detect the just-opened transition so whichever
+  // was opened most recently wins.
+  const prevThreadRef = useRef(activeThreadId);
+  const prevGalleryRef = useRef(galleryOpen);
+  useEffect(() => {
+    const threadJustOpened = Boolean(activeThreadId) && !prevThreadRef.current;
+    const galleryJustOpened = galleryOpen && !prevGalleryRef.current;
+    if (threadJustOpened && galleryOpen) {
+      setGalleryOpen(false);
+    } else if (galleryJustOpened && activeThreadId) {
+      setActiveThreadId(null);
+    }
+    prevThreadRef.current = activeThreadId;
+    prevGalleryRef.current = galleryOpen;
+  }, [activeThreadId, galleryOpen, setGalleryOpen, setActiveThreadId]);
+
+  // On non-desktop screens at most one right-side panel may show, priority
+  // thread > gallery > members. On desktop thread + members may coexist while
+  // thread + gallery stay mutually exclusive (via the effect above).
+  const isDesktop = screenSize === ScreenSize.Desktop;
+  const showThreadPanel = !callView && Boolean(activeThreadId);
+  const showGallery = !callView && galleryOpen && (isDesktop || !activeThreadId);
+  const showMembers = !callView && isDrawer && (isDesktop || (!activeThreadId && !galleryOpen));
+
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
@@ -86,7 +117,7 @@ export function Room() {
             <CallChatView />
           </>
         )}
-        {!callView && galleryOpen && (
+        {showGallery && (
           <>
             {screenSize === ScreenSize.Desktop && (
               <Line variant="Background" direction="Vertical" size="300" />
@@ -94,7 +125,7 @@ export function Room() {
             <MediaGallery key={room.roomId} room={room} onClose={() => setGalleryOpen(false)} />
           </>
         )}
-        {!callView && activeThreadId && (
+        {showThreadPanel && activeThreadId && (
           <>
             {screenSize === ScreenSize.Desktop && (
               <Line variant="Background" direction="Vertical" size="300" />
@@ -107,7 +138,7 @@ export function Room() {
             />
           </>
         )}
-        {!callView && isDrawer && (
+        {showMembers && (
           <>
             {screenSize === ScreenSize.Desktop && (
               <Line variant="Background" direction="Vertical" size="300" />

src/app/features/room/RoomInput.tsx

@@ -679,15 +679,23 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           submit();
         }
         if (isKeyHotkey('escape', evt)) {
-          evt.preventDefault();
+          // Only consume Escape (and stop it bubbling to the thread panel / room
+          // window handlers) when the composer actually has something to dismiss.
+          // If we did nothing, let Escape propagate so those handlers can run.
           if (autocompleteQuery) {
+            evt.preventDefault();
+            evt.stopPropagation();
             setAutocompleteQuery(undefined);
             return;
           }
-          setReplyDraft(undefined);
+          if (replyDraft) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            setReplyDraft(undefined);
+          }
         }
       },
-      [submit, setReplyDraft, enterForNewline, autocompleteQuery, isComposing],
+      [submit, replyDraft, setReplyDraft, enterForNewline, autocompleteQuery, isComposing],
     );
 
     const handleKeyUp: KeyboardEventHandler = useCallback(

src/app/features/room/RoomViewHeader.tsx

@@ -583,7 +583,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                           <FocusTrap
                             focusTrapOptions={{
                               initialFocus: false,
-                              returnFocusOnDeactivate: false,
                               clickOutsideDeactivates: true,
                               onDeactivate: () => setViewTopic(false),
                               escapeDeactivates: stopPropagation,

src/app/features/room/RoomViewTyping.css.ts

@@ -25,3 +25,16 @@ export const RoomViewTyping = style([
 export const TypingText = style({
   flexGrow: 1,
 });
+
+// Visually hidden but available to assistive technology.
+export const SrOnly = style({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});

src/app/features/room/RoomViewTyping.tsx

@@ -33,8 +33,21 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
       [typingMembers, myUserId, room],
     );
 
-    if (typingNames.length === 0) {
-      return null;
+    // A single, non-truncated string for assistive technology to announce.
+    // Computed even when empty so the live region can stay mounted (below) —
+    // a `role="status"` region added to the DOM together with its first text
+    // is not reliably announced by some screen readers.
+    let typingAnnouncement = '';
+    if (typingNames.length === 1) {
+      typingAnnouncement = `${typingNames[0]} is typing`;
+    } else if (typingNames.length === 2) {
+      typingAnnouncement = `${typingNames[0]} and ${typingNames[1]} are typing`;
+    } else if (typingNames.length === 3) {
+      typingAnnouncement = `${typingNames[0]}, ${typingNames[1]} and ${typingNames[2]} are typing`;
+    } else {
+      typingAnnouncement = `${typingNames[0]}, ${typingNames[1]}, ${typingNames[2]} and ${
+        typingNames.length - 3
+      } others are typing`;
     }
 
     const handleDropAll = () => {
@@ -50,83 +63,89 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
     };
 
     return (
-      <div style={{ position: 'relative' }} aria-live="polite" aria-atomic="false">
-        <Box
-          className={classNames(css.RoomViewTyping, className)}
-          alignItems="Center"
-          gap="400"
-          {...props}
-          ref={ref}
-        >
-          <TypingIndicator />
-          <Text className={css.TypingText} size="T300" truncate>
-            {typingNames.length === 1 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' is typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 2 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length > 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames.length - 3} others</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-          </Text>
-          <IconButton
-            title="Drop Typing Status"
-            aria-label="Drop typing status"
-            size="300"
-            radii="Pill"
-            onClick={handleDropAll}
+      <div style={{ position: 'relative' }}>
+        {/* Persistently mounted so the FIRST "X is typing" is announced. */}
+        <span className={css.SrOnly} role="status" aria-live="polite" aria-atomic="true">
+          {typingAnnouncement}
+        </span>
+        {typingNames.length > 0 && (
+          <Box
+            className={classNames(css.RoomViewTyping, className)}
+            alignItems="Center"
+            gap="400"
+            {...props}
+            ref={ref}
           >
-            <Icon size="50" src={Icons.Cross} />
-          </IconButton>
-        </Box>
+            <TypingIndicator />
+            <Text className={css.TypingText} size="T300" truncate aria-hidden>
+              {typingNames.length === 1 && (
+                <>
+                  <b>{typingNames[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' is typing...'}
+                  </Text>
+                </>
+              )}
+              {typingNames.length === 2 && (
+                <>
+                  <b>{typingNames[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{typingNames[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are typing...'}
+                  </Text>
+                </>
+              )}
+              {typingNames.length === 3 && (
+                <>
+                  <b>{typingNames[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{typingNames[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{typingNames[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are typing...'}
+                  </Text>
+                </>
+              )}
+              {typingNames.length > 3 && (
+                <>
+                  <b>{typingNames[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{typingNames[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{typingNames[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{typingNames.length - 3} others</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are typing...'}
+                  </Text>
+                </>
+              )}
+            </Text>
+            <IconButton
+              title="Drop Typing Status"
+              aria-label="Drop typing status"
+              size="300"
+              radii="Pill"
+              onClick={handleDropAll}
+            >
+              <Icon size="50" src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        )}
       </div>
     );
   },

src/app/features/room/ScheduledMessagesTray.tsx

@@ -33,6 +33,7 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
   const [scheduledMessages, setScheduledMessages] = useAtom(scheduledMessagesAtom);
   const [expanded, setExpanded] = useState(false);
   const [cancelling, setCancelling] = useState<Set<string>>(new Set());
+  const [cancelErrors, setCancelErrors] = useState<Set<string>>(new Set());
 
   const messages = useMemo(() => scheduledMessages.get(roomId) ?? [], [scheduledMessages, roomId]);
 
@@ -68,12 +69,17 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
     async (msg: ScheduledMessage) => {
       if (cancelling.has(msg.delayId)) return;
       setCancelling((prev) => new Set(prev).add(msg.delayId));
+      setCancelErrors((prev) => {
+        if (!prev.has(msg.delayId)) return prev;
+        const next = new Set(prev);
+        next.delete(msg.delayId);
+        return next;
+      });
       try {
         await cancelScheduledMessage(mx, msg.delayId);
-      } catch {
-        // If cancellation fails on the server, still remove locally
-        // since the user intends to remove it
-      } finally {
+        // Only prune local state once the server confirms cancellation. If we
+        // removed it optimistically the still-live delayed event would fire and
+        // the "cancelled" message would send anyway.
         setScheduledMessages((prev) => {
           const next = new Map(prev);
           const current = next.get(roomId) ?? [];
@@ -85,6 +91,11 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
           }
           return next;
         });
+      } catch {
+        // Keep the item (still cancellable) and surface an inline error; the
+        // delayed event is still scheduled on the server.
+        setCancelErrors((prev) => new Set(prev).add(msg.delayId));
+      } finally {
         setCancelling((prev) => {
           const next = new Set(prev);
           next.delete(msg.delayId);
@@ -131,41 +142,52 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
           {messages.map((msg) => (
             <Box
               key={msg.delayId}
-              alignItems="Center"
-              gap="200"
+              direction="Column"
               style={{
                 padding: `${config.space.S100} ${config.space.S300}`,
                 borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
               }}
             >
-              <Text
-                size="T200"
-                priority="400"
-                style={{
-                  flex: 1,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
-              </Text>
-              <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
-                {formatSendAt(msg.sendAt)}
-              </Text>
-              <IconButton
-                size="300"
-                radii="300"
-                variant="SurfaceVariant"
-                aria-label="Cancel scheduled message"
-                disabled={cancelling.has(msg.delayId)}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleCancel(msg);
-                }}
-              >
-                <Icon src={Icons.Cross} size="50" />
-              </IconButton>
+              <Box alignItems="Center" gap="200">
+                <Text
+                  size="T200"
+                  priority="400"
+                  style={{
+                    flex: 1,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {typeof msg.content.body === 'string'
+                    ? (msg.content.body as string)
+                    : '(message)'}
+                </Text>
+                <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
+                  {formatSendAt(msg.sendAt)}
+                </Text>
+                <IconButton
+                  size="300"
+                  radii="300"
+                  variant="SurfaceVariant"
+                  aria-label="Cancel scheduled message"
+                  disabled={cancelling.has(msg.delayId)}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCancel(msg);
+                  }}
+                >
+                  <Icon src={Icons.Cross} size="50" />
+                </IconButton>
+              </Box>
+              {cancelErrors.has(msg.delayId) && (
+                <Text
+                  size="T200"
+                  style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
+                >
+                  Could not cancel this message. Try again.
+                </Text>
+              )}
             </Box>
           ))}
         </Box>

src/app/features/room/message/ForwardMessageDialog.tsx

@@ -1,8 +1,11 @@
-import React, { ChangeEvent, useCallback, useState } from 'react';
+import React, { ChangeEvent, useCallback, useMemo, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Avatar,
   Box,
+  Button,
+  Checkbox,
+  color,
   config,
   Header,
   Icon,
@@ -28,15 +31,17 @@ import { mDirectAtom } from '../../../state/mDirectList';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
+import { buildForwardContent } from './forwardContent';
 
 type RoomRowProps = {
   room: Room;
   dm: boolean;
   useAuthentication: boolean;
-  onClick: () => void;
+  selected: boolean;
+  onToggle: () => void;
   sending: boolean;
 };
-function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps) {
+function RoomRow({ room, dm, useAuthentication, selected, onToggle, sending }: RoomRowProps) {
   const mx = useMatrixClient();
   const avatarMxc = room.getMxcAvatarUrl();
   const avatarUrl = avatarMxc
@@ -47,8 +52,20 @@ function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps
     <MenuItem
       size="300"
       radii="300"
-      onClick={onClick}
+      onClick={onToggle}
       disabled={sending}
+      after={
+        <Checkbox
+          checked={selected}
+          readOnly
+          variant="Primary"
+          disabled={sending}
+          onClick={(evt) => {
+            evt.stopPropagation();
+            onToggle();
+          }}
+        />
+      }
       before={
         <Avatar size="200" radii="300">
           <RoomAvatar
@@ -86,43 +103,95 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
   const modalStyle = useModalStyle(400);
   const directs = useAtomValue(mDirectAtom);
   const useAuthentication = useMediaAuthentication();
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const [query, setQuery] = useState('');
   const [sending, setSending] = useState(false);
   const [sentTo, setSentTo] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Selection persists across query changes: a room selected then filtered out
+  // of the rendered slice stays selected.
+  const [selectedRoomIds, setSelectedRoomIds] = useState<Set<string>>(new Set());
 
-  const allRooms = mx
-    .getRooms()
-    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
-    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));
-
-  const filtered = query
-    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
-    : allRooms;
-
-  const forward = useCallback(
-    async (room: Room) => {
-      if (sending) return;
-      setSending(true);
-      const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
-      delete fwdContent['m.relates_to'];
-      try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        await (mx as any).sendEvent(room.roomId, mEvent.getType(), fwdContent);
-        setSentTo(room.name);
-        setTimeout(onClose, 1400);
-      } catch {
-        setSending(false);
+  const toggleRoom = useCallback((roomId: string) => {
+    setSelectedRoomIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(roomId)) {
+        next.delete(roomId);
+      } else {
+        next.add(roomId);
       }
-    },
-    [mx, mEvent, onClose, sending],
+      return next;
+    });
+  }, []);
+
+  const allRooms = useMemo(
+    () =>
+      mx
+        .getRooms()
+        .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
+        .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0)),
+    [mx],
   );
 
+  const filtered = useMemo(() => {
+    if (!query) return allRooms;
+    const q = query.toLowerCase();
+    return allRooms.filter((r) => r.name.toLowerCase().includes(q));
+  }, [allRooms, query]);
+
+  const sendToSelected = useCallback(async () => {
+    if (sending || selectedRoomIds.size === 0) return;
+    const fwdContent = buildForwardContent(mx, mEvent);
+    if (!fwdContent) {
+      setError('This message could not be decrypted, so it cannot be forwarded.');
+      return;
+    }
+    setSending(true);
+    setError(null);
+
+    const ids = [...selectedRoomIds];
+    const results = await Promise.allSettled(
+      // threadId-aware overload (P3-8): explicit null = send to the main timeline.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ids.map((id) => mx.sendEvent(id, null, mEvent.getType() as any, fwdContent)),
+    );
+
+    const failedIds: string[] = [];
+    const failedNames: string[] = [];
+    results.forEach((result, i) => {
+      if (result.status === 'rejected') {
+        failedIds.push(ids[i]);
+        failedNames.push(mx.getRoom(ids[i])?.name ?? ids[i]);
+      }
+    });
+
+    const total = ids.length;
+    const failed = failedNames.length;
+    const succeeded = total - failed;
+
+    if (failed === 0) {
+      setSentTo(`Forwarded to ${total} ${total === 1 ? 'room' : 'rooms'}`);
+      setTimeout(onClose, 1400);
+      return;
+    }
+
+    setSending(false);
+    // Prune to only the failures so a retry doesn't re-send to rooms that
+    // already succeeded (duplicate messages).
+    setSelectedRoomIds(new Set(failedIds));
+    if (succeeded === 0) {
+      setError('Failed to forward. Try again.');
+      return;
+    }
+    setError(`Forwarded to ${succeeded}/${total}. Failed: ${failedNames.join(', ')}.`);
+  }, [mx, mEvent, onClose, sending, selectedRoomIds]);
+
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            initialFocus: () => searchInputRef.current ?? false,
             onDeactivate: onClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
@@ -153,8 +222,13 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
               </IconButton>
             </Header>
             {!sentTo && (
-              <Box shrink="No" style={{ padding: `${config.space.S200} ${config.space.S400}` }}>
+              <Box
+                shrink="No"
+                direction="Column"
+                style={{ padding: `${config.space.S200} ${config.space.S400}` }}
+              >
                 <Input
+                  ref={searchInputRef}
                   variant="Background"
                   size="400"
                   radii="400"
@@ -163,6 +237,14 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
                   value={query}
                   onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
                 />
+                {error && (
+                  <Text
+                    size="T200"
+                    style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
+                  >
+                    {error}
+                  </Text>
+                )}
               </Box>
             )}
             <Line size="300" />
@@ -174,50 +256,72 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
                 gap="300"
                 style={{ padding: config.space.S400 }}
               >
-                <Text size="T300">✓ Forwarded to {sentTo}</Text>
+                <Text size="T300">✓ {sentTo}</Text>
               </Box>
             ) : (
-              <Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
-                <Scroll size="300" hideTrack visibility="Hover">
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
-                    {filtered.slice(0, 60).map((room) => (
-                      <RoomRow
-                        key={room.roomId}
-                        room={room}
-                        dm={directs.has(room.roomId)}
-                        useAuthentication={useAuthentication}
-                        onClick={() => forward(room)}
-                        sending={sending}
-                      />
-                    ))}
-                    {filtered.length === 0 && (
-                      <Box
-                        alignItems="Center"
-                        justifyContent="Center"
-                        style={{ padding: config.space.S400 }}
-                      >
-                        <Text size="T300" priority="300">
-                          No rooms found
-                        </Text>
-                      </Box>
-                    )}
-                  </Box>
-                </Scroll>
-                {sending && (
-                  <Box
-                    alignItems="Center"
-                    justifyContent="Center"
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      background: 'rgba(0,0,0,0.35)',
-                      borderRadius: config.radii.R500,
-                    }}
+              <>
+                <Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
+                  <Scroll size="300" hideTrack visibility="Hover">
+                    <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+                      {filtered.slice(0, 60).map((room) => (
+                        <RoomRow
+                          key={room.roomId}
+                          room={room}
+                          dm={directs.has(room.roomId)}
+                          useAuthentication={useAuthentication}
+                          selected={selectedRoomIds.has(room.roomId)}
+                          onToggle={() => toggleRoom(room.roomId)}
+                          sending={sending}
+                        />
+                      ))}
+                      {filtered.length === 0 && (
+                        <Box
+                          alignItems="Center"
+                          justifyContent="Center"
+                          style={{ padding: config.space.S400 }}
+                        >
+                          <Text size="T300" priority="300">
+                            No rooms found
+                          </Text>
+                        </Box>
+                      )}
+                    </Box>
+                  </Scroll>
+                  {sending && (
+                    <Box
+                      alignItems="Center"
+                      justifyContent="Center"
+                      style={{
+                        position: 'absolute',
+                        inset: 0,
+                        background: 'rgba(0,0,0,0.35)',
+                        borderRadius: config.radii.R500,
+                      }}
+                    >
+                      <Spinner variant="Secondary" size="400" />
+                    </Box>
+                  )}
+                </Box>
+                <Line size="300" />
+                <Box
+                  shrink="No"
+                  direction="Column"
+                  style={{ padding: `${config.space.S200} ${config.space.S400}` }}
+                >
+                  <Button
+                    variant="Primary"
+                    size="400"
+                    radii="400"
+                    disabled={selectedRoomIds.size === 0 || sending}
+                    before={sending && <Spinner variant="Primary" fill="Solid" size="200" />}
+                    onClick={sendToSelected}
                   >
-                    <Spinner variant="Secondary" size="400" />
-                  </Box>
-                )}
-              </Box>
+                    <Text size="B400">
+                      Send to {selectedRoomIds.size} {selectedRoomIds.size === 1 ? 'room' : 'rooms'}
+                    </Text>
+                  </Button>
+                </Box>
+              </>
             )}
           </Modal>
         </FocusTrap>

src/app/features/room/message/Message.tsx

@@ -56,6 +56,7 @@ import {
   getMemberDisplayName,
 } from '../../../utils/room';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { messageAriaLabel } from '../../../utils/a11y';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -972,6 +973,10 @@ export const Message = React.memo(
             [MsgAppearClass]: playAppear,
             [MentionHighlightPulse]: playMentionPulse,
           })}
+          role="article"
+          aria-label={
+            collapse ? messageAriaLabel(senderDisplayName, mEvent.getTs(), hour24Clock) : undefined
+          }
           tabIndex={0}
           space={messageSpacing}
           collapse={collapse}

src/app/features/room/message/MessageEditor.tsx

@@ -51,7 +51,13 @@ import { UseStateProvider } from '../../../components/UseStateProvider';
 import { EmojiBoard } from '../../../components/emoji-board';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
+import {
+  getEditedEvent,
+  getMemberDisplayName,
+  getMentionContent,
+  trimReplyFromFormattedBody,
+} from '../../../utils/room';
+import { getMxIdLocalPart } from '../../../utils/matrix';
 import { mobileOrTablet } from '../../../utils/user-agent';
 import { useComposingCheck } from '../../../hooks/useComposingCheck';
 
@@ -66,6 +72,12 @@ export const MessageEditor = as<'div', MessageEditorProps>(
   ({ room, roomId, mEvent, imagePackRooms, onCancel, ...props }, ref) => {
     const mx = useMatrixClient();
     const editor = useEditor();
+    // Accessible name for the edit textbox so screen readers announce which
+    // message is being edited (a11y, P3-4).
+    const editSenderId = mEvent.getSender();
+    const editSenderName = editSenderId
+      ? (getMemberDisplayName(room, editSenderId) ?? getMxIdLocalPart(editSenderId) ?? editSenderId)
+      : '';
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [globalToolbar] = useSetting(settingsAtom, 'editorToolbar');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
@@ -259,6 +271,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         <CustomEditor
           editor={editor}
           placeholder="Edit message..."
+          ariaLabel={editSenderId ? `Editing message from ${editSenderName}` : 'Edit message'}
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           bottom={

src/app/features/room/message/Reactions.tsx

@@ -106,7 +106,6 @@ export const Reactions = as<'div', ReactionsProps>(
               <FocusTrap
                 focusTrapOptions={{
                   initialFocus: false,
-                  returnFocusOnDeactivate: false,
                   onDeactivate: () => setViewer(false),
                   clickOutsideDeactivates: true,
                   escapeDeactivates: stopPropagation,

src/app/features/room/message/RemindMeDialog.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Box,
   Button,
+  color,
   config,
   Dialog,
   Header,
@@ -43,15 +44,25 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
   const modalStyle = useModalStyle(320);
   const { addReminder } = useReminders();
   const presets = useMemo(() => getPresets(), []);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   const handlePick = async (ms: number) => {
-    await addReminder({
-      roomId,
-      eventId,
-      timestamp: Date.now() + ms,
-      message: previewText || 'Reminder',
-    });
-    onClose();
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await addReminder({
+        roomId,
+        eventId,
+        timestamp: Date.now() + ms,
+        message: previewText || 'Reminder',
+      });
+      onClose();
+    } catch {
+      setBusy(false);
+      setError('Could not set reminder. Try again.');
+    }
   };
 
   return (
@@ -108,6 +119,7 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
                   variant="Secondary"
                   fill="Soft"
                   radii="300"
+                  disabled={busy}
                   onClick={() => handlePick(p.ms)}
                 >
                   <Text size="B300" truncate>
@@ -115,6 +127,14 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
                   </Text>
                 </Button>
               ))}
+              {error && (
+                <Text
+                  size="T200"
+                  style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
+                >
+                  {error}
+                </Text>
+              )}
             </Box>
           </Dialog>
         </FocusTrap>

src/app/features/room/message/forwardContent.test.ts

@@ -0,0 +1,138 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import { buildForwardContent } from './forwardContent';
+
+// Pure content builder buildForwardContent: refuses undecryptable events, forwards
+// the latest edit (`m.new_content`), and strips reply fallbacks + `m.relates_to`.
+// MatrixClient / MatrixEvent are mocked minimally. getEditedEvent reads edits off
+// `timelineSet.relations.getChildEventsForEvent(...).getRelations()`, so the base
+// client returns no child edits and the edit test injects one.
+
+const SENDER = '@me:example.org';
+
+type EventOptions = {
+  content?: Record<string, unknown>;
+  type?: string;
+  id?: string;
+  roomId?: string;
+  decryptionFailure?: boolean;
+  ts?: number;
+};
+
+const makeEvent = (options: EventOptions = {}): MatrixEvent => {
+  const {
+    content = {},
+    type = 'm.room.message',
+    id = '$evt:example.org',
+    roomId = '!room:example.org',
+    decryptionFailure = false,
+    ts = 0,
+  } = options;
+
+  return {
+    getContent: () => content,
+    getType: () => type,
+    getId: () => id,
+    getRoomId: () => roomId,
+    getSender: () => SENDER,
+    getTs: () => ts,
+    isDecryptionFailure: () => decryptionFailure,
+  } as unknown as MatrixEvent;
+};
+
+// Base client: the timeline reports no `m.replace` edits, so the original content
+// is forwarded unchanged.
+const makeClient = (): MatrixClient =>
+  ({
+    getRoom: () => ({
+      getUnfilteredTimelineSet: () => ({
+        relations: {
+          getChildEventsForEvent: () => null,
+        },
+      }),
+    }),
+  }) as unknown as MatrixClient;
+
+test('plain text forwards the body and strips m.relates_to', () => {
+  const mx = makeClient();
+  const mEvent = makeEvent({
+    content: {
+      msgtype: 'm.text',
+      body: 'hello world',
+      'm.relates_to': { rel_type: 'm.thread', event_id: '$root:example.org' },
+    },
+  });
+
+  const content = buildForwardContent(mx, mEvent);
+
+  assert.ok(content);
+  assert.equal(content.body, 'hello world');
+  assert.equal(content.msgtype, 'm.text');
+  assert.equal(content['m.relates_to'], undefined);
+});
+
+test('reply quote is stripped from body and formatted_body', () => {
+  const mx = makeClient();
+  const mEvent = makeEvent({
+    content: {
+      msgtype: 'm.text',
+      body: '> <@alice:example.org> original\n\nmy reply',
+      format: 'org.matrix.custom.html',
+      formatted_body: '<mx-reply><blockquote>original</blockquote></mx-reply>my reply',
+      'm.relates_to': { 'm.in_reply_to': { event_id: '$root:example.org' } },
+    },
+  });
+
+  const content = buildForwardContent(mx, mEvent);
+
+  assert.ok(content);
+  assert.equal(content.body, 'my reply');
+  assert.equal(content.formatted_body, 'my reply');
+  assert.equal(content['m.relates_to'], undefined);
+});
+
+test('decryption failure returns undefined', () => {
+  const mx = makeClient();
+  const mEvent = makeEvent({
+    content: { msgtype: 'm.bad.encrypted' },
+    decryptionFailure: true,
+  });
+
+  assert.equal(buildForwardContent(mx, mEvent), undefined);
+});
+
+test('edited message forwards m.new_content', () => {
+  const mEvent = makeEvent({
+    content: {
+      msgtype: 'm.text',
+      body: 'original body',
+      'm.relates_to': { rel_type: 'm.thread', event_id: '$root:example.org' },
+    },
+  });
+
+  // The latest `m.replace` edit carries the new content under `m.new_content`.
+  const editEvent = makeEvent({
+    content: { 'm.new_content': { msgtype: 'm.text', body: 'edited body' } },
+    ts: 100,
+  });
+  const mx = {
+    getRoom: () => ({
+      getUnfilteredTimelineSet: () => ({
+        relations: {
+          getChildEventsForEvent: () => ({
+            getRelations: () => [editEvent],
+          }),
+        },
+      }),
+    }),
+  } as unknown as MatrixClient;
+
+  const content = buildForwardContent(mx, mEvent);
+
+  assert.ok(content);
+  assert.equal(content.body, 'edited body');
+  assert.equal(content.msgtype, 'm.text');
+  assert.equal(content['m.new_content'], undefined);
+  assert.equal(content['m.relates_to'], undefined);
+});

src/app/features/room/message/forwardContent.ts

@@ -0,0 +1,39 @@
+import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import { getEditedEvent, trimReplyFromBody, trimReplyFromFormattedBody } from '../../../utils/room';
+
+/**
+ * Build the content to forward:
+ * - undecryptable events are refused (would forward `m.bad.encrypted` junk)
+ * - edited messages forward the LATEST edit (`m.new_content`), not the
+ *   original pre-edit body
+ * - reply fallbacks (`> <@user> …` quote + `<mx-reply>` block) are stripped
+ *   along with the `m.relates_to` reply/thread relation, so the forwarded
+ *   message stands alone in the target room
+ */
+export function buildForwardContent(
+  mx: MatrixClient,
+  mEvent: MatrixEvent,
+): Record<string, unknown> | undefined {
+  if (mEvent.isDecryptionFailure()) return undefined;
+
+  let content = { ...mEvent.getContent() };
+
+  const eventId = mEvent.getId();
+  const room = mx.getRoom(mEvent.getRoomId());
+  if (eventId && room) {
+    const editedEvent = getEditedEvent(eventId, mEvent, room.getUnfilteredTimelineSet());
+    const newContent = editedEvent?.getContent()['m.new_content'];
+    if (newContent && typeof newContent === 'object') {
+      content = { ...(newContent as Record<string, unknown>) };
+    }
+  }
+
+  delete content['m.relates_to'];
+  if (typeof content.body === 'string') {
+    content.body = trimReplyFromBody(content.body);
+  }
+  if (typeof content.formatted_body === 'string') {
+    content.formatted_body = trimReplyFromFormattedBody(content.formatted_body);
+  }
+  return content;
+}

src/app/features/room/thread/ThreadPanel.tsx

@@ -123,6 +123,10 @@ export function ThreadPanel({ room, threadId, requestClose }: ThreadPanelProps)
     useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
+          // The composer preventDefaults Escape when it consumes it (dismissing
+          // autocomplete / clearing a reply draft). Don't close the panel in
+          // that case — only when Escape wasn't already handled.
+          if (evt.defaultPrevented) return;
           evt.preventDefault();
           evt.stopPropagation();
           requestClose();

src/app/features/room/thread/ThreadTimeline.css.ts

@@ -11,6 +11,15 @@ export const ThreadTimelineContent = style({
   padding: `${config.space.S400} 0`,
 });
 
+export const ThreadTimelineFloat = style({
+  position: 'absolute',
+  bottom: config.space.S400,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 1,
+  minWidth: 'max-content',
+});
+
 export const ThreadCentered = style({
   height: '100%',
   padding: config.space.S700,

src/app/features/room/thread/ThreadTimeline.tsx

@@ -29,7 +29,7 @@ import { Editor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { Badge, Box, Line, Scroll, Spinner, Text, color, config } from 'folds';
+import { Badge, Box, Chip, Icon, Icons, Line, Scroll, Spinner, Text, color, config } from 'folds';
 import classNames from 'classnames';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../../utils/matrix';
@@ -459,6 +459,14 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
     }
   }, [scrollToBottomCount]);
 
+  const handleJumpToBottom = useCallback(() => {
+    scrollToBottomRef.current.count += 1;
+    scrollToBottomRef.current.smooth = true;
+    // Flip atBottom so the layout effect re-runs (count re-read) and live
+    // events resume sticking to the bottom.
+    setAtBottom(true);
+  }, []);
+
   // Scroll in-place editor into view.
   useEffect(() => {
     if (editId) {
@@ -949,6 +957,19 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
           <span ref={atBottomAnchorRef} />
         </Box>
       </Scroll>
+      {!atBottom && (
+        <Box className={css.ThreadTimelineFloat} justifyContent="Center" alignItems="Center">
+          <Chip
+            variant="SurfaceVariant"
+            radii="Pill"
+            outlined
+            before={<Icon size="50" src={Icons.ArrowBottom} />}
+            onClick={handleJumpToBottom}
+          >
+            <Text size="L400">Jump to Latest</Text>
+          </Chip>
+        </Box>
+      )}
       {editHistoryEvent && (
         <EditHistoryModal
           room={room}

src/app/features/room/thread/threadSummaryData.test.ts

@@ -1,7 +1,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { EventStatus, MatrixEvent, RelationType } from 'matrix-js-sdk';
-import { getThreadSummary, isPendingThreadReply } from './threadSummary';
+import { getThreadSummary, isPendingThreadReply } from './threadSummaryData';
 
 // getThreadSummary reads either the live Thread (preferred) or the
 // server-aggregated `m.thread` bundle. We stub only the members it touches and

src/app/features/room/thread/useThread.ts

@@ -12,7 +12,7 @@ import {
   ThreadEvent,
 } from 'matrix-js-sdk';
 import { getLinkedTimelines } from '../RoomTimeline';
-import { isPendingThreadReply } from './threadSummary';
+import { isPendingThreadReply } from './threadSummaryData';
 
 /**
  * Resolve (or bootstrap) the live {@link Thread} for a root event.

src/app/features/search/Search.tsx

@@ -247,7 +247,6 @@ export function Search({ requestClose }: SearchProps) {
         <FocusTrap
           focusTrapOptions={{
             initialFocus: () => inputRef.current,
-            returnFocusOnDeactivate: false,
             allowOutsideClick: true,
             clickOutsideDeactivates: true,
             onDeactivate: requestClose,
@@ -257,7 +256,13 @@ export function Search({ requestClose }: SearchProps) {
             },
           }}
         >
-          <Modal size="400" style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}>
+          <Modal
+            size="400"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Search"
+            style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}
+          >
             <Box
               shrink="No"
               style={{ padding: config.space.S400, paddingBottom: 0 }}
@@ -270,6 +275,7 @@ export function Search({ requestClose }: SearchProps) {
                 radii="400"
                 outlined
                 placeholder="Search"
+                aria-label="Search rooms"
                 before={<Icon size="200" src={Icons.Search} />}
                 onChange={handleInputChange}
                 onKeyDown={handleInputKeyDown}

src/app/features/settings/general/General.tsx

@@ -102,7 +102,7 @@ import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
 import { SequenceCardStyle } from '../styles.css';
 import { useTauriUpdater } from '../../../hooks/useTauriUpdater';
-import { isTauri as isTauriEnv } from '../../../hooks/useTauri';
+import { isTauri as isTauriEnv, invokeTauri, tauriInvoke } from '../../../hooks/useTauri';
 import { customWindowChromeAtom } from '../../../state/customWindowChrome';
 import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { playCallJoinSound } from '../../../utils/callSounds';
@@ -118,12 +118,53 @@ import { SettingsSelect } from '../../../components/settings-select/SettingsSele
 function DesktopChromeSetting() {
   const [customChrome, setCustomChrome] = useAtom(customWindowChromeAtom);
   if (!isTauriEnv()) return null;
+  // Persist the flag, then reload so the window layout is rebuilt from scratch.
+  // Toggling live reflows the whole app while the room timeline is mounted, which
+  // resizes its virtualized scroll container and triggers runaway back-pagination
+  // (the "screen expands + auto-scrolls into the past" bug). A reload applies the
+  // chrome cleanly against a fresh, correct layout.
+  const handleToggle = (value: boolean) => {
+    setCustomChrome(value);
+    window.location.reload();
+  };
   return (
     <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
       <SettingTile
         title="Custom Window Chrome (Beta)"
-        description="Replace the system title bar with a Lotus-styled one. Desktop only — toggles instantly."
-        after={<Switch variant="Primary" value={customChrome} onChange={setCustomChrome} />}
+        description="Replace the system title bar with a Lotus-styled one. Desktop only — reloads to apply."
+        after={<Switch variant="Primary" value={customChrome} onChange={handleToggle} />}
+      />
+    </SequenceCard>
+  );
+}
+
+/**
+ * P6-1 — "Launch on login" toggle (desktop only). Renders nothing in the
+ * browser. Reads the current state from the `autostart` plugin on mount and
+ * enables/disables it via the plugin commands when flipped. Not backed by an
+ * atom — the OS registration is the source of truth, mirrored into local state.
+ */
+function AutostartSetting() {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    tauriInvoke()?.('plugin:autostart|is_enabled')
+      .then((value) => setEnabled(value === true))
+      .catch(() => undefined);
+  }, []);
+
+  const handleChange = (value: boolean) => {
+    invokeTauri(value ? 'plugin:autostart|enable' : 'plugin:autostart|disable');
+    setEnabled(value);
+  };
+
+  if (!isTauriEnv()) return null;
+  return (
+    <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SettingTile
+        title="Launch on login"
+        description="Start Lotus Chat automatically when you sign in to your computer."
+        after={<Switch variant="Primary" value={enabled} onChange={handleChange} />}
       />
     </SequenceCard>
   );
@@ -443,6 +484,7 @@ function Appearance() {
       </SequenceCard>
 
       <DesktopChromeSetting />
+      <AutostartSetting />
 
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
@@ -531,6 +573,7 @@ function Appearance() {
               Intensity: {nightLightOpacity}%
             </Text>
             <input
+              aria-label="Night light intensity"
               type="range"
               min={5}
               max={80}
@@ -1663,6 +1706,7 @@ function Calls() {
                     <Text size="T200">{callDenoiseGateThreshold} dB</Text>
                   </Box>
                   <input
+                    aria-label="Noise gate threshold"
                     type="range"
                     min="-100"
                     max="0"

src/app/features/shortcuts/KeyboardShortcutsDialog.css.ts

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const ShortcutList = style([
+  DefaultReset,
+  {
+    margin: 0,
+  },
+]);
+
+export const ShortcutRow = style({
+  padding: `${config.space.S100} 0`,
+});
+
+export const ShortcutTerm = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+  },
+]);
+
+export const ShortcutKeys = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    gap: config.space.S100,
+    flexShrink: 0,
+  },
+]);
+
+export const Kbd = style([
+  DefaultReset,
+  {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: toRem(20),
+    padding: `0 ${config.space.S200}`,
+    height: toRem(24),
+    fontFamily: 'inherit',
+    fontSize: toRem(12),
+    lineHeight: toRem(24),
+    color: color.SurfaceVariant.OnContainer,
+    backgroundColor: color.SurfaceVariant.Container,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R300,
+  },
+]);

src/app/features/shortcuts/KeyboardShortcutsDialog.tsx

@@ -0,0 +1,208 @@
+import React, { useCallback } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { atom, useAtom, useSetAtom } from 'jotai';
+import {
+  Box,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
+import { stopPropagation } from '../../utils/keyboard';
+import { editableActiveElement } from '../../utils/dom';
+import { useKeyDown } from '../../hooks/useKeyDown';
+import { useModalStyle } from '../../hooks/useModalStyle';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { isMacOS } from '../../utils/user-agent';
+import { KeySymbol } from '../../utils/key-symbol';
+import * as css from './KeyboardShortcutsDialog.css';
+
+/** Global open-state for the keyboard shortcuts help dialog. */
+export const keyboardShortcutsDialogAtom = atom<boolean>(false);
+
+/** Read/control the keyboard shortcuts dialog open-state. */
+export function useKeyboardShortcutsDialog() {
+  const [open, setOpen] = useAtom(keyboardShortcutsDialogAtom);
+  const openDialog = useCallback(() => setOpen(true), [setOpen]);
+  const closeDialog = useCallback(() => setOpen(false), [setOpen]);
+  return { open, openDialog, closeDialog };
+}
+
+/**
+ * Registers the global `Shift + /` (`?`) shortcut that opens the keyboard
+ * shortcuts help dialog. Ignored while the user is typing into an input,
+ * textarea or contenteditable so it never steals a literal `?` character.
+ *
+ * Mount once in the client shell (e.g. `ClientNonUIFeatures`).
+ */
+export function useKeyboardShortcutsTrigger() {
+  const setOpen = useSetAtom(keyboardShortcutsDialogAtom);
+  useKeyDown(
+    window,
+    useCallback(
+      (evt: KeyboardEvent) => {
+        // Never intercept `?` while the user is typing into a field/editor.
+        if (editableActiveElement()) return;
+        // `?` is produced by Shift + `/` on the common layouts.
+        if (evt.key === '?') {
+          evt.preventDefault();
+          // Stop RoomView's window-level "type any char → focus composer"
+          // handler from also firing — otherwise focus lands in the composer
+          // behind the dialog and Escape gets swallowed by the contenteditable.
+          evt.stopImmediatePropagation();
+          setOpen(true);
+        }
+      },
+      [setOpen],
+    ),
+  );
+}
+
+type ShortcutRow = {
+  description: string;
+  keys: string[];
+};
+
+type ShortcutSection = {
+  title: string;
+  rows: ShortcutRow[];
+};
+
+function ShortcutKeys({ keys }: { keys: string[] }) {
+  return (
+    <Box as="dd" className={css.ShortcutKeys}>
+      {keys.map((key, index) => (
+        <kbd key={`${key}-${index}`} className={css.Kbd}>
+          {key}
+        </kbd>
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * Accessible keyboard shortcuts help dialog. Renders (as a modal overlay) only
+ * while `keyboardShortcutsDialogAtom` is `true`. Open it with the `?` shortcut
+ * (see `useKeyboardShortcutsTrigger`) or via `useKeyboardShortcutsDialog`.
+ */
+export function KeyboardShortcutsDialog() {
+  const { open, closeDialog } = useKeyboardShortcutsDialog();
+  const modalStyle = useModalStyle(480);
+  const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
+
+  const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
+
+  if (!open) return null;
+
+  const sections: ShortcutSection[] = [
+    {
+      title: 'General',
+      rows: [
+        { description: 'Show keyboard shortcuts', keys: ['?'] },
+        { description: 'Close open panel, otherwise mark room as read', keys: [KeySymbol.Escape] },
+      ],
+    },
+    {
+      title: 'Composer',
+      rows: [
+        { description: 'Focus the message composer', keys: ['Any character'] },
+        {
+          description: 'Send message',
+          keys: enterForNewline ? [modKey, 'Enter'] : ['Enter'],
+        },
+        {
+          description: 'Insert a new line',
+          keys: enterForNewline ? ['Enter'] : [KeySymbol.Shift, 'Enter'],
+        },
+        { description: 'Send message (always)', keys: [modKey, 'Enter'] },
+      ],
+    },
+    {
+      title: 'Messages',
+      rows: [
+        { description: 'Reveal message actions (react, reply, more)', keys: ['Hover / focus'] },
+      ],
+    },
+  ];
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: closeDialog,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog
+            variant="Surface"
+            aria-labelledby="keyboard-shortcuts-dialog-title"
+            style={modalStyle}
+          >
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text as="h2" size="H4" id="keyboard-shortcuts-dialog-title">
+                  Keyboard Shortcuts
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={closeDialog} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Scroll size="300" hideTrack visibility="Hover">
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="500">
+                {sections.map((section, sectionIndex) => (
+                  <Box key={section.title} direction="Column" gap="300">
+                    {sectionIndex > 0 && <Line variant="Surface" size="300" />}
+                    <Text size="L400" priority="400">
+                      {section.title}
+                    </Text>
+                    <Box as="dl" className={css.ShortcutList} direction="Column">
+                      {section.rows.map((row) => (
+                        <Box
+                          key={row.description}
+                          className={css.ShortcutRow}
+                          direction="Row"
+                          alignItems="Center"
+                          gap="200"
+                        >
+                          <Text as="dt" className={css.ShortcutTerm} size="T300">
+                            {row.description}
+                          </Text>
+                          <ShortcutKeys keys={row.keys} />
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
+                ))}
+                <Text size="T200" priority="300">
+                  {enterForNewline
+                    ? 'Enter inserts a new line while “Enter for newline” is enabled in Settings.'
+                    : 'Enter sends the message. Enable “Enter for newline” in Settings to swap this.'}
+                </Text>
+              </Box>
+            </Scroll>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/features/shortcuts/index.ts

@@ -0,0 +1 @@
+export * from './KeyboardShortcutsDialog';

src/app/features/space-settings/SpaceSettings.tsx

@@ -13,6 +13,7 @@ import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { useRoom } from '../../hooks/useRoom';
 import { EmojisStickers } from '../common-settings/emojis-stickers';
+import { Soundboard } from '../common-settings/soundboard';
 import { Members } from '../common-settings/members';
 import { DeveloperTools } from '../common-settings/developer-tools';
 import { General } from './general';
@@ -48,6 +49,11 @@ const BASE_SPACE_MENU_ITEMS: SpaceSettingsMenuItem[] = [
     name: 'Emojis & Stickers',
     icon: Icons.Smile,
   },
+  {
+    page: SpaceSettingsPage.SoundboardPage,
+    name: 'Soundboard',
+    icon: Icons.Bell,
+  },
   {
     page: SpaceSettingsPage.DeveloperToolsPage,
     name: 'Developer Tools',
@@ -190,6 +196,9 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
       {activePage === SpaceSettingsPage.EmojisStickersPage && (
         <EmojisStickers requestClose={handlePageRequestClose} />
       )}
+      {activePage === SpaceSettingsPage.SoundboardPage && (
+        <Soundboard requestClose={handlePageRequestClose} />
+      )}
       {activePage === SpaceSettingsPage.DeveloperToolsPage && (
         <DeveloperTools requestClose={handlePageRequestClose} />
       )}

src/app/hooks/useRecentEmoji.ts

@@ -2,11 +2,26 @@ import { useEffect, useState } from 'react';
 import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import { getRecentEmojis } from '../plugins/recent-emoji';
 import { AccountDataEvent } from '../../types/matrix/accountData';
-import { IEmoji } from '../plugins/emoji';
+import { IEmoji, loadEmojiData } from '../plugins/emoji';
 
 export const useRecentEmoji = (mx: MatrixClient, limit?: number): IEmoji[] => {
   const [recentEmoji, setRecentEmoji] = useState(() => getRecentEmojis(mx, limit));
 
+  // Recent emojis are resolved against the (now lazily loaded) emojibase data
+  // via getRecentEmojis. Recompute once loadEmojiData has populated it so the
+  // recent list fills in on first open.
+  useEffect(() => {
+    let alive = true;
+    loadEmojiData()
+      .then(() => {
+        if (alive) setRecentEmoji(getRecentEmojis(mx, limit));
+      })
+      .catch(() => undefined);
+    return () => {
+      alive = false;
+    };
+  }, [mx, limit]);
+
   useEffect(() => {
     const handleAccountData = (event: MatrixEvent) => {
       if (event.getType() !== AccountDataEvent.ElementRecentEmoji) return;

src/app/hooks/useSoundboard.ts

@@ -1,101 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import {
-  SoundboardClip,
-  SoundboardContent,
-  SOUNDBOARD_MAX_CLIP_BYTES,
-  SOUNDBOARD_MAX_CLIPS,
-  SOUNDBOARD_NAME_MAX,
-  readSoundboardClips,
-} from '../utils/soundboardClips';
-
-const KEY = AccountDataEvent.LotusSoundboard;
-
-/**
- * [P5-15] Read/write the user's personal soundboard, stored in the
- * `io.lotus.soundboard` account data event (synced across devices like custom
- * emoji/sticker packs). Uploading writes the audio to the media repo and
- * appends an mxc reference.
- */
-export function useSoundboard(): {
-  clips: SoundboardClip[];
-  addClip: (file: File, name?: string) => Promise<void>;
-  removeClip: (id: string) => Promise<void>;
-  renameClip: (id: string, name: string) => Promise<void>;
-} {
-  const mx = useMatrixClient();
-  const [clips, setClips] = useState<SoundboardClip[]>(() => readSoundboardClips(mx));
-
-  useAccountDataCallback(
-    mx,
-    useCallback((evt) => {
-      if (evt.getType() === KEY) {
-        const content = evt.getContent<SoundboardContent>();
-        setClips(Array.isArray(content?.clips) ? content.clips : []);
-      }
-    }, []),
-  );
-
-  useEffect(() => {
-    setClips(readSoundboardClips(mx));
-  }, [mx]);
-
-  const persist = useCallback(
-    async (next: SoundboardClip[]) => {
-      const content: SoundboardContent = { clips: next };
-      await (
-        mx as unknown as { setAccountData: (t: string, c: unknown) => Promise<void> }
-      ).setAccountData(KEY, content);
-    },
-    [mx],
-  );
-
-  const addClip = useCallback(
-    async (file: File, name?: string) => {
-      const current = readSoundboardClips(mx);
-      if (current.length >= SOUNDBOARD_MAX_CLIPS) {
-        throw new Error(`Soundboard is full (max ${SOUNDBOARD_MAX_CLIPS} clips).`);
-      }
-      if (file.size > SOUNDBOARD_MAX_CLIP_BYTES) {
-        throw new Error('Clip is too large (max 1 MB).');
-      }
-      const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
-      const mxc = res.content_uri;
-      if (!mxc) throw new Error('Upload failed.');
-      const label = (name ?? file.name.replace(/\.[^/.]+$/, ''))
-        .trim()
-        .slice(0, SOUNDBOARD_NAME_MAX);
-      const clip: SoundboardClip = {
-        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
-        name: label || 'Clip',
-        url: mxc,
-        mimetype: file.type || undefined,
-        size: file.size,
-      };
-      await persist([...current, clip]);
-    },
-    [mx, persist],
-  );
-
-  const removeClip = useCallback(
-    async (id: string) => {
-      const next = readSoundboardClips(mx).filter((c) => c.id !== id);
-      await persist(next);
-    },
-    [mx, persist],
-  );
-
-  const renameClip = useCallback(
-    async (id: string, name: string) => {
-      const trimmed = name.trim().slice(0, SOUNDBOARD_NAME_MAX);
-      if (!trimmed) return;
-      const next = readSoundboardClips(mx).map((c) => (c.id === id ? { ...c, name: trimmed } : c));
-      await persist(next);
-    },
-    [mx, persist],
-  );
-
-  return { clips, addClip, removeClip, renameClip };
-}

src/app/hooks/useSoundboardPacks.ts

@@ -0,0 +1,160 @@
+import { Room } from 'matrix-js-sdk';
+import { useCallback, useMemo, useState } from 'react';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+import { StateEvent } from '../../types/matrix/room';
+import {
+  getGlobalSoundboardPacks,
+  getRoomSoundboardPack,
+  getRoomSoundboardPacks,
+  getUserSoundboardPack,
+  SoundboardPack,
+} from '../plugins/soundboard';
+import { useMatrixClient } from './useMatrixClient';
+import { useAccountDataCallback } from './useAccountDataCallback';
+import { useStateEventCallback } from './useStateEventCallback';
+
+// Parallels hooks/useImagePacks.ts (custom emoji). Same aggregation shape.
+
+export const useUserSoundboardPack = (): SoundboardPack | undefined => {
+  const mx = useMatrixClient();
+  const [userPack, setUserPack] = useState(() => getUserSoundboardPack(mx));
+
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (mEvent.getType() === AccountDataEvent.LotusSoundboard) {
+          setUserPack(getUserSoundboardPack(mx));
+        }
+      },
+      [mx],
+    ),
+  );
+
+  return userPack;
+};
+
+export const useGlobalSoundboardPacks = (): SoundboardPack[] => {
+  const mx = useMatrixClient();
+  const [globalPacks, setGlobalPacks] = useState(() => getGlobalSoundboardPacks(mx));
+
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (mEvent.getType() === AccountDataEvent.LotusSoundboardRooms) {
+          setGlobalPacks(getGlobalSoundboardPacks(mx));
+        }
+      },
+      [mx],
+    ),
+  );
+
+  useStateEventCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        const roomId = mEvent.getRoomId();
+        const stateKey = mEvent.getStateKey();
+        if (
+          mEvent.getType() === StateEvent.LotusSoundboardRoom &&
+          roomId &&
+          typeof stateKey === 'string'
+        ) {
+          const isGlobal = !!globalPacks.find(
+            (pack) =>
+              pack.address && pack.address.roomId === roomId && pack.address.stateKey === stateKey,
+          );
+          if (isGlobal) setGlobalPacks(getGlobalSoundboardPacks(mx));
+        }
+      },
+      [mx, globalPacks],
+    ),
+  );
+
+  return globalPacks;
+};
+
+export const useRoomSoundboardPack = (room: Room, stateKey: string): SoundboardPack | undefined => {
+  const mx = useMatrixClient();
+  const [roomPack, setRoomPack] = useState(() => getRoomSoundboardPack(room, stateKey));
+
+  useStateEventCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (
+          mEvent.getRoomId() === room.roomId &&
+          mEvent.getType() === StateEvent.LotusSoundboardRoom &&
+          mEvent.getStateKey() === stateKey
+        ) {
+          setRoomPack(getRoomSoundboardPack(room, stateKey));
+        }
+      },
+      [room, stateKey],
+    ),
+  );
+
+  return roomPack;
+};
+
+export const useRoomSoundboardPacks = (room: Room): SoundboardPack[] => {
+  const mx = useMatrixClient();
+  const [roomPacks, setRoomPacks] = useState(() => getRoomSoundboardPacks(room));
+
+  useStateEventCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (
+          mEvent.getRoomId() === room.roomId &&
+          mEvent.getType() === StateEvent.LotusSoundboardRoom
+        ) {
+          setRoomPacks(getRoomSoundboardPacks(room));
+        }
+      },
+      [room],
+    ),
+  );
+
+  return roomPacks;
+};
+
+export const useRoomsSoundboardPacks = (rooms: Room[]): SoundboardPack[] => {
+  const mx = useMatrixClient();
+  const [roomPacks, setRoomPacks] = useState(() => rooms.flatMap(getRoomSoundboardPacks));
+
+  useStateEventCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (
+          rooms.find((room) => room.roomId === mEvent.getRoomId()) &&
+          mEvent.getType() === StateEvent.LotusSoundboardRoom
+        ) {
+          setRoomPacks(rooms.flatMap(getRoomSoundboardPacks));
+        }
+      },
+      [rooms],
+    ),
+  );
+
+  return roomPacks;
+};
+
+/** User ∪ global ∪ room packs, deduped by id, keeping only packs with clips. */
+export const useRelevantSoundboardPacks = (rooms: Room[]): SoundboardPack[] => {
+  const userPack = useUserSoundboardPack();
+  const globalPacks = useGlobalSoundboardPacks();
+  const roomsPacks = useRoomsSoundboardPacks(rooms);
+
+  return useMemo(() => {
+    const packs = userPack ? [userPack] : [];
+    const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
+    const relPacks = packs.concat(
+      globalPacks,
+      roomsPacks.filter((pack) => !globalPackIds.has(pack.id)),
+    );
+    return relPacks.filter((pack) => pack.getClips().length > 0);
+  }, [userPack, globalPacks, roomsPacks]);
+};

src/app/hooks/useTauriDnd.ts

@@ -0,0 +1,21 @@
+import { useSetAtom } from 'jotai';
+import { manualDndAtom } from '../state/manualDnd';
+import { useTauriEvent } from './useTauri';
+
+/** Detail shape of the `lotus-dnd-changed` event emitted by the native side. */
+type DndChangedDetail = {
+  active: boolean;
+};
+
+/**
+ * P6-1 — Tray "Do Not Disturb" → notification suppression (desktop). Subscribes
+ * to the native `lotus-dnd-changed` event (emitted when the user toggles the
+ * tray "Do Not Disturb" item, `{ active }`) and mirrors it into `manualDndAtom`,
+ * which the notification gate reads to suppress notifications while DND is on.
+ * Inert in the browser, since `useTauriEvent` only listens under Tauri.
+ */
+export function useTauriDnd(): void {
+  const setDnd = useSetAtom(manualDndAtom);
+
+  useTauriEvent<DndChangedDetail>('lotus-dnd-changed', ({ active }) => setDnd(active));
+}

src/app/hooks/useThreadSummary.ts

@@ -8,7 +8,7 @@ import {
   RoomEventHandlerMap,
   ThreadEvent,
 } from 'matrix-js-sdk';
-import { getThreadSummary, ThreadSummaryData } from '../features/room/thread/threadSummary';
+import { getThreadSummary, ThreadSummaryData } from '../features/room/thread/threadSummaryData';
 import { threadNotificationsAtom } from '../state/threadNotifications';
 import { getThreadNotificationMode, ThreadNotificationMode } from '../utils/threadNotifications';
 

src/app/pages/App.tsx

@@ -110,7 +110,11 @@ function DesktopChrome({ children }: { children: ReactNode }) {
     <div
       style={
         useChrome
-          ? { display: 'flex', flexDirection: 'column', height: '100vh' }
+          ? // Match html/#root (100dvh), NOT 100vh — in the Tauri webview 100vh
+            // can exceed the visible height after decorations are stripped, which
+            // makes the timeline's scroll container taller than the viewport and
+            // sends the virtual paginator into a runaway back-pagination loop.
+            { display: 'flex', flexDirection: 'column', height: '100dvh' }
           : { display: 'contents' }
       }
     >

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -10,6 +10,7 @@ import {
   ThreadEvent,
 } from 'matrix-js-sdk';
 import { focusAssistActiveAtom } from '../../state/focusAssist';
+import { manualDndAtom } from '../../state/manualDnd';
 import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
 import LogoSVG from '../../../../public/res/lotus.png';
 import LogoUnreadSVG from '../../../../public/res/lotus-unread.png';
@@ -42,6 +43,7 @@ import { toastQueueAtom } from '../../state/toast';
 import { useReminders } from '../../hooks/useReminders';
 import { useTauriUpdater } from '../../hooks/useTauriUpdater';
 import { TauriDesktopFeatures } from '../../components/TauriDesktopFeatures';
+import { KeyboardShortcutsDialog, useKeyboardShortcutsTrigger } from '../../features/shortcuts';
 import { useRoomsListener } from '../../hooks/useRoomsListener';
 import { threadNotificationsAtom } from '../../state/threadNotifications';
 import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
@@ -127,6 +129,7 @@ function InviteNotifications() {
   const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
   const [quietHoursEnabled] = useSetting(settingsAtom, 'quietHoursEnabled');
   const focusAssistActive = useAtomValue(focusAssistActiveAtom);
+  const manualDnd = useAtomValue(manualDndAtom);
   const [quietHoursStart] = useSetting(settingsAtom, 'quietHoursStart');
   const [quietHoursEnd] = useSetting(settingsAtom, 'quietHoursEnd');
   const [inviteSoundId] = useSetting(settingsAtom, 'inviteSoundId');
@@ -186,7 +189,9 @@ function InviteNotifications() {
   useEffect(() => {
     if (invites.length > perviousInviteLen && mx.getSyncState() === 'SYNCING') {
       const quietActive =
-        focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
+        focusAssistActive ||
+        manualDnd ||
+        (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
       if (!quietActive) {
         if (showNotifications && notificationPermission('granted')) {
           notify(invites.length - perviousInviteLen);
@@ -209,11 +214,12 @@ function InviteNotifications() {
     quietHoursStart,
     quietHoursEnd,
     focusAssistActive,
+    manualDnd,
     inviteSoundId,
   ]);
 
   return (
-    <audio ref={audioRef} style={{ display: 'none' }}>
+    <audio ref={audioRef} style={{ display: 'none' }} aria-hidden="true">
       <source src={soundSrc ?? InviteSound} type="audio/ogg" />
     </audio>
   );
@@ -235,6 +241,7 @@ function MessageNotifications() {
   const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
   const [quietHoursEnabled] = useSetting(settingsAtom, 'quietHoursEnabled');
   const focusAssistActive = useAtomValue(focusAssistActiveAtom);
+  const manualDnd = useAtomValue(manualDndAtom);
   const [quietHoursStart] = useSetting(settingsAtom, 'quietHoursStart');
   const [quietHoursEnd] = useSetting(settingsAtom, 'quietHoursEnd');
   const [messageSoundId] = useSetting(settingsAtom, 'messageSoundId');
@@ -373,7 +380,9 @@ function MessageNotifications() {
       }
 
       const quietActive =
-        focusAssistActive || (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
+        focusAssistActive ||
+        manualDnd ||
+        (quietHoursEnabled && isInQuietHours(quietHoursStart, quietHoursEnd));
       if (quietActive) return;
 
       if (showNotifications && notificationPermission('granted')) {
@@ -408,6 +417,7 @@ function MessageNotifications() {
       quietHoursStart,
       quietHoursEnd,
       focusAssistActive,
+      manualDnd,
       messageSoundId,
     ],
   );
@@ -496,7 +506,7 @@ function MessageNotifications() {
   useRoomsListener(mx, ThreadEvent.NewReply, handleNewReply);
 
   return (
-    <audio ref={audioRef} style={{ display: 'none' }}>
+    <audio ref={audioRef} style={{ display: 'none' }} aria-hidden="true">
       <source src={soundSrc ?? NotificationSound} type="audio/ogg" />
     </audio>
   );
@@ -642,6 +652,13 @@ function LotusDenoiseFeature() {
   return null;
 }
 
+// Registers the global `?` shortcut (ignored while typing) and renders the
+// keyboard-shortcuts help dialog. Headless — the dialog self-gates on its atom.
+function KeyboardShortcutsFeature() {
+  useKeyboardShortcutsTrigger();
+  return <KeyboardShortcutsDialog />;
+}
+
 export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
   return (
     <>
@@ -656,6 +673,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <TauriDesktopFeatures />
       <LotusDenoiseFeature />
       <DeepLinkNavigator />
+      <KeyboardShortcutsFeature />
       {children}
     </>
   );

src/app/plugins/call/CallControl.ts

@@ -31,6 +31,12 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private _pipMode = false;
 
+  // P6-2: mirrors CallEmbed.joined. Set true from forceState(), which CallEmbed
+  // invokes only from onCallJoined(). Gates io.lotus.set_deafen so we never send
+  // before the fork's widget handler mounts (pre-join sends pend to a 10s
+  // timeout — io.lotus toWidget actions must only be sent after call-join).
+  private joined = false;
+
   private get document(): Document | undefined {
     return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
   }
@@ -141,6 +147,12 @@ export class CallControl extends EventEmitter implements CallControlState {
       this.spotlight,
     );
     await this.applyState();
+    // P6-2: CallEmbed calls forceState() only from onCallJoined(), so this is
+    // the join transition. Flip the gate open, then push the current deafen
+    // state to the fork's freshly-mounted handler. (setSound() above ran while
+    // this.joined was still false, so it was gated — this is the first send.)
+    this.joined = true;
+    this.sendDeafenState();
   }
 
   public startObserving() {
@@ -209,6 +221,7 @@ export class CallControl extends EventEmitter implements CallControlState {
         el.muted = !sound || (isScreenshareAudio && this.screenshareAudioMuted);
       });
     }
+    this.sendDeafenState();
   }
 
   private applyScreenshareAudioMuted(): void {
@@ -221,6 +234,20 @@ export class CallControl extends EventEmitter implements CallControlState {
           el.muted = this.screenshareAudioMuted;
         });
     }
+    this.sendDeafenState();
+  }
+
+  // P6-2: send deafen state to the fork (io.lotus.set_deafen). The DOM .muted
+  // code above is a transitional fallback — remove once the fork ships & the
+  // pin is bumped.
+  private sendDeafenState(): void {
+    if (!this.joined) return;
+    this.call.transport
+      .send('io.lotus.set_deafen', {
+        deafened: !this.sound,
+        screenshareAudioMuted: this.screenshareAudioMuted,
+      })
+      .catch(() => undefined);
   }
 
   public onMediaState(evt: CustomEvent<ElementMediaStateDetail>) {
@@ -286,10 +313,8 @@ export class CallControl extends EventEmitter implements CallControlState {
   public toggleSound() {
     const sound = !this.sound;
 
-    this.setSound(sound);
-    // After un-deafening, re-apply screenshare audio mute if active
-    if (sound) this.applyScreenshareAudioMuted();
-
+    // P6-2: commit state before setSound()/applyScreenshareAudioMuted() so
+    // sendDeafenState() (which reads this.sound) reports the new value.
     const state = new CallControlState(
       this.microphone,
       this.video,
@@ -299,6 +324,11 @@ export class CallControl extends EventEmitter implements CallControlState {
       this.screenshareAudioMuted,
     );
     this.state = state;
+
+    this.setSound(sound);
+    // After un-deafening, re-apply screenshare audio mute if active
+    if (sound) this.applyScreenshareAudioMuted();
+
     this.emitStateUpdate();
 
     if (!this.sound && this.microphone) {

src/app/plugins/call/CallEmbed.ts

@@ -27,6 +27,7 @@ import {
 } from './types';
 import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
+import { verifyDenoiseAssets } from './denoiseSmokeCheck';
 
 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -205,6 +206,12 @@ export class CallEmbed {
       params.append('lotusModel', denoiseModel);
       params.append('lotusGate', denoiseGate.toString());
       params.append('lotusGateThreshold', denoiseGateThreshold.toString());
+
+      // [lotus] Fire-and-forget: confirm the fork's ML-denoise assets are
+      // actually served under public/element-call/denoise/ (they're copied by
+      // vite.config.js at build time). Warns once if the copy step regressed;
+      // never blocks call start.
+      verifyDenoiseAssets(denoiseModel).catch(() => undefined);
     }
 
     if (CallEmbed.startingCall(intent)) {

src/app/plugins/call/denoiseSmokeCheck.ts

@@ -0,0 +1,63 @@
+import { trimTrailingSlash } from '../../utils/common';
+
+// Denoise assets copied into public/element-call/denoise/ by vite.config.js's
+// lotusDenoise() plugin. The filenames here MUST match what that plugin writes
+// (and what the fork's TrackProcessor fetches at runtime). Grouped per model so
+// the smoke-check only probes what the active call will actually load.
+const DENOISE_ASSETS: Record<string, readonly string[]> = {
+  rnnoise: ['rnnoiseWorklet.js', 'rnnoise.wasm', 'rnnoise_simd.wasm'],
+  speex: ['speexWorklet.js', 'speex.wasm'],
+  dtln: ['workadventure/audio-worklet.js'],
+  deepfilternet: [
+    'deepfilternet/index.esm.js',
+    'deepfilternet/v2/pkg/df_bg.wasm',
+    'deepfilternet/v2/models/DeepFilterNet3_onnx.tar.gz',
+  ],
+};
+
+// The noise-gate worklet is a shared asset the build ships for every model
+// (loaded when the gate is enabled), so probe it regardless of the model.
+const SHARED_ASSETS: readonly string[] = ['noiseGateWorklet.js'];
+
+/**
+ * Fire-and-forget smoke-check for the ML-denoise asset contract.
+ *
+ * The fork's in-source denoiser (lotusDenoiseSource) loads its worklet/wasm/ESM
+ * from `public/element-call/denoise/` at runtime; if the build's asset copy
+ * step regressed, those fetches 404 and denoise silently degrades to a raw mic.
+ * This HEAD-fetches the critical assets for the selected model and emits a
+ * single console.warn listing any that are missing. No UI, no throw — purely a
+ * developer/operator breadcrumb.
+ *
+ * @param model the selected denoise model (defaults to rnnoise)
+ * @returns true if every probed asset responded OK, false otherwise
+ */
+export async function verifyDenoiseAssets(model = 'rnnoise'): Promise<boolean> {
+  const base = new URL(
+    `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/denoise/`,
+    window.location.origin,
+  );
+  const names = [...(DENOISE_ASSETS[model] ?? DENOISE_ASSETS.rnnoise), ...SHARED_ASSETS];
+
+  const results = await Promise.all(
+    names.map(async (name): Promise<string | null> => {
+      try {
+        const res = await fetch(new URL(name, base).href, { method: 'HEAD' });
+        return res.ok ? null : name;
+      } catch {
+        return name;
+      }
+    }),
+  );
+
+  const missing = results.filter((n): n is string => n !== null);
+  if (missing.length > 0) {
+    console.warn(
+      `[lotus-denoise] ML denoise assets missing under ${base.href} (model="${model}"): ${missing.join(
+        ', ',
+      )} — the in-source denoiser will fall back to a raw mic. Check vite.config.js lotusDenoise().`,
+    );
+    return false;
+  }
+  return true;
+}

src/app/plugins/emoji.ts

@@ -1,7 +1,4 @@
-import { CompactEmoji, fromUnicodeToHexcode } from 'emojibase';
-import emojisData from 'emojibase-data/en/compact.json';
-import joypixels from 'emojibase-data/en/shortcodes/joypixels.json';
-import emojibase from 'emojibase-data/en/shortcodes/emojibase.json';
+import type { CompactEmoji } from 'emojibase';
 
 export type IEmoji = CompactEmoji & {
   shortcode: string;
@@ -24,57 +21,76 @@ export type IEmojiGroup = {
   emojis: IEmoji[];
 };
 
-export const getShortcodesFor = (hexcode: string): string[] | string | undefined =>
-  joypixels[hexcode] || emojibase[hexcode];
+export type EmojiData = {
+  emojis: IEmoji[];
+  emojiGroups: IEmojiGroup[];
+};
+
+type ShortcodeMap = Record<string, string | string[]>;
+
+/**
+ * PERF (lazy emojibase split): the heavy `emojibase-data` JSON (compact emoji
+ * data + the joypixels/emojibase shortcode maps, ~965 KB combined) used to be
+ * imported statically at module top-level. Because reaction/message rendering
+ * (`Reaction`, `scaleSystemEmoji`) import this module eagerly, that dragged the
+ * whole `emojibase` chunk into the initial (eager) bundle graph.
+ *
+ * It is now loaded on demand via `loadEmojiData()` (a memoized dynamic import).
+ * Only lazy emoji surfaces (EmojiBoard, EmoticonAutocomplete, recent-emoji)
+ * trigger the load. Anything that renders eagerly (reaction/emoji tooltips and
+ * aria-labels via `getShortcodeFor`) gracefully degrades to `undefined` until
+ * the data has been loaded — the visible emoji glyph itself never depended on
+ * this data, so on-screen UX is unchanged; the shortcode label simply resolves
+ * once emoji data is loaded. `getHexcodeForEmoji` is inlined below so it stays
+ * synchronous WITHOUT pulling the `emojibase` runtime into the eager graph.
+ */
+
+// Inlined from emojibase's `fromUnicodeToHexcode` so this synchronous helper
+// does not import the `emojibase` package (and thus the emojibase chunk) into
+// the eager graph. Kept byte-for-byte behaviourally identical.
+const SEQUENCE_REMOVAL_PATTERN = /200D|FE0E|FE0F/g;
+
+export const getHexcodeForEmoji = (unicode: string, strip = true): string => {
+  const hexcode: string[] = [];
+  [...unicode].forEach((codepoint) => {
+    let hex = codepoint.codePointAt(0)?.toString(16).toUpperCase() ?? '';
+    while (hex.length < 4) {
+      hex = `0${hex}`;
+    }
+    if (!strip || !hex.match(SEQUENCE_REMOVAL_PATTERN)) {
+      hexcode.push(hex);
+    }
+  });
+  return hexcode.join('-');
+};
+
+// Populated by loadEmojiData(); `undefined` until the data has been loaded.
+let joypixelsShortcodes: ShortcodeMap | undefined;
+let emojibaseShortcodes: ShortcodeMap | undefined;
+
+export const getShortcodesFor = (hexcode: string): string[] | string | undefined => {
+  if (!joypixelsShortcodes || !emojibaseShortcodes) return undefined;
+  return joypixelsShortcodes[hexcode] || emojibaseShortcodes[hexcode];
+};
 
 export const getShortcodeFor = (hexcode: string): string | undefined => {
-  const shortcode = joypixels[hexcode] || emojibase[hexcode];
+  const shortcode = getShortcodesFor(hexcode);
   return Array.isArray(shortcode) ? shortcode[0] : shortcode;
 };
 
-export const getHexcodeForEmoji = fromUnicodeToHexcode;
-
+// Shared, stable array references. They start empty and are populated in place
+// the first time loadEmojiData() resolves (mirroring the previous eager module
+// side-effect). React consumers await loadEmojiData() and re-render to observe
+// the populated data; non-React consumers (recent-emoji) read them after load.
 export const emojiGroups: IEmojiGroup[] = [
-  {
-    id: EmojiGroupId.People,
-    order: 0,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Nature,
-    order: 1,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Food,
-    order: 2,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Activity,
-    order: 3,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Travel,
-    order: 4,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Object,
-    order: 5,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Symbol,
-    order: 6,
-    emojis: [],
-  },
-  {
-    id: EmojiGroupId.Flag,
-    order: 7,
-    emojis: [],
-  },
+  { id: EmojiGroupId.People, order: 0, emojis: [] },
+  { id: EmojiGroupId.Nature, order: 1, emojis: [] },
+  { id: EmojiGroupId.Food, order: 2, emojis: [] },
+  { id: EmojiGroupId.Activity, order: 3, emojis: [] },
+  { id: EmojiGroupId.Travel, order: 4, emojis: [] },
+  { id: EmojiGroupId.Object, order: 5, emojis: [] },
+  { id: EmojiGroupId.Symbol, order: 6, emojis: [] },
+  { id: EmojiGroupId.Flag, order: 7, emojis: [] },
 ];
 
 export const emojis: IEmoji[] = [];
@@ -95,20 +111,51 @@ function getGroupIndex(emoji: IEmoji): number | undefined {
   return undefined;
 }
 
-emojisData.forEach((emoji) => {
-  const myShortCodes = getShortcodesFor(emoji.hexcode);
-  if (!myShortCodes) return;
-  if (Array.isArray(myShortCodes) && myShortCodes.length === 0) return;
+let emojiDataPromise: Promise<EmojiData> | undefined;
 
-  const em: IEmoji = {
-    ...emoji,
-    shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
-    shortcodes: Array.isArray(myShortCodes) ? myShortCodes : emoji.shortcodes,
-  };
+/**
+ * Lazily load emojibase data (dynamic import → the `emojibase` chunk). Memoized:
+ * the JSON is fetched/parsed and `emojis`/`emojiGroups` are built exactly once.
+ */
+export const loadEmojiData = (): Promise<EmojiData> => {
+  if (!emojiDataPromise) {
+    emojiDataPromise = (async (): Promise<EmojiData> => {
+      const [emojisModule, joypixelsModule, emojibaseModule] = await Promise.all([
+        import('emojibase-data/en/compact.json'),
+        import('emojibase-data/en/shortcodes/joypixels.json'),
+        import('emojibase-data/en/shortcodes/emojibase.json'),
+      ]);
 
-  const groupIndex = getGroupIndex(em);
-  if (groupIndex !== undefined) {
-    addEmojiToGroup(groupIndex, em);
-    emojis.push(em);
+      joypixelsShortcodes = joypixelsModule.default as ShortcodeMap;
+      emojibaseShortcodes = emojibaseModule.default as ShortcodeMap;
+
+      const emojisData = emojisModule.default as unknown as CompactEmoji[];
+      emojisData.forEach((emoji) => {
+        const myShortCodes = getShortcodesFor(emoji.hexcode);
+        if (!myShortCodes) return;
+        if (Array.isArray(myShortCodes) && myShortCodes.length === 0) return;
+
+        const em: IEmoji = {
+          ...emoji,
+          shortcode: Array.isArray(myShortCodes) ? myShortCodes[0] : myShortCodes,
+          shortcodes: Array.isArray(myShortCodes) ? myShortCodes : emoji.shortcodes,
+        };
+
+        const groupIndex = getGroupIndex(em);
+        if (groupIndex !== undefined) {
+          addEmojiToGroup(groupIndex, em);
+          emojis.push(em);
+        }
+      });
+
+      return { emojis, emojiGroups };
+    })();
+    // Don't cache a rejection: a transient chunk-load failure (e.g. mid-deploy
+    // 404) would otherwise permanently disable emoji data until a full reload.
+    emojiDataPromise = emojiDataPromise.catch((err) => {
+      emojiDataPromise = undefined;
+      throw err;
+    });
   }
-});
+  return emojiDataPromise;
+};

src/app/plugins/react-custom-html-parser.tsx

@@ -229,13 +229,21 @@ export const scaleSystemEmoji = (text: string): (string | JSX.Element)[] =>
   findAndReplace(
     text,
     EMOJI_REG_G,
-    (match, pushIndex) => (
-      <span key={`scaleSystemEmoji-${pushIndex}`} className={css.EmoticonBase}>
-        <span className={css.Emoticon()} title={getShortcodeFor(getHexcodeForEmoji(match[0]))}>
-          {match[0]}
+    (match, pushIndex) => {
+      const shortcode = getShortcodeFor(getHexcodeForEmoji(match[0]));
+      return (
+        <span key={`scaleSystemEmoji-${pushIndex}`} className={css.EmoticonBase}>
+          <span
+            className={css.Emoticon()}
+            title={shortcode}
+            aria-label={shortcode || undefined}
+            role={shortcode ? 'img' : undefined}
+          >
+            {match[0]}
+          </span>
         </span>
-      </span>
-    ),
+      );
+    },
     (txt) => txt,
   );
 
@@ -574,15 +582,25 @@ export const getReactCustomHtmlParser = (
             );
           }
           if (htmlSrc && 'data-mx-emoticon' in props) {
+            const emoticonAlt =
+              (typeof props.alt === 'string' && props.alt) ||
+              (typeof props.title === 'string' && props.title) ||
+              'emoji';
             return (
               <span className={css.EmoticonBase}>
                 <span className={css.Emoticon()}>
-                  <img {...props} className={css.EmoticonImg} src={htmlSrc} />
+                  <img
+                    {...props}
+                    alt={emoticonAlt}
+                    className={css.EmoticonImg}
+                    src={htmlSrc}
+                    loading="lazy"
+                  />
                 </span>
               </span>
             );
           }
-          if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} />;
+          if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} loading="lazy" />;
         }
       }
 
@@ -611,7 +629,6 @@ export const getReactCustomHtmlParser = (
               <>
                 {segments.map((segment, index) => {
                   if (segment.type === 'text') {
-                    // eslint-disable-next-line react/no-array-index-key
                     return (
                       <React.Fragment key={index}>{renderTextChunk(segment.value)}</React.Fragment>
                     );
@@ -619,7 +636,6 @@ export const getReactCustomHtmlParser = (
                   const raw =
                     segment.type === 'block' ? `$$${segment.value}$$` : `$${segment.value}$`;
                   return (
-                    // eslint-disable-next-line react/no-array-index-key
                     <React.Fragment key={index}>
                       {renderMath(segment.value, segment.type === 'block', raw, raw)}
                     </React.Fragment>

src/app/plugins/react-prism/ReactPrism.tsx

@@ -2,307 +2,33 @@ import React, { MutableRefObject, ReactNode, useEffect, useRef } from 'react';
 
 import Prism from 'prismjs';
 
-import 'prismjs/components/prism-abap.js';
-import 'prismjs/components/prism-abnf.js';
-import 'prismjs/components/prism-actionscript.js';
-import 'prismjs/components/prism-ada.js';
-import 'prismjs/components/prism-agda.js';
-import 'prismjs/components/prism-al.js';
-import 'prismjs/components/prism-antlr4.js';
-import 'prismjs/components/prism-apacheconf.js';
-import 'prismjs/components/prism-apex.js';
-import 'prismjs/components/prism-apl.js';
-import 'prismjs/components/prism-applescript.js';
-import 'prismjs/components/prism-aql.js';
-import 'prismjs/components/prism-arff.js';
-import 'prismjs/components/prism-armasm.js';
-import 'prismjs/components/prism-arturo.js';
-import 'prismjs/components/prism-asciidoc.js';
-import 'prismjs/components/prism-asm6502.js';
-import 'prismjs/components/prism-asmatmel.js';
-import 'prismjs/components/prism-aspnet.js';
-import 'prismjs/components/prism-autohotkey.js';
-import 'prismjs/components/prism-autoit.js';
-import 'prismjs/components/prism-avisynth.js';
-import 'prismjs/components/prism-avro-idl.js';
-import 'prismjs/components/prism-awk.js';
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-basic.js';
-import 'prismjs/components/prism-batch.js';
-import 'prismjs/components/prism-bbcode.js';
-import 'prismjs/components/prism-bbj.js';
-import 'prismjs/components/prism-bicep.js';
-import 'prismjs/components/prism-birb.js';
-import 'prismjs/components/prism-bnf.js';
-import 'prismjs/components/prism-bqn.js';
-import 'prismjs/components/prism-brainfuck.js';
-import 'prismjs/components/prism-brightscript.js';
-import 'prismjs/components/prism-bro.js';
-import 'prismjs/components/prism-bsl.js';
-import 'prismjs/components/prism-c.js';
-import 'prismjs/components/prism-cfscript.js';
-import 'prismjs/components/prism-cil.js';
-import 'prismjs/components/prism-cilkc.js';
-import 'prismjs/components/prism-cilkcpp.js';
+// PERF: Prism used to import every bundled language (~574 KB lazy chunk). We now
+// ship a curated subset covering the languages actually seen in chat. Imports
+// MUST stay in dependency order (Prism component files assume their base grammar
+// is already registered): base grammars (markup/css/clike/javascript) first,
+// then languages that extend them (e.g. c→cpp, javascript→typescript,
+// markup+javascript→jsx, jsx+typescript→tsx, markup→markdown).
+import 'prismjs/components/prism-markup.js'; // markup / html / xml / svg
+import 'prismjs/components/prism-css.js';
 import 'prismjs/components/prism-clike.js';
-import 'prismjs/components/prism-clojure.js';
-import 'prismjs/components/prism-cmake.js';
-import 'prismjs/components/prism-cobol.js';
-import 'prismjs/components/prism-coffeescript.js';
-import 'prismjs/components/prism-concurnas.js';
-import 'prismjs/components/prism-cooklang.js';
-import 'prismjs/components/prism-coq.js';
+import 'prismjs/components/prism-javascript.js'; // js
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-yaml.js';
+import 'prismjs/components/prism-bash.js'; // bash / shell / sh
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-rust.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-c.js';
 import 'prismjs/components/prism-cpp.js';
 import 'prismjs/components/prism-csharp.js';
-import 'prismjs/components/prism-cshtml.js';
-import 'prismjs/components/prism-csp.js';
-import 'prismjs/components/prism-css-extras.js';
-import 'prismjs/components/prism-css.js';
-import 'prismjs/components/prism-csv.js';
-import 'prismjs/components/prism-cue.js';
-import 'prismjs/components/prism-cypher.js';
-import 'prismjs/components/prism-d.js';
-import 'prismjs/components/prism-dart.js';
-import 'prismjs/components/prism-dataweave.js';
-import 'prismjs/components/prism-dax.js';
-import 'prismjs/components/prism-dhall.js';
-import 'prismjs/components/prism-diff.js';
-import 'prismjs/components/prism-dns-zone-file.js';
-import 'prismjs/components/prism-docker.js';
-import 'prismjs/components/prism-dot.js';
-import 'prismjs/components/prism-ebnf.js';
-import 'prismjs/components/prism-editorconfig.js';
-import 'prismjs/components/prism-eiffel.js';
-import 'prismjs/components/prism-ejs.js';
-import 'prismjs/components/prism-elixir.js';
-import 'prismjs/components/prism-elm.js';
-import 'prismjs/components/prism-erb.js';
-import 'prismjs/components/prism-erlang.js';
-import 'prismjs/components/prism-etlua.js';
-import 'prismjs/components/prism-excel-formula.js';
-import 'prismjs/components/prism-factor.js';
-import 'prismjs/components/prism-false.js';
-import 'prismjs/components/prism-firestore-security-rules.js';
-import 'prismjs/components/prism-flow.js';
-import 'prismjs/components/prism-fortran.js';
-import 'prismjs/components/prism-fsharp.js';
-import 'prismjs/components/prism-ftl.js';
-import 'prismjs/components/prism-gap.js';
-import 'prismjs/components/prism-gcode.js';
-import 'prismjs/components/prism-gdscript.js';
-import 'prismjs/components/prism-gedcom.js';
-import 'prismjs/components/prism-gettext.js';
-import 'prismjs/components/prism-gherkin.js';
-import 'prismjs/components/prism-git.js';
-import 'prismjs/components/prism-glsl.js';
-import 'prismjs/components/prism-gml.js';
-import 'prismjs/components/prism-gn.js';
-import 'prismjs/components/prism-go-module.js';
-import 'prismjs/components/prism-go.js';
-import 'prismjs/components/prism-gradle.js';
-import 'prismjs/components/prism-graphql.js';
-import 'prismjs/components/prism-groovy.js';
-import 'prismjs/components/prism-haml.js';
-import 'prismjs/components/prism-handlebars.js';
-import 'prismjs/components/prism-haskell.js';
-import 'prismjs/components/prism-haxe.js';
-import 'prismjs/components/prism-hcl.js';
-import 'prismjs/components/prism-hlsl.js';
-import 'prismjs/components/prism-hoon.js';
-import 'prismjs/components/prism-hpkp.js';
-import 'prismjs/components/prism-hsts.js';
-import 'prismjs/components/prism-http.js';
-import 'prismjs/components/prism-ichigojam.js';
-import 'prismjs/components/prism-icon.js';
-import 'prismjs/components/prism-icu-message-format.js';
-import 'prismjs/components/prism-idris.js';
-import 'prismjs/components/prism-iecst.js';
-import 'prismjs/components/prism-ignore.js';
-import 'prismjs/components/prism-inform7.js';
-import 'prismjs/components/prism-ini.js';
-import 'prismjs/components/prism-io.js';
-import 'prismjs/components/prism-j.js';
-import 'prismjs/components/prism-java.js';
-import 'prismjs/components/prism-javadoclike.js';
-import 'prismjs/components/prism-javascript.js';
-import 'prismjs/components/prism-javastacktrace.js';
-import 'prismjs/components/prism-jexl.js';
-import 'prismjs/components/prism-jolie.js';
-import 'prismjs/components/prism-jq.js';
-import 'prismjs/components/prism-js-extras.js';
-import 'prismjs/components/prism-js-templates.js';
-import 'prismjs/components/prism-json.js';
-import 'prismjs/components/prism-json5.js';
-import 'prismjs/components/prism-jsonp.js';
-import 'prismjs/components/prism-jsstacktrace.js';
-import 'prismjs/components/prism-jsx.js';
-import 'prismjs/components/prism-julia.js';
-import 'prismjs/components/prism-keepalived.js';
-import 'prismjs/components/prism-keyman.js';
-import 'prismjs/components/prism-kotlin.js';
-import 'prismjs/components/prism-kumir.js';
-import 'prismjs/components/prism-kusto.js';
-import 'prismjs/components/prism-latex.js';
-import 'prismjs/components/prism-latte.js';
-import 'prismjs/components/prism-less.js';
-import 'prismjs/components/prism-lilypond.js';
-import 'prismjs/components/prism-linker-script.js';
-import 'prismjs/components/prism-liquid.js';
-import 'prismjs/components/prism-lisp.js';
-import 'prismjs/components/prism-livescript.js';
-import 'prismjs/components/prism-llvm.js';
-import 'prismjs/components/prism-log.js';
-import 'prismjs/components/prism-lolcode.js';
-import 'prismjs/components/prism-lua.js';
-import 'prismjs/components/prism-magma.js';
-import 'prismjs/components/prism-makefile.js';
-import 'prismjs/components/prism-markdown.js';
-import 'prismjs/components/prism-markup-templating.js';
-import 'prismjs/components/prism-markup.js';
-import 'prismjs/components/prism-mata.js';
-import 'prismjs/components/prism-matlab.js';
-import 'prismjs/components/prism-maxscript.js';
-import 'prismjs/components/prism-mel.js';
-import 'prismjs/components/prism-mermaid.js';
-import 'prismjs/components/prism-metafont.js';
-import 'prismjs/components/prism-mizar.js';
-import 'prismjs/components/prism-mongodb.js';
-import 'prismjs/components/prism-monkey.js';
-import 'prismjs/components/prism-moonscript.js';
-import 'prismjs/components/prism-n1ql.js';
-import 'prismjs/components/prism-n4js.js';
-import 'prismjs/components/prism-nand2tetris-hdl.js';
-import 'prismjs/components/prism-naniscript.js';
-import 'prismjs/components/prism-nasm.js';
-import 'prismjs/components/prism-neon.js';
-import 'prismjs/components/prism-nevod.js';
-import 'prismjs/components/prism-nginx.js';
-import 'prismjs/components/prism-nim.js';
-import 'prismjs/components/prism-nix.js';
-import 'prismjs/components/prism-nsis.js';
-import 'prismjs/components/prism-objectivec.js';
-import 'prismjs/components/prism-ocaml.js';
-import 'prismjs/components/prism-odin.js';
-import 'prismjs/components/prism-opencl.js';
-import 'prismjs/components/prism-openqasm.js';
-import 'prismjs/components/prism-oz.js';
-import 'prismjs/components/prism-parigp.js';
-import 'prismjs/components/prism-parser.js';
-import 'prismjs/components/prism-pascal.js';
-import 'prismjs/components/prism-pascaligo.js';
-import 'prismjs/components/prism-pcaxis.js';
-import 'prismjs/components/prism-peoplecode.js';
-import 'prismjs/components/prism-perl.js';
-import 'prismjs/components/prism-php-extras.js';
-import 'prismjs/components/prism-php.js';
-import 'prismjs/components/prism-phpdoc.js';
-import 'prismjs/components/prism-plant-uml.js';
-import 'prismjs/components/prism-powerquery.js';
-import 'prismjs/components/prism-powershell.js';
-import 'prismjs/components/prism-processing.js';
-import 'prismjs/components/prism-prolog.js';
-import 'prismjs/components/prism-promql.js';
-import 'prismjs/components/prism-properties.js';
-import 'prismjs/components/prism-protobuf.js';
-import 'prismjs/components/prism-psl.js';
-import 'prismjs/components/prism-pug.js';
-import 'prismjs/components/prism-puppet.js';
-import 'prismjs/components/prism-pure.js';
-import 'prismjs/components/prism-purebasic.js';
-import 'prismjs/components/prism-purescript.js';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/components/prism-q.js';
-import 'prismjs/components/prism-qml.js';
-import 'prismjs/components/prism-qore.js';
-import 'prismjs/components/prism-qsharp.js';
-import 'prismjs/components/prism-r.js';
-import 'prismjs/components/prism-reason.js';
-import 'prismjs/components/prism-regex.js';
-import 'prismjs/components/prism-rego.js';
-import 'prismjs/components/prism-renpy.js';
-import 'prismjs/components/prism-rescript.js';
-import 'prismjs/components/prism-rest.js';
-import 'prismjs/components/prism-rip.js';
-import 'prismjs/components/prism-roboconf.js';
-import 'prismjs/components/prism-robotframework.js';
-import 'prismjs/components/prism-ruby.js';
-import 'prismjs/components/prism-rust.js';
-import 'prismjs/components/prism-sas.js';
-import 'prismjs/components/prism-sass.js';
-import 'prismjs/components/prism-scala.js';
-import 'prismjs/components/prism-scheme.js';
-import 'prismjs/components/prism-scss.js';
-import 'prismjs/components/prism-shell-session.js';
-import 'prismjs/components/prism-smali.js';
-import 'prismjs/components/prism-smalltalk.js';
-import 'prismjs/components/prism-smarty.js';
-import 'prismjs/components/prism-sml.js';
-import 'prismjs/components/prism-solidity.js';
-import 'prismjs/components/prism-solution-file.js';
-import 'prismjs/components/prism-soy.js';
-import 'prismjs/components/prism-splunk-spl.js';
-import 'prismjs/components/prism-sqf.js';
 import 'prismjs/components/prism-sql.js';
-import 'prismjs/components/prism-squirrel.js';
-import 'prismjs/components/prism-stan.js';
-import 'prismjs/components/prism-stata.js';
-import 'prismjs/components/prism-stylus.js';
-import 'prismjs/components/prism-supercollider.js';
-import 'prismjs/components/prism-swift.js';
-import 'prismjs/components/prism-systemd.js';
-import 'prismjs/components/prism-t4-templating.js';
-import 'prismjs/components/prism-t4-vb.js';
-import 'prismjs/components/prism-tap.js';
-import 'prismjs/components/prism-tcl.js';
-import 'prismjs/components/prism-textile.js';
-import 'prismjs/components/prism-toml.js';
-import 'prismjs/components/prism-tremor.js';
+import 'prismjs/components/prism-diff.js';
+import 'prismjs/components/prism-docker.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-typescript.js'; // ts
+import 'prismjs/components/prism-jsx.js';
 import 'prismjs/components/prism-tsx.js';
-import 'prismjs/components/prism-tt2.js';
-import 'prismjs/components/prism-turtle.js';
-import 'prismjs/components/prism-twig.js';
-import 'prismjs/components/prism-typescript.js';
-import 'prismjs/components/prism-typoscript.js';
-import 'prismjs/components/prism-unrealscript.js';
-import 'prismjs/components/prism-uorazor.js';
-import 'prismjs/components/prism-uri.js';
-import 'prismjs/components/prism-v.js';
-import 'prismjs/components/prism-vala.js';
-import 'prismjs/components/prism-vbnet.js';
-import 'prismjs/components/prism-velocity.js';
-import 'prismjs/components/prism-verilog.js';
-import 'prismjs/components/prism-vhdl.js';
-import 'prismjs/components/prism-vim.js';
-import 'prismjs/components/prism-visual-basic.js';
-import 'prismjs/components/prism-warpscript.js';
-import 'prismjs/components/prism-wasm.js';
-import 'prismjs/components/prism-web-idl.js';
-import 'prismjs/components/prism-wgsl.js';
-import 'prismjs/components/prism-wiki.js';
-import 'prismjs/components/prism-wolfram.js';
-import 'prismjs/components/prism-wren.js';
-import 'prismjs/components/prism-xeora.js';
-import 'prismjs/components/prism-xml-doc.js';
-import 'prismjs/components/prism-xojo.js';
-import 'prismjs/components/prism-xquery.js';
-import 'prismjs/components/prism-yaml.js';
-import 'prismjs/components/prism-yang.js';
-import 'prismjs/components/prism-zig.js';
-import 'prismjs/components/prism-arduino.js';
-
-// Broken:
-//
-// import 'prismjs/components/prism-bison.js';
-// import 'prismjs/components/prism-chaiscript.js';
-// import 'prismjs/components/prism-core.js';
-// import 'prismjs/components/prism-crystal.js';
-// import 'prismjs/components/prism-django.js';
-// import 'prismjs/components/prism-javadoc.js';
-// import 'prismjs/components/prism-jsdoc.js';
-// import 'prismjs/components/prism-plsql.js';
-// import 'prismjs/components/prism-racket.js';
-// import 'prismjs/components/prism-sparql.js';
-// import 'prismjs/components/prism-t4-cs.js';
 
 import './ReactPrism.css';
 // using classNames .prism-dark .prism-light from ReactPrism.css

src/app/plugins/recent-emoji.test.ts

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import { addRecentEmoji, getRecentEmojis, IRecentEmojiContent } from './recent-emoji';
 import { AccountDataEvent } from '../../types/matrix/accountData';
-import { emojis } from './emoji';
+import { emojis, loadEmojiData } from './emoji';
 
 // A Map-backed MatrixClient stub supporting get/setAccountData.
 const createMx = () => {
@@ -25,6 +25,9 @@ const createMx = () => {
 const getStored = (store: Map<string, unknown>): IRecentEmojiContent['recent_emoji'] =>
   (store.get(AccountDataEvent.ElementRecentEmoji) as IRecentEmojiContent | undefined)?.recent_emoji;
 
+// Emoji data is now loaded lazily; populate `emojis` before the round trips.
+await loadEmojiData();
+
 // Pick two real unicode emojis to drive add->get round trips.
 const u1 = emojis[0].unicode;
 const u2 = emojis[1].unicode;

src/app/plugins/soundboard/SoundboardClipReader.ts

@@ -0,0 +1,58 @@
+import { SoundboardClip, SoundboardClipInfo } from './types';
+
+/** Parallels custom-emoji/PackImageReader, for a soundboard clip. */
+export class SoundboardClipReader {
+  public readonly shortcode: string;
+
+  public readonly url: string;
+
+  private readonly clip: Omit<SoundboardClip, 'url'>;
+
+  constructor(shortcode: string, url: string, clip: Omit<SoundboardClip, 'url'>) {
+    this.shortcode = shortcode;
+    this.url = url;
+    this.clip = clip;
+  }
+
+  static fromClip(shortcode: string, clip: SoundboardClip): SoundboardClipReader | undefined {
+    const { url } = clip;
+    if (typeof url !== 'string' || !url.startsWith('mxc://')) return undefined;
+    return new SoundboardClipReader(shortcode, url, clip);
+  }
+
+  get body(): string | undefined {
+    const { body } = this.clip;
+    return typeof body === 'string' ? body : undefined;
+  }
+
+  /** Display name — the clip body, falling back to the shortcode. */
+  get name(): string {
+    return this.body ?? this.shortcode;
+  }
+
+  get emoji(): string | undefined {
+    const { emoji } = this.clip;
+    return typeof emoji === 'string' && emoji.length > 0 ? emoji : undefined;
+  }
+
+  /** Per-clip volume 0–100; defaults to 100 when unset/invalid. */
+  get volume(): number {
+    const v = this.clip.volume;
+    if (typeof v !== 'number' || Number.isNaN(v)) return 100;
+    return Math.min(100, Math.max(0, v));
+  }
+
+  get info(): SoundboardClipInfo | undefined {
+    return this.clip.info;
+  }
+
+  get content(): SoundboardClip {
+    return {
+      url: this.url,
+      body: this.clip.body,
+      emoji: this.clip.emoji,
+      volume: this.clip.volume,
+      info: this.clip.info,
+    };
+  }
+}

src/app/plugins/soundboard/SoundboardClipsReader.ts

@@ -0,0 +1,26 @@
+import { SoundboardClipReader } from './SoundboardClipReader';
+import { SoundboardClips } from './types';
+
+/** Parallels custom-emoji/PackImagesReader. */
+export class SoundboardClipsReader {
+  private readonly rawClips: SoundboardClips;
+
+  private shortcodeToClips: Map<string, SoundboardClipReader> | undefined;
+
+  constructor(clips: SoundboardClips) {
+    this.rawClips = clips;
+  }
+
+  get collection(): Map<string, SoundboardClipReader> {
+    if (this.shortcodeToClips) return this.shortcodeToClips;
+
+    const shortcodeToClips: Map<string, SoundboardClipReader> = new Map();
+    Object.entries(this.rawClips).forEach(([shortcode, clip]) => {
+      const reader = SoundboardClipReader.fromClip(shortcode, clip);
+      if (reader) shortcodeToClips.set(shortcode, reader);
+    });
+
+    this.shortcodeToClips = shortcodeToClips;
+    return this.shortcodeToClips;
+  }
+}

src/app/plugins/soundboard/SoundboardMetaReader.ts

@@ -0,0 +1,29 @@
+import { SoundboardMeta } from './types';
+
+/** Parallels custom-emoji/PackMetaReader (no usage tiers for soundboard). */
+export class SoundboardMetaReader {
+  private readonly meta: SoundboardMeta;
+
+  constructor(meta: SoundboardMeta) {
+    this.meta = meta;
+  }
+
+  get name(): string | undefined {
+    const displayName = this.meta.display_name;
+    return typeof displayName === 'string' ? displayName : undefined;
+  }
+
+  get avatar(): string | undefined {
+    const avatarURL = this.meta.avatar_url;
+    return typeof avatarURL === 'string' ? avatarURL : undefined;
+  }
+
+  get attribution(): string | undefined {
+    const { attribution } = this.meta;
+    return typeof attribution === 'string' ? attribution : undefined;
+  }
+
+  get content(): SoundboardMeta {
+    return this.meta;
+  }
+}

src/app/plugins/soundboard/SoundboardPack.ts

@@ -0,0 +1,48 @@
+import { MatrixEvent } from 'matrix-js-sdk';
+import { PackAddress } from '../custom-emoji/PackAddress';
+import { SoundboardClipReader } from './SoundboardClipReader';
+import { SoundboardClipsReader } from './SoundboardClipsReader';
+import { SoundboardMetaReader } from './SoundboardMetaReader';
+import { SoundboardContent } from './types';
+
+/** Parallels custom-emoji/ImagePack. Holds a soundboard pack's meta + clips. */
+export class SoundboardPack {
+  public readonly id: string;
+
+  public readonly deleted: boolean;
+
+  public readonly address: PackAddress | undefined;
+
+  public readonly meta: SoundboardMetaReader;
+
+  public readonly clips: SoundboardClipsReader;
+
+  private clipsMemo: SoundboardClipReader[] | undefined;
+
+  constructor(id: string, content: SoundboardContent, address: PackAddress | undefined) {
+    this.id = id;
+    this.address = address;
+    this.deleted = content.pack === undefined && content.clips === undefined;
+    this.meta = new SoundboardMetaReader(content.pack ?? {});
+    this.clips = new SoundboardClipsReader(content.clips ?? {});
+  }
+
+  static fromMatrixEvent(id: string, matrixEvent: MatrixEvent): SoundboardPack {
+    const roomId = matrixEvent.getRoomId();
+    const stateKey = matrixEvent.getStateKey();
+    const address =
+      roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
+    return new SoundboardPack(id, matrixEvent.getContent<SoundboardContent>(), address);
+  }
+
+  getClips(): SoundboardClipReader[] {
+    if (this.clipsMemo) return this.clipsMemo;
+    this.clipsMemo = Array.from(this.clips.collection.values());
+    return this.clipsMemo;
+  }
+
+  getAvatarUrl(): string | undefined {
+    if (this.meta.avatar) return this.meta.avatar;
+    return undefined;
+  }
+}

src/app/plugins/soundboard/index.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './SoundboardClipReader';
+export * from './SoundboardClipsReader';
+export * from './SoundboardMetaReader';
+export * from './SoundboardPack';
+export * from './utils';

src/app/plugins/soundboard/types.ts

@@ -0,0 +1,52 @@
+// [P5-15 v2] Soundboard packs — a near-parallel of the MSC2545 custom-emoji
+// image packs (see ../custom-emoji/types.ts), for shareable in-call audio clips.
+
+/** io.lotus.soundboard_rooms content (global refs) — mirrors EmoteRoomsContent. */
+export type SoundboardPackStateKeyToObject = Record<string, object>;
+export type SoundboardRoomIdToStateKey = Record<string, SoundboardPackStateKeyToObject>;
+export type SoundboardRoomsContent = {
+  rooms?: SoundboardRoomIdToStateKey;
+};
+
+/** Per-clip media info (audio, so no width/height — unlike IImageInfo). */
+export type SoundboardClipInfo = {
+  mimetype?: string;
+  size?: number;
+  /** Clip duration in milliseconds, if known. */
+  duration?: number;
+};
+
+/** A single soundboard clip (parallels PackImage). Keyed by shortcode in the pack. */
+export type SoundboardClip = {
+  url: string; // mxc://
+  body?: string; // display name
+  emoji?: string; // emoji tag (like a Discord soundboard emoji)
+  volume?: number; // 0–100, per-clip gain
+  info?: SoundboardClipInfo;
+};
+
+export type SoundboardClips = Record<string, SoundboardClip>;
+
+export type SoundboardMeta = {
+  display_name?: string;
+  avatar_url?: string;
+  attribution?: string;
+};
+
+/** io.lotus.soundboard (user account data) + io.lotus.soundboard (room state). */
+export type SoundboardContent = {
+  pack?: SoundboardMeta;
+  clips?: SoundboardClips;
+};
+
+/** Legacy v1 personal soundboard shape (flat list), migrated to a pack on read. */
+export type LegacySoundboardClip = {
+  id: string;
+  name: string;
+  url: string;
+  mimetype?: string;
+  size?: number;
+};
+export type LegacySoundboardContent = {
+  clips?: LegacySoundboardClip[];
+};

src/app/plugins/soundboard/utils.test.ts

@@ -0,0 +1,68 @@
+import { describe, test } from 'node:test';
+import assert from 'node:assert/strict';
+import { migrateUserSoundboardContent, slugifyClipName, uniqueShortcode } from './utils';
+
+describe('slugifyClipName', () => {
+  test('lowercases, replaces spaces, strips punctuation', () => {
+    assert.equal(slugifyClipName('  Air Horn!! '), 'air_horn');
+    assert.equal(slugifyClipName('Ba-Dum Tss'), 'ba-dum_tss');
+  });
+  test('falls back to "clip" when empty', () => {
+    assert.equal(slugifyClipName('   '), 'clip');
+    assert.equal(slugifyClipName('!!!'), 'clip');
+  });
+});
+
+describe('uniqueShortcode', () => {
+  test('returns the slug when free', () => {
+    assert.equal(uniqueShortcode('Airhorn', new Set()), 'airhorn');
+  });
+  test('suffixes on collision', () => {
+    assert.equal(uniqueShortcode('Airhorn', new Set(['airhorn'])), 'airhorn-2');
+    assert.equal(uniqueShortcode('Airhorn', new Set(['airhorn', 'airhorn-2'])), 'airhorn-3');
+  });
+});
+
+describe('migrateUserSoundboardContent', () => {
+  test('migrates the v1 flat list into a v2 pack keyed by slug', () => {
+    const v1 = {
+      clips: [
+        { id: 'a', name: 'Air Horn', url: 'mxc://x/1', mimetype: 'audio/mpeg', size: 100 },
+        { id: 'b', name: 'Applause', url: 'mxc://x/2' },
+      ],
+    };
+    const out = migrateUserSoundboardContent(v1);
+    assert.deepEqual(Object.keys(out.clips ?? {}).sort(), ['air_horn', 'applause']);
+    assert.equal(out.clips?.air_horn.url, 'mxc://x/1');
+    assert.equal(out.clips?.air_horn.body, 'Air Horn');
+    assert.equal(out.clips?.air_horn.info?.mimetype, 'audio/mpeg');
+    assert.ok(out.pack?.display_name);
+  });
+
+  test('dedupes colliding v1 names', () => {
+    const v1 = {
+      clips: [
+        { id: 'a', name: 'Horn', url: 'mxc://x/1' },
+        { id: 'b', name: 'Horn', url: 'mxc://x/2' },
+      ],
+    };
+    const out = migrateUserSoundboardContent(v1);
+    assert.deepEqual(Object.keys(out.clips ?? {}).sort(), ['horn', 'horn-2']);
+  });
+
+  test('skips v1 entries without a url', () => {
+    const out = migrateUserSoundboardContent({ clips: [{ id: 'a', name: 'Bad' } as never] });
+    assert.deepEqual(out.clips, {});
+  });
+
+  test('passes a v2 pack through unchanged', () => {
+    const v2 = { pack: { display_name: 'P' }, clips: { horn: { url: 'mxc://x/1', volume: 50 } } };
+    assert.deepEqual(migrateUserSoundboardContent(v2), v2);
+  });
+
+  test('handles empty / non-object input', () => {
+    assert.deepEqual(migrateUserSoundboardContent({}), {});
+    assert.deepEqual(migrateUserSoundboardContent(null), {});
+    assert.deepEqual(migrateUserSoundboardContent(undefined), {});
+  });
+});

src/app/plugins/soundboard/utils.ts

@@ -0,0 +1,103 @@
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
+import { SoundboardPack } from './SoundboardPack';
+import {
+  LegacySoundboardContent,
+  SoundboardClips,
+  SoundboardContent,
+  SoundboardRoomsContent,
+} from './types';
+import { StateEvent } from '../../../types/matrix/room';
+import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
+
+/** Normalize a display name into a pack shortcode key (parallels emoji shortcodes). */
+export function slugifyClipName(name: string): string {
+  const s = name
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '_')
+    .replace(/[^a-z0-9_-]/g, '');
+  return s || 'clip';
+}
+
+/** Pick a shortcode not already present in `taken`, suffixing on collision. */
+export function uniqueShortcode(base: string, taken: Set<string>): string {
+  const code = slugifyClipName(base);
+  if (!taken.has(code)) return code;
+  let i = 2;
+  while (taken.has(`${code}-${i}`)) i += 1;
+  return `${code}-${i}`;
+}
+
+export function makeSoundboardPacks(packEvents: MatrixEvent[]): SoundboardPack[] {
+  return packEvents.reduce<SoundboardPack[]>((packs, packEvent) => {
+    const packId = packEvent.getId();
+    if (!packId) return packs;
+    packs.push(SoundboardPack.fromMatrixEvent(packId, packEvent));
+    return packs;
+  }, []);
+}
+
+export function getRoomSoundboardPack(room: Room, stateKey: string): SoundboardPack | undefined {
+  const packEvent = getStateEvent(room, StateEvent.LotusSoundboardRoom, stateKey);
+  if (!packEvent) return undefined;
+  const packId = packEvent.getId();
+  if (!packId) return undefined;
+  return SoundboardPack.fromMatrixEvent(packId, packEvent);
+}
+
+export function getRoomSoundboardPacks(room: Room): SoundboardPack[] {
+  return makeSoundboardPacks(getStateEvents(room, StateEvent.LotusSoundboardRoom));
+}
+
+export function getGlobalSoundboardPacks(mx: MatrixClient): SoundboardPack[] {
+  const content = getAccountData(mx, AccountDataEvent.LotusSoundboardRooms)?.getContent() as
+    | SoundboardRoomsContent
+    | undefined;
+  const roomIdToPackInfo = content?.rooms;
+  if (typeof roomIdToPackInfo !== 'object' || !roomIdToPackInfo) return [];
+
+  return Object.keys(roomIdToPackInfo).flatMap((roomId) => {
+    if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
+    const room = mx.getRoom(roomId);
+    if (!room) return [];
+    const stateKeys = roomIdToPackInfo[roomId];
+    const globalEvents = getStateEvents(room, StateEvent.LotusSoundboardRoom).filter((mE) => {
+      const stateKey = mE.getStateKey();
+      return typeof stateKey === 'string' ? !!stateKeys[stateKey] : false;
+    });
+    return makeSoundboardPacks(globalEvents);
+  });
+}
+
+/**
+ * Convert a personal soundboard account-data content to the v2 pack shape,
+ * migrating the v1 flat-list form (`{clips: [{id,name,url}]}`) on the fly.
+ */
+export function migrateUserSoundboardContent(raw: unknown): SoundboardContent {
+  if (typeof raw !== 'object' || raw === null) return {};
+  const legacy = raw as LegacySoundboardContent;
+  if (!Array.isArray(legacy.clips)) return raw as SoundboardContent; // already v2 (or empty)
+
+  const clips: SoundboardClips = {};
+  const taken = new Set<string>();
+  legacy.clips.forEach((c) => {
+    if (!c || typeof c.url !== 'string') return;
+    const shortcode = uniqueShortcode(c.name || 'clip', taken);
+    taken.add(shortcode);
+    clips[shortcode] = {
+      url: c.url,
+      body: c.name,
+      info: { mimetype: c.mimetype, size: c.size },
+    };
+  });
+  return { pack: { display_name: 'My Soundboard' }, clips };
+}
+
+export function getUserSoundboardPack(mx: MatrixClient): SoundboardPack | undefined {
+  const packEvent = getAccountData(mx, AccountDataEvent.LotusSoundboard);
+  const userId = mx.getUserId();
+  if (!packEvent || !userId) return undefined;
+  const content = migrateUserSoundboardContent(packEvent.getContent());
+  return new SoundboardPack(userId, content, undefined);
+}

src/app/state/manualDnd.ts

@@ -0,0 +1,14 @@
+import { atom } from 'jotai';
+
+/**
+ * P6-1 — Tray "Do Not Disturb" ↔ notification suppression (manual toggle).
+ *
+ * Standalone, non-persisted boolean atom reflecting whether the user has flipped
+ * the native tray "Do Not Disturb" item. It is driven at runtime by
+ * `useTauriDnd` from the native `lotus-dnd-changed` event and read by the
+ * notification gate to suppress notifications while DND is on. Because it mirrors
+ * a transient session toggle — not a persisted user preference — it is a plain
+ * in-memory atom that defaults to `false` and is intentionally NOT written to
+ * `localStorage`.
+ */
+export const manualDndAtom = atom(false);

src/app/state/roomSettings.ts

@@ -5,6 +5,7 @@ export enum RoomSettingsPage {
   MembersPage,
   PermissionsPage,
   EmojisStickersPage,
+  SoundboardPage,
   DeveloperToolsPage,
   ExportPage,
   ActivityLogPage,

src/app/state/spaceSettings.ts

@@ -5,6 +5,7 @@ export enum SpaceSettingsPage {
   MembersPage,
   PermissionsPage,
   EmojisStickersPage,
+  SoundboardPage,
   DeveloperToolsPage,
   PolicyListsPage,
 }

src/app/utils/a11y.test.ts

@@ -0,0 +1,28 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import dayjs from 'dayjs';
+import { messageAriaLabel } from './a11y';
+import { timeDayMonthYear, timeHourMinute } from './time';
+
+test('messageAriaLabel composes sender, date and time (24h)', () => {
+  const ts = dayjs('2026-07-01T14:30:00').valueOf();
+  assert.equal(
+    messageAriaLabel('Alice', ts, true),
+    `Alice, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, true)}`,
+  );
+});
+
+test('messageAriaLabel honours the 12-hour clock preference', () => {
+  const ts = dayjs('2026-07-01T14:30:00').valueOf();
+  assert.equal(
+    messageAriaLabel('Bob', ts, false),
+    `Bob, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, false)}`,
+  );
+});
+
+test('messageAriaLabel keeps the sender name verbatim as plain text', () => {
+  const ts = dayjs('2026-07-01T09:05:00').valueOf();
+  const label = messageAriaLabel('@user:example.org', ts, true);
+  assert.ok(label.startsWith('@user:example.org, '));
+  assert.ok(!label.includes('<'));
+});

src/app/utils/a11y.ts

@@ -0,0 +1,14 @@
+import { timeDayMonthYear, timeHourMinute } from './time';
+
+/**
+ * Builds a plain-text accessible label for a message row, used when the
+ * visible sender/timestamp header is collapsed and therefore hidden from
+ * assistive technology.
+ *
+ * @param sender - Sender display name (already resolved to a human string).
+ * @param ts - Message origin timestamp in milliseconds.
+ * @param hour24Clock - Whether to format the time using a 24-hour clock.
+ * @returns A label such as `Alice, 1 July 2026 14:30`.
+ */
+export const messageAriaLabel = (sender: string, ts: number, hour24Clock: boolean): string =>
+  `${sender}, ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`;

src/app/utils/caseCollision.test.ts

@@ -0,0 +1,43 @@
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Guard against same-directory filenames that differ only by case (e.g.
+ * `threadSummary.ts` vs `ThreadSummary.tsx`). On case-insensitive filesystems
+ * (the Windows release runner) an extensionless import of one can resolve to
+ * the OTHER file — rolldown tries `.ts` before `.tsx` — producing
+ * MISSING_EXPORT failures that never reproduce on the Linux/macOS machines the
+ * project is developed and web-deployed on. This broke the desktop release
+ * build twice before being diagnosed; this test makes the collision a local,
+ * immediate failure instead.
+ */
+const findCaseCollisions = (dir: string, collisions: string[]): void => {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const seen = new Map<string, string>();
+  entries.forEach((entry) => {
+    // Compare basenames without extension: `Foo.tsx` collides with `foo.ts`
+    // because module resolution is extensionless.
+    const stem = entry.isDirectory() ? entry.name : entry.name.replace(/\.[^.]+$/, '');
+    const key = stem.toLowerCase();
+    const existing = seen.get(key);
+    if (existing !== undefined && existing !== stem) {
+      collisions.push(`${dir}: "${existing}" vs "${stem}"`);
+    }
+    if (existing === undefined) seen.set(key, stem);
+    if (entry.isDirectory()) {
+      findCaseCollisions(join(dir, entry.name), collisions);
+    }
+  });
+};
+
+test('no same-directory filenames differing only by case under src/', () => {
+  const collisions: string[] = [];
+  findCaseCollisions('src', collisions);
+  assert.deepEqual(
+    collisions,
+    [],
+    `Case-colliding names break Windows builds:\n${collisions.join('\n')}`,
+  );
+});

src/app/utils/cryptoDiagLog.ts

@@ -5,7 +5,7 @@ import pkg from '../../../package.json';
 //
 // Installs pass-through wrappers around `console.warn` / `console.error` that
 // ring-buffer any log line matching the KE-1..KE-4 bug-cluster signatures
-// (see LOTUS_E2EE_INVESTIGATION.md). It NEVER swallows a log call — the
+// (E2EE KE-1..4 capture; see LOTUS_TODO.md). It NEVER swallows a log call — the
 // original console method is always invoked — and it performs NO network I/O.
 // The report metadata is limited to SDK version / device id / user id / sync
 // state; the captured log lines themselves are intentional evidence and may

src/app/utils/soundboardClips.ts

@@ -1,25 +1,9 @@
 import { MatrixClient } from 'matrix-js-sdk';
 import { downloadMedia, mxcUrlToHttp } from './matrix';
 
-/**
- * [P5-15] A user-uploaded soundboard clip. Stored (as a list) in the
- * `io.lotus.soundboard` account data event, so clips sync across a user's
- * devices exactly like custom emoji / sticker packs.
- */
-export type SoundboardClip = {
-  /** Stable local id (not shared with peers). */
-  id: string;
-  /** Display name / shortcode shown on the tile. */
-  name: string;
-  /** mxc:// URI of the uploaded audio. */
-  url: string;
-  mimetype?: string;
-  size?: number;
-};
-
-export type SoundboardContent = {
-  clips?: SoundboardClip[];
-};
+// [P5-15 v2] Shared media helpers for the soundboard. Clip storage/metadata now
+// lives in the soundboard pack plugin (plugins/soundboard); this module only
+// handles resolving an mxc clip for playback + local preview.
 
 export const SOUNDBOARD_NAME_MAX = 24;
 /** Keep clips short: they publish to every peer and hold a track open. */
@@ -53,20 +37,19 @@ export const resolveClipObjectUrl = async (mx: MatrixClient, mxcUrl: string): Pr
  * Play a resolved clip locally so the person who pressed it gets immediate
  * feedback — LiveKit doesn't loop a participant's own published track back to
  * them, so without this the presser would hear nothing. `volume` is 0–1.
+ * Returns the audio element so callers can track when it ends (or undefined if
+ * playback couldn't start).
  */
-export const playClipLocally = (objectUrl: string, volume: number): void => {
+export const playClipLocally = (
+  objectUrl: string,
+  volume: number,
+): HTMLAudioElement | undefined => {
   try {
     const audio = new Audio(objectUrl);
     audio.volume = Math.max(0, Math.min(1, volume));
     audio.play().catch(() => undefined);
+    return audio;
   } catch {
-    /* best effort */
+    return undefined;
   }
 };
-
-export const readSoundboardClips = (mx: MatrixClient): SoundboardClip[] => {
-  const content = mx.getAccountData('io.lotus.soundboard' as never)?.getContent() as
-    | SoundboardContent
-    | undefined;
-  return Array.isArray(content?.clips) ? content.clips : [];
-};

src/index.tsx

@@ -44,6 +44,20 @@ if ('serviceWorker' in navigator) {
   });
 }
 
+// Request persistent storage so the browser can't evict the IndexedDB
+// rust-crypto store under storage pressure. Eviction (while the localStorage
+// session/device-id survives) resurrects the device with a blank crypto store,
+// which then re-uploads OTKs the server already holds → the "one time key
+// already exists" upload storm and E2EE breakage. Only ask for sessions worth
+// protecting (skip anonymous/landing visitors to avoid a needless Firefox
+// prompt); check persisted() first so we don't re-prompt. Best-effort.
+if (navigator.storage?.persist && getFallbackSession()) {
+  navigator.storage
+    .persisted()
+    .then((already) => (already ? undefined : navigator.storage.persist()))
+    .catch(() => undefined);
+}
+
 // Reload once if a lazy-loaded chunk is missing (stale deployment)
 window.addEventListener('vite:preloadError', () => {
   if (!sessionStorage.getItem('chunk-reload-attempted')) {

src/sw.ts

@@ -1,7 +1,39 @@
 /// <reference lib="WebWorker" />
 
+import { precacheAndRoute, type PrecacheEntry } from 'workbox-precaching';
+
 export type {};
-declare const self: ServiceWorkerGlobalScope;
+declare const self: ServiceWorkerGlobalScope & {
+  // Replaced at build time by vite-plugin-pwa (injectManifest) with the list of
+  // hashed build assets to precache. See vite.config.js VitePWA injectManifest.
+  __WB_MANIFEST: Array<string | PrecacheEntry>;
+};
+
+/**
+ * PRECACHE (workbox-precaching). `self.__WB_MANIFEST` is replaced at build time
+ * by vite-plugin-pwa with the list of hashed build assets
+ * (assets/**\/*.{js,css,wasm}; see vite.config.js injectManifest.globPatterns).
+ *
+ * DEPLOY-SAFETY INVARIANTS (do not break):
+ *  1. index.html / navigations are NEVER precached or precache-routed. The
+ *     manifest globs only `assets/**` (content-hashed), so index.html (served
+ *     from the app root) is absent from it and navigation requests fall through
+ *     to the network — a new deploy is picked up immediately, no stale SPA
+ *     shell. We deliberately do NOT register a navigation route /
+ *     createHandlerBoundToURL fallback.
+ *  2. precacheAndRoute only matches its own manifest URLs (same-origin hashed
+ *     assets). It never matches the media-auth paths handled by the fetch
+ *     listener below — those are cross-origin homeserver URLs absent from the
+ *     manifest — so the existing media fetch behaviour is fully preserved. It
+ *     is registered before that listener; for a media request the precache
+ *     route finds no match and does not call respondWith, so the media handler
+ *     still runs.
+ *  3. Assets are content-hashed, so a changed asset ships under a new filename;
+ *     PrecacheController drops entries no longer in the current manifest on
+ *     activate, so the precache self-updates each deploy without unbounded
+ *     growth.
+ */
+precacheAndRoute(self.__WB_MANIFEST);
 
 type SessionInfo = {
   accessToken: string;

src/types/matrix/accountData.ts

@@ -10,9 +10,12 @@ export enum AccountDataEvent {
   PoniesUserEmotes = 'im.ponies.user_emotes',
   PoniesEmoteRooms = 'im.ponies.emote_rooms',
 
-  // [P5-15] Personal, uploadable in-call soundboard clips (synced across
-  // devices like custom emoji/sticker packs).
+  // [P5-15] Personal soundboard pack (synced across devices). v2 content is a
+  // SoundboardContent pack ({pack, clips}); v1 was {clips: [...]} (migrated on read).
   LotusSoundboard = 'io.lotus.soundboard',
+  // [P5-15 v2] Global refs: room soundboard packs the user enabled everywhere
+  // (mirrors im.ponies.emote_rooms).
+  LotusSoundboardRooms = 'io.lotus.soundboard_rooms',
 
   // [P4-1] Per-thread notification mode overrides (All/Mentions/Mute) plus the
   // global default behavior for threads.

src/types/matrix/room.ts

@@ -42,6 +42,9 @@ export enum StateEvent {
   PowerLevelTags = 'in.cinny.room.power_level_tags',
   LotusVoiceLimit = 'io.lotus.voice_limit',
   LotusRoomQuality = 'io.lotus.room_quality',
+  // [P5-15 v2] Room/Space soundboard pack (mirrors PoniesRoomEmotes). Per
+  // state-key, aggregated with parent-space packs like custom emoji.
+  LotusSoundboardRoom = 'io.lotus.soundboard',
 }
 
 export enum MessageEvent {