docs: condense LOTUS_TODO to open work only (1063→~230 lines)

Removed resolved audit-wave finding tables and shipped-feature narratives (now
in LOTUS_FEATURES.md + git history); kept every open/blocked/deferred item, the
E2EE + Web Push backlog, and the reference tables (server caps, key files, EC
fork ops, CI/CD).

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

.env.production

@@ -1,2 +1 @@
-VITE_SENTRY_DSN=https://264a5e95c5d31fe080a2e92fb008294d@o4511430568378368.ingest.us.sentry.io/4511430571982849
 VITE_APP_VERSION=lotus

.gitea/workflows/ci.yml

@@ -21,16 +21,38 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        # Harden against transient registry network failures (ECONNRESET etc.):
+        # raise npm's built-in fetch retries/timeouts and retry `npm ci` up to
+        # 3 times with backoff before failing the build.
+        run: |
+          npm config set fetch-retries 5
+          npm config set fetch-retry-mintimeout 20000
+          npm config set fetch-retry-maxtimeout 120000
+          npm config set fetch-timeout 600000
+          for attempt in 1 2 3; do
+            echo "npm ci attempt $attempt…"
+            npm ci && break
+            if [ "$attempt" = "3" ]; then
+              echo "npm ci failed after 3 attempts" >&2
+              exit 1
+            fi
+            echo "npm ci failed; retrying in $((attempt * 15))s…" >&2
+            sleep $((attempt * 15))
+          done
 
       # ── Critical gate — if this fails, nothing deploys ──────────────────
       - name: Build
         run: npm run build
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           VITE_APP_VERSION: ${{ github.sha }}
 
+      # Unit tests are a hard gate too — deterministic pure-logic tests on Node's
+      # built-in runner via tsx (no vitest — Vite 8 is ahead of vitest's range).
+      # A failure blocks the deploy.
+      - name: Unit tests
+        run: npm test
+
       # ── Quality checks (informational — pre-existing issues exist) ───────
       - name: TypeScript
         run: npm run typecheck
@@ -62,3 +84,35 @@ jobs:
             gzip_size=$(gzip -c "$f" | wc -c | awk '{printf "%.1f kB", $1/1024}')
             echo "| $name | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
           done
+
+  # ── Desktop build trigger ──────────────────────────────────────────────
+  # Gated on `build` succeeding so a broken push (e.g. failing `npm ci` or
+  # `npm run build`) never bumps the cinny-desktop submodule and kicks off the
+  # slow Tauri release builds, which would only error out downstream. Only
+  # runs on a real push to lotus — not on pull_request CI runs.
+  trigger-desktop:
+    name: Trigger Desktop Build
+    needs: build
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/lotus' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Bump cinny submodule
+        env:
+          TOKEN: ${{ secrets.RELEASE_TOKEN }}
+        run: |
+          CINNY_SHA="${{ github.sha }}"
+          git clone "https://x-access-token:$TOKEN@code.lotusguild.org/LotusGuild/cinny-desktop.git" desktop
+          cd desktop
+          git config user.email "ci@lotusguild.org"
+          git config user.name "Lotus CI"
+          git submodule update --init cinny
+          git -C cinny fetch origin
+          git -C cinny checkout "$CINNY_SHA"
+          git add cinny
+          if git diff --cached --quiet; then
+            echo "Submodule already at $CINNY_SHA, nothing to do"
+          else
+            git commit -m "chore: bump cinny submodule to ${CINNY_SHA:0:8}"
+            git push origin main
+            echo "Pushed — cinny-desktop release.yml will start via on:push trigger"
+          fi

.github/workflows/docker-pr.yml

@@ -22,11 +22,11 @@ jobs:
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
 
       - name: Login to Docker Hub #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Login to the Github Container registry #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -43,14 +43,14 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ajbura/cinny
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
         with:
           context: .
           platforms: linux/amd64

.github/workflows/prod-deploy.yml

@@ -70,27 +70,27 @@ jobs:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.gitignore

@@ -5,3 +5,4 @@ devAssets
 
 .DS_Store
 .ideapackage-lock.json
+public/decorations/

.npmrc

@@ -1,2 +1,3 @@
 legacy-peer-deps=true
 save-exact=true
+@lotusguild:registry=https://code.lotusguild.org/api/packages/LotusGuild/npm/

LOTUS_TESTING.md

@@ -0,0 +1,728 @@
+# Lotus Chat — Manual Testing Guide
+
+**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.
+
+## Environment notes
+
+- You push from your own machine; these commits are local on `lotus` until you do.
+- Test the **web** build (LXC 106 / `code.lotusguild.org`) first; re-run the **call** + **poll** sections on the **desktop (Tauri)** build too, since CSP and the EC iframe behave differently there.
+- Several call features need a **second participant** (second account on another device/browser, or a colleague). Items that need this are marked **👥 2 people**.
+- A couple of call items need a **third room/call** in parallel — marked **👥👥**.
+
+---
+
+## Commits covered
+
+| Commit     | Area                                                                         |
+| :--------- | :--------------------------------------------------------------------------- |
+| `caf6318a` | Poll vote buttons → folds tokens (N4)                                        |
+| `c67aed01` | In-call incoming-call banner (#4b)                                           |
+| `4a875884` | Selectable ringtone (#4a)                                                    |
+| `0394fce9` | EC iframe load watchdog + recovery UI; avatar decorations on call tiles (#3) |
+| `d2946c00` | Upload retry/backoff, presence-on-unload, typed m.direct                     |
+| `b7e1f89c` | Timeline/composer/emoji perf memoization                                     |
+| `c0f98672` | Upstream **Element Call 0.20.1** merge (regression sweep)                    |
+
+---
+
+## A. Calls — new ringtone + notification work (highest priority)
+
+### A1. Ringtone selection — preview in Settings
+
+**Steps**
+
+1. Open **Settings → General**, scroll to the **Calls** section.
+2. Find the new **Ringtone** dropdown (just above **Ringtone Volume**).
+3. Select each option in turn: **Classic, Chime, Soft, Retro, Silent**.
+
+**Expected**
+
+- Selecting **Classic** plays the existing `call.ogg` clip (cut off after a few seconds).
+- **Chime / Soft / Retro** each play a short, distinct synthesized preview.
+- **Silent** plays nothing.
+- Changing **Ringtone Volume** then re-selecting a ringtone previews at the new volume.
+- No console errors.
+
+> ⚠️ **Known browser limitation:** the synthesized tones use WebAudio. If a preview is ever silent, click anywhere on the page once (a "user gesture") and retry — browsers suspend audio until the page has been interacted with. The Settings preview is _after_ a click so it should always sound; this note matters more for A3.
+
+### A2. Ringtone selection persists
+
+1. Set Ringtone to **Retro**, reload the app.
+2. **Expected:** the dropdown still shows **Retro** (setting persisted).
+3. Bonus: in devtools, set `localStorage.settings` to a bogus `ringtoneId` and reload → it should fall back to **Classic**, not break.
+
+### A3. Incoming call uses the selected ringtone — 👥 2 people
+
+**Setup:** Account A (you) and Account B in a **DM** or a **private (invite-only) group** room.
+
+1. As A, pick a non-silent ringtone (e.g. **Chime**).
+2. From B, **start a call** in that DM/room. Do **not** answer on A.
+
+**Expected on A**
+
+- The full-screen **Incoming Call** dialog appears (caller name, room avatar, Answer / Reject).
+- The **selected ringtone loops** until you answer/reject/ignore (at the set volume).
+- Answer → joins the call. Reject (DM) / Ignore (group) → dialog dismisses and ring stops.
+- Set ringtone to **Silent** and repeat → dialog still appears, **no sound**.
+
+### A4. In-call banner for a second incoming call — 👥👥 (the trickiest one)
+
+**Setup:** You (A) already **in a call** in Room 1. Account B can call you in a **different** Room 2 (a DM or private group you share). Ideally a third account C, or B leaves Room 1's call first.
+
+1. While A is **actively in Room 1's call**, trigger an incoming call to A from **Room 2**.
+
+**Expected on A**
+
+- **No** full-screen takeover. Instead a **compact banner appears in the top-right corner** with the caller's avatar, room name, "Incoming voice/video call", and **Answer / Reject (or Ignore)** buttons.
+- It plays a **single soft ping**, _not_ a looping ring (so it doesn't talk over your active call).
+- The banner does **not** cover your active call's controls/PiP in a way that blocks them.
+- **Answer** → switches you into Room 2's call. **Reject/Ignore** → banner disappears.
+- The banner auto-dismisses if the caller hangs up / the call times out.
+
+**Also verify the no-op case:** while in Room 1's call, if a notification for **Room 1 itself** arrives, **nothing** should pop up (no banner, no dialog).
+
+### A5. Camera focus during screenshare (#1) — 👥 2 people
+
+**Setup:** You (A) and B in a call; B (or another participant) **sharing their screen**, and at least one person with **camera on**.
+
+1. As A, open the **participant glance** (the stacked avatars / member list for the call) and click a participant who has their **camera on**.
+2. In the menu, click **"Focus camera"**.
+
+**Expected**
+
+- The view switches to **spotlight** and **pins that person's camera tile**, overriding the auto-spotlighted screenshare.
+- It **stays** on that camera (doesn't immediately snap back to the screenshare).
+- If you pick someone with their camera **off**, it should at worst just toggle spotlight (graceful fallback), not error.
+
+### A6. Avatar decorations on call tiles (#3) — 👥 2 people
+
+**Setup:** A participant in the call has an **avatar decoration** set (Settings → Profile decoration).
+
+1. Join a call with that participant.
+2. Look at **our** participant roster / prescreen tiles (not the avatars rendered inside the Element Call video grid — those are EC's and out of scope).
+
+**Expected:** the decoration ring/overlay renders around that participant's avatar on the call tile, the same way it does in member lists.
+
+### A7. EC iframe load watchdog + recovery UI (#EC, N96)
+
+This guards against a permanently-stuck "Loading…" call. Also covers the N96 button-label fix (the old "Retry" and "Leave" buttons were identical — now there is a single **"Back"** button).
+
+1. Normal case: **join a call** → it should connect within a few seconds as usual (the watchdog stays invisible).
+2. Failure case (best-effort to reproduce): throttle your network hard (devtools → Network → Offline) **right as** you click join, or block the Element Call origin, so the iframe can't finish loading.
+
+**Expected**
+
+- On a genuine failure/timeout (~25s), instead of an endless spinner you get a **visible error overlay with a single "Back" button** (the old "Retry" + "Leave" pair is gone — they did the same thing and "Retry" was misleading).
+- Clicking **Back** returns you to the call prescreen, where you can manually click Join to try again.
+- Normal joins must **not** trigger the error overlay (no false positives) — this is the important part to confirm.
+- **Self-heal:** if the error overlay appears on a slow network but EC then finishes loading anyway, the overlay should **dismiss itself** and drop you into the live call. Worth confirming on a deliberately throttled-but-not-blocked connection.
+
+---
+
+## B. Polls (N4) — render correctly on non-TDS themes
+
+This was the actual bug: poll buttons used undefined CSS variables, so on the **default (non-Lotus-Terminal) themes** they rendered with invisible borders / no selected state.
+
+### B1. Poll renders on a default theme — ✅ PASS
+
+1. Switch to a **default Cinny theme** (Settings → Appearance — **not** Lotus Terminal / TDS). Test both a **dark** and a **light** theme.
+2. In any room, create a poll (composer → poll button): a **single-choice** poll with 3 options.
+
+**Expected**
+
+- Each option is a clearly **bordered** button with visible rounded corners.
+- A **radio circle** indicator is visible on the left of each option.
+- Text, and (after votes) the percentage, are legible.
+
+### B2. Voting + selected/progress state
+
+1. **Vote** on an option.
+   **Expected**
+
+- The selected option shows a **filled accent border + filled radio**, and an **accent progress-bar fill** grows behind it proportional to the vote %.
+- The percentage and total vote count update.
+- Click again / pick another option → selection moves correctly (single-choice replaces; the bar redraws).
+
+### B3. Multiple-choice poll
+
+1. Create a poll allowing **multiple selections**.
+   **Expected**
+
+- Indicators are **square checkboxes** (not circles); selected ones show a **✓** that's legible against the filled box.
+- You can select **several** options; each shows its own progress fill.
+
+### B4. Lotus Terminal theme regression — ✅ PASS
+
+1. Switch to **Lotus Terminal / TDS** theme and re-open a poll.
+   **Expected:** still looks correct (the fix uses theme tokens, so the TDS accent should now drive it) — no worse than before.
+
+---
+
+## C. Robustness / background behavior
+
+### C1. Presence updates on tab close
+
+1. Open the app, then **close the tab** (or quit the browser).
+2. From another session/device, check your **presence** shortly after.
+   **Expected:** you go **offline/away** reliably (the unload now uses `fetch({keepalive})`). Previously this could be missed.
+
+### C2. Upload retry on flaky network (best-effort)
+
+1. In devtools → Network, set a throttle that drops/slows requests, or toggle Offline briefly **during** a file upload.
+   **Expected**
+
+- A transient failure **retries** (up to 3×, with backoff) and the upload can still succeed once the network recovers.
+- A genuine, permanent rejection (e.g. file too large / 4xx) still **fails fast** with the usual error — it should **not** spin retrying.
+
+### C3. General timeline/composer perf (no functional regression)
+
+The memoization changes are invisible if correct. Just confirm **nothing broke**:
+
+- Open a busy room; scrolling, jump-to-latest, mark-as-read all still work.
+- Composer: send a message, upload a file, share a location, pick an emoji and a sticker — all still work.
+
+---
+
+## D. Element Call 0.20.1 merge — regression sweep (👥 2 people)
+
+The upstream bump changed EC's internals and DOM selectors; our call controls drive that iframe, so sweep them. In a live call with 2 people, confirm **each** of our control-bar buttons works:
+
+- [ ] **Mic** mute/unmute (icon + actual audio)
+- [ ] **Camera** on/off
+- [ ] **Deafen / Sound** toggle (your deafen key too)
+- [ ] **Screenshare** start/stop (and the "Share your screen?" confirm)
+- [ ] **Screenshare audio** mute toggle
+- [ ] **Fullscreen** toggle
+- [ ] **⋮ More** menu → **Spotlight/Grid**, **Reactions**, **Settings** each open the right EC panel
+- [ ] **End** call leaves cleanly
+- [ ] **PTT** (push-to-talk) if enabled: hold key = transmit, release = mute; releasing on blur works
+- [ ] **AFK auto-mute** if enabled: goes muted after the timeout
+- [ ] **PiP** (picture-in-picture) mini window: drag, resize, fullscreen button, return-to-call; the "You muted" / "All muted" badges show on the right person
+- [ ] **Denoise** (if ML noise suppression enabled): call audio still flows, no silence
+
+If any control does nothing, that usually means an EC DOM selector changed — capture the console and tell me which button.
+
+---
+
+## D2. Element Call **fork** — Phase 2 feature sweep (👥 2 people) — `0.20.1-lotus.1`
+
+> The whole EC iframe is now our **self-built fork** (`@lotusguild/element-call-embedded@0.20.1-lotus.1`).
+> Five features are **active** (the host sets their flags / sends their actions); two ship **dormant**.
+> **Confirm you're on the fork first:** EC iframe console prints `Element Call embedded-v0.20.1-lotus.1`
+> (the old build prints `embedded-v0.20.1`). If it says the old version, the web deploy hasn't landed —
+> the fork features won't be present, so don't test D2 yet.
+> For non-dev testers, each item below also states the plain "✅ good if / ❌ tell us if" outcome.
+
+### D2-1. Denoise **in-source** — survives reconnect (fixes A7) ⭐ highest risk (everyone's mic)
+
+Flag: cinny sets `lotusDenoiseSource=1` when ML denoise is selected (the old build-time getUserMedia
+shim is **removed**). This is the single change with the widest blast radius — test deliberately.
+
+- [ ] **Audio flows, no silence** with ML denoise on (baseline, also §D line 204).
+- [ ] **Reconnect (the A7 fix):** in a call with ML denoise on, kill network ~10 s (devtools → Offline)
+      so EC shows "Connection lost / Reconnect", then restore. **Mic still works AND still denoised**
+      afterward, **without** End+rejoin. _(This is the exact bug that was reintroduced then fixed; if it
+      regresses, mic dies on every reconnect.)_
+- [ ] **Mic device switch mid-call** (Settings → change microphone): audio keeps working (same
+      `restart()` path as reconnect).
+- [ ] **Mute → unmute** a few times: audio returns each time.
+- [ ] **Each model** if the picker offers them: `rnnoise` (default), `speex`, `dtln`, `deepfilternet` —
+      each loads + denoises, no silence. (All four are in-source now; DTLN runs at 16 kHz, others 48 kHz.)
+- [ ] **No double-processing:** audio isn't over-suppressed/artifacted (would mean the old shim is still
+      injected alongside the in-source engine).
+- **Rollback if bad for everyone:** revert the cinny deploy commit (restores the shim + `@element-hq` parity).
+
+### D2-2. Speaking + mute indicators from widget **events** (#2)
+
+Flag: `lotusCallState=1`. cinny now reads speaker/mute state from `io.lotus.call_state` events instead of
+scraping EC's DOM (DOM fallback retained). Overlaps **G1**.
+
+- [ ] **Speaking glow** lights the **correct** person when they talk (you, then your friend).
+- [ ] **PiP "All muted" / "You muted" badge** points at the right person and updates on mute/unmute.
+
+### D2-3. Focus camera **during a screenshare** (#4 / A5)
+
+Action: cinny sends `io.lotus.focus_participant` (the DOM `.click()` hack is gone). Overlaps **A5 / G2**.
+
+- [ ] Person A screenshares; Person B camera on; **MemberGlance → Focus camera** on B → B's camera is
+      spotlighted **alongside/over** the shared screen (not ignored).
+- [ ] Camera-**off** target = graceful (no error, no kick out of the screenshare).
+
+### D2-4. In-call avatar decorations (#6) — **NEW, beyond A6**
+
+Action: cinny pushes `io.lotus.decorations`. **A6 only covered the lobby roster** and called in-call EC
+tiles out of scope — that's now in scope.
+
+- [ ] A participant with a **Profile decoration** joins **camera off** → the decoration ring renders on
+      their **in-call video-tile avatar** (inside EC, not just the lobby), correctly sized/positioned.
+- [ ] Decoration tracks the right person across grid/spotlight layout changes; disappears when they leave.
+
+### D2-5. Native transparent background (#5)
+
+Flag: `lotusTransparent=1` (native, replacing the injected `background:none !important`).
+
+- [ ] Call background looks right — host wallpaper/surface shows through; **no** black box, bad
+      see-through, or layout breakage (also covered loosely by §D2 "looks right").
+
+### D2-7. In-Call Soundboard (#3 / P5-15) — 👥 2 people — **NEW**
+
+Flag: `lotusAudioInject=1`. A 🔔 **Soundboard** button now sits in the call controls bar (left group,
+next to the chat button). Clips are user-uploadable and sync across your devices like emoji packs.
+_Prereq:_ Settings → General → Calls → **Soundboard** must be ON (default on).
+
+- [ ] **Upload:** open the soundboard popout → **Upload** → pick a short audio file (mp3/ogg/wav, ≤ 1 MB).
+      It appears as a clip tile. (Too-big / too-many shows an error, doesn't crash.)
+- [ ] **Plays into the call:** with a second person in the call, click a clip. **They hear it**, and
+      **you hear it locally** too. ✅ good if both hear it; ❌ tell us if only one side does.
+- [ ] **Sync:** the uploaded clip shows up on your **other device**/session (account-data sync).
+- [ ] **Delete:** the ✕ on a tile removes it (everywhere, after sync).
+- [ ] **Off switch:** turn Settings → Calls → **Soundboard** off → the call-bar button disappears.
+- [ ] Injecting a clip does **not** mute/interrupt your mic or anyone else's audio.
+
+### D2-8. Call Quality Controls (#7 / P5-31) — 👥 2 people — **NEW**
+
+Action: `io.lotus.set_quality`. User settings in **Settings → General → Calls** (Microphone Bitrate,
+Screenshare Bitrate, Screenshare Framerate; all default **Auto**). Admin caps in **Room Settings →
+General → Voice → Call Quality Caps**.
+
+- [ ] **No regression at Auto:** with everything on **Auto**, calls/screenshare work exactly as before.
+- [ ] **User cap takes effect:** set Microphone Bitrate to **32 kbps**, rejoin/continue a call — audio
+      still flows (thinner is fine). Set Screenshare Framerate to **15 fps** and share your screen — it
+      still shares. ❌ tell us if any setting kills audio/screenshare.
+- [ ] **Applies mid-call:** changing a setting **during** a call takes effect without End+rejoin.
+- [ ] **Room-admin cap (admin needed):** as a room admin, set **Max Microphone Bitrate = 64 kbps** in
+      Room Settings → Voice. A member whose user setting is higher (e.g. 256) should be **clamped to 64**
+      (best-effort/UX — this is client-side; hard server enforcement is a separate follow-up).
+- [ ] Resetting a setting back to **Auto** removes the cap for the rest of the call.
+
+> Soundboard + quality are no longer "dormant" — if either does nothing, grab the **EC iframe console**
+> and check for `io.lotus.inject_audio` / `io.lotus.set_quality` rejections.
+
+### D2-9. Call Permissions — HARD server-side, cross-client (👥 2 people, admin) — **NEW**
+
+This is enforced by the `voice-limit-guard` on the server (re-signs the LiveKit JWT), so it applies to
+**every** client, not just Lotus Chat. Set in **Room Settings → General → Voice → Call Permissions**.
+_(Requires the guard deployed on LXC 151 — auto-deploys on a `matrix` repo push.)_
+
+- [ ] **Disable screenshare:** as admin, turn **Allow Screen Sharing** off. In a call, the
+      **screenshare button disappears** in Lotus Chat. ✅ good if no one can screenshare.
+- [ ] **Cross-client (the important one):** have someone join the **same room from stock Element / Element
+      X** and try to screenshare → the server **refuses** the track (it won't publish). This proves it's
+      not just our client hiding a button.
+- [ ] **Audio-only room:** turn **Allow Camera** off too → the camera button disappears and cameras are
+      server-blocked for all clients; **microphones still work**.
+- [ ] **⭐ Live kill (mid-call):** while someone is **actively screensharing**, an admin turns **Allow
+      Screen Sharing** off. Within a few seconds their screenshare should **stop for everyone** on its own
+      (no rejoin needed) — this is the server reconcile loop revoking it live. Works even if the sharer is
+      on stock Element. ✅ good if the share drops within ~3–5 s; ❌ tell us if it keeps going.
+- [ ] **Turning it back on** restores the ability to screenshare/camera (start a new share).
+- [ ] **No policy = no change:** a room with Call Permissions left on defaults behaves exactly as before.
+
+> If any D2 item fails, grab the **EC iframe console** (right-click the call → inspect the iframe) — a
+> widget-action/payload mismatch shows up there as a `io.lotus.*` rejection or a `MissingKey`/transport log.
+
+---
+
+# 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** (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)
+
+### E1. Composer toolbar touch targets (#7)
+
+On a phone, open a room and the composer toolbar. Tap each button (attach, format, sticker, emoji, GIF, location, poll, schedule, send).
+**Expected:** every button is comfortably tappable (≥44×44px), no mis-taps hitting the wrong icon.
+
+### E2. Room Settings — no horizontal overflow (#8)
+
+On a narrow phone screen, open **Room Settings**.
+**Expected:** the settings nav panel fills the full width; **no** horizontal scrollbar / sideways scrolling anywhere in the panel.
+
+### E3. Modals go fullscreen on mobile (#9)
+
+On a phone, open several dialogs: Leave Room, Create Room, Create Space, Invite User, Report (room/user/message), Edit History, Forward Message, Remind Me, Schedule Message, Device Verification, Poll Creator.
+**Expected:** each opens **fullscreen** (no floating box, no rounded corners / max-width margins). On desktop the same modals should still be the normal centered boxes.
+
+### E4. Composer not hidden by the keyboard (#10) — iOS Safari especially
+
+On a phone (priority: **iOS Safari**), tap into the composer so the on-screen keyboard appears.
+**Expected:** the composer input stays **visible above** the keyboard; the layout shrinks rather than the composer sliding under the keyboard.
+
+### E5. Mobile "Saved Messages" access (Mobile Bookmarks)
+
+On a phone, **inside a room**, open the room header **··· More Options** menu.
+**Expected:** a **"Saved Messages"** item is present; tapping it opens the bookmarks panel. (This was the only in-room access point missing on mobile.)
+
+---
+
+## F. Visual / theming
+
+### F1. Animated chat background — no flicker (#2)
+
+Settings → set an **animated** chat background (e.g. anim-rain / anim-aurora / anim-stars). Watch the message text and composer while it animates.
+**Expected:** smooth animation, **no flickering / shimmering** on message text or the composer, especially after scrolling. Note your GPU/browser if you see artifacts.
+
+### F2. Background vs. Seasonal theme are mutually exclusive (#6)
+
+In Settings → Appearance:
+
+1. Pick a **chat background** → confirm any **seasonal theme** auto-switches off.
+2. Pick a **seasonal theme** → confirm the **chat background** auto-clears to none.
+3. (Edge) If you have old data with both set, after reload only one should visibly apply (no double-overlay clutter).
+
+### F3. Background / seasonal picker grid layout (N81)
+
+In Settings → Appearance, look at the **Chat Background** and **Seasonal Theme** swatch grids; resize the window narrow→wide.
+**Expected:** swatches reflow to fill each row evenly (responsive grid), with no lopsided/orphaned last row at any width.
+
+---
+
+## G. Calls — additional unverified (👥 2 people)
+
+### G1. PiP mute badges point at the right person (#12)
+
+In a call with at least one other person, pop out the **Picture-in-Picture** mini window.
+
+- **You** mute your own mic → a **"You"/muted badge appears bottom-left** (your status).
+- A **remote** participant (or all of them) mutes → an **"All muted"** badge appears **top-right** (clearly about other people).
+  **Expected:** the bottom-left badge is **never** triggered by someone else muting — that was the original bug (it looked like your own mic was muted when it wasn't).
+
+### G2. Full-screen camera broadcasts
+
+1. In a **camera-only** call (no screenshare), confirm the **Fullscreen** button is available (previously only showed during screenshare).
+2. Use **MemberGlance → Focus camera** to full-screen/spotlight a specific person's camera. (Overlaps **A5**; if you've done A5 you can skip.)
+
+### G3. PTT badge renders on all themes (N53)
+
+Enable **Push-to-talk** (Settings → Calls) and join a call. Hold the PTT key.
+**Expected:** the floating PTT badge above the controls shows "PTT — Hold KEY" when idle and "● Live" (green) while held — on **both** a default theme and Lotus Terminal (it's now a single folds Chip; the old terminal-only variant was removed).
+
+---
+
+## H. Media / performance (needs a room with many images)
+
+### H1. Lazy image decryption (P5-5 / MediaGallery)
+
+Open a room / media gallery with **many images** (ideally encrypted). Scroll down through them.
+**Expected:** images decrypt/load as they **approach the viewport**, not all at once on open; scrolling stays smooth and memory doesn't balloon. Off-screen images shouldn't all decode up front.
+
+### H2. Thumbnail framing (P5-6)
+
+Look at **tall portrait** images in the timeline and in the media gallery.
+**Expected:** thumbnails are framed **center-top** (so faces/subjects at the top aren't cropped out); no awkward stretching. Opening the full-size viewer still shows the **whole** image (contain, not cropped).
+
+---
+
+## I. Accessibility (needs a screen reader: VoiceOver / NVDA / TalkBack)
+
+With a screen reader on, navigate message hover-actions and content and confirm each control **announces a meaningful label** (not "button" / blank):
+
+- [ ] **Reaction** buttons announce the emoji + count (e.g. "thumbsup reaction, 3 people").
+- [ ] **Edit history** button announces "View edit history".
+- [ ] **Thread indicator** announces "View thread".
+- [ ] **Reply** (jump to original) announces "Jump to original message".
+
+---
+
+## J. Desktop / Tauri build only
+
+### J1. Proactive update notifications (P5-40)
+
+In the **desktop (Tauri)** build, with an update available, launch the app (and/or leave it running ~12h).
+**Expected:** an in-app toast/badge alerts you that an update is available, without manually checking Settings. (Needs an actual newer release to point at.)
+
+### J2. DTLN noise suppression sanity
+
+In Settings → Calls, enable **ML noise suppression** with the **DTLN** model, then join a call.
+**Expected:** your mic audio still flows (no silence/robotic dropouts) and background noise is reduced. Confirmed working earlier but flagged for a final real-call check; verify on **both** web and desktop.
+
+---
+
+## K. Features — end-to-end unverified
+
+### K1. Remind Me Later
+
+On a message, **··· → Remind Me**, pick a short preset (the 20-min one, or wait one out).
+**Expected:** when due, a Lotus toast fires linking to that message; the reminder then clears itself. Survives a reload while pending (stored in account data).
+
+### K2. Advanced search filters (P4-9)
+
+In message search: use the **sender picker** (instead of typing `from:@user`), the **date-range** quick presets (Today / Last week / Last month / Last year), and the **Has link** toggle.
+**Expected:** each narrows results correctly and reflects in the search.
+
+### K3. Notification content + click target (P5-20 partial)
+
+Trigger a desktop/browser notification for a new message.
+**Expected:** it shows the **real message body** (`username: message`, not "New inbox notification from…"); **clicking it** brings the window to front and navigates **directly to that message** (not just the inbox).
+
+---
+
+## L. Fixed — verify
+
+### L1. AFK auto-mute releases the OS microphone indicator on mute (N95) — 👥 live call
+
+**Context (now FIXED):** `useAfkAutoMute.ts` opened its own `getUserMedia` level-monitor capture for the whole call, so the OS recording indicator (green dot on macOS, mic icon on Windows/Linux) stayed lit even when muted. The capture is now gated on the reactive mic-on state — it runs only while unmuted, so muting releases the stream.
+
+**To verify:**
+
+1. Enable **AFK auto-mute** in Settings → Calls and **join a call**.
+2. Manually **mute your mic** using the call controls → the **OS recording indicator should clear** within ~a second.
+3. **Unmute** → the indicator should re-appear (capture re-acquired).
+4. Also confirm AFK still works end-to-end: stay unmuted and silent past the configured timeout → mic auto-mutes with the "muted after inactivity" toast, and the indicator clears.
+
+### L2. Maskable PWA icon (N108) — Android install
+
+1. On **Android Chrome**, install Lotus Chat as a PWA (Add to Home Screen).
+2. Look at the **home-screen icon**.
+
+**Expected:** the icon fills the adaptive-icon shape cleanly (the logo centered with safe-zone padding on the dark background), **not** clipped at the corners or floating in an odd box. Also worth a quick check in Chrome DevTools → Application → Manifest that the two `purpose: maskable` icons load without a 404 (this also validates the manifest's icon paths resolve in production — a pre-existing path convention I couldn't verify statically).
+
+---
+
+## M. New features (this round)
+
+### M1. Search: `has:image` / `has:file` / `has:video` filters
+
+1. Open message search (in a room with shared images/files/videos in history).
+2. Run a broad search, then toggle the **Images**, **Files**, **Video** chips (in the filter bar, next to "Has link").
+
+**Expected:**
+
+- Each chip narrows the visible results to that message type; multiple active chips = union (any of them).
+- Toggling them off restores the full results. The existing room/sender/date/has-link filters still work alongside.
+- **Known limitation (by design):** filtering is client-side over already-fetched results, so the visible count can be lower than the server's total for that query — paginating/loading more pulls in more to filter. Confirm this reads acceptably.
+
+### M2. Search: recent searches
+
+1. Run a few different searches, then **clear the search box** and focus it.
+
+**Expected:** your last (up to 10) distinct searches appear as clickable chips; clicking one re-runs it. A **Clear** affordance wipes the list. The list **persists across a page refresh** (localStorage).
+
+### M3. Custom accent color (non-TDS themes) — ⚠️ needs your visual judgment
+
+1. Make sure **Lotus Terminal (TDS)** is **off**. Settings → Appearance → **Custom Accent Color** → pick a color.
+
+**Expected:**
+
+- The app's accent (buttons, selected/active states, links, primary chips) recolors to your choice **live**.
+- **Look critically at quality** (this is the part I can't verify): button **text legibility** (OnMain contrast) on the accent buttons; **hover/active** shades; and **selected-row / chip** backgrounds (the translucent "Container" tints). Try a **light** color and a **dark** color and a **saturated** one.
+  - If a dark accent makes selected-row text (OnContainer) hard to read, tell me — that's the one spot in the auto-derived palette most likely to need tuning.
+- **Reset** clears it back to the theme default.
+- Turn **Lotus Terminal ON** → the custom accent should be **ignored** (TDS fixed palette wins) and the picker shows a "non-TDS only" note; turn it back off → custom accent returns.
+- Reload → the chosen accent **persists**.
+
+---
+
+### M4. Search: "Pinned only" filter
+
+In message search, toggle the **Pinned** chip.
+**Expected:** results narrow to messages currently pinned in their room; composes with the Images/Files/Video chips and room/sender/date filters; toggling off restores results. It also narrows the **encrypted/local-cache** results section (not just server results). Needs a room with actually pinned messages.
+
+### M5. New theme presets (Cyberpunk / Ocean / Blood Red / Classic Matrix / Midnight) — ⚠️ visual judgment
+
+Settings → Appearance → theme picker → try each of the 5 new themes.
+**Expected:** each applies a complete, legible dark palette. Code review computed WCAG contrast and all pass AA, but **eyeball these specifically**: **Midnight** (lowest-contrast accent `#6b7ca8` — selected/focus states), **Classic Matrix** (green accents, light-green body text on near-black), **Blood Red** (white-ish text on bright-red buttons). Confirm Success/Warning/Critical (save/leave/delete) still look correctly green/amber/red, not recolored. Switching back to a stock theme should fully revert.
+
+---
+
+## N. OIDC / Next-Gen Auth login (MSC3861) — P4-6
+
+The Lotus client can now sign into OIDC-native homeservers (ones that delegate
+auth to a Matrix Authentication Service / MAS), e.g. mozilla.org. lotusguild's
+own server is **not** MSC3861, so test EITHER against a **local MAS dev loop**
+(full setup in `dev/oidc-test/README.md` — docker-compose + Synapse `msc3861`
+delta + a `config.json` override) OR against **mozilla.org** with a real account.
+
+### N1. OIDC login flow (the core test) — needs a MAS homeserver
+
+1. On the login screen, select the OIDC homeserver (local `localhost:8008`, or `mozilla.org`).
+2. **Expected:** instead of the username/password form, a single **"Continue with single sign-on"** button appears (password + legacy-SSO are suppressed for that server).
+3. Click it → redirected to the provider's login page (MAS / `chat.mozilla.org`).
+4. Authenticate there → redirected back to `…/auth/oidc/callback` → a brief "Signing you in…" spinner → you land in the app, logged in.
+
+**Expected:** no console CSP violations; you reach the room list as the OIDC user.
+
+### N2. Session persists across reload (token storage)
+
+After N1, hard-refresh the page.
+**Expected:** you stay logged in — the OIDC session (access + refresh token + issuer/clientId/claims) was persisted (`cinny_refresh_token`, `cinny_oidc_*` keys in localStorage).
+
+### N3. Token refresh (long-lived session)
+
+Leave the session past the access-token lifetime (MAS default is short — or revoke the access token in the MAS admin UI to force a 401).
+**Expected:** the client refreshes transparently (no logout); the stored access token rotates (reactive 401 refresh via the wired `OidcTokenRefresher`).
+
+### N4. Logout revokes at the issuer
+
+Log out from Settings.
+**Expected:** back to login; OIDC tokens are revoked at the issuer's `revocation_endpoint` (best-effort) and all `cinny_*` / `cinny_oidc_*` keys are cleared. Logging back in works.
+
+### N5. Account-management deep-link
+
+Settings → Account.
+**Expected:** on an OIDC server a **"Manage account"** card appears (opens the provider's account page in a new tab). On a non-OIDC server (lotusguild) the card is **absent**.
+
+### N6. Non-OIDC regression — password login unchanged
+
+Log into **matrix.lotusguild.org** (password) and **matrix.org**.
+**Expected:** identical to before — username/password form (+ SSO button where offered). The OIDC path only activates when discovery advertises an issuer, so nothing changes for these servers.
+
+---
+
+## 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. **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
+
+**Windows rich toast (D6, 2026-07 — desktop/Windows build only):** get a message notification while the desktop app is backgrounded → the toast is attributed to **Lotus Chat** (not "PowerShell"/generic) and shows an inline **reply box + Send**; typing a reply + Send **posts it to that room**; clicking the toast body **opens the room**. Previously these silently fell back to a plain toast (no reply/click). If it still falls back, check that a `Lotus Chat.lnk` exists in the Start-Menu Programs folder.
+
+**Invite QR is now generated LOCALLY (2026-07):** Room settings → Share Room → the QR code renders (a black-on-white SVG in a white box) with **no network request** to `api.qrserver.com` (check DevTools Network — there should be no external QR fetch, and it should work offline / behind strict CSP). **Scan it** with a phone camera / Matrix app → it opens the correct `matrix.to` room-invite link. (`api.qrserver.com` was removed from the prod CSP img-src, so a regression would make the QR blank rather than silently phone home.)
+
+**Unread dot on federated rooms + avatar-decoration console storm (2026-07):**
+
+- **Read receipts (regression guard — highest priority):** open several rooms and open the Home/Direct tabs (which mark all orphan rooms read on mount) → rooms **stay read**, unread dots clear and don't come back. (A prior attempt sent a receipt for the thread _root_ when a thread's replies weren't loaded, which the SDK treats as a main receipt at an old event and re-unread every room on every mark-read. Fixed + locked by `notifications.test.ts`.)
+- **Thread dot:** a room with an unread reply in a thread whose replies are loaded → its dot clears on read; for a thread not yet loaded, the dot clears once you open/load the thread. (mark-as-read now sends a threaded receipt only for a genuine loaded reply, never the root.)
+- With DevTools console open on federated rooms, the `io.lotus.avatar_decoration` `403`/`502` (and federated media) errors should **not** repeat on every scroll/mount — each failing user is now requested at most ~twice per session, so the storm (and its homeserver load) is gone.
+
+**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.
+
+---

README.md

@@ -1,280 +1,204 @@
 # Lotus Chat
 
-A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1.
+A Matrix chat client built for Lotus Guild — fast, private, and packed with the features you actually want.
 
-Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).
+**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)**  |  Forked from [Cinny](https://github.com/cinnyapp/cinny), synced through v4.12.3
 
 ---
 
-## Changes from upstream Cinny
+## Licensing & Attribution
 
-### Branding & Identity
+The source code is licensed under [AGPLv3](LICENSE), the same license as the upstream Cinny project. The source for this fork is public at [code.lotusguild.org/LotusGuild/cinny](https://code.lotusguild.org/LotusGuild/cinny).
 
-- Package renamed to `lotus-chat`, description updated to "Lotus Chat — Matrix client for Lotus Guild"
+The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the original Cinny logo by Ajay Bura and contributors, used under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). The modified logo is © Lotus Guild and is also made available under CC BY 4.0.
-- App title changed from "Cinny" to "Lotus Chat" throughout
-- Favicon, PWA icons, and all icon sizes (57×57 → 180×180 Apple touch icons) replaced with Lotus.png variants
-- Logo in About dialog and Auth page replaced with official Lotus.png
-- Auth footer rewritten: shows dynamic version from `package.json`, links to lotusguild.org, chat.lotusguild.org, and matrix.lotusguild.org
-- Welcome page tagline changed from "Yet another matrix client" to "A Matrix client for Lotus Guild"
-- Encryption key export filename changed from `cinny-keys.txt` to `lotus-keys.txt`
-- `manifest.json` updated with Lotus name, description, and branding colors
-
-### LotusGuild Terminal Design System (TDS) v1.2
-
-A full custom theme engine layered on top of Cinny's vanilla-extract theming:
-
-**Dark mode** (`LotusTerminalTheme`):
-- CRT terminal aesthetic: scanline overlay, vignette, phosphor glow
-- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
-- Monospace font stack, terminal-style scrollbars
-- Custom hex-grid and circuit-board CSS background patterns
-- Matrix-style boot messages on the welcome page (press Escape to skip)
-- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations
-
-**Light mode** (`LotusTerminalLightTheme`):
-- Full light palette: bg `#edf0f5`, orange `#c44e00`, cyan `#0062b8`, green `#006d35`, text `#111827`
-- No CRT effects (scanlines, vignette disabled)
-- Light-mode scrollbars, adjusted code block colors, semantic color overrides
-- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass`
-- `ThemeManager.tsx` sets `data-theme` attribute based on active theme kind
-
-**Chat Backgrounds** (20+ custom patterns, all TDS-aware):
-- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
-- Chevron, polka dots, triangles, plaid
-- All patterns use CSS custom properties — adapt to both TDS dark and light themes
-- Settings toggle for showing per-message sender profiles
-
-### Voice / Video Call Improvements
-
-- **Element Call 0.19.4**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time.
-- **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in.
-- **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound")
-- **Screenshare confirmation**: A confirm dialog appears before screenshare is broadcast to call participants
-- **Auto-revert spotlight on screenshare**: When someone starts screensharing, EC normally forces all participants into spotlight view. Patched in `CallControl.ts` `onControlMutation()` — detects the screenshare button going `primary` and clicks `gridButton` after 600ms to revert to grid layout. Participants choose to watch screenshare manually.
-- **Push to Talk (PTT)**:
-  - Configurable keybind (default: Space) via Settings > General > Calls
-  - Mic activates on keydown, deactivates on keyup; mic muted on tab blur/focus to prevent stuck-on mic
-  - Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono
-  - Listens on both main window and EC iframe `contentWindow` for reliable key capture
-  - Implemented via `CallControl.setMicrophone()` public method on the widget bridge
-  - **Mic state preservation**: when enabling PTT mode mid-call, the user's previous mic state is saved and restored when PTT is disabled — prevents unwanted unmute if the user had manually muted before switching to PTT.
-- **Noise suppression toggle**: Settings > General > Calls — passes `noiseSuppression` URL parameter to the embedded Element Call widget
-- **Call button scoping**: The upstream Cinny 4.12.1 call button (voice + video dropdown) is restricted to DMs and private group chats only. Specifically: direct messages, or invite-only rooms that have no `m.space.parent` state event (i.e. not a space/guild text channel). Public rooms and space channels are excluded to prevent accidental mass-notifications. `Room.tsx` switches to CallView layout when a call embed is active in the current room.
-- **Poll display**: `m.poll.start` events (both stable Matrix 1.7 `m.poll` content key and MSC3381 unstable `org.matrix.msc3381.poll.start`) render as read-only poll cards inside the standard message bubble — question and answer options shown. Registered as top-level event renderers AND inside the `EncryptedContent` callback so encrypted polls also display after decryption. "Open in Element to vote" note displayed. Implemented in `PollContent.tsx`.
-- **Deleted message placeholder**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events no longer disappear from the timeline. Instead they reach the existing `RedactedContent` component (trash icon + italic "This message has been deleted" with reason if provided), matching Element, FluffyChat, Commet, and Nheko behaviour. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
-- **Picture-in-picture (PiP)**: When navigating away from a call room while in an active call, the call embed shrinks to a 280x158px floating window in the bottom-right corner. The PiP window is **draggable** — drag it anywhere on screen to move it out of the way. Clicking (without dragging) navigates back to the call room. Drag vs click distinguished by a 5px movement threshold; touch drag supported. Imperative style overrides on `callEmbedRef.current` via `useEffect` — a wrapper div cannot be used because `useCallEmbedPlacementSync` writes `top/left/width/height` directly onto that element.
-- **Call embed positioning**: `useCallEmbedPlacementSync` uses `getBoundingClientRect()` (not `offsetTop/Left`) for accurate viewport-relative coordinates on the `position:fixed` container. Position is synced immediately on mount via `useEffect` in addition to the ResizeObserver, so the embed is placed correctly the instant the call view renders. The `[pipMode, callVisible]` effect in `CallEmbedProvider` only clears pip-specific styles when actually exiting pip mode — no longer clobbers the position set by `syncCallEmbedPlacement` on every `callVisible` toggle.
-- **Dark mode in element-call**: After joining, `CallEmbed.applyStyles()` injects `:root { color-scheme: dark|light }` into the iframe document so `@media (prefers-color-scheme)` rules inside element-call resolve to the correct Cinny theme regardless of the OS system preference. `themeKind` is stored on the `CallEmbed` instance and updated on every `setTheme()` call, so live theme switching also re-injects the CSS. Without this, users with OS light mode would see a white background even when Cinny is in dark mode.
-- **Call embed wallpaper**: The user's `chatBackground` pattern (Blueprint, Carbon, Stars…) is applied as the `backgroundImage`/`backgroundColor` of `div[data-call-embed-container]` when the call is in full view (not PiP). The iframe `html, body` is forced to `background: none !important` so the pattern shows through. When `chatBackground` is `none`, behaviour is unchanged.
-
-### Moderation
-
-- **Report Room**: A "Report Room" option in the room header menu (⋮) allows users to report a room to homeserver admins with a reason and abuse category (Spam / Harassment / Inappropriate Content / Other). Calls `POST /_matrix/client/v3/rooms/{roomId}/report` (MSC4151, confirmed supported on matrix.lotusguild.org). Implemented in `ReportRoomModal.tsx` with loading/success/error states.
-- **Policy List / Ban List Viewer (MSC2313)**: A "Policy Lists" tab in Room / Space Settings (admin-only, power-level gated) shows all subscribed `m.policy.rule.*` rooms and their contents — banned users, banned rooms, and banned servers — each with entity, reason, and recommendation fields. Subscribe (join the policy room) and Unsubscribe (leave) actions are provided. Enforcement remains solely with the Draupnir bot; this UI is a read-only complement.
-
-### Messaging Enhancements
-
-- **Rich room topics**: Room topics that contain formatted text (bold, links, italic) are now rendered with full HTML formatting. Falls back to plain text if no `formatted_body` is present. Activates when any room admin sets a formatted topic.
-- **Edit history viewer**: Clicking the "edited" label on any edited message opens a modal showing every prior version with timestamps. Fetches all `m.replace` relations for the event and displays them oldest-to-newest. Previously the "edited" label was visible but unclickable. E2EE fix: the "Original" entry now uses `getClearContent()` (bypasses the replacing-event chain, returns the decrypted pre-edit body) instead of `event.content` which is still raw ciphertext for encrypted messages — fixes "(no text)" shown for almost all E2EE message originals.
-- **Inline GIF preview**: Giphy and Tenor share links sent as plain text auto-embed as animated GIFs inline in the timeline. URL patterns are detected client-side; the image is fetched via the homeserver's `/_matrix/media/v3/preview_url` proxy (no direct contact with Giphy/Tenor from the client). Rendered as `<img loading="lazy">` — respects the existing URL preview enabled/disabled setting.
-- **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, CSS overrides for Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar. All TDS styles live in `lotus-terminal.css.ts` — no runtime `<style>` injection, eliminating flash of unstyled content.
-- **Message forwarding**: Forward any message to any room from the message context menu.
-- **Draft persistence**: Unsent message drafts survive page reload via `localStorage` (`draft-msg-<roomId>`). Jotai in-memory atom is primary; localStorage is used as fallback on reload and cleared on send.
-- **Message search date range**: From/To date pickers in the search filter bar. Sends `from_ts`/`to_ts` epoch ms to the Matrix `/search` endpoint. Chip shows active range with X to clear.
-- **Image/video captions**: Caption text field on image and video upload — sent as a single event with the media.
-- **Location sharing**: Map embed view for incoming location events + static share button. Renders `m.location` events inline with a map tile.
-- **Deleted message placeholders**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events render as "This message has been deleted" with reason (if provided) rather than disappearing. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
-- **Message bookmarks / saved messages**: Right-click any message → "Bookmark" / "Remove Bookmark". A star icon in the sidebar nav opens `BookmarksPanel.tsx` — a right-side panel listing all saved messages with room name, preview text, relative timestamp, filter input, "Jump to message" deep-link, and individual remove buttons. Stored in `io.lotus.bookmarks` account data (max 500 entries); syncs across devices. Implemented in `src/app/features/bookmarks/BookmarksPanel.tsx` + `src/app/hooks/useBookmarks.ts`.
-- **Message scheduling (MSC4140)**: Clock button next to send opens `ScheduleMessageModal.tsx` with a message textarea and datetime picker. Messages sent via the MSC4140 delayed events API (`org.matrix.msc4140`), confirmed supported on `matrix.lotusguild.org`. A collapsible tray above the composer lists pending scheduled messages with Cancel buttons. Utilities in `src/app/utils/scheduledMessages.ts`.
-- **Richer link preview cards**: `UrlPreviewCard.tsx` renders domain-specific cards for 13 sites: YouTube (thumbnail + ▶ play overlay), Vimeo, GitHub (repo parse), Twitter/X (tweet text + media parse), Reddit (subreddit + upvotes + comments), Spotify (artwork), Twitch (LIVE badge + game), Steam, Wikipedia, Discord (server invite), npm, Stack Overflow, and IMDb (poster). Generic cards gain a favicon from Google's S2 service. Cards that produce no renderable content are suppressed.
-- **File upload compression (opt-in)**: JPEG and PNG files in the upload preview show a "Compress" checkbox. When checked, a Canvas API call (`toBlob(..., 'image/jpeg', 0.82)`) compresses the image client-side. Original and compressed sizes are shown side-by-side. Compression is strictly opt-in — unchecked by default, skipped for GIF/SVG/WebP.
-
-### Room Customization
-
-- **Personal room name overrides**: Right-click any room in the sidebar → "Rename for me…" to set a local display name visible only to you. Other members see the original name unchanged. A small pencil icon marks rooms with a custom local name. Stored in Matrix account data (`io.lotus.room_names`). Uses `io.lotus.room_names` account data key (based on MSC4431).
-- **Export room history**: Room Settings → Export tab. Supports Plain Text, JSON, and HTML formats with optional start/end date range filters. Paginates backwards via `mx.paginateEventTimeline()` with a live progress counter. E2EE-aware — events that failed decryption are skipped rather than exported as garbled ciphertext. Downloads via `Blob` + `<a download>`. Implemented in `src/app/features/room-settings/ExportRoomHistory.tsx`.
-- **Room activity / mod log**: Room Settings → Activity tab. Filterable log of `m.room.member` (join/leave/kick/ban/unban/invite), `m.room.power_levels`, `m.room.name`, `m.room.topic`, `m.room.avatar`, and `m.room.server_acl` events. Human-readable descriptions, relative timestamps, type-filter dropdown, Load More pagination, and auto-paginate on mount. Implemented in `src/app/features/room-settings/RoomActivityLog.tsx`.
-- **Server ACL editor**: Room Settings → Server ACL tab. Reads and writes `m.room.server_acl` state events. Editable allow and deny server lists with wildcard pattern validation (`*.example.com`). "Allow IP literal addresses" toggle. Read-only view shown to users without the required power level. Implemented in `src/app/features/room-settings/RoomServerACL.tsx`.
-- **Room stats / insights**: Room Settings → Insights tab (not the default tab). Derives all statistics from the local timeline cache only; a disclaimer banner clarifies this. Shows top 5 active members (bar chart), top 5 reactions (emoji chips), media breakdown (images/videos/audio/files tiles), and a 24-hour activity heatmap (CSS bar chart). Implemented in `src/app/features/room-settings/RoomInsights.tsx`.
-
-### Per-Message Read Receipts
-
-Full per-message read receipt system — shows who has read each message directly in the timeline.
-
-**Architecture:**
-- `useRoomReadPositions(room)` hook — computes a `Map<eventId, userId[]>` from all joined members' `room.getEventReadUpTo()` positions. Subscribes to `RoomEvent.Receipt` for live updates (debounced at 150ms to batch burst updates from mass-read events).
-- `nearestRenderableId(liveEvents, evtId)` — receipts can land on reaction/edit events that `RoomTimeline` skips (renders `null`). This walks backwards from the receipt event through the live timeline until it finds a non-reaction/non-edit event to attach to.
-- `ReadPositionsContext` — React context providing the positions map from `RoomTimeline` down to all `Message` instances without prop drilling.
-- `ReadReceiptAvatars` component — renders a pill-shaped row of overlapping `StackedAvatar` circles (24px, `SurfaceVariant` outline) below messages with readers. Pill uses `color.SurfaceVariant.Container` background for visibility on any wallpaper. Max 5 avatars shown + `+N` overflow count. Avatar fallback uses `colorMXID(userId)` for distinctive per-user color.
-- Clicking the pill opens the **"Seen by" modal** (`EventReaders`) listing all readers with their avatar, display name, and a formatted read timestamp ("Today at 3:42 PM", "Yesterday at 10:15 AM", "May 14 at 9:00 AM"). Timestamps use `room.getReadReceiptForUserId(userId)?.data.ts` and respect the user's 24-hour clock setting.
-- Authenticated media (`mxcUrlToHttp` utility) used for all avatar loads, matching the correct Lotus utility signature.
-
-### Delivery Status Indicators
-
-Own messages display a small status marker below the message content (when no read receipts are visible yet):
-- `⟳` — message is being sent / encrypting
-- `✓` — message confirmed sent (local echo)
-- `✕` — message failed to send (shown in red; orange glow in TDS mode)
-- Status hidden once the server confirms receipt (`status === null`) — read receipts take over at that point
-
-### URL Preview Cards (TDS)
-
-URL preview cards (`UrlPreviewCard`) styled for terminal mode:
-- Dark transparent background with cyan border-left accent (Anduril Orange)
-- Link text in cyan, hover switches to orange with glow
-- Light TDS variant: off-white background with blue accent
-
-### Reaction Chips (TDS)
-
-Emoji reaction buttons styled for terminal mode via `button[data-reaction-key]` selector:
-- Unselected: `rgba(0,212,255,0.06)` background, cyan border
-- Hover: brighter background + box-shadow glow
-- Own reaction (aria-pressed=true): orange tint `rgba(255,107,0,0.12)`, orange border
-- Light TDS: equivalent blue/orange variants
-
-
-### DM Call Improvements
-
-
-- **Incoming call ring**: DM calls trigger a ring tone with Answer/Decline UI. 30-second auto-dismiss if unanswered. Implemented in `Room.tsx` and `RoomViewHeader.tsx`.
-
-### Room Customization
-
-- **Room emoji prefix**: A leading emoji in a room name (e.g. 🎮 general) renders at 1.15× size in the sidebar for visual impact. Matrix room names already support Unicode — this is purely a rendering enhancement in `RoomNavItem.tsx`. All three room-name inputs (Create Room, Room Settings, "Rename for me…" dialog) now include a 😊 emoji picker button that prepends the selected emoji to the name field.
-
-### Presence
-
-- **Discord-style presence selector**: Clicking your avatar in the bottom-left sidebar opens a popout with five status options — Online (green), Idle (yellow), Do Not Disturb (red, broadcasts `unavailable` with `status_msg: 'dnd'`), Invisible (grey outline, broadcasts `offline`), and Auto (activity-tracking, the original behaviour). The selected status persists across reloads via the settings atom. A colored badge on the avatar reflects the current status at a glance. `usePresenceUpdater` short-circuits immediately for manual modes; full idle-timer and visibility-change logic only runs in Auto mode. Settings also exposed via `src/app/state/settings.ts` (`presenceStatus` field).
-- **Custom status message**: Set a short status text (up to 64 characters) with an emoji picker, shown below your display name in member lists and presence displays. Accessible via Settings → Account → Profile. Includes an **auto-clear timer** (options: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days) — after the timer expires, the status is automatically cleared by setting `status_msg: ''` via `mx.setPresence`. A character counter (shown when ≥ 56/64 chars) prevents overflow. Implemented in `src/app/features/settings/account/Profile.tsx`.
-- **Presence badges on members**: Online/busy/away dots shown next to users in the room members drawer and settings members panel (`PresenceBadge` component from `src/app/components/presence/Presence.tsx`).
-- **Presence avatar border ring**: A 2px colored `outline` ring on user avatars throughout the app shows presence at a glance — green (online), yellow (idle), red (DND), no ring (offline). Implemented as `PresenceRingAvatar` component (`src/app/components/presence/PresenceRingAvatar.tsx`) using `React.cloneElement` to inject `outline` + `outlineOffset` directly onto the child `Avatar` element — the ring follows the avatar's actual `border-radius` regardless of shape. Applied to: message timeline sender avatars, members drawer, @mention autocomplete, and inbox notification senders.
-- **Document title unread count**: Tab title updates to `(N) Lotus Chat` for mentions, `· Lotus Chat` for unreads, `Lotus Chat` when clear.
-- **Extended profile fields (MSC4133)**: Settings → Account → Profile includes Pronouns (`m.pronouns`) and Timezone (`m.tz`) fields, saved via MSC4133 `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`. Both fields are displayed in user profile panels. Implemented via `src/app/hooks/useExtendedProfile.ts`.
-- **User local time in profile**: When a user has `m.tz` set, their profile panel shows a clock icon, their current local time, and the timezone abbreviation (e.g. EST, JST). Updates every 60 seconds. Respects the viewer's `hour24Clock` setting. Implemented via `src/app/hooks/useLocalTime.ts`.
-
-### UX & Composer
-
-- **Message length counter**: A muted character counter appears just left of the send button while typing, disappearing when the composer is empty. Resets on room switch.
-- **Quick emoji reactions on hover**: The 3 most-recently-used emoji reactions appear directly in the message hover toolbar (between the emoji-board button and Reply), so reacting requires a single click rather than opening the 3-dots menu first. Clicking a quick-reaction also closes any open emoji picker. Powered by `useRecentEmoji` sourced from Matrix account data.
-- **In-app notification toasts**: When a message or invite notification fires and the browser window is focused, a slim TDS-styled toast card slides in from the bottom-right instead of triggering an OS notification. Card shows: 24px avatar (initials fallback), sender name in orange, truncated message body, room name, × dismiss, 4 s auto-dismiss. Clicking navigates directly to the correct room (DM or home path) or the invites inbox. OS notifications are unchanged when the window is not focused. Implemented in `src/app/features/toast/LotusToastContainer.tsx` + `src/app/state/toast.ts`.
-- **Collapsible long messages**: Messages exceeding ~20 lines are auto-collapsed with a "Read more ↓" button. Click to expand inline; a "Collapse ↑" button re-folds. Threshold (in lines) configurable in Settings → Appearance. Uses CSS `max-height` + `overflow: hidden` — works correctly with code blocks and embedded media. Respects `prefers-reduced-motion`.
-- **Message send animation**: Own sent messages fade and scale into the timeline (0.15 s ease-out: `scale(0.97)→scale(1)`, `opacity 0.4→1`). Incoming messages are unaffected. Respects `prefers-reduced-motion`.
-- **Right-click room context menu**: Expanded sidebar room context menu — **Mute** now opens a duration submenu (15 min / 1 hr / 8 hr / 24 hr / Indefinite) with auto-restore after the selected window; **Copy Room Link** copies the `matrix.to` URL with a "Copied!" flash; **Mark as Read** marks the room read to the latest event; plus Leave Room and Room Settings shortcuts.
-- **Unverified device warning**: `warnOnUnverifiedDevices` setting (default off). When enabled via Settings → General → Privacy, a warning banner appears above the composer in encrypted rooms that contain unverified devices, showing the count. Sending is never blocked — the banner is informational only. Uses the existing `useUnverifiedDeviceCount()` hook.
-- **Sidebar room filter**: A search-icon input at the top of the Home and DMs sidebar tabs filters rooms by display name in real time. Clears on tab switch. Styled to match the members-drawer search bar (`size="400"`, search prefix icon).
-- **DM last message preview**: Each DM row in the sidebar shows a truncated message body (48 chars) and relative timestamp (`Xm`, `Xhr`, `Yesterday`, `D MMM`) below the room name, sourced reactively from `useRoomLatestRenderedEvent`. Encrypted rooms show "Encrypted message" only on actual decryption failure.
-- **Room sort order**: Sort icon in the Rooms sidebar header lets users sort non-space rooms by Recent Activity (default), A→Z, or Unread First. Persists via `homeRoomSort` setting.
-- **Favorite rooms**: Right-click any room → "Add to Favorites" / "Remove from Favorites". Favorited rooms (using the standard Matrix `m.favourite` tag) appear in a collapsible "Favorites" section above the main room list on the Home tab. Syncs across devices via account data.
-- **Poll creation**: Polls can be created directly from the composer — `Icons.OrderList` button opens a modal with question field, 2–10 answer options (add/remove), and Single/Multiple choice toggle. Sends a stable `m.poll.start` event. (Poll display & voting were already supported.)
-- **Voice message playback speed**: `0.75×` → `1×` → `1.5×` → `2×` speed toggle pill on voice message player — cycles on click via `playbackRate` on the `<audio>` element.
-- **Invite link + QR code**: Room settings → General shows a "Share Room" tile with the `matrix.to` invite URL and a QR code. The Invite modal also has a `⊞` toggle button showing a QR panel when clicked. Both use `api.qrserver.com` (added to CSP on LXC 106).
-- **Private read receipts**: Settings → General → Privacy — "Private Read Receipts" toggle. When on, sends `m.read.private` instead of `m.read` so other room members can't see when you've read messages.
-- **Media gallery**: A right-side drawer (photo icon in room header, Desktop only) showing Images | Videos | Files tabs. Reads already-decrypted timeline events — works in E2EE rooms. Encrypted-blob images show a lock-icon placeholder. Load More paginates backwards via `mx.paginateEventTimeline()`.
-- **Knock-to-join**: When a room's join rule is `knock`, RoomIntro shows "Request to Join" (calls `mx.knockRoom()`) with "Request sent" pending state. Room admins see a "Pending Requests" section in the members drawer with Approve / Deny buttons.
-- **Code syntax highlighting** (TDS mode): Fenced code blocks in messages highlight keywords (cyan), strings (green), numbers (orange), comments (italic dim), function names (purple) using inline `--lt-accent-*` CSS variables. Custom tokenizer in `syntaxHighlight.ts` — supports JS/TS/JSX/TSX, Python, Rust. Falls back to ReactPrism for other languages.
-
-### Settings (Appearance)
-
-- **Animated Chat Backgrounds**: Five CSS-only animated wallpapers added to the background picker — Digital Rain (two-layer vertical stripe scroll with parallax), Star Drift (three-layer radial-gradient star field drifting diagonally), Grid Pulse (neon grid lines expanding/contracting via `backgroundSize` keyframe), Aurora Flow (four radial gradient ellipses sweeping across a 200% canvas), Fireflies (three layers of glowing dots drifting). All use vanilla-extract `keyframes()` — no canvas, GPU-composited. Respects `prefers-reduced-motion: reduce` (animation stripped at call time). "Pause Background Animations" toggle in Settings → Appearance provides an in-app override. Implemented in `src/app/styles/Animations.css.ts` + `src/app/features/lotus/chatBackground.ts`.
-- **Glassmorphism Sidebar**: Settings → Appearance toggle (off by default). When enabled, the left sidebar becomes semi-transparent (`background: rgba(3,5,8,0.55)`) with `backdrop-filter: blur(12px)` so chat background patterns show through as a frosted glass effect. Fix: the active chat background is mirrored onto `document.body` via `useEffect` in `SidebarNav.tsx` so the blur has content to work through (previously the sidebar was a flex sibling with nothing physically behind it). Implemented as a vanilla-extract `SidebarGlass` class applied to the `<Sidebar>` container in `SidebarNav.tsx`.
-
-
-- **Night Light / Blue Light Filter**: Warm orange overlay (`rgba(255,140,0,N%)`) across the entire UI. Toggle + intensity slider (5–80%) in Settings → Appearance. `position:fixed; pointer-events:none; z-index:9998`. Persists across sessions.
-
-### Notification Enhancements
-
-- **Custom notification sounds**: `messageSoundId` / `inviteSoundId` settings select per-category notification sound (`notification.ogg`, `invite.ogg`, `call.ogg`, or None). Settings → Notifications expands the sound toggle with Message Sound + Invite Sound selects and ▶ preview buttons. Shared `notificationSounds.ts` module.
-- **Notification quiet hours**: `quietHoursEnabled` / `quietHoursStart` / `quietHoursEnd` settings suppress all desktop notifications and sounds during a configured time window. Handles overnight spans (e.g. 23:00–08:00). Settings → Notifications: Quiet Hours card with toggle + start/end time pickers.
-- **Full push rule editor**: Settings → Notifications → Advanced Push Rules section. Covers override, room, sender, and underride rule kinds. Each row has a human-readable label for built-in rules, an enable/disable toggle, and a delete button for custom rules. An add-rule form at the bottom of the room and sender sections lets users create new per-room or per-sender push rules by entering the room/user ID.
-
-### Calls (Extended)
-
-- **Push-to-Deafen**: Press `M` during a call to toggle speaker mute (deafen). Configurable in Settings → General → Calls alongside the PTT key. Skips editable elements; guards `e.repeat`; uses `el.ownerDocument.body` for iframe safety.
-- **TDS typing indicator dots**: When Lotus Terminal mode is active, the animated typing indicator dots turn TDS orange (`var(--lt-accent-orange)`) via `color: currentColor` inheritance.
-
-### Server Integration
-
-- **Server support contact (MSC1929)**: Settings → Help & About displays the homeserver admin contact fetched from `/.well-known/matrix/support`. Shows the admin's Matrix ID and a link to the support page when the homeserver has configured this endpoint. Degrades gracefully when not configured (section is hidden on 404 or network error). In TDS mode the contact text and link render in `--lt-accent-cyan`. Implemented in `src/app/features/settings/about/About.tsx`.
-- **Server notices**: Rooms of type `m.server_notice` (system messages from the homeserver) now render with a distinct "Server Notice" `<Chip variant="Warning">` badge in the room header and a disabled composer showing "This is a server notice room — you cannot send messages here." Previously indistinguishable from regular DMs. Badge in `src/app/features/room/RoomViewHeader.tsx`; composer guard in `src/app/features/room/RoomInput.tsx`.
-
-### Infrastructure
-
-- **Authenticated media**: All avatar/media loads use `mxcUrlToHttp(mx, mxcUrl, useAuthentication, w, h, 'crop')` from `../../utils/matrix` — the Lotus utility that handles MSC3916 authenticated media. (Upstream Cinny uses the SDK method with incorrect argument order for authenticated endpoints.)
-- **Upstream tracking**: `git remote add upstream https://github.com/cinnyapp/cinny.git`. Merge strategy: `git fetch upstream && git merge upstream/main`. Daily check via `cinny-upstream-check.sh` on LXC 106 — notifies Matrix on new upstream commits.
-- **Rolldown CJS interop — millify**: `src/app/plugins/millify.ts` uses a named import (`import { millify as millifyPlugin } from 'millify'`) instead of a default import. Rolldown's `__toESM` helper with `mode=1` sets `a.default = module_object` (not the function itself) when `hasOwnProperty` prevents the copy — calling `millifyPlugin()` would throw `(0, zc.default) is not a function`. Named import bypasses the interop entirely.
-- **Sentry noise filter**: `ignoreErrors: ['Request timed out']` added to `Sentry.init` in `src/index.tsx` to suppress unhandled rejections from the matrixRTC delayed-event heartbeat (matrix-sdk) and the widget PostmessageTransport initial-load race (matrix-widget-api). Neither is actionable from client code.
-- **URL preview default in encrypted rooms**: `encUrlPreview` default changed from `false` to `true` in `src/app/state/settings.ts`. A security note is shown next to the toggle in Settings → General explaining that the homeserver fetches the URL (and sees it) but not the message content.
 
 ---
 
-## Build
+## Features
+
+### Messaging
+
+- Threads: reply in a thread and read/write the whole conversation in a side panel — root messages show a "N replies" chip with an unread badge (threaded replies live in the panel now, not inline in the room)
+- Slack-style thread notifications: by default you're only pinged for threads you're in or where you're @mentioned; set any thread to All / Mentions-only / Mute from the panel's bell menu (muted threads stop bumping badges; syncs across devices)
+- See who has read each message, and track delivery status (sending / sent / failed)
+- Bookmark any message and revisit saved messages from the sidebar
+- Schedule messages to send at a specific time
+- Click "edited" on any message to see the full edit history
+- Drafts are saved automatically and survive page reloads
+- Long messages collapse automatically — click "Read more" to expand
+- Forward messages to other rooms
+- Create and view polls directly in chat
+- Share your location with an inline map embed
+- Add captions to image and video uploads
+- Optionally compress images before uploading — shows before/after file sizes
+- GIF links from Giphy and Tenor auto-preview inline
+- Search for and send GIFs from a built-in GIF picker
+- Control voice message playback speed: 0.75× / 1× / 1.5× / 2×
+- Search messages with a date range filter
+- Optional persistent search index for encrypted rooms (off by default — stores decrypted text on your device; clearable, wiped on logout)
+- Write math with LaTeX: `$inline$` and `$$block$$` render via KaTeX (spec `data-mx-maths` supported)
+- Room topics support rich formatting (bold, links, italics)
+- Deleted messages show a placeholder instead of disappearing
+- Code blocks highlight syntax for JS/TS, Python, and Rust
+- Rich link preview cards for YouTube, GitHub, Twitter/X, Reddit, Spotify, Twitch, Steam, Wikipedia, Discord, npm, Stack Overflow, and IMDb
+
+### Calls & Voice
+
+- Push to Talk with a configurable keybind (default: Space)
+- Push to Deafen with the M key
+- Camera starts turned off by default when joining a call
+- Screenshare requires confirmation before going live
+- Toggle noise suppression on or off
+- Calls float in a draggable picture-in-picture window when you navigate away
+- Your chat background shows through the call view
+- Dark/light mode inside calls matches your Lotus Chat theme
+- Calls are available in DMs and private groups only — no accidental mass rings
+- AFK auto-mute: mic is automatically silenced after a configurable idle timeout (1–30 min); a toast confirms the action
+- Voice channel user limit: admins can cap how many people can be in a room's call — enforced server-side for every Matrix client (not just Lotus Chat); others see "Channel Full" until a spot opens
+- Custom join/leave sound effects when someone enters or leaves your call — choose Chime, Soft, Retro, or off
+- Soundboard: upload your own short audio clips (like custom emojis — they sync across your devices) and play them into a call so everyone hears them
+- Call quality settings: cap your microphone bitrate, screenshare bitrate, and screenshare framerate — handy on a slow connection (Settings → Calls)
+- Room call permissions: admins can turn off screen sharing or make a room audio-only (no cameras) — enforced server-side for every Matrix client, and it stops an in-progress share within seconds of being switched off
+
+### Customization & Appearance
+
+- LotusGuild Terminal Design System (TDS) — a CRT terminal-inspired dark theme
+- TDS light mode variant for daytime use
+- 20+ static chat background patterns
+- 5 animated chat backgrounds: Digital Rain, Star Drift, Grid Pulse, Aurora Flow, Fireflies (with improved per-layer looping, phosphor-flicker rain, fluid aurora sweep, and organic firefly bioluminescence)
+- 11 seasonal & holiday theme overlays — Halloween, Christmas, New Year, Autumn, Valentine's Day, St. Patrick's Day, Earth Day, Lunar New Year, April Fools', Deep Space, and Retro Arcade; auto-selected by date with a manual override in Settings → Appearance
+- Avatar decorations — 99 animated APNG overlays (Gaming, Cyber, Space, Fantasy, Nature, Spooky, Cozy, and more) that frame your avatar across the timeline, members list, and @mention autocomplete; visible to all Lotus Chat users; select in Settings → Account → Avatar Decoration
+- Toggle to pause background animations
+- Glassmorphism sidebar — frosted glass effect that lets the background show through
+- Night Light / blue light filter with an adjustable intensity slider
+- Emoji prefixes on room names render larger in the sidebar (e.g. 🎮 general)
+- Rename any room for yourself only — other members see the original name
+- Emoji picker on all room name inputs
+
+### Presence & Profile
+
+- Discord-style presence selector: Online, Idle, Do Not Disturb, Invisible, or Auto
+- Custom status message with emoji and an optional auto-clear timer (changing your status is never silently overwritten by activity events)
+- Colored presence ring on member avatars (green / yellow / red)
+- Profile fields for pronouns and timezone
+- When a user's timezone is set, their current local time appears in their profile
+- Private notes on any user's profile — freeform text visible only to you, auto-saves and syncs across devices
+- Unread count shown in the browser tab title
+
+### Moderation & Privacy
+
+- Report any room to homeserver admins from the room menu
+- View policy lists and ban lists (Draupnir-compatible, read-only)
+- Toggle private read receipts so others can't see when you've read messages
+- Optional warning when an encrypted room contains unverified devices
+- Full push rule editor in notification settings
+- View and edit Server ACL rules in room settings
+- Filterable room activity / mod log (joins, kicks, bans, power level changes, etc.)
+- Room stats and insights panel (active members, top reactions, media breakdown, activity heatmap)
+- Export room history as plain text, JSON, or HTML with optional date range filter
+
+### Notifications
+
+- In-app toast notifications appear bottom-right when the window is focused
+- Custom notification sounds per category (messages, invites)
+- Quiet hours — suppress notifications during a configured time window
+- Click a toast to jump directly to the room or DM
+
+### UX
+
+- Filter and search rooms in the sidebar
+- Favorite rooms sync across devices and appear in a pinned section
+- Sort rooms by recent activity, alphabetical, or unread first
+- DM rows show a message preview and relative timestamp
+- Right-click a room for a context menu: mute with duration, copy link, mark as read
+- Quick emoji reactions appear on message hover — one click to react
+- Knock-to-join: request access to a room; admins approve or deny from the members list
+- Media gallery drawer: browse all images, videos, and files shared in a room
+- Invite link and QR code in room settings
+- Pending knock requests shown in the members list for room admins with a live badge count on the Members button
+- Homeserver support contact displayed in Help & About (MSC1929)
+- Server notice rooms are visually distinct from regular DMs
+
+---
+
+## Desktop App
+
+Lotus Chat has a desktop app for Windows, macOS, and Linux. It wraps the same web client in a native window with automatic background updates — no need to reinstall for new versions.
+
+### Download
+
+Download the latest release from the [Releases page on code.lotusguild.org](https://code.lotusguild.org).
+
+### SmartScreen Warning (Windows)
+
+When you first run the installer on Windows, you may see a popup that says **"Windows protected your PC"** with the app listed as an unknown publisher. This is normal.
+
+**Why it happens:** Windows SmartScreen flags any app that does not have an expensive commercial code-signing certificate from a major CA. Lotus Chat is signed with its own key for update verification, but that key is not in Microsoft's pre-approved list.
+
+**How to install anyway:**
+
+1. Click **"More info"** in the SmartScreen dialog.
+2. A **"Run anyway"** button will appear.
+3. Click it to proceed with installation.
+
+After the first install, automatic in-app updates handle all future versions — you will not see this prompt again for updates.
+
+### Desktop-Specific Features
+
+Beyond the web client, the desktop app adds native OS integration (Windows-focused; graceful no-ops elsewhere). See [`LOTUS_FEATURES.md`](./LOTUS_FEATURES.md#desktop-app-features) for detail.
+
+- **Native rich notifications** — Windows toasts you can click to open the room or reply to inline, right from the toast.
+- **Focus Assist sync** — Lotus silences its own notifications while Windows Focus Assist / Quiet Hours is on.
+- **Windows Jump List** — right-click the taskbar icon for quick access to your most-active rooms.
+- **Taskbar call controls** — Mute / Deafen / End Call buttons on the taskbar thumbnail during a call, plus call status in the volume flyout (SMTC).
+- **Stays awake in calls** — the system won't sleep or dim during a voice/video call.
+- **Network awareness** — reconnects promptly when Windows connectivity changes.
+- **Custom window chrome** (opt-in) — a Lotus-styled title bar in place of the OS one.
+- **Recursive folder drag-drop** — drop a whole folder onto the composer to upload everything inside it.
+- **Automatic background updates** with a one-click update toast.
+
+---
+
+## For Developers
+
+The source code lives in `/root/code/cinny`. All changes should be made on the `lotus` branch. Push to `origin/lotus` and CI will automatically build and deploy to [chat.lotusguild.org](https://chat.lotusguild.org) in approximately 11 minutes — no manual build or deploy steps required.
+
+See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_TODO.md](LOTUS_TODO.md) for the work backlog.
+
+### 🔱 Element Call fork ("Lotus Call") — LIVE
+
+Voice/video channels embed **Element Call**, which is now our **self-built fork**
+(`@lotusguild/element-call-embedded` `0.20.1-lotus.1`, source at
+`LotusGuild/element-call`), published to our private Gitea npm registry and served
+same-origin. We no longer depend on the upstream prebuilt bundle, so in-call
+behavior is editable source instead of fragile DOM/widget hacks.
+
+**Shipped via the fork:** denoise as an in-source LiveKit audio stage (survives
+reconnects), in-call speaking/mute events, focus-a-participant during screenshare,
+avatar decorations on EC video tiles, and a native transparent background.
+**Built but dormant (need cinny UI):** real call-audio injection
+(`io.lotus.inject_audio` → in-call soundboard) and quality controls
+(`io.lotus.set_quality`).
+
+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
 
 ```bash
-npm ci
+npm ci && npm run build   # outputs to dist/
-npm run build   # outputs to dist/
 ```
 
-Vite's render-chunks phase requires ~6 GB Node heap. If OOM killed, set:
+If the build is killed due to out-of-memory:
+
 ```bash
 NODE_OPTIONS=--max_old_space_size=6144 npm run build
 ```
 
-## Development workflow
+### CI/CD
-
-All code changes should be made in the local clone at `/root/code/cinny` on the dev box, then committed and pushed to `origin/lotus`. The CI/CD pipeline handles everything from there — no manual build or deploy steps needed.
 
 ```
-edit → commit → git push    # ~11 minutes → auto-deployed to chat.lotusguild.org
+edit → commit → git push    →    ~11 min    →    live at chat.lotusguild.org
 ```
-
-Pipeline (`.gitea/workflows/ci.yml` + `lotus_deploy.sh` on LXC 106):
-1. Push triggers a Gitea Actions build — TypeScript check, ESLint, Prettier, bundle size report
-2. Build must pass as the CI gate; quality checks are informational (`continue-on-error`)
-3. A Gitea webhook fires `lotus_deploy.sh` on LXC 106, which polls the API until CI passes (up to 15 min), then pulls `origin/lotus`, runs `npm ci && npm run build`, and rsyncs to `/var/www/html/`
-
-LXC 106's stored Gitea credential is **read-only** — it can only pull. Pushes must be done from the dev box with your personal credentials (entered manually, never cached).
-
-## Deployment
-
-Built files are served from `/var/www/html/` on LXC 106 (nginx). Config lives at `/opt/lotus-cinny/config.json` (vite copies it to `dist/`):
-
-```json
-{
-  "defaultHomeserver": 0,
-  "homeserverList": ["matrix.lotusguild.org"],
-  "allowCustomHomeservers": false,
-  "gifApiKey": "<giphy_key>"
-}
-```
-
-## Key Custom Files
-
-| File | Purpose |
-|------|---------|
-| `src/lotus-terminal.css.ts` | All TDS CSS tokens, global styles, light/dark variants |
-| `src/lotus-boot.ts` | Boot sequence animation (runs once per session) |
-| `src/app/hooks/useRoomReadPositions.ts` | Per-message read receipt position map |
-| `src/app/features/room/ReadPositionsContext.ts` | React context for read positions |
-| `src/app/components/read-receipt-avatars/` | Read receipt avatar pill component |
-| `src/app/components/event-readers/EventReaders.tsx` | "Seen by" modal with timestamps |
-| `src/app/components/GifPicker.tsx` | GIF search + send |
-| `src/app/features/call/CallControls.tsx` | PTT badge + keybind logic |
-| `src/app/plugins/call/CallControl.ts` | EC widget bridge (screenshare revert, PTT mic) |
-| `src/app/components/CallEmbedProvider.tsx` | PiP + draggable call embed, call wallpaper carry-over |
-| `src/app/plugins/call/CallEmbed.ts` | EC widget bridge: iframe setup, `color-scheme` dark/light injection, built-in control hiding, theme sync |
-| `src/app/plugins/millify.ts` | Named import fix for Rolldown CJS interop (prevents `zc.default is not a function` crash) |
-| `src/app/features/room/MediaGallery.tsx` | Right-side media gallery drawer (images/videos/files) |
-| `src/app/features/room/PollCreator.tsx` | Poll creation modal (single/multiple choice, 2–10 options) |
-| `src/app/features/common-settings/general/RoomShareInvite.tsx` | Invite link + QR code tile for room settings |
-| `src/app/utils/syntaxHighlight.ts` | TDS code syntax tokenizer (JS/TS/Python/Rust → inline CSS vars) |
-| `src/app/features/room-settings/ExportRoomHistory.tsx` | Export room messages to plain text / JSON / HTML with date range filter and E2EE awareness |
-| `src/app/features/room-settings/RoomActivityLog.tsx` | Filterable mod log of room state events (joins, kicks, bans, power level changes, etc.) |
-| `src/app/features/room-settings/RoomServerACL.tsx` | Server ACL viewer/editor (allow/deny lists, IP literal toggle, power-level gated) |
-| `src/app/features/room-settings/RoomInsights.tsx` | Room stats panel: top members bar chart, top reactions, media breakdown, 24h heatmap |
-| `src/app/features/bookmarks/BookmarksPanel.tsx` | Saved messages sidebar panel with filter, jump-to-message, and remove |
-| `src/app/hooks/useBookmarks.ts` | Read/write `io.lotus.bookmarks` account data for message bookmarks |
-| `src/app/features/room/ScheduleMessageModal.tsx` | Schedule-message modal with datetime picker; sends via MSC4140 delayed events API |
-| `src/app/utils/scheduledMessages.ts` | Utilities for MSC4140 scheduled message state and cancel endpoint |
-| `src/app/hooks/useExtendedProfile.ts` | Read/write MSC4133 extended profile fields (`m.pronouns`, `m.tz`) |
-| `src/app/hooks/useLocalTime.ts` | Formats user local time from `m.tz` IANA zone; updates every 60 s |
-| `src/app/components/url-preview/UrlPreviewCard.tsx` | Domain-specific URL preview cards for 13 sites + generic favicon fallback |

build/lotus-denoise.js

@@ -0,0 +1,357 @@
+/*
+ * Lotus Chat — client-side ML noise suppression shim for Element Call.
+ *
+ * Element Call runs as a same-origin iframe widget that captures the mic
+ * internally (via livekit-client -> getUserMedia) and publishes it to LiveKit.
+ * We can't reach that track from the host. Instead this classic <script> is
+ * injected (by the vite `lotus-denoise` plugin) into EC's index.html BEFORE its
+ * deferred module entry, so it runs first and monkeypatches getUserMedia. When
+ * the "ml" tier is selected (lotusDenoise=ml in the widget URL) we route the
+ * captured mic through an RNNoise AudioWorklet (@sapphi-red/web-noise-suppressor)
+ * and hand the processed track back to EC/LiveKit.
+ *
+ * RNNoise REQUIRES mono, 48 kHz float audio. Feeding it anything else (stereo,
+ * or 44.1 kHz data the model treats as 48 kHz) produces loud static. So we:
+ *   - run a 48 kHz AudioContext (which handles resampling from the hardware),
+ *   - use the SIMD build if supported for better performance,
+ *   - keep browser-native stationary suppression ON so the fans are removed
+ *     before RNNoise focuses on transient noises (keyboard, dogs, etc.).
+ *
+ * Any failure falls back to the unprocessed mic so calls never break.
+ */
+(function () {
+  'use strict';
+
+  var params;
+  try {
+    params = new URLSearchParams(window.location.search);
+    if (params.get('lotusDenoise') !== 'ml') return;
+  } catch (e) {
+    return;
+  }
+
+  // Derive the parent origin for postMessage targetOrigin from the parentUrl
+  // widget param (a full URL) so denoise-status messages aren't broadcast with
+  // '*'. Fall back to this frame's own origin if parentUrl is missing/malformed.
+  var targetOrigin;
+  try {
+    var parentUrl = params.get('parentUrl');
+    targetOrigin = parentUrl ? new URL(parentUrl).origin : window.location.origin;
+  } catch (e) {
+    targetOrigin = window.location.origin;
+  }
+
+  var md = navigator.mediaDevices;
+  if (!md || typeof md.getUserMedia !== 'function') return;
+  if (typeof AudioWorkletNode === 'undefined' || typeof AudioContext === 'undefined') return;
+
+  var ASSET_BASE = './denoise/';
+
+  var MODEL = params.get('lotusModel') || 'rnnoise';
+  // DTLN (@workadventure) targets 16 kHz and does not resample internally, so
+  // its whole graph runs in a 16 kHz context; RNNoise/Speex (sapphi) and
+  // DeepFilterNet 3 are 48 kHz fullband. The processed MediaStreamTrack is
+  // published to LiveKit either way (WebRTC/Opus resamples as needed).
+  var SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
+  var USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
+  var USE_GATE = params.get('lotusGate') === 'true';
+  var GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');
+
+  var PROCESSORS = {
+    rnnoise: {
+      name: '@sapphi-red/web-noise-suppressor/rnnoise',
+      script: 'rnnoiseWorklet.js',
+      wasm: 'rnnoise.wasm',
+      simdWasm: 'rnnoise_simd.wasm',
+    },
+    speex: {
+      name: '@sapphi-red/web-noise-suppressor/speex',
+      script: 'speexWorklet.js',
+      wasm: 'speex.wasm',
+    },
+    dtln: {
+      // @workadventure/noise-suppression is a self-contained ES module that
+      // resolves its own AudioWorklet processor + LiteRT WASM + TFLite models
+      // via import.meta.url. We dynamic-import this helper and let it build the
+      // node, rather than addModule-ing a flat worklet ourselves.
+      helper: 'workadventure/audio-worklet.js',
+    },
+    deepfilternet: {
+      // deepfilternet3-noise-filter ships an ESM whose AudioWorklet processor +
+      // wasm-bindgen glue are INLINED as a string (loaded via a Blob URL — no
+      // CDN for the worklet). The only assets it fetches are its single-threaded
+      // df_bg.wasm + ONNX model, which we vendor + self-host under
+      // deepfilternet/v2/... We dynamic-import the ESM, build a DeepFilterNet3Core
+      // pointed at the self-hosted base, and let it create the worklet node.
+      esm: 'deepfilternet/index.esm.js',
+    },
+    gate: {
+      name: '@sapphi-red/web-noise-suppressor/noise-gate',
+      script: 'noiseGateWorklet.js',
+    },
+  };
+
+  var origGetUserMedia = md.getUserMedia.bind(md);
+  var wasmPromises = {};
+  var ctxPromise = null;
+
+  function checkSimd() {
+    try {
+      return WebAssembly.validate(
+        new Uint8Array([
+          0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, 1, 8, 0, 65, 0,
+          253, 15, 253, 98, 11,
+        ]),
+      )
+        ? Promise.resolve(true)
+        : Promise.resolve(false);
+    } catch (e) {
+      return Promise.resolve(false);
+    }
+  }
+
+  function loadWasm(modelId) {
+    if (wasmPromises[modelId]) return wasmPromises[modelId];
+    var p = PROCESSORS[modelId];
+    if (!p || !p.wasm) return Promise.resolve(null);
+
+    wasmPromises[modelId] = (modelId === 'rnnoise' ? checkSimd() : Promise.resolve(false)).then(
+      function (simd) {
+        var file = simd && p.simdWasm ? p.simdWasm : p.wasm;
+        return fetch(ASSET_BASE + file).then(function (r) {
+          if (!r.ok) {
+            if (simd && p.simdWasm)
+              return fetch(ASSET_BASE + p.wasm).then(function (r2) {
+                if (!r2.ok) throw new Error(modelId + ' wasm failed');
+                return r2.arrayBuffer();
+              });
+            throw new Error(modelId + ' wasm failed');
+          }
+          return r.arrayBuffer();
+        });
+      },
+    );
+    return wasmPromises[modelId];
+  }
+
+  function getContext() {
+    if (!ctxPromise) {
+      ctxPromise = (function () {
+        var ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        if (ctx.sampleRate !== SAMPLE_RATE) {
+          try {
+            ctx.close();
+          } catch (e) {}
+          return Promise.reject(new Error('SampleRate mismatch: ' + ctx.sampleRate));
+        }
+        // Load worklet modules. DTLN registers its own processor via the
+        // dynamic-imported helper (see buildMlNode), so it needs nothing here.
+        var scripts = [];
+        if (MODEL === 'rnnoise' || MODEL === 'speex') scripts.push(PROCESSORS[MODEL].script);
+        if (USE_GATE) scripts.push(PROCESSORS.gate.script);
+
+        return Promise.all(
+          scripts.map(function (s) {
+            return ctx.audioWorklet.addModule(ASSET_BASE + s);
+          }),
+        ).then(function () {
+          return ctx.state === 'suspended'
+            ? ctx.resume().then(function () {
+                return ctx;
+              })
+            : ctx;
+        });
+      })();
+      ctxPromise.catch(function () {
+        ctxPromise = null;
+      });
+    }
+    return ctxPromise;
+  }
+
+  var hasNotifiedActive = false;
+
+  // Build the ML denoise AudioWorkletNode. RNNoise/Speex are flat sapphi
+  // worklets we instantiate directly with the fetched WASM binary. DTLN comes
+  // from @workadventure's self-contained helper, which we dynamic-import; it
+  // resolves its own processor + LiteRT WASM + TFLite models internally and
+  // returns the node. Resolves to { node, ready, dispose }.
+  function buildMlNode(ctx, wasmBinary) {
+    if (MODEL === 'dtln') {
+      return import(ASSET_BASE + PROCESSORS.dtln.helper).then(function (mod) {
+        // bypassUntilReady: pass raw audio through until the model is loaded so
+        // the call never has a silent/missing track during init.
+        return mod.createNoiseSuppressionAudioWorklet(ctx, { bypassUntilReady: true });
+      });
+    }
+    if (MODEL === 'deepfilternet') {
+      // Resolve an absolute self-hosted base so the package's cdnUrl override
+      // fetches our vendored df_bg.wasm + ONNX model (never the upstream CDN).
+      var dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
+      return import(ASSET_BASE + PROCESSORS.deepfilternet.esm).then(function (mod) {
+        var core = new mod.DeepFilterNet3Core({
+          sampleRate: SAMPLE_RATE,
+          noiseReductionLevel: 80,
+          assetConfig: { cdnUrl: dfnBase },
+        });
+        // initialize() fetches + compiles the wasm and loads the model on the
+        // main thread; the worklet node only exists once that resolves, so the
+        // graph is connected with a ready model (no half-initialised passthrough).
+        return core.initialize().then(function () {
+          return core.createAudioWorkletNode(ctx).then(function (node) {
+            return {
+              node: node,
+              ready: Promise.resolve(),
+              dispose: function () {
+                try {
+                  core.destroy();
+                } catch (e) {}
+              },
+            };
+          });
+        });
+      });
+    }
+    var node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
+      channelCount: 1,
+      numberOfInputs: 1,
+      numberOfOutputs: 1,
+      processorOptions: { maxChannels: 1, wasmBinary: wasmBinary },
+    });
+    return Promise.resolve({
+      node: node,
+      ready: Promise.resolve(),
+      dispose: function () {
+        try {
+          node.port.postMessage('destroy');
+        } catch (e) {}
+      },
+    });
+  }
+
+  function processStream(stream) {
+    var audioTracks = stream.getAudioTracks();
+    if (audioTracks.length === 0) return Promise.resolve(stream);
+
+    return Promise.all([loadWasm(MODEL), getContext()])
+      .then(function (res) {
+        var wasmBinary = res[0];
+        var ctx = res[1];
+
+        var source = ctx.createMediaStreamSource(stream);
+        var dest = ctx.createMediaStreamDestination();
+        var head = source;
+
+        // 1. Optional Noise Gate
+        if (USE_GATE) {
+          var gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
+            processorOptions: {
+              openThreshold: GATE_THRESHOLD,
+              closeThreshold: GATE_THRESHOLD - 5,
+              holdMs: 150,
+              maxChannels: 1,
+            },
+          });
+          head.connect(gateNode);
+          head = gateNode;
+        }
+
+        // 2. ML Processor
+        return buildMlNode(ctx, wasmBinary).then(function (ml) {
+          var mlNode = ml.node;
+          head.connect(mlNode);
+          mlNode.connect(dest);
+
+          // Surface async init failures (e.g. DTLN model load) without blocking
+          // the track handoff — audio flows via bypassUntilReady meanwhile.
+          if (ml.ready && typeof ml.ready.then === 'function') {
+            ml.ready.catch(function (err) {
+              var m = err instanceof Error ? err.message : String(err);
+              console.error('[lotus-denoise] ' + MODEL + ' init failed:', m);
+            });
+          }
+
+          var origTrack = audioTracks[0];
+          var processedTrack = dest.stream.getAudioTracks()[0];
+
+          var torndown = false;
+          function cleanup() {
+            if (torndown) return;
+            torndown = true;
+            try {
+              ml.dispose();
+            } catch (e) {}
+            try {
+              source.disconnect();
+              mlNode.disconnect();
+            } catch (e) {}
+            try {
+              if (gateNode) gateNode.disconnect();
+            } catch (e) {}
+            try {
+              origTrack.stop();
+            } catch (e) {}
+          }
+
+          var rawStop = processedTrack.stop.bind(processedTrack);
+          processedTrack.stop = function () {
+            cleanup();
+            rawStop();
+          };
+          origTrack.addEventListener('ended', function () {
+            try {
+              rawStop();
+            } catch (e) {}
+            cleanup();
+          });
+
+          if (!hasNotifiedActive) {
+            hasNotifiedActive = true;
+            window.parent.postMessage(
+              {
+                type: 'lotus-denoise-status',
+                active: true,
+                model: MODEL,
+                nativeNS: USE_NATIVE_NS,
+                gate: USE_GATE,
+              },
+              targetOrigin,
+            );
+          }
+
+          var out = new MediaStream();
+          out.addTrack(processedTrack);
+          stream.getVideoTracks().forEach(function (t) {
+            out.addTrack(t);
+          });
+          return out;
+        });
+      })
+      .catch(function (e) {
+        var msg = e instanceof Error ? e.message : String(e);
+        console.error('[lotus-denoise] Setup failed:', msg);
+        window.parent.postMessage(
+          { type: 'lotus-denoise-status', active: false, error: msg },
+          targetOrigin,
+        );
+        return stream;
+      });
+  }
+
+  navigator.mediaDevices.getUserMedia = function (constraints) {
+    var wantsAudio = !!(constraints && constraints.audio);
+    var effective = constraints;
+    if (wantsAudio) {
+      var audioC =
+        typeof constraints.audio === 'object' ? Object.assign({}, constraints.audio) : {};
+      audioC.noiseSuppression = USE_NATIVE_NS;
+      audioC.channelCount = 1;
+      if (audioC.echoCancellation === undefined) audioC.echoCancellation = true;
+      if (audioC.autoGainControl === undefined) audioC.autoGainControl = true;
+      effective = Object.assign({}, constraints, { audio: audioC });
+    }
+    return origGetUserMedia(effective).then(function (stream) {
+      return wantsAudio ? processStream(stream) : stream;
+    });
+  };
+})();

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/README.md

@@ -0,0 +1,112 @@
+# Local OIDC / next-gen-auth (MSC3861) test loop
+
+The Lotus client gained MSC3861/MSC2965 OIDC login (P4-6). lotusguild's own
+homeserver is **not** MSC3861, so to exercise the flow without a mozilla.org
+tester you need a local homeserver that delegates auth to a **Matrix
+Authentication Service (MAS)**. This is the dev loop.
+
+> Status: the Lotus-client side is unit-tested + gate-green; this server loop is
+> the manual end-to-end check. It hasn't been run in CI (no container runtime
+> there), so treat version pins as a starting point and bump as needed.
+
+## 1. Stand up MAS + Synapse
+
+The simplest path is the **upstream MAS docker-compose quickstart** — it's
+maintained and handles key generation + the database:
+<https://element-hq.github.io/matrix-authentication-service/setup/installation.html>
+(`docker compose` section). Use it to get MAS + Synapse + Postgres running, then
+apply the two Lotus-specific deltas below.
+
+A minimal `compose.yaml` skeleton (generate MAS keys first — do **not** hand-write them):
+
+```yaml
+services:
+  postgres:
+    image: postgres:16
+    environment: { POSTGRES_USER: synapse, POSTGRES_PASSWORD: pw, POSTGRES_DB: synapse }
+  mas:
+    image: ghcr.io/element-hq/matrix-authentication-service:latest
+    command: server
+    ports: ['8090:8080'] # MAS issuer on http://localhost:8090
+    volumes: ['./mas:/data']
+    # First run once: `docker compose run --rm mas config generate -o /data/config.yaml`
+    # then edit /data/mas/config.yaml (see §1a) before `up`.
+  synapse:
+    image: ghcr.io/element-hq/synapse:latest
+    ports: ['8008:8008'] # client/federation API
+    volumes: ['./synapse:/data']
+    depends_on: [postgres, mas]
+```
+
+### 1a. MAS `config.yaml` — the parts that matter
+After `config generate` (which fills in `secrets.keys` + `encryption`), set:
+
+```yaml
+http:
+  public_base: http://localhost:8090/
+  issuer: http://localhost:8090/
+database:
+  uri: postgresql://synapse:pw@postgres/synapse
+matrix:
+  homeserver: localhost          # the server_name
+  endpoint: http://synapse:8008/
+  secret: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"
+clients:
+  - client_id: "0000000000000000000SYNAPSE"
+    client_auth_method: client_secret_basic
+    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"
+passwords:               # so you can create a local test account in the MAS UI
+  enabled: true
+```
+
+### 1b. Synapse `homeserver.yaml` — delegate auth to MAS
+See `synapse-msc3861.yaml` in this folder; the key block is:
+
+```yaml
+experimental_features:
+  msc3861:
+    enabled: true
+    issuer: http://localhost:8090/
+    client_id: "0000000000000000000SYNAPSE"
+    client_auth_method: client_secret_basic
+    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"   # == MAS clients[].client_secret
+    admin_token: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"  # == MAS matrix.secret
+    account_management_url: "http://localhost:8090/account"
+```
+
+Create a test user via the MAS UI (`http://localhost:8090/`) or
+`docker compose exec mas mas-cli manage register-user`.
+
+Sanity check discovery (the client relies on this):
+```bash
+curl -s http://localhost:8008/.well-known/matrix/client | jq '."m.authentication"'
+# -> { "issuer": "http://localhost:8090/", "account": "http://localhost:8090/account" }
+```
+
+## 2. Point the Lotus dev client at it
+
+Run the client: `npm start` (vite dev). Override `public/config.json` so the
+local server is selectable and custom servers are allowed:
+
+```json
+{
+  "defaultHomeserver": 0,
+  "homeserverList": ["localhost:8008"],
+  "allowCustomHomeservers": true,
+  "hashRouter": { "enabled": false, "basename": "/" }
+}
+```
+
+Dynamic client registration handles the redirect URI automatically — it's
+`<vite-origin>/auth/oidc/callback` (e.g. `http://localhost:5173/auth/oidc/callback`),
+and MAS allows `http://localhost` redirects in dev.
+
+## 3. Run the checklist
+
+See **section N** of `../../LOTUS_TESTING.md` for the actual pass/fail steps
+(login redirect, callback, session-persist-on-reload, token refresh, logout
+revocation, account-management link, and the non-OIDC-regression check).
+
+## Files here
+- `synapse-msc3861.yaml` — the Synapse experimental-features delta.
+- `config.local.json` — the Lotus `public/config.json` override.

dev/oidc-test/config.local.json

@@ -0,0 +1,7 @@
+{
+  "defaultHomeserver": 0,
+  "homeserverList": ["localhost:8008"],
+  "allowCustomHomeservers": true,
+  "featuredCommunities": { "openAsDefault": false, "spaces": [], "rooms": [], "servers": [] },
+  "hashRouter": { "enabled": false, "basename": "/" }
+}

dev/oidc-test/synapse-msc3861.yaml

@@ -0,0 +1,16 @@
+# Synapse experimental-features delta to delegate auth to a local MAS (MSC3861).
+# Merge this into your test homeserver.yaml. The client_secret + admin_token MUST
+# match the MAS config (clients[].client_secret and matrix.secret respectively).
+experimental_features:
+  msc3861:
+    enabled: true
+    issuer: http://localhost:8090/
+    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'
+
+# With msc3861 enabled, Synapse disables its own password/SSO login and advertises
+# `m.authentication` in /.well-known/matrix/client — which is exactly what the
+# Lotus client's getOidcIssuer() reads to switch into the OIDC flow.

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,17 @@ export default [
       'no-undef': 'off',
     },
   },
+  {
+    // Test files commonly define several small mock/fake classes and named
+    // function expressions used as constructor mocks (e.g.
+    // `setGlobal('AudioWorkletNode', function AudioWorkletNode(){})`), which must
+    // NOT be rewritten to arrows (arrows aren't constructable). Relax the
+    // stylistic class/callback rules here.
+    files: ['**/*.test.ts', '**/*.test.tsx'],
+    rules: {
+      'max-classes-per-file': 'off',
+      'lines-between-class-members': 'off',
+      'prefer-arrow-callback': 'off',
+    },
+  },
 ];

index.html

@@ -29,10 +29,8 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap"
+    <link rel="stylesheet" href="/fonts/custom-fonts.css" />
-      rel="stylesheet"
-    />
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
     <link rel="manifest" href="/manifest.json" />

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "lotus-chat",
-  "version": "4.12.2-lotus",
+  "version": "4.12.3-lotus",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lotus-chat",
-      "version": "4.12.2-lotus",
+      "version": "4.12.3-lotus",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
@@ -20,11 +20,11 @@
         "@giphy/js-types": "5.1.0",
         "@giphy/js-util": "5.2.0",
         "@giphy/react-components": "10.1.2",
-        "@sentry/react": "10.53.1",
+        "@sapphi-red/web-noise-suppressor": "0.3.5",
         "@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",
         "blurhash": "2.0.5",
@@ -33,8 +33,8 @@
         "classnames": "2.5.1",
         "dateformat": "5.0.3",
         "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",
@@ -49,14 +49,15 @@
         "immer": "11.1.8",
         "is-hotkey": "0.2.0",
         "jotai": "2.20.0",
+        "katex": "0.16.11",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
-        "lodash": "4.18.1",
+        "matrix-js-sdk": "41.7.0",
-        "matrix-js-sdk": "41.6.0-rc.0",
         "matrix-widget-api": "1.17.0",
         "millify": "6.1.0",
         "pdfjs-dist": "5.7.284",
         "prismjs": "1.30.0",
+        "qrcode.react": "4.2.0",
         "react": "19.2.6",
         "react-aria": "3.48.0",
         "react-blurhash": "0.3.0",
@@ -73,16 +74,17 @@
         "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": {
-        "@element-hq/element-call-embedded": "0.19.4",
+        "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
-        "@sentry/vite-plugin": "5.3.0",
         "@types/chroma-js": "3.1.2",
         "@types/file-saver": "2.0.7",
         "@types/is-hotkey": "0.1.10",
+        "@types/katex": "0.16.8",
         "@types/node": "25.9.1",
         "@types/prismjs": "1.26.6",
         "@types/react": "19.2.15",
@@ -108,6 +110,7 @@
         "husky": "9.1.7",
         "lint-staged": "17.0.5",
         "prettier": "3.8.3",
+        "tsx": "4.22.4",
         "typescript": "6.0.3",
         "vite": "8.0.14",
         "vite-plugin-pwa": "1.3.0",
@@ -1788,12 +1791,6 @@
         "node": ">=v18"
       }
     },
-    "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.19.4",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.19.4.tgz",
-      "integrity": "sha512-crawgHughTv6yYoCqgq7cKLxUDtYU/Xr7KgSFCT0NM++QHoYsM5WGmIU/yY2Q0QYPuzmHXIEK95IZmJaQ1jIJA==",
-      "dev": true
-    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -2693,10 +2690,16 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "node_modules/@lotusguild/element-call-embedded": {
+      "version": "0.20.1-lotus.1",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.20.1-lotus.1/element-call-embedded-0.20.1-lotus.1.tgz",
+      "integrity": "sha512-hy1KEnFw4MuwvlactUFPPvvtPZh1y56JMK/ehnficUmJNwdJsOhSwThaYp35RZ/ar6RCuiW86yQqlQBOSpZJVQ==",
+      "dev": true
+    },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "18.3.0",
+      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.1.tgz",
-      "integrity": "sha512-9a4feyt8QLysARu7PHKaRWT+wcCd+IYH074LXp9QK5WqfN4zUXueRhiSSMNT18Bm+8q3sBR/4zxDxOSDR0M8Kg==",
+      "integrity": "sha512-VRjWhE1UgHnPpJ3b9B5+8z71ZC/HICFngPPFIN6ktzmUBKI5RusPujzbAQUoB3CgZ0yU58L99AfSQS4YTztSWw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 18"
@@ -3774,402 +3777,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@sentry-internal/browser-utils": {
+    "node_modules/@sapphi-red/web-noise-suppressor": {
-      "version": "10.53.1",
+      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.53.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sapphi-red/web-noise-suppressor/-/web-noise-suppressor-0.3.5.tgz",
-      "integrity": "sha512-X4d6y8sBMjmNhcDW4eMBU3ASsNIMz8dqaFkhyIMN/dkYr/yZKnbRZPaVuVUGvHKjnlficPpIH0/HK9KBjrYxPw==",
+      "integrity": "sha512-jh3+V9yM+zxLriQexoGm0GatoPaJWjs6ypFIbFYwQp+AoUb55eUXrjKtKQyuC5zShzzeAQUl0M5JzqB7SSrsRA==",
-      "license": "MIT",
+      "license": "MIT"
-      "dependencies": {
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/feedback": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.53.1.tgz",
-      "integrity": "sha512-vVpTI/aEYN5d9IgZeYJWMqVaN0+iFgidSrYNAsZTh1US5sJUzF/wrl+68KdpmCtFROrN3jiAn1oPSwL5CKvEJA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/replay": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.53.1.tgz",
-      "integrity": "sha512-wZNzTBYkgGUPWMuUQv7L64+OJmoCnz7GQNiTrTFK6EVAjJXFBCSsPp/nhif0bLhbk8+0g4xz633uOhpXuQbFdw==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/browser-utils": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/replay-canvas": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.53.1.tgz",
-      "integrity": "sha512-aueLaf/2prExwA76BGU5/bOXCKWqtt6jQXWA6WJQNrmKpPEtZJB4ypnpsou0McXQCF8tur2Y8U0TEkwQP13yJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/replay": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/babel-plugin-component-annotate": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-5.3.0.tgz",
-      "integrity": "sha512-p4q8gn8wcFqZGP/s2MnJCAAd8fTikaU6A0mM97RDHQgStcrYiaS0Sc5zUNfb1V+UOLPuvdEdL6MwyxfzjYJQTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@sentry/browser": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.53.1.tgz",
-      "integrity": "sha512-zXF373hzUOGzUOrqd8xb1U3LQi5uYC3mwv+z5OMKUUinQlu30tTWBs7ypy6YTchtix9QlYaHWlayUF8vBZ5UjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/browser-utils": "10.53.1",
-        "@sentry-internal/feedback": "10.53.1",
-        "@sentry-internal/replay": "10.53.1",
-        "@sentry-internal/replay-canvas": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-5.3.0.tgz",
-      "integrity": "sha512-L5T60sWdAI3qWwdg3Ptwek/0TY59PERrxyqp4XMUkroayQvGd9r5dIW9Q1kSeXX9iJ442nXbFZKAOyCKV4Z13Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.18.5",
-        "@sentry/babel-plugin-component-annotate": "5.3.0",
-        "@sentry/cli": "^2.58.5",
-        "dotenv": "^16.3.1",
-        "find-up": "^5.0.0",
-        "glob": "^13.0.6",
-        "magic-string": "~0.30.8"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/glob": {
-      "version": "13.0.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
-      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "minimatch": "^10.2.2",
-        "minipass": "^7.1.3",
-        "path-scurry": "^2.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/minimatch": {
-      "version": "10.2.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
-      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.5"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/minipass": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/@sentry/cli": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.58.6.tgz",
-      "integrity": "sha512-baBcNPLLfUi9WuL+Tpri9BFaAdvugZIKelC5X0tt0Zdy+K0K+PCVSrnNmwMWU/HyaF/SEv6b6UHnXIdqanBlcg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "FSL-1.1-MIT",
-      "dependencies": {
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.7",
-        "progress": "^2.0.3",
-        "proxy-from-env": "^1.1.0",
-        "which": "^2.0.2"
-      },
-      "bin": {
-        "sentry-cli": "bin/sentry-cli"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@sentry/cli-darwin": "2.58.6",
-        "@sentry/cli-linux-arm": "2.58.6",
-        "@sentry/cli-linux-arm64": "2.58.6",
-        "@sentry/cli-linux-i686": "2.58.6",
-        "@sentry/cli-linux-x64": "2.58.6",
-        "@sentry/cli-win32-arm64": "2.58.6",
-        "@sentry/cli-win32-i686": "2.58.6",
-        "@sentry/cli-win32-x64": "2.58.6"
-      }
-    },
-    "node_modules/@sentry/cli-darwin": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.58.6.tgz",
-      "integrity": "sha512-udAVvcyfNa0R+95GvPz/+43/N3TC0TYKdkQ7D7jhPSzbcMc7l2fxRNN5yB3UpCA5fWFnW4toeaqwDBhb/Wh3LA==",
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.58.6.tgz",
-      "integrity": "sha512-pD0LAt5PcUzAinBwvDqc66x9+2CabHEv486yP0gRjWO7SakbaxmfVq/EXd8VLq/Tzi39LAu422UYK1lpW3MILw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.58.6.tgz",
-      "integrity": "sha512-q8mEcNNmeXMy5i+jWT30TVpH7LcP4HD21CD5XRSPAd/a912HF6EpK0ybf/1USO14WOhoXbAGi9txwaWabSe33g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-i686": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.58.6.tgz",
-      "integrity": "sha512-q8vNJi1eOV/4vxAFWBsEwLHoSYapaZHIf4j76KJGJXFKTkEbsjCOOsKbwUIBTQQhRgV4DFWh3ryfsPS/que4Kg==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-x64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.58.6.tgz",
-      "integrity": "sha512-DZu956Mhi3ZRjTBe1WdbGV46ldVbA8d2rgp/fh51GsI25zjBHah4wZnPTSzpc+YqxU6pJpg579B/r3jrIK530Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-arm64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.58.6.tgz",
-      "integrity": "sha512-nj0Ff/kmAB73EPDhR8B4O9r+NUHK5GkPCkGWC+kXVemqAJWL5jcJ5KdxG0l/S0z6RoEoltID8/43/B+TaMlT7A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-i686": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.58.6.tgz",
-      "integrity": "sha512-WNZiDzPbgsEMQWq4avsQ391v/xWKJDIWWWo9GYl+N/w5qcYKkoDW7wQG7T9FasI6ENn68phChTOAPXXxbfAdOg==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-x64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.58.6.tgz",
-      "integrity": "sha512-R35WJ17oF4D2eqI1DR2sQQqr0fjRTt5xoP16WrTu91XM2lndRMFsnjh+/GttbxapLCBNlrjzia99MJ0PZHZpgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/core": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.53.1.tgz",
-      "integrity": "sha512-XG4ezlkyuAPjBC5+9kXC94rXXuqYTw9NRhfaDHssbTFaGnqBR8vQX2UUgZfY7ucbeelRDGfBu1sywoU+mB04uA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/react": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.53.1.tgz",
-      "integrity": "sha512-lrwNq5T/zW84l60894TpKHPcvFuc1I/Hnohecc0TfYVpIcYYuw2orCHoU4v4wgkFaJUpegVetbgdOphViyLVjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/browser": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0 || 17.x || 18.x || 19.x"
-      }
-    },
-    "node_modules/@sentry/rollup-plugin": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/rollup-plugin/-/rollup-plugin-5.3.0.tgz",
-      "integrity": "sha512-hgPGPYdQJ/G1cGYOxAb7d4z3V+/k/E5/P/5TFPEEBLuIbFFk+JG0CISUDJdzXJjO382Lb99PBJuXGbueBmO79w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/bundler-plugin-core": "5.3.0",
-        "magic-string": "~0.30.8"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "rollup": ">=3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@sentry/vite-plugin": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-5.3.0.tgz",
-      "integrity": "sha512-qcoSzo4n2MulVQ70UUPLq6dTleb2a2HwL2wuwvAgWhPChrYTuk6A6mDg6aQb9fairPAwFPiU9PzOANpoDJcz1A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/bundler-plugin-core": "5.3.0",
-        "@sentry/rollup-plugin": "5.3.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
     },
     "node_modules/@simple-libs/stream-utils": {
       "version": "1.2.0",
@@ -4308,16 +3920,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",
@@ -4364,6 +3966,13 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
@@ -4432,7 +4041,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",
@@ -4849,6 +4458,15 @@
         }
       }
     },
+    "node_modules/@workadventure/noise-suppression": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@workadventure/noise-suppression/-/noise-suppression-0.0.4.tgz",
+      "integrity": "sha512-v8DQgV2TQAWh7YLo7bZ1grV3iDNltRuvPaIYTcaBWoOjUaxDp/j5zrFLz4ZuijPGxzqcQxeW7ql/HJltMuLDtA==",
+      "license": "MIT",
+      "dependencies": {
+        "fft.js": "^4.0.4"
+      }
+    },
     "node_modules/@xobotyi/scrollbar-width": {
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
@@ -4876,18 +4494,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -5934,12 +5540,16 @@
       "dev": true
     },
     "node_modules/content-type": {
-      "version": "1.0.5",
+      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "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": {
@@ -6382,6 +5992,18 @@
       "integrity": "sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==",
       "dev": true
     },
+    "node_modules/deepfilternet3-noise-filter": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/deepfilternet3-noise-filter/-/deepfilternet3-noise-filter-1.2.1.tgz",
+      "integrity": "sha512-OAyrHTDlUHH+AhfpVNKYEOhVqb9cZpu0fdNThplA/tB/Ts4PF/UsI+abl2n1IbSxUkhiF0OqDejEhk1n42Oqpw==",
+      "license": "(Apache-2.0 OR MIT)",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "livekit-client": "^2.0.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -6568,15 +6190,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",
@@ -6605,19 +6218,6 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -7612,6 +7212,12 @@
         }
       }
     },
+    "node_modules/fft.js": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/fft.js/-/fft.js-4.0.4.tgz",
+      "integrity": "sha512-f9c00hphOgeQTlDyavwTtu6RiK8AIFjD6+jvXkNkpeQ7rirK3uFWVpalkoS4LAwbdX7mfZ8aoBfFVQX1Re/8aw==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -8438,19 +8044,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -9488,6 +9081,31 @@
         "node": ">=18"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
+      "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10338,16 +9956,16 @@
       "license": "Apache-2.0"
     },
     "node_modules/matrix-js-sdk": {
-      "version": "41.6.0-rc.0",
+      "version": "41.7.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.6.0-rc.0.tgz",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.7.0.tgz",
-      "integrity": "sha512-FcTQyR+Nfh0ASEogYcX393hxGr1936Esg53Z+0f9O4SBsAxl1ZSkLXY3JfLZRLX9dNe38VVwQDQE6QuwnwV7Zw==",
+      "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",
@@ -10564,26 +10182,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -11143,16 +10741,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -11163,13 +10751,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -11178,6 +10759,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/raf-schd": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
@@ -12748,12 +12338,6 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
       "license": "MIT"
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
-    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -12802,6 +12386,25 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tsx": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.4.tgz",
+      "integrity": "sha512-X8EX+XV4QR5xCsrgxaED954zTDfY8KqlDtskKEL0cHhyS/P8b4IFOvGDQpsC9Q1XnLq915wEfwwY/zzskCtmhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.28.0"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -13301,22 +12904,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -13635,7 +13222,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": {
@@ -13676,7 +13262,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",
@@ -13713,7 +13298,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"
@@ -13723,7 +13307,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

@@ -1,6 +1,6 @@
 {
   "name": "lotus-chat",
-  "version": "4.12.2-lotus",
+  "version": "4.12.3-lotus",
   "description": "Lotus Chat — Matrix client for Lotus Guild",
   "main": "index.js",
   "type": "module",
@@ -16,9 +16,11 @@
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
     "typecheck": "tsc --noEmit",
+    "test": "node --import tsx --test $(find src -name '*.test.ts')",
     "prepare": "husky",
     "commit": "git-cz",
-    "postinstall": "node scripts/patch-folds.mjs"
+    "postinstall": "node scripts/patch-folds.mjs",
+    "sync:decorations": "node scripts/syncDecorations.mjs"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": "eslint",
@@ -43,11 +45,11 @@
     "@giphy/js-types": "5.1.0",
     "@giphy/js-util": "5.2.0",
     "@giphy/react-components": "10.1.2",
-    "@sentry/react": "10.53.1",
+    "@sapphi-red/web-noise-suppressor": "0.3.5",
     "@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",
     "blurhash": "2.0.5",
@@ -56,8 +58,8 @@
     "classnames": "2.5.1",
     "dateformat": "5.0.3",
     "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",
@@ -72,14 +74,15 @@
     "immer": "11.1.8",
     "is-hotkey": "0.2.0",
     "jotai": "2.20.0",
+    "katex": "0.16.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
-    "lodash": "4.18.1",
+    "matrix-js-sdk": "41.7.0",
-    "matrix-js-sdk": "41.6.0-rc.0",
     "matrix-widget-api": "1.17.0",
     "millify": "6.1.0",
     "pdfjs-dist": "5.7.284",
     "prismjs": "1.30.0",
+    "qrcode.react": "4.2.0",
     "react": "19.2.6",
     "react-aria": "3.48.0",
     "react-blurhash": "0.3.0",
@@ -96,16 +99,17 @@
     "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": {
-    "@element-hq/element-call-embedded": "0.19.4",
+    "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",
-    "@sentry/vite-plugin": "5.3.0",
     "@types/chroma-js": "3.1.2",
     "@types/file-saver": "2.0.7",
     "@types/is-hotkey": "0.1.10",
+    "@types/katex": "0.16.8",
     "@types/node": "25.9.1",
     "@types/prismjs": "1.26.6",
     "@types/react": "19.2.15",
@@ -131,6 +135,7 @@
     "husky": "9.1.7",
     "lint-staged": "17.0.5",
     "prettier": "3.8.3",
+    "tsx": "4.22.4",
     "typescript": "6.0.3",
     "vite": "8.0.14",
     "vite-plugin-pwa": "1.3.0",

public/fonts/JetBrainsMono-400.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/JetBrainsMono-600.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/JetBrainsMono-700.woff2

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang=en>
+  <meta charset=utf-8>
+  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
+  <title>Error 404 (Not Found)!!1</title>
+  <style>
+    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
+  </style>
+  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
+  <p><b>404.</b> <ins>That’s an error.</ins>
+  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>

public/fonts/custom-fonts.css

@@ -0,0 +1,51 @@
+/* Self-hosted fonts — avoids tracking prevention in desktop WebView2 */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-italic-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-normal-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/JetBrainsMono-normal-700.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/FiraCode-400.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/FiraCode-600.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

public/locales/en.json

@@ -2,6 +2,57 @@
   "Organisms": {
     "RoomCommon": {
       "changed_room_name": " changed room name"
+    },
+    "CreateRoom": {
+      "chat_room": "Chat Room",
+      "chat_room_desc": "Messages, photos, and videos.",
+      "voice_room": "Voice Room",
+      "voice_room_desc": "Live audio and video conversations."
+    },
+    "ImageViewer": {
+      "download": "Download"
+    },
+    "Message": {
+      "open_location": "Open Location",
+      "thread": "Thread"
+    },
+    "ImageContent": {
+      "view": "View",
+      "spoiler": "Spoiler",
+      "retry": "Retry"
+    },
+    "DeviceVerification": {
+      "close": "Close",
+      "accept": "Accept",
+      "they_match": "They Match",
+      "okay": "Okay",
+      "do_not_match": "Do not Match",
+      "please_accept": "Please accept the request from other device.",
+      "waiting_accept": "Waiting for request to be accepted...",
+      "click_accept": "Click accept to start the verification process.",
+      "request_accepted": "Verification request has been accepted.",
+      "waiting_response": "Waiting for the response from other device...",
+      "starting_emoji": "Starting verification using emoji comparison...",
+      "confirm_emoji": "Confirm the emoji below are displayed on both devices, in the same order:",
+      "device_verified": "Your device is verified.",
+      "verification_canceled": "Verification has been canceled."
+    },
+    "UrlPreview": {
+      "join_server": "Join Server"
+    },
+    "InviteUser": {
+      "invite": "Invite"
+    },
+    "UploadBoard": {
+      "files": "Files",
+      "send": "Send",
+      "upload_failed": "Upload Failed"
+    },
+    "PasswordStage": {
+      "account_password": "Account Password",
+      "password": "Password",
+      "invalid_password": "Invalid Password!",
+      "authenticate_prompt": "To perform this action you need to authenticate yourself by entering you account password."
     }
   }
 }

public/manifest.json

@@ -11,49 +11,61 @@
   "theme_color": "#980000",
   "icons": [
     {
-      "src": "./public/android/android-chrome-36x36.png",
+      "src": "./res/android/android-chrome-36x36.png",
       "sizes": "36x36",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-48x48.png",
+      "src": "./res/android/android-chrome-48x48.png",
       "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-72x72.png",
+      "src": "./res/android/android-chrome-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-96x96.png",
+      "src": "./res/android/android-chrome-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-144x144.png",
+      "src": "./res/android/android-chrome-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-192x192.png",
+      "src": "./res/android/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-256x256.png",
+      "src": "./res/android/android-chrome-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-384x384.png",
+      "src": "./res/android/android-chrome-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "./public/android/android-chrome-512x512.png",
+      "src": "./res/android/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
+    },
+    {
+      "src": "./res/android/maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./res/android/maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "categories": ["social", "communication", "productivity"],

scripts/patch-folds.mjs

@@ -19,8 +19,17 @@ try {
     writeFileSync(foldsPath, content, 'utf8');
     console.log('Applied defensive Icon src guard to folds.');
   } else {
-    console.warn('Warning: folds Icon patch target not found - may need updating.');
+    // Genuine "patch could not be applied" case: the target string is gone
+    // (folds renamed/restructured it) AND it isn't already patched. Fail hard
+    // so the postinstall hook / CI breaks loudly instead of silently shipping
+    // an unpatched folds (which crashes at render with "src is not a function").
+    console.error(
+      'ERROR: folds Icon patch target not found - folds may have updated. ' +
+        'Update the patch target string in scripts/patch-folds.mjs before building.',
+    );
+    process.exit(1);
   }
 } catch (e) {
-  console.warn('Warning: Could not patch folds:', e.message);
+  console.error('ERROR: Could not patch folds:', e.message);
+  process.exit(1);
 }

scripts/syncDecorations.mjs

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+/**
+ * Syncs avatarDecorations.ts with what's actually available on the Nextcloud CDN.
+ *
+ * Usage:
+ *   npm run sync:decorations
+ *
+ * Workflow after deleting files from Nextcloud:
+ *   1. Delete decoration files from your Nextcloud share.
+ *   2. Run: npm run sync:decorations
+ *   3. It probes each catalog slug via HTTP HEAD and removes entries
+ *      whose files returned 404. Empty categories are dropped automatically.
+ *   4. Commit the updated avatarDecorations.ts.
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const catalogPath = join(root, 'src', 'app', 'features', 'lotus', 'avatarDecorations.ts');
+
+// Single source of truth: the CDN base URL lives in avatarDecorations.ts as
+// `export const DECORATION_CDN`. We extract it from there at runtime rather than
+// re-declaring it here, so the build script and the app can never drift. This
+// .mjs script can't cleanly import the browser-side .ts module (it's outside the
+// Vite/TS app graph), so we parse the constant out of the file text instead.
+// If you migrate the CDN, change it ONLY in avatarDecorations.ts.
+const catalog = readFileSync(catalogPath, 'utf8');
+
+const cdnMatch = catalog.match(/export const DECORATION_CDN\s*=\s*['"]([^'"]+)['"]/);
+if (!cdnMatch) {
+  console.error(
+    'Could not find `export const DECORATION_CDN` in avatarDecorations.ts — ' +
+      'the constant may have been renamed. Update scripts/syncDecorations.mjs.',
+  );
+  process.exit(1);
+}
+const CDN = cdnMatch[1];
+
+// Extract all slugs from the catalog file
+const slugMatches = [...catalog.matchAll(/slug: '([^']+)'/g)].map((m) => m[1]);
+
+if (slugMatches.length === 0) {
+  console.error('No slugs found in catalog — check the file path.');
+  process.exit(1);
+}
+
+console.log(`Checking ${slugMatches.length} decorations against ${CDN} …`);
+console.log('(This makes one HEAD request per decoration)\n');
+
+// Probe all slugs in parallel batches of 16
+async function headCheck(slug) {
+  try {
+    const res = await fetch(`${CDN}/${slug}.png`, { method: 'HEAD' });
+    return { slug, ok: res.ok, status: res.status };
+  } catch {
+    // Network/DNS/TLS failure — NOT a confirmation the file is gone.
+    return { slug, ok: false, status: 0, networkError: true };
+  }
+}
+
+const BATCH = 16;
+const results = [];
+for (let i = 0; i < slugMatches.length; i += BATCH) {
+  const batch = slugMatches.slice(i, i + BATCH);
+  const batchResults = await Promise.all(batch.map(headCheck));
+  results.push(...batchResults);
+}
+
+// Only a CONFIRMED HTTP 404 means the file is genuinely gone and safe to
+// remove. A network error or any other non-ok status (5xx, 403, timeout) is
+// ambiguous — the CDN may be unreachable — so refuse to remove anything and
+// abort, otherwise a transient outage would wipe the whole catalog from source
+// control (N119).
+const transient = results.filter((r) => !r.ok && r.status !== 404);
+if (transient.length > 0) {
+  console.error(
+    `Aborting: ${transient.length} decoration(s) returned a non-404 failure ` +
+      `(network error / server error). The CDN may be unreachable — refusing to ` +
+      `remove entries to avoid wiping the catalog.`,
+  );
+  transient
+    .slice(0, 8)
+    .forEach((r) =>
+      console.error(`  ${r.slug}: ${r.networkError ? 'network error' : `HTTP ${r.status}`}`),
+    );
+  process.exit(1);
+}
+
+const missing = results.filter((r) => r.status === 404);
+const found = results.filter((r) => r.ok);
+
+if (missing.length === 0) {
+  console.log(`All ${found.length} decorations are available — catalog is up to date.`);
+  process.exit(0);
+}
+
+console.log(`Found: ${found.length}  Missing: ${missing.length}\n`);
+missing.forEach((r) => console.log(`  Removing (HTTP ${r.status}): ${r.slug}`));
+
+const missingSet = new Set(missing.map((r) => r.slug));
+
+// Remove individual entries for missing slugs
+let updated = catalog.replace(/^[ \t]*\{ slug: '([^']+)', name: .+\},?\r?\n/gm, (match, slug) =>
+  missingSet.has(slug) ? '' : match,
+);
+
+// Drop category blocks that now have an empty decorations array
+updated = updated.replace(
+  /  \{\n    id: '[^']+',\n    label: '[^']+',\n    decorations: \[\n?[ \t]*\],?\n  \},?\n/g,
+  '',
+);
+
+// Clean up stray blank lines
+updated = updated.replace(/\n{3,}/g, '\n\n');
+
+writeFileSync(catalogPath, updated, 'utf8');
+console.log(
+  `\nDone. Removed ${missing.length} entr${missing.length === 1 ? 'y' : 'ies'} from the catalog.`,
+);
+console.log('Review with: git diff src/app/features/lotus/avatarDecorations.ts');

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/CallEmbedProvider.tsx

@@ -9,6 +9,7 @@ import {
   config,
   Dialog,
   Icon,
+  IconButton,
   Icons,
   Overlay,
   OverlayBackdrop,
@@ -36,12 +37,15 @@ import {
   useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
+import { toastQueueAtom } from '../state/toast';
 import { CallEmbed, useCallControlState } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 import { useMatrixClient } from '../hooks/useMatrixClient';
-import CallSound from '../../../public/sound/call.ogg';
+import { previewRingtone, startRingtone } from '../utils/ringtones';
 import { useCallMembersChange, useCallSession } from '../hooks/useCall';
+import { useCallJoinLeaveSounds } from '../hooks/useCallJoinLeaveSounds';
+import { useCallQuality } from '../hooks/useCallQuality';
 import { useRemoteAllMuted } from '../hooks/useCallSpeakers';
 import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
 import { mDirectAtom } from '../state/mDirectList';
@@ -50,10 +54,12 @@ import { mxcUrlToHttp, getMxIdLocalPart } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
 import { getChatBg } from '../features/lotus/chatBackground';
+import { ExitFullscreenIcon, FullscreenIcon } from '../features/call/Controls';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getMemberDisplayName } from '../utils/room';
+import { getStateEvent, getStateEvents, getMemberDisplayName } from '../utils/room';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -61,6 +67,7 @@ import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { zIndices } from '../styles/zIndex';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
@@ -102,7 +109,8 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   const canAnswer = livekitSupported && rtcSupported;
   const { room } = info;
 
-  const audioRef = useRef<HTMLAudioElement>(null);
+  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
+  const [ringtoneId] = useSetting(settingsAtom, 'ringtoneId');
 
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room, dm);
@@ -123,23 +131,11 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
     ),
   );
 
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play().catch(() => undefined);
-  }, []);
-
   useEffect(() => {
-    const audioEl = audioRef.current;
+    if (info.notificationType !== 'ring') return undefined;
-    if (info.notificationType === 'ring') {
+    const stop = startRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
-      playSound();
+    return stop;
-    }
+  }, [info.notificationType, ringtoneId, ringtoneVolume]);
-    return () => {
-      if (audioEl) {
-        audioEl.pause();
-        audioEl.currentTime = 0;
-      }
-    };
-  }, [playSound, info.notificationType]);
 
   useEffect(() => {
     const remaining = info.senderTs + info.lifetime - Date.now();
@@ -152,7 +148,6 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   }, [info.senderTs, info.lifetime, onIgnore]);
 
   return (
-    <>
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
         <FocusTrap
@@ -188,11 +183,11 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                     />
                   </Avatar>
                 </Box>
-                  <Box grow="Yes" direction="Column" gap="100">
+                <Box grow="Yes" direction="Column" gap="100" alignItems="Center">
                   <Text size="H3" align="Center" truncate>
                     {roomName}
                   </Text>
-                    <Text size="T300">
+                  <Text size="T300" align="Center">
                     {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice Call'}
                   </Text>
                 </Box>
@@ -254,10 +249,154 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
         </FocusTrap>
       </OverlayCenter>
     </Overlay>
-      <audio ref={audioRef} loop style={{ display: 'none' }}>
+  );
-        <source src={CallSound} type="audio/ogg" />
+}
-      </audio>
+
-    </>
+type IncomingCallBannerProps = {
+  dm: boolean;
+  info: IncomingCallInfo;
+  onIgnore: () => void;
+  onAnswer: (room: Room, video: boolean) => void;
+  onReject: (room: Room, eventId: string) => void;
+};
+/**
+ * Compact, non-intrusive incoming-call notification shown when the user is
+ * ALREADY in a call. Unlike the full-screen `IncomingCall` overlay this is a
+ * corner banner that does not take over the screen, and it plays a single
+ * soft ping (via the one-shot ringtone preview) rather than the looping ring,
+ * so it doesn't talk over the active call.
+ */
+function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallBannerProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const { room } = info;
+  const isVideo = info.intent === 'video';
+
+  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
+  const [ringtoneId] = useSetting(settingsAtom, 'ringtoneId');
+
+  const roomName = useRoomName(room);
+  const roomAvatar = useRoomAvatar(room, dm);
+  const avatarUrl = roomAvatar
+    ? (mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined;
+
+  const session = useCallSession(room);
+  useCallMembersChange(
+    session,
+    useCallback(
+      (members) => {
+        if (members.length === 0) {
+          onIgnore();
+        }
+      },
+      [onIgnore],
+    ),
+  );
+
+  // Single soft ping (non-looping) on arrival, respecting the chosen ringtone
+  // + volume. We intentionally do NOT loop here — the user is mid-call — and we
+  // ping exactly once per incoming call, not again if the user happens to tweak
+  // ringtone settings while the banner is showing.
+  const pingedRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (info.notificationType !== 'ring') return;
+    if (pingedRef.current === info.refEventId) return;
+    pingedRef.current = info.refEventId;
+    previewRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
+  }, [info.notificationType, info.refEventId, ringtoneId, ringtoneVolume]);
+
+  useEffect(() => {
+    const remaining = info.senderTs + info.lifetime - Date.now();
+    if (remaining <= 0) {
+      onIgnore();
+      return;
+    }
+    const id = setTimeout(onIgnore, remaining);
+    return () => clearTimeout(id);
+  }, [info.senderTs, info.lifetime, onIgnore]);
+
+  const callerName =
+    getMemberDisplayName(info.room, info.sender) ?? getMxIdLocalPart(info.sender) ?? info.sender;
+
+  return (
+    <Box
+      direction="Column"
+      gap="300"
+      style={{
+        position: 'fixed',
+        top: config.space.S400,
+        right: config.space.S400,
+        zIndex: zIndices.inCallBanner,
+        width: toRem(300),
+        maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
+        padding: config.space.S300,
+        background: color.Surface.Container,
+        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+        borderRadius: config.radii.R400,
+        boxShadow: `0 8px 32px ${color.Other.Shadow}`,
+      }}
+      role="alert"
+      aria-label={`Incoming ${isVideo ? 'video' : 'voice'} call from ${roomName}`}
+    >
+      <Box gap="300" alignItems="Center">
+        <Box shrink="No">
+          <Avatar size="300" className={CallAvatarAnimation}>
+            <RoomAvatar
+              roomId={room.roomId}
+              src={avatarUrl}
+              alt={roomName}
+              renderFallback={() => (
+                <RoomIcon
+                  roomType={room.getType()}
+                  size="200"
+                  joinRule={room.getJoinRule()}
+                  filled
+                />
+              )}
+            />
+          </Avatar>
+        </Box>
+        <Box grow="Yes" direction="Column" gap="100" style={{ minWidth: 0 }}>
+          <Text size="T300" truncate>
+            {roomName}
+          </Text>
+          <Text size="T200" priority="300" truncate>
+            {isVideo ? 'Incoming video call' : 'Incoming voice call'}
+            {dm ? '' : ` · ${callerName}`}
+          </Text>
+        </Box>
+      </Box>
+      <Box gap="200">
+        <Button
+          style={{ flexGrow: 1 }}
+          variant="Success"
+          fill="Solid"
+          size="300"
+          radii="300"
+          onClick={() => onAnswer(room, isVideo)}
+          before={<Icon size="100" src={isVideo ? Icons.VideoCamera : Icons.Phone} filled />}
+        >
+          <Text as="span" size="B300">
+            Answer
+          </Text>
+        </Button>
+        <Button
+          style={{ flexGrow: 1 }}
+          variant={dm ? 'Critical' : 'Secondary'}
+          fill="Soft"
+          size="300"
+          radii="300"
+          outlined
+          onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+          before={<Icon size="100" src={Icons.Cross} filled />}
+        >
+          <Text as="span" size="B300">
+            {dm ? 'Reject' : 'Ignore'}
+          </Text>
+        </Button>
+      </Box>
+    </Box>
   );
 }
 
@@ -269,16 +408,28 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
   const mx = useMatrixClient();
   const directs = useAtomValue(mDirectAtom);
   const { navigateRoom } = useRoomNavigate();
+  const setToast = useSetAtom(toastQueueAtom);
 
   const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
   const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
   const startCall = useCallStart(dm);
 
+  // C-L6: handleTimelineEvent awaits decryption before calling setState; guard
+  // against the component unmounting during that await.
+  const mountedRef = useRef(true);
+  useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    [],
+  );
+
   const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
     async (event, room, toStartOfTimeline, removed, data) => {
       // only process rtc notification reference events.
       // we do not want to wait to decrypt all events.
       if (event.getRelation()?.rel_type !== RelationType.Reference) return;
+      if (room?.isCallRoom()) return;
 
       if (event.isEncrypted()) {
         if (!event.isBeingDecrypted()) {
@@ -287,6 +438,34 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
         await event.getDecryptionPromise();
       }
 
+      // C-L6: bail if we unmounted while awaiting decryption above.
+      if (!mountedRef.current) return;
+
+      // Caller-side: a participant declined a call we're hosting in this room.
+      // Without this the caller's UI keeps "ringing" until the notification
+      // lifetime expires, with no indication the callee said no.
+      if (event.getType() === EventType.RTCDecline) {
+        const decliner = event.getSender();
+        if (
+          data.liveEvent &&
+          room &&
+          decliner &&
+          decliner !== mx.getSafeUserId() &&
+          callEmbed?.roomId === room.roomId
+        ) {
+          const declinerName =
+            getMemberDisplayName(room, decliner) ?? getMxIdLocalPart(decliner) ?? decliner;
+          setToast({
+            id: `rtc-decline-${event.getId() ?? decliner}`,
+            displayName: declinerName,
+            body: 'Declined your call',
+            roomName: room.name,
+            roomId: room.roomId,
+          });
+        }
+        return;
+      }
+
       if (
         !room ||
         event.getType() !== EventType.RTCNotification ||
@@ -324,18 +503,15 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       );
       if (!hasCallPermission) return;
 
-      // Only ring for DMs or private non-space group chats.
+      // Only ring in rooms where the call button is visible: DMs or invite-only rooms
-      // Space voice channels and public rooms fire room-level RTC notifications
+      // with no space parent. Persistent voice rooms (call rooms), space channels,
-      // whenever anyone joins — ringing every member is incorrect behaviour.
+      // restricted rooms, and public rooms must never trigger ringing.
+      if (room.isCallRoom()) return;
       const isDirect = directs.has(room.roomId);
-      const isSpaceChild = !!getStateEvent(room, StateEvent.SpaceParent);
+      const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
       const joinRule = room.getJoinRule();
-      const isPrivateGroup =
+      const isPrivateInviteGroup = !isSpaceChild && joinRule === JoinRule.Invite;
-        !isSpaceChild &&
+      if (!isDirect && !isPrivateInviteGroup) return;
-        (joinRule === JoinRule.Invite ||
-          joinRule === JoinRule.Knock ||
-          joinRule === JoinRule.Restricted);
-      if (!isDirect && !isPrivateGroup) return;
 
       const info: IncomingCallInfo = {
         room,
@@ -352,7 +528,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       setCallInfo(info);
     },
-    [mx, directs],
+    [mx, directs, callEmbed, setToast],
   );
 
   useEffect(() => {
@@ -388,10 +564,25 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
     [startCall, navigateRoom],
   );
 
-  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
+  if (!callInfo) return null;
+  // Already in this room's own call — no notification at all.
+  if (callEmbed?.roomId === callInfo.room.roomId) {
     return null;
   }
-  return !joined && callInfo ? (
+  // In a different call already: show the compact, non-intrusive banner
+  // instead of the full-screen takeover overlay.
+  if (joined) {
+    return (
+      <IncomingCallBanner
+        dm={dm}
+        info={callInfo}
+        onIgnore={handleIgnore}
+        onAnswer={handleAnswer}
+        onReject={handleReject}
+      />
+    );
+  }
+  return (
     <IncomingCall
       dm={dm}
       info={callInfo}
@@ -399,14 +590,16 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       onAnswer={handleAnswer}
       onReject={handleReject}
     />
-  ) : null;
+  );
 }
 
 function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
   useCallMemberSoundSync(embed);
+  useCallJoinLeaveSounds(embed);
   useCallThemeSync(embed);
+  useCallQuality(embed);
   useCallHangupEvent(
     embed,
     useCallback(() => {
@@ -417,34 +610,66 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   return null;
 }
 
-/** Shown inside the PiP window when the local microphone is muted. */
+/**
+ * PiP status indicators:
+ * - Bottom-left badge: local mic muted (matches Discord/Slack convention — bottom-left = "your" mic)
+ * - Top-right badge: all remote participants are muted (quiet room warning)
+ *
+ * Deliberately separated so users never mistake remote-mute state for their own.
+ */
 function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
-  const allMuted = useRemoteAllMuted(callEmbed);
+  const mx = useMatrixClient();
-  if (!allMuted) return null;
+  const controlState = useCallControlState(callEmbed.control);
-  return (
+  const allRemoteMuted = useRemoteAllMuted(callEmbed);
-    <div
+
-      aria-label="Microphone muted"
+  const localMicMuted = !controlState.microphone;
-      style={{
+  const localUserId = mx.getSafeUserId();
+  const localDisplayName = getMxIdLocalPart(localUserId) ?? localUserId;
+
+  // Dark translucent scrim is intentional: these badges overlay arbitrary
+  // video, so a theme surface token would not guarantee legibility.
+  const badgeStyle: React.CSSProperties = {
     position: 'absolute',
-        bottom: '8px',
-        left: '8px',
     zIndex: 3,
-        background: 'rgba(0,0,0,0.60)',
+    background: 'rgba(0,0,0,0.65)',
     backdropFilter: 'blur(4px)',
-        borderRadius: '6px',
+    borderRadius: config.radii.R300,
-        padding: '3px 7px',
+    padding: `${config.space.S100} ${config.space.S200}`,
     display: 'flex',
     alignItems: 'center',
-        gap: '4px',
+    gap: config.space.S100,
     pointerEvents: 'none',
-        color: color.Critical.Main,
-        fontSize: '13px',
     lineHeight: 1,
     userSelect: 'none',
-      }}
+  };
+
+  return (
+    <>
+      {localMicMuted && (
+        <div
+          aria-label={`Your microphone is muted (${localDisplayName})`}
+          title="Your microphone is muted"
+          style={{ ...badgeStyle, bottom: config.space.S200, left: config.space.S200 }}
         >
-      <Icon size="100" src={Icons.MicMute} filled />
+          <Icon size="100" src={Icons.MicMute} filled style={{ color: color.Critical.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Critical.Main }}>
+            You
+          </Text>
         </div>
+      )}
+      {allRemoteMuted && (
+        <div
+          aria-label="All other participants are muted"
+          title="All other participants are muted"
+          style={{ ...badgeStyle, top: config.space.S200, right: config.space.S200 }}
+        >
+          <Icon size="50" src={Icons.MicMute} style={{ color: color.Warning.Main }} />
+          <Text as="span" size="T200" style={{ color: color.Warning.Main }}>
+            All muted
+          </Text>
+        </div>
+      )}
+    </>
   );
 }
 
@@ -495,11 +720,27 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const theme = useTheme();
   const isDark = theme.kind === ThemeKind.Dark;
   const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const reduced = useReducedMotion();
   const wallpaperStyle = React.useMemo(
-    () => getChatBg(chatBackground, isDark),
+    () => getChatBg(chatBackground, isDark, reduced),
-    [chatBackground, isDark],
+    [chatBackground, isDark, reduced],
   );
 
+  const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
+  useEffect(() => {
+    const onFsChange = () => setPipIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener('fullscreenchange', onFsChange);
+    return () => document.removeEventListener('fullscreenchange', onFsChange);
+  }, []);
+
+  const handlePipFullscreen = useCallback(() => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      callEmbedRef.current?.requestFullscreen();
+    }
+  }, [callEmbedRef]);
+
   const pipDragRef = React.useRef<{
     startX: number;
     startY: number;
@@ -526,7 +767,25 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     if (pipMode) {
       if (!wasInPip) {
         const saved = localStorage.getItem('pip-position');
-        const savedPos = saved ? (JSON.parse(saved) as { left: number; top: number }) : null;
+        let savedPos: { left: number; top: number } | null = null;
+        if (saved) {
+          try {
+            const raw = JSON.parse(saved) as { left?: unknown; top?: unknown };
+            // Validate shape + finiteness: a corrupt value would otherwise feed
+            // NaN into Math.min and produce an invalid `NaNpx` CSS value.
+            if (
+              raw &&
+              typeof raw.left === 'number' &&
+              Number.isFinite(raw.left) &&
+              typeof raw.top === 'number' &&
+              Number.isFinite(raw.top)
+            ) {
+              savedPos = { left: raw.left, top: raw.top };
+            }
+          } catch {
+            savedPos = null;
+          }
+        }
         el.style.right = 'auto';
         el.style.bottom = 'auto';
         if (savedPos) {
@@ -722,23 +981,20 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.addEventListener('touchend', onTouchEnd);
   };
 
-  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
+  function applyResize(
-    e.stopPropagation();
+    el: HTMLElement,
-    e.preventDefault();
+    corner: Corner,
-    const el = callEmbedRef.current;
+    sx: number,
-    if (!el) return;
+    sy: number,
-    normaliseToTopLeft(el);
+    sw: number,
-    const sx = e.clientX;
+    sh: number,
-    const sy = e.clientY;
+    sl: number,
-    const sw = el.offsetWidth;
+    st: number,
-    const sh = el.offsetHeight;
+    cx: number,
-    const sl = parseFloat(el.style.left);
+    cy: number,
-    const st = parseFloat(el.style.top);
+  ) {
-    document.body.style.cursor = `${corner}-resize`;
+    const dx = cx - sx;
-    document.body.style.userSelect = 'none';
+    const dy = cy - sy;
-    const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - sx;
-      const dy = ev.clientY - sy;
     let w = sw;
     let h = sh;
     let l = sl;
@@ -771,6 +1027,24 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     el.style.height = `${h}px`;
     el.style.left = `${l}px`;
     el.style.top = `${t}px`;
+  }
+
+  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const el = callEmbedRef.current;
+    if (!el) return;
+    normaliseToTopLeft(el);
+    const sx = e.clientX;
+    const sy = e.clientY;
+    const sw = el.offsetWidth;
+    const sh = el.offsetHeight;
+    const sl = parseFloat(el.style.left);
+    const st = parseFloat(el.style.top);
+    document.body.style.cursor = `${corner}-resize`;
+    document.body.style.userSelect = 'none';
+    const onMove = (ev: MouseEvent) => {
+      applyResize(el, corner, sx, sy, sw, sh, sl, st, ev.clientX, ev.clientY);
     };
     const onUp = () => {
       document.removeEventListener('mousemove', onMove);
@@ -789,6 +1063,38 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.addEventListener('mouseup', onUp);
   };
 
+  const handleResizeTouchStart = (e: React.TouchEvent, corner: Corner) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const el = callEmbedRef.current;
+    if (!el || e.touches.length !== 1) return;
+    normaliseToTopLeft(el);
+    const touch = e.touches[0];
+    const sx = touch.clientX;
+    const sy = touch.clientY;
+    const sw = el.offsetWidth;
+    const sh = el.offsetHeight;
+    const sl = parseFloat(el.style.left);
+    const st = parseFloat(el.style.top);
+    const onMove = (ev: TouchEvent) => {
+      if (ev.touches.length !== 1) return;
+      ev.preventDefault();
+      const t = ev.touches[0];
+      applyResize(el, corner, sx, sy, sw, sh, sl, st, t.clientX, t.clientY);
+    };
+    const onEnd = () => {
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onEnd);
+      activeDragCleanupRef.current = null;
+    };
+    activeDragCleanupRef.current = () => {
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onEnd);
+    };
+    document.addEventListener('touchmove', onMove, { passive: false });
+    document.addEventListener('touchend', onEnd);
+  };
+
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
@@ -834,12 +1140,35 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 padding: '6px',
               }}
             >
+              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
+                {document.fullscreenEnabled && (
+                  <IconButton
+                    type="button"
+                    size="300"
+                    radii="300"
+                    variant="Surface"
+                    fill="None"
+                    aria-label={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handlePipFullscreen();
+                    }}
+                    style={{
+                      // Dark scrim is intentional for legibility over arbitrary video.
+                      background: 'rgba(0,0,0,0.65)',
+                      backdropFilter: 'blur(4px)',
+                      color: '#fff',
+                    }}
+                  >
+                    {pipIsFullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}
+                  </IconButton>
+                )}
                 <div
                   style={{
                     background: 'rgba(0,0,0,0.65)',
                     backdropFilter: 'blur(4px)',
-                  borderRadius: '6px',
+                    borderRadius: config.radii.R300,
-                  padding: '3px 8px',
+                    padding: `${config.space.S100} ${config.space.S200}`,
                     color: '#fff',
                     fontSize: '11px',
                     fontWeight: 600,
@@ -849,6 +1178,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                   ↗ Return to call
                 </div>
               </div>
+            </div>
             <PipMuteOverlay callEmbed={callEmbed} />
             {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
               const s = corner.includes('s');
@@ -871,6 +1201,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 <div
                   key={corner}
                   onMouseDown={(ev) => handleResizeMouseDown(ev, corner)}
+                  onTouchStart={(ev) => handleResizeTouchStart(ev, corner)}
                   onClick={(ev) => ev.stopPropagation()}
                   style={{
                     position: 'absolute',

src/app/components/DeviceVerification.tsx

@@ -5,6 +5,7 @@ import {
   Verifier,
 } from 'matrix-js-sdk/lib/crypto-api';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
 import {
   Box,
@@ -30,6 +31,7 @@ import {
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
+import { useModalStyle } from '../hooks/useModalStyle';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -50,21 +52,23 @@ function WaitingMessage({ message }: WaitingMessageProps) {
 
 type VerificationUnexpectedProps = { message: string; onClose: () => void };
 function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
       <Text>{message}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
       </Button>
     </Box>
   );
 }
 
 function VerificationWaitAccept() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Please accept the request from other device.</Text>
+      <Text>{t('Organisms.DeviceVerification.please_accept')}</Text>
-      <WaitingMessage message="Waiting for request to be accepted..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_accept')} />
     </Box>
   );
 }
@@ -73,12 +77,13 @@ type VerificationAcceptProps = {
   onAccept: () => Promise<void>;
 };
 function VerificationAccept({ onAccept }: VerificationAcceptProps) {
+  const { t } = useTranslation();
   const [acceptState, accept] = useAsyncCallback(onAccept);
 
   const accepting = acceptState.status === AsyncStatus.Loading;
   return (
     <Box direction="Column" gap="400">
-      <Text>Click accept to start the verification process.</Text>
+      <Text>{t('Organisms.DeviceVerification.click_accept')}</Text>
       <Button
         variant="Primary"
         fill="Solid"
@@ -86,17 +91,18 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
         before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
         disabled={accepting}
       >
-        <Text size="B400">Accept</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.accept')}</Text>
       </Button>
     </Box>
   );
 }
 
 function VerificationWaitStart() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification request has been accepted.</Text>
+      <Text>{t('Organisms.DeviceVerification.request_accepted')}</Text>
-      <WaitingMessage message="Waiting for the response from other device..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_response')} />
     </Box>
   );
 }
@@ -105,18 +111,20 @@ type VerificationStartProps = {
   onStart: () => Promise<void>;
 };
 function AutoVerificationStart({ onStart }: VerificationStartProps) {
+  const { t } = useTranslation();
   useEffect(() => {
     onStart();
   }, [onStart]);
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
 
 function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
+  const { t } = useTranslation();
   const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
 
   const confirming =
@@ -124,7 +132,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 
   return (
     <Box direction="Column" gap="400">
-      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+      <Text>{t('Organisms.DeviceVerification.confirm_emoji')}</Text>
       <Box
         className={ContainerColor({ variant: 'SurfaceVariant' })}
         style={{
@@ -156,7 +164,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           disabled={confirming}
           before={confirming && <Spinner size="100" variant="Primary" />}
         >
-          <Text size="B400">They Match</Text>
+          <Text size="B400">{t('Organisms.DeviceVerification.they_match')}</Text>
         </Button>
         <Button
           variant="Primary"
@@ -164,7 +172,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           onClick={() => sasData.mismatch()}
           disabled={confirming}
         >
-          <Text size="B400">Do not Match</Text>
+          <Text size="B400">{t('Organisms.DeviceVerification.do_not_match')}</Text>
         </Button>
       </Box>
     </Box>
@@ -176,6 +184,7 @@ type SasVerificationProps = {
   onCancel: () => void;
 };
 function SasVerification({ verifier, onCancel }: SasVerificationProps) {
+  const { t } = useTranslation();
   const [sasData, setSasData] = useState<ShowSasCallbacks>();
 
   useVerifierShowSas(verifier, setSasData);
@@ -191,7 +200,7 @@ function SasVerification({ verifier, onCancel }: SasVerificationProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
@@ -200,13 +209,14 @@ type VerificationDoneProps = {
   onExit: () => void;
 };
 function VerificationDone({ onExit }: VerificationDoneProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
       <div>
-        <Text>Your device is verified.</Text>
+        <Text>{t('Organisms.DeviceVerification.device_verified')}</Text>
       </div>
       <Button variant="Primary" fill="Solid" onClick={onExit}>
-        <Text size="B400">Okay</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.okay')}</Text>
       </Button>
     </Box>
   );
@@ -216,11 +226,12 @@ type VerificationCanceledProps = {
   onClose: () => void;
 };
 function VerificationCanceled({ onClose }: VerificationCanceledProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
+      <Text>{t('Organisms.DeviceVerification.verification_canceled')}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
       </Button>
     </Box>
   );
@@ -232,6 +243,7 @@ type DeviceVerificationProps = {
 };
 export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
   const phase = useVerificationRequestPhase(request);
+  const modalStyle = useModalStyle(480);
 
   const handleCancel = useCallback(() => {
     if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
@@ -255,7 +267,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
             escapeDeactivates: false,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
                 <Text as="h2" size="H4">

src/app/components/DeviceVerificationSetup.tsx

@@ -16,6 +16,7 @@ import {
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { copyToClipboard } from '../utils/dom';
@@ -287,9 +288,10 @@ type DeviceVerificationSetupProps = {
 export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
   ({ onCancel }, ref) => {
     const [recoveryKey, setRecoveryKey] = useState<string>();
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -324,9 +326,10 @@ type DeviceVerificationResetProps = {
 export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
   ({ onCancel }, ref) => {
     const [reset, setReset] = useState(false);
+    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref}>
+      <Dialog ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/GifPicker.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
-import { Box } from 'folds';
+import { Box, color, config } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -36,12 +36,12 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         <div
           style={{
             padding: '5px 10px 4px',
-            borderBottom: '1px solid rgba(255,107,0,0.2)',
+            borderBottom: '1px solid color-mix(in srgb, var(--lt-accent-orange) 20%, transparent)',
             fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
             fontSize: '10px',
             fontWeight: 700,
             letterSpacing: '0.1em',
-            color: '#FF6B00',
+            color: 'var(--lt-accent-orange)',
             userSelect: 'none',
           }}
         >
@@ -82,19 +82,20 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
 
   const containerStyle = lotusTerminal
     ? {
-        background: '#060c14',
+        background: 'var(--lt-bg-secondary)',
-        border: '1px solid rgba(255,107,0,0.35)',
+        border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)',
         borderRadius: '4px',
         overflow: 'hidden',
-        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
+        boxShadow:
+          '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
         width: `${PICKER_WIDTH}px`,
       }
     : {
-        background: 'var(--bg-surface)',
+        background: color.Surface.Container,
-        border: '1px solid rgba(255,255,255,0.08)',
+        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-        borderRadius: '12px',
+        borderRadius: config.radii.R400,
         overflow: 'hidden',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+        boxShadow: color.Other.Shadow,
         width: `${PICKER_WIDTH}px`,
       };
 
@@ -102,6 +103,7 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
     <FocusTrap
       focusTrapOptions={{
         initialFocus: false,
+        returnFocusOnDeactivate: false,
         onDeactivate: requestClose,
         clickOutsideDeactivates: true,
         allowOutsideClick: true,

src/app/components/LogoutDialog.tsx

@@ -3,6 +3,7 @@ import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { logoutClient } from '../../client/initMatrix';
 import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useModalStyle } from '../hooks/useModalStyle';
 import { useCrossSigningActive } from '../hooks/useCrossSigning';
 import { InfoCard } from './info-card';
 import {
@@ -16,6 +17,7 @@ type LogoutDialogProps = {
 export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
   ({ handleClose }, ref) => {
     const mx = useMatrixClient();
+    const modalStyle = useModalStyle(480);
     const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
     const crossSigningActive = useCrossSigningActive();
     const verificationStatus = useDeviceVerificationStatus(
@@ -33,7 +35,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
 
     return (
-      <Dialog variant="Surface" ref={ref}>
+      <Dialog variant="Surface" ref={ref} style={modalStyle}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/MemberVerificationBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
 
 type MemberVerificationBadgeProps = {
@@ -9,8 +9,7 @@ type MemberVerificationBadgeProps = {
 export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
   const vs = useUserVerifiedStatus(userId);
   if (vs === 'unknown') return null;
-  const color =
+  const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
-    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
   const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
   return (
     <TooltipProvider
@@ -27,7 +26,7 @@ export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps
           title={label}
           style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
         >
-          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
+          <Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
         </span>
       )}
     </TooltipProvider>

src/app/components/Modal500.tsx

@@ -2,12 +2,14 @@ import React, { ReactNode } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
+import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
+  const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -19,7 +21,25 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background">
+          <Modal
+            size="500"
+            variant="Background"
+            // On mobile expand to fill the viewport. On desktop fall back to the
+            // folds `size="500"` width (~50rem) — overriding maxWidth here would
+            // squish the two-pane settings layout.
+            style={
+              isMobile
+                ? {
+                    width: '100%',
+                    height: '100%',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    borderRadius: 0,
+                    overflow: 'hidden auto',
+                  }
+                : undefined
+            }
+          >
             {children}
           </Modal>
         </FocusTrap>

src/app/components/RenderMessageContent.tsx

@@ -232,7 +232,18 @@ export function RenderMessageContent({
                       <ThumbnailContent
                         info={info}
                         renderImage={(src) => (
-                          <Image alt={body} title={body} src={src} loading="lazy" />
+                          <Image
+                            alt={body}
+                            title={body}
+                            src={src}
+                            loading="lazy"
+                            style={{
+                              objectFit: 'cover',
+                              objectPosition: 'center top',
+                              width: '100%',
+                              height: '100%',
+                            }}
+                          />
                         )}
                       />
                     )

src/app/components/TauriDesktopFeatures.tsx

@@ -0,0 +1,27 @@
+import { useTauriCallPower } from '../hooks/useTauriCallPower';
+import { useTauriJumpList } from '../hooks/useTauriJumpList';
+import { useTauriThumbbar } from '../hooks/useTauriThumbbar';
+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
+ * `useTauri*` hook no-ops in the browser (guards on `isTauri`), so this is safe
+ * to render unconditionally. Rendered once by `ClientNonUIFeatures`. App-level
+ * desktop features (window chrome) live in `App.tsx` instead, so they work
+ * before login.
+ */
+export function TauriDesktopFeatures(): null {
+  useTauriCallPower(); // P5-46 no-sleep during calls
+  useTauriJumpList(); // P5-36 Windows jump list of recent rooms
+  useTauriThumbbar(); // P5-44 taskbar thumbnail toolbar (mute/deafen/end)
+  useTauriSmtc(); // P5-43 system media transport controls
+  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/ThreadNotificationModeSwitcher.tsx

@@ -0,0 +1,127 @@
+import { Box, config, Icon, Icons, IconSrc, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { stopPropagation } from '../utils/keyboard';
+import { ThreadNotificationMode } from '../utils/threadNotifications';
+import { useSetThreadNotificationMode } from '../hooks/useThreadNotifications';
+import { AsyncStatus } from '../hooks/useAsyncCallback';
+
+export const getThreadNotificationModeIcon = (mode?: ThreadNotificationMode): IconSrc => {
+  if (mode === ThreadNotificationMode.Mute) return Icons.BellMute;
+  if (mode === ThreadNotificationMode.MentionsOnly) return Icons.BellPing;
+  if (mode === ThreadNotificationMode.All) return Icons.BellRing;
+
+  return Icons.Bell;
+};
+
+const useThreadNotificationModes = (): ThreadNotificationMode[] =>
+  useMemo(
+    () => [
+      ThreadNotificationMode.Default,
+      ThreadNotificationMode.All,
+      ThreadNotificationMode.MentionsOnly,
+      ThreadNotificationMode.Mute,
+    ],
+    [],
+  );
+
+const useThreadNotificationModeStr = (): Record<ThreadNotificationMode, string> =>
+  useMemo(
+    () => ({
+      [ThreadNotificationMode.Default]: 'Default (participating)',
+      [ThreadNotificationMode.All]: 'All replies',
+      [ThreadNotificationMode.MentionsOnly]: 'Mentions only',
+      [ThreadNotificationMode.Mute]: 'Mute',
+    }),
+    [],
+  );
+
+type ThreadNotificationModeSwitcherProps = {
+  roomId: string;
+  threadId: string;
+  value?: ThreadNotificationMode;
+  children: (
+    handleOpen: MouseEventHandler<HTMLButtonElement>,
+    opened: boolean,
+    changing: boolean,
+  ) => ReactNode;
+};
+export function ThreadNotificationModeSwitcher({
+  roomId,
+  threadId,
+  value = ThreadNotificationMode.Default,
+  children,
+}: ThreadNotificationModeSwitcherProps) {
+  const modes = useThreadNotificationModes();
+  const modeToStr = useThreadNotificationModeStr();
+
+  const { modeState, setMode } = useSetThreadNotificationMode(roomId, threadId);
+  const changing = modeState.status === AsyncStatus.Loading;
+
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleClose = () => {
+    setMenuCords(undefined);
+  };
+
+  const handleSelect = (mode: ThreadNotificationMode) => {
+    if (changing) return;
+    setMode(mode);
+    handleClose();
+  };
+
+  return (
+    <PopOut
+      anchor={menuCords}
+      offset={5}
+      position="Bottom"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: handleClose,
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) =>
+              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu>
+            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              {modes.map((mode) => (
+                <MenuItem
+                  key={mode}
+                  size="300"
+                  variant="Surface"
+                  aria-pressed={mode === value}
+                  radii="300"
+                  disabled={changing}
+                  onClick={() => handleSelect(mode)}
+                  before={
+                    <Icon
+                      size="100"
+                      src={getThreadNotificationModeIcon(mode)}
+                      filled={mode === value}
+                    />
+                  }
+                >
+                  <Text size="T300">
+                    {mode === value ? <b>{modeToStr[mode]}</b> : modeToStr[mode]}
+                  </Text>
+                </MenuItem>
+              ))}
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      {children(handleOpenMenu, !!menuCords, changing)}
+    </PopOut>
+  );
+}

src/app/components/VoiceMessageRecorder.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
+import { Box, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -51,6 +51,8 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
 
   const previewMimeRef = useRef('audio/ogg;codecs=opus');
   const previewDurationRef = useRef(0);
+  const previewAudioRef = useRef<HTMLAudioElement | null>(null);
+  const [previewPlaying, setPreviewPlaying] = useState(false);
 
   const stopAll = useCallback(() => {
     if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
@@ -192,7 +194,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         alignItems="Center"
         gap="200"
         style={{
-          background: 'var(--bg-surface-variant)',
+          background: color.SurfaceVariant.Container,
           borderRadius: config.radii.R300,
           padding: `${toRem(4)} ${toRem(8)}`,
         }}
@@ -203,7 +205,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
-            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
+            background: lotusTerminal ? 'var(--lt-accent-orange)' : color.Critical.Main,
             flexShrink: 0,
             animation: 'pttLivePulse 900ms ease-in-out infinite',
           }}
@@ -214,7 +216,11 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             minWidth: toRem(32),
             fontVariantNumeric: 'tabular-nums',
             ...(lotusTerminal
-              ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
+              ? {
+                  fontFamily: 'JetBrains Mono, monospace',
+                  color: 'var(--lt-accent-green)',
+                  fontWeight: 700,
+                }
               : {}),
           }}
         >
@@ -233,7 +239,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 width: toRem(2),
                 height: toRem(2 + (h / barMax) * 16),
                 borderRadius: toRem(1),
-                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
+                background: lotusTerminal ? 'var(--lt-accent-green)' : color.Primary.Main,
                 flexShrink: 0,
               }}
             />
@@ -269,13 +275,41 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
       alignItems="Center"
       gap="200"
       style={{
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         borderRadius: config.radii.R300,
         padding: `${toRem(4)} ${toRem(8)}`,
       }}
     >
       {previewUrl && (
-        <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
+        <>
+          <audio
+            ref={previewAudioRef}
+            src={previewUrl}
+            onEnded={() => setPreviewPlaying(false)}
+            aria-hidden="true"
+          />
+          <IconButton
+            onClick={() => {
+              const audio = previewAudioRef.current;
+              if (!audio) return;
+              if (previewPlaying) {
+                audio.pause();
+                setPreviewPlaying(false);
+              } else {
+                audio.play();
+                setPreviewPlaying(true);
+              }
+            }}
+            aria-label={previewPlaying ? 'Pause preview' : 'Play preview'}
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            title={previewPlaying ? 'Pause' : 'Play'}
+          >
+            <Icon src={previewPlaying ? Icons.Pause : Icons.Play} size="100" />
+          </IconButton>
+        </>
       )}
       <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
         {formatDuration(previewDurationRef.current)}

src/app/components/avatar-decoration/AvatarDecoration.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
+import { decorationUrl } from '../../features/lotus/avatarDecorations';
+
+const DEFAULT_INSET = 8;
+
+type AvatarDecorationProps = {
+  userId: string;
+  children: React.ReactNode;
+  inset?: number;
+};
+
+export function AvatarDecoration({
+  userId,
+  children,
+  inset = DEFAULT_INSET,
+}: AvatarDecorationProps) {
+  const slug = useAvatarDecoration(userId);
+
+  if (!slug) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        flexShrink: 0,
+      }}
+    >
+      {children}
+      <img
+        // Force a fresh element per slug so a recycled node whose previous slug
+        // 404'd (and was hidden in onError) can't leak `display:none` onto a
+        // valid decoration.
+        key={slug}
+        src={decorationUrl(slug)}
+        style={{
+          position: 'absolute',
+          top: -inset,
+          left: -inset,
+          right: -inset,
+          bottom: -inset,
+          width: `calc(100% + ${inset * 2}px)`,
+          height: `calc(100% + ${inset * 2}px)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+          objectFit: 'contain',
+        }}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+        decoding="async"
+        onLoad={(e) => {
+          (e.currentTarget as HTMLImageElement).style.removeProperty('display');
+        }}
+        onError={(e) => {
+          (e.currentTarget as HTMLImageElement).style.display = 'none';
+        }}
+      />
+    </div>
+  );
+}

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/create-room/CreateRoomTypeSelector.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
@@ -17,6 +18,7 @@ export function CreateRoomTypeSelector({
   disabled,
   getIcon,
 }: CreateRoomTypeSelectorProps) {
+  const { t } = useTranslation();
   return (
     <Box shrink="No" direction="Column" gap="100">
       <SequenceCard
@@ -36,10 +38,10 @@ export function CreateRoomTypeSelector({
         >
           <Box gap="200" alignItems="Baseline">
             <Text size="H6" style={{ flexShrink: 0 }}>
-              Chat Room
+              {t('Organisms.CreateRoom.chat_room')}
             </Text>
             <Text size="T300" priority="300" truncate>
-              - Messages, photos, and videos.
+              - {t('Organisms.CreateRoom.chat_room_desc')}
             </Text>
           </Box>
         </SettingTile>
@@ -61,10 +63,10 @@ export function CreateRoomTypeSelector({
         >
           <Box gap="200" alignItems="Baseline">
             <Text size="H6" style={{ flexShrink: 0 }}>
-              Voice Room
+              {t('Organisms.CreateRoom.voice_room')}
             </Text>
             <Text size="T300" priority="300" truncate>
-              - Live audio and video conversations.
+              - {t('Organisms.CreateRoom.voice_room_desc')}
             </Text>
             <BetaNoticeBadge />
           </Box>

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/Toolbar.tsx

@@ -252,6 +252,7 @@ export function ExitFormatting({ tooltip }: ExitFormattingProps) {
           onClick={handleClick}
           size="400"
           radii="300"
+          aria-label="Exit formatting"
         >
           <Text size="B400">{`Exit ${KeySymbol.Hyper}`}</Text>
         </IconButton>

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/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -21,6 +21,7 @@ import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Membership } from '../../../../types/matrix/room';
 import { PresenceRingAvatar } from '../../presence';
+import { AvatarDecoration } from '../../avatar-decoration/AvatarDecoration';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -48,6 +49,7 @@ function UnknownMentionItem({
       }
       onClick={() => handleAutocomplete(userId, name)}
       before={
+        <AvatarDecoration userId={userId}>
           <PresenceRingAvatar userId={userId}>
             <Avatar size="200">
               <UserAvatar
@@ -56,6 +58,7 @@ function UnknownMentionItem({
               />
             </Avatar>
           </PresenceRingAvatar>
+        </AvatarDecoration>
       }
     >
       <Text style={{ flexGrow: 1 }} size="B400">
@@ -177,6 +180,7 @@ export function UserMentionAutocomplete({
                 </Text>
               }
               before={
+                <AvatarDecoration userId={roomMember.userId}>
                   <PresenceRingAvatar userId={roomMember.userId}>
                     <Avatar size="200">
                       <UserAvatar
@@ -187,6 +191,7 @@ export function UserMentionAutocomplete({
                       />
                     </Avatar>
                   </PresenceRingAvatar>
+                </AvatarDecoration>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>

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,17 @@ 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>();
+    packs.forEach((pack) => {
+      let label = pack.meta.name;
+      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+      map.set(pack.id, label);
+    });
+    return map;
+  }, [mx, packs]);
 
   const handleScrollToGroup = (groupId: string) => {
     setActiveGroupId(groupId);
@@ -198,8 +238,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
         <SidebarStack>
           <SidebarDivider />
           {packs.map((pack) => {
-            let label = pack.meta.name;
+            const label = packLabels.get(pack.id);
-            if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
             const url =
               mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
@@ -225,7 +264,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
         }}
       >
         <SidebarDivider />
-        {emojiGroups.map((group) => (
+        {loadedEmojiGroups.map((group) => (
           <GroupIcon
             key={group.id}
             active={activeGroupId === group.id}
@@ -252,6 +291,16 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
   const [activeGroupId, setActiveGroupId] = useAtom(activeGroupAtom);
   const usage = ImageUsage.Sticker;
 
+  const packLabels = useMemo(() => {
+    const map = new Map<string, string | undefined>();
+    packs.forEach((pack) => {
+      let label = pack.meta.name;
+      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+      map.set(pack.id, label);
+    });
+    return map;
+  }, [mx, packs]);
+
   const handleScrollToGroup = (groupId: string) => {
     setActiveGroupId(groupId);
     onScrollToGroup(groupId);
@@ -261,8 +310,7 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
     <Sidebar>
       <SidebarStack>
         {packs.map((pack) => {
-          let label = pack.meta.name;
+          const label = packLabels.get(pack.id);
-          if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
           const url =
             mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
@@ -391,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/event-readers/EventReaders.tsx

@@ -67,12 +67,12 @@ export const EventReaders = as<'div', EventReadersProps>(
         <Header
           className={css.Header}
           variant="Surface"
-          size="600"
+          size="500"
           style={
             lotusTerminal
               ? {
-                  borderBottom: '1px solid rgba(0,212,255,0.30)',
+                  borderBottomWidth: config.borderWidth.B300,
-                  boxShadow: '0 2px 12px rgba(0,212,255,0.08)',
+                  boxShadow: 'var(--lt-box-glow-cyan)',
                 }
               : undefined
           }
@@ -83,8 +83,8 @@ export const EventReaders = as<'div', EventReadersProps>(
               style={
                 lotusTerminal
                   ? {
-                      color: '#00D4FF',
+                      color: 'var(--lt-accent-cyan)',
-                      textShadow: '0 0 6px rgba(0,212,255,0.45)',
+                      textShadow: 'var(--lt-glow-cyan)',
                       letterSpacing: '0.05em',
                     }
                   : undefined
@@ -93,7 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
               Seen by
             </Text>
           </Box>
-          <IconButton size="300" onClick={requestClose} aria-label="Close">
+          <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -141,14 +141,14 @@ export const EventReaders = as<'div', EventReadersProps>(
                       {receiptTs !== undefined && (
                         <Text
                           size="T200"
+                          priority="300"
                           style={
                             lotusTerminal
                               ? {
-                                  color: '#FFB300',
+                                  color: 'var(--lt-accent-amber)',
-                                  textShadow: '0 0 5px rgba(255,179,0,0.45)',
+                                  textShadow: 'var(--lt-glow-amber)',
-                                  fontSize: '0.72rem',
                                 }
-                              : { opacity: 0.6 }
+                              : undefined
                           }
                         >
                           {formatReadTs(receiptTs, hour24Clock)}

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>
+        <Text as="label" htmlFor="image-pack-name" size="L400">
-        <Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
+          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/image-viewer/ImageViewer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
@@ -15,6 +16,7 @@ export type ImageViewerProps = {
 
 export const ImageViewer = as<'div', ImageViewerProps>(
   ({ className, alt, src, requestClose, ...props }, ref) => {
+    const { t } = useTranslation();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
     const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
 
@@ -69,7 +71,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               radii="300"
               before={<Icon size="50" src={Icons.Download} />}
             >
-              <Text size="B300">Download</Text>
+              <Text size="B300">{t('Organisms.ImageViewer.download')}</Text>
             </Chip>
           </Box>
         </Header>

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

@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Overlay,
   OverlayBackdrop,
@@ -51,6 +52,7 @@ import { useAlive } from '../../hooks/useAlive';
 import { copyToClipboard } from '../../utils/dom';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -65,7 +67,9 @@ type InviteUserProps = {
   requestClose: () => void;
 };
 export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
+  const { t } = useTranslation();
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(560);
   const alive = useAlive();
   const [linkCopied, setLinkCopied] = useState(false);
   const [showQr, setShowQr] = useState(false);
@@ -184,7 +188,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog>
+          <Dialog style={modalStyle}>
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
@@ -192,7 +196,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
               >
                 <Box grow="Yes">
                   <Text size="H4" truncate>
-                    Invite
+                    {t('Organisms.InviteUser.invite')}
                   </Text>
                 </Box>
                 <Box shrink="No" gap="100" alignItems="Center">
@@ -257,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}
@@ -330,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"
@@ -349,7 +359,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   disabled={!validUserId || inviting}
                   before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
                 >
-                  <Text size="B400">Invite</Text>
+                  <Text size="B400">{t('Organisms.InviteUser.invite')}</Text>
                 </Button>
               </Box>
             </Box>

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

@@ -18,6 +18,7 @@ import {
 } from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';
 import { tryDecodeURIComponent } from '../../utils/dom';
 
@@ -26,6 +27,7 @@ type JoinAddressProps = {
   onCancel: () => void;
 };
 export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
+  const modalStyle = useModalStyle(480);
   const [invalid, setInvalid] = useState(false);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -71,7 +73,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -106,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/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -20,6 +20,7 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 type LeaveRoomPromptProps = {
   roomId: string;
@@ -28,6 +29,7 @@ type LeaveRoomPromptProps = {
 };
 export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
 
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
@@ -56,7 +58,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title">
+          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -20,6 +20,7 @@ import { MatrixError } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useModalStyle } from '../../hooks/useModalStyle';
 
 type LeaveSpacePromptProps = {
   roomId: string;
@@ -28,6 +29,7 @@ type LeaveSpacePromptProps = {
 };
 export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
   const mx = useMatrixClient();
+  const modalStyle = useModalStyle(480);
 
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
@@ -56,7 +58,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" style={modalStyle}>
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/math/KaTeX.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
+type KaTeXProps = {
+  /** Raw LaTeX source (without `$`/`$$` delimiters). */
+  latex: string;
+  /** Render as block (display) math when true, inline otherwise. */
+  displayMode?: boolean;
+};
+
+/**
+ * Lazily-loaded KaTeX renderer.
+ *
+ * This module statically imports `katex` and its stylesheet, so both only enter
+ * the bundle via the dynamic `import()` of this file (see the `lazy()` wrapper
+ * in `react-custom-html-parser.tsx`). They are therefore NOT part of the eager
+ * import graph.
+ *
+ * We render with `throwOnError: false`, so KaTeX itself renders a parse error
+ * inline (in its error colour) rather than throwing. The HTML returned by
+ * `renderToString` is produced by our own trusted call from a fixed options
+ * object — it is safe to inject via `dangerouslySetInnerHTML`.
+ */
+export default function KaTeX({ latex, displayMode = false }: KaTeXProps) {
+  const html = katex.renderToString(latex, {
+    displayMode,
+    throwOnError: false,
+    output: 'htmlAndMathml',
+  });
+
+  const Wrapper = displayMode ? 'div' : 'span';
+
+  return (
+    <Wrapper
+      // KaTeX output is generated by our own render call (trusted-safe).
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

src/app/components/media/media.css.ts

@@ -5,6 +5,7 @@ export const Image = style([
   DefaultReset,
   {
     objectFit: 'cover',
+    objectPosition: 'center top',
     width: '100%',
     height: '100%',
   },

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { Box, Button, Chip, Icon, Icons, Text, color, toRem } from 'folds';
+import { useTranslation } from 'react-i18next';
+import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
@@ -94,15 +95,21 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
         )}
       </div>
       {needsCollapse && (
-        <Button
+        <button
-          size="300"
+          type="button"
-          variant="Secondary"
-          fill="None"
-          style={{ marginTop: '4px' }}
           onClick={() => setCollapsed((c) => !c)}
+          style={{
+            cursor: 'pointer',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            marginTop: config.space.S100,
+          }}
         >
-          <Text size="B300">{collapsed ? 'Read more ↓' : 'Show less ↑'}</Text>
+          <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
-        </Button>
+            {collapsed ? 'Read more ↓' : 'Show less ↑'}
+          </Text>
+        </button>
       )}
     </div>
   );
@@ -501,6 +508,7 @@ type MLocationProps = {
   content: IContent;
 };
 export function MLocation({ content }: MLocationProps) {
+  const { t } = useTranslation();
   const geoUri = content.geo_uri;
   if (typeof geoUri !== 'string') return <BrokenContent />;
   const location = parseGeoUri(geoUri);
@@ -521,7 +529,7 @@ export function MLocation({ content }: MLocationProps) {
         style={{
           width: '280px',
           height: '160px',
-          border: '1px solid var(--bg-surface-border)',
+          border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
           borderRadius: '8px',
           display: 'block',
         }}
@@ -529,21 +537,22 @@ export function MLocation({ content }: MLocationProps) {
         loading="lazy"
         sandbox="allow-scripts"
       />
-      <Text size="T300" style={{ opacity: 0.65 }}>
+      <Text size="T300" priority="300">
         {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
       </Text>
-      <Chip
+      <Button
         as="a"
         size="400"
         href={`https://www.openstreetmap.org/?mlat=${location.latitude}&mlon=${location.longitude}#map=16/${location.latitude}/${location.longitude}`}
         target="_blank"
         rel="noreferrer noopener"
-        variant="Primary"
+        variant="Secondary"
-        radii="Pill"
+        fill="Solid"
+        radii="300"
         before={<Icon src={Icons.External} size="50" />}
       >
-        <Text size="B300">Open Location</Text>
+        <Text size="B300">{t('Organisms.Message.open_location')}</Text>
-      </Chip>
+      </Button>
     </Box>
   );
 }

src/app/components/message/Reaction.tsx

@@ -15,13 +15,20 @@ export const Reaction = as<
     reaction: string;
     useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
+>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => {
+  const shortcode = reaction.startsWith('mxc://')
+    ? 'custom emoji'
+    : (getShortcodeFor(getHexcodeForEmoji(reaction)) ?? reaction);
+  const label = `${shortcode} reaction, ${count} ${count === 1 ? 'person' : 'people'}`;
+
+  return (
     <Box
       as="button"
       className={classNames(css.Reaction, className)}
       alignItems="Center"
       shrink="No"
       gap="200"
+      aria-label={label}
       {...props}
       ref={ref}
     >
@@ -42,7 +49,8 @@ export const Reaction = as<
         {count}
       </Text>
     </Box>
-));
+  );
+});
 
 type ReactionTooltipMsgProps = {
   room: Room;

src/app/components/message/Reply.tsx

@@ -1,6 +1,7 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
@@ -37,7 +38,9 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
   ),
 );
 
-export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
+export const ThreadIndicator = as<'div'>(({ ...props }, ref) => {
+  const { t } = useTranslation();
+  return (
     <Box
       shrink="No"
       className={css.ThreadIndicator}
@@ -47,9 +50,10 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
       ref={ref}
     >
       <Icon size="50" src={Icons.Thread} />
-    <Text size="L400">Thread</Text>
+      <Text size="L400">{t('Organisms.Message.thread')}</Text>
     </Box>
-));
+  );
+});
 
 type ReplyProps = {
   room: Room;
@@ -57,6 +61,7 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
+  onThreadClick?: ((threadRootId: string) => void) | undefined;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -70,6 +75,7 @@ export const Reply = as<'div', ReplyProps>(
       replyEventId,
       threadRootId,
       onClick,
+      onThreadClick,
       getMemberPowerTag,
       accessibleTagColors,
       legacyUsernameColor,
@@ -103,10 +109,16 @@ export const Reply = as<'div', ReplyProps>(
     return (
       <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+          <ThreadIndicator
+            as="button"
+            data-event-id={threadRootId}
+            onClick={onThreadClick ? () => onThreadClick(threadRootId) : onClick}
+            aria-label="View thread"
+          />
         )}
         <ReplyLayout
           as="button"
+          aria-label="Jump to original message"
           userColor={usernameColor}
           username={
             sender && (

src/app/components/message/content/AudioContent.tsx

@@ -99,9 +99,21 @@ export function AudioContent({
   const [playbackSpeed, setPlaybackSpeed] = useState<0.75 | 1 | 1.5 | 2>(1);
 
   useEffect(() => {
-    if (audioRef.current) {
+    const audio = audioRef.current;
-      audioRef.current.playbackRate = playbackSpeed;
+    if (!audio) return undefined;
-    }
+    const applyRate = () => {
+      audio.playbackRate = playbackSpeed;
+    };
+    // Apply immediately, and re-apply whenever the media element (re)loads a new
+    // source — e.g. after async decrypt swaps in the blob URL — since the browser
+    // resets playbackRate to 1 on load, discarding the user's speed choice.
+    applyRate();
+    audio.addEventListener('loadedmetadata', applyRate);
+    audio.addEventListener('play', applyRate);
+    return () => {
+      audio.removeEventListener('loadedmetadata', applyRate);
+      audio.removeEventListener('play', applyRate);
+    };
   }, [playbackSpeed]);
 
   const SPEED_STEPS: Array<0.75 | 1 | 1.5 | 2> = [0.75, 1, 1.5, 2];
@@ -182,8 +194,8 @@ export function AudioContent({
 
         <Chip
           onClick={handleSpeedClick}
-          variant="SurfaceVariant"
+          variant="Secondary"
-          radii="Pill"
+          radii="300"
           aria-label={`Playback speed: ${playbackSpeed}×`}
         >
           <Text size="B300">{`${playbackSpeed}×`}</Text>

src/app/components/message/content/FallbackContent.tsx

@@ -75,6 +75,7 @@ export const MessageEditedContent = as<
       <button
         type="button"
         onClick={onEditHistoryClick}
+        aria-label="View edit history"
         style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
       >
         <Text as="span" size="T200" priority="300">

src/app/components/message/content/ImageContent.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Badge,
   Box,
@@ -31,6 +32,7 @@ import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../util
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useNearViewport } from '../../../hooks/useNearViewport';
 
 type RenderViewerProps = {
   src: string;
@@ -80,11 +82,15 @@ export const ImageContent = as<'div', ImageContentProps>(
     const useAuthentication = useMediaAuthentication();
     const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
+    const { t } = useTranslation();
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const nearViewport = useNearViewport(sentinelRef);
+
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
@@ -113,11 +119,12 @@ export const ImageContent = as<'div', ImageContentProps>(
     };
 
     useEffect(() => {
-      if (autoPlay) loadSrc().catch(() => undefined);
+      if (autoPlay && nearViewport) loadSrc().catch(() => undefined);
-    }, [autoPlay, loadSrc]);
+    }, [autoPlay, nearViewport, loadSrc]);
 
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        <div ref={sentinelRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
         {srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -163,7 +170,7 @@ export const ImageContent = as<'div', ImageContentProps>(
               onClick={loadSrc}
               before={<Icon size="Inherit" src={Icons.Photo} filled />}
             >
-              <Text size="B300">View</Text>
+              <Text size="B300">{t('Organisms.ImageContent.view')}</Text>
             </Button>
           </Box>
         )}
@@ -207,7 +214,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                     }
                   }}
                 >
-                  <Text size="B300">Spoiler</Text>
+                  <Text size="B300">{t('Organisms.ImageContent.spoiler')}</Text>
                 </Chip>
               )}
             </TooltipProvider>
@@ -242,7 +249,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                   onClick={handleRetry}
                   before={<Icon size="Inherit" src={Icons.Warning} filled />}
                 >
-                  <Text size="B300">Retry</Text>
+                  <Text size="B300">{t('Organisms.ImageContent.retry')}</Text>
                 </Button>
               )}
             </TooltipProvider>

src/app/components/message/content/PollContent.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useState } from 'react';
-import { Box, Text } from 'folds';
+import { Box, color, config, Icon, Icons, Text, toRem } from 'folds';
 import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
 import { RoomEvent } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -175,7 +175,7 @@ export function PollContent({
 
   if (!poll) {
     return (
-      <Text style={{ opacity: 0.6 }}>
+      <Text priority="300">
         <i>Poll (unreadable format)</i>
       </Text>
     );
@@ -244,21 +244,20 @@ export function PollContent({
       gap="200"
       style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
     >
-      <Box
+      <Text
-        alignItems="Center"
+        as="div"
-        gap="100"
+        size="T200"
+        priority="300"
         data-poll-content-label
         style={{
-          fontSize: '0.68rem',
           fontWeight: 700,
           letterSpacing: '0.12em',
           textTransform: 'uppercase',
-          opacity: 0.55,
+          marginBottom: config.space.S100,
-          marginBottom: '2px',
         }}
       >
         {`◉ Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`}
-      </Box>
+      </Text>
       <Text size="T400" style={{ fontWeight: 600 }}>
         {questionText}
       </Text>
@@ -280,20 +279,19 @@ export function PollContent({
               data-selected={selected}
               onClick={canVote ? () => handleVote(id) : undefined}
               style={{
-                padding: '7px 12px',
+                padding: `${config.space.S200} ${config.space.S300}`,
-                borderRadius: '8px',
+                borderRadius: config.radii.R300,
-                background: selected
+                background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
-                  ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.12)'
+                border: `${config.borderWidth.B300} solid ${
-                  : 'rgba(255,255,255,0.04)',
+                  selected ? color.Primary.Main : color.SurfaceVariant.ContainerLine
-                border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.7)' : 'rgba(255,255,255,0.12)'}`,
+                }`,
-                fontSize: '0.88rem',
                 lineHeight: 1.4,
                 textAlign: 'left',
                 cursor: canVote ? 'pointer' : 'default',
                 color: 'inherit',
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '4px',
+                gap: config.space.S100,
                 width: '100%',
                 position: 'relative',
                 overflow: 'hidden',
@@ -309,59 +307,54 @@ export function PollContent({
                     right: 'auto',
                     width: `${pct}%`,
                     background: selected
-                      ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.08)'
+                      ? color.Primary.ContainerActive
-                      : 'rgba(255,255,255,0.03)',
+                      : color.SurfaceVariant.ContainerActive,
                     pointerEvents: 'none',
                     transition: 'width 0.3s ease',
                   }}
                 />
               )}
               <span
-                style={{ display: 'flex', alignItems: 'center', gap: '8px', position: 'relative' }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: config.space.S200,
+                  position: 'relative',
+                }}
               >
-                {isMultiple && (
                 <span
                   style={{
                     flexShrink: 0,
-                      width: '14px',
+                    width: toRem(14),
-                      height: '14px',
+                    height: toRem(14),
-                      border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.9)' : 'rgba(255,255,255,0.3)'}`,
+                    border: `${config.borderWidth.B300} solid ${
-                      borderRadius: '3px',
+                      selected ? color.Primary.Main : color.Primary.ContainerLine
-                      background: selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.8)' : 'none',
+                    }`,
+                    borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
+                    background: selected ? color.Primary.Main : 'transparent',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                      fontSize: '10px',
+                    color: color.Primary.OnMain,
-                      color: '#fff',
                     transition: 'all 0.15s',
                   }}
                 >
-                    {selected ? '✓' : ''}
+                  {selected && isMultiple ? <Icon size="50" src={Icons.Check} /> : null}
                 </span>
-                )}
+                <Text as="span" size="T300" style={{ flexGrow: 1 }}>
-                {!isMultiple && (
+                  {text}
-                  <span
+                </Text>
-                    style={{
-                      flexShrink: 0,
-                      width: '14px',
-                      height: '14px',
-                      border: `1.5px solid ${selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.9)' : 'rgba(255,255,255,0.3)'}`,
-                      borderRadius: '50%',
-                      background: selected ? 'rgba(var(--mx-primary-rgb, 0,132,255), 0.8)' : 'none',
-                      transition: 'all 0.15s',
-                    }}
-                  />
-                )}
-                <span style={{ flexGrow: 1 }}>{text}</span>
                 {total > 0 && (
-                  <span style={{ opacity: 0.55, fontSize: '0.78rem', flexShrink: 0 }}>{pct}%</span>
+                  <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
+                    {pct}%
+                  </Text>
                 )}
               </span>
             </button>
           );
         })}
       </Box>
-      <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
+      <Text size="T200" priority="300" style={{ marginTop: '2px' }}>
         <i>
           {total > 0 ? `${total} vote${total === 1 ? '' : 's'} · ` : ''}
           {canVote

src/app/components/message/content/VideoContent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import {
   Badge,
   Box,
@@ -32,6 +32,7 @@ import {
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useNearViewport } from '../../../hooks/useNearViewport';
 
 type RenderVideoProps = {
   title: string;
@@ -79,6 +80,9 @@ export const VideoContent = as<'div', VideoContentProps>(
     const [error, setError] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
+    const sentinelRef = useRef<HTMLDivElement>(null);
+    const nearViewport = useNearViewport(sentinelRef);
+
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication);
@@ -106,11 +110,12 @@ export const VideoContent = as<'div', VideoContentProps>(
     };
 
     useEffect(() => {
-      if (autoPlay) loadSrc().catch(() => undefined);
+      if (autoPlay && nearViewport) loadSrc().catch(() => undefined);
-    }, [autoPlay, loadSrc]);
+    }, [autoPlay, nearViewport, loadSrc]);
 
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        <div ref={sentinelRef} style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
         {typeof blurHash === 'string' && !load && (
           <BlurhashCanvas
             style={{ width: '100%', height: '100%' }}

src/app/components/message/layout/layout.css.ts

@@ -110,10 +110,15 @@ export type MessageBaseVariants = RecipeVariants<typeof MessageBase>;
 
 // ── Mention pulse animation ───────────────────────────────────────────────────
 
+// Animates only `box-shadow` — NOT `transform`. A self-sent @mention message
+// carries both this class and `MsgAppearClass` (which animates a scale), and two
+// animations on the same element cannot share the `transform` property: the
+// later one wins and the other is silently dropped. Pulsing the glow alone keeps
+// both effects working. (The previous scale(1.003) was imperceptible anyway.)
 const mentionPulseKeyframes = keyframes({
-  '0%': { transform: 'scale(1)', boxShadow: 'none' },
+  '0%': { boxShadow: 'none' },
-  '30%': { transform: 'scale(1.003)', boxShadow: `0 0 8px ${color.Warning.Main}` },
+  '30%': { boxShadow: `0 0 8px ${color.Warning.Main}` },
-  '100%': { transform: 'scale(1)', boxShadow: 'none' },
+  '100%': { boxShadow: 'none' },
 });
 
 /**

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

@@ -7,9 +7,15 @@ export const PageNav = recipe({
     size: {
       '400': {
         width: toRem(256),
+        '@media': {
+          '(max-width: 750px)': { width: '100%' },
+        },
       },
       '300': {
         width: toRem(222),
+        '@media': {
+          '(max-width: 750px)': { width: '100%' },
+        },
       },
     },
   },

src/app/components/presence/Presence.tsx

@@ -10,7 +10,7 @@ import {
   TooltipProvider,
   toRem,
 } from 'folds';
-import React, { ReactNode, useId } from 'react';
+import React, { ReactNode } from 'react';
 import * as css from './styles.css';
 import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
 
@@ -27,7 +27,7 @@ type PresenceBadgeProps = {
 };
 export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
-  const badgeLabelId = useId();
+  const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence];
 
   return (
     <TooltipProvider
@@ -36,7 +36,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
       offset={4}
       delay={200}
       tooltip={
-        <Tooltip id={badgeLabelId}>
+        <Tooltip>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
             <Text size="L400">{label[presence]}</Text>
             {status && <Text size="T200">•</Text>}
@@ -47,7 +47,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
     >
       {(triggerRef) => (
         <Badge
-          aria-labelledby={badgeLabelId}
+          aria-label={ariaLabel}
           ref={triggerRef}
           size={size}
           variant={PresenceToColor[presence]}