feat: document title unread count, draft persistence, search date range

E1 - Document title unread count: FaviconUpdater now also sets
     document.title to '(N) Lotus Chat' for mentions, '· Lotus Chat'
     for plain unreads, and 'Lotus Chat' when clear. Reuses the
     existing roomToUnread forEach loop.

E2 - Draft persistence across reloads: on room unmount, unsent message
     is written to localStorage as 'draft-msg-<roomId>'. On mount, if
     the Jotai atom is empty (page reload), the localStorage draft is
     restored. Cleared on send. Uses the existing Slate node JSON format.

E5 - Search date range filter: new DateRangeButton in SearchFilters
     with From/To date inputs in a PopOut. Dates stored as epoch ms in
     ?fromTs=&toTs= URL params. Passed to Matrix /search as from_ts /
     to_ts filter fields (valid spec fields, cast via 'as any' since
     SDK types don't include them yet).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.production

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

.gitea/workflows/ci.yml

@@ -21,38 +21,16 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        # 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
+        run: npm ci
 
       # ── 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
@@ -64,7 +42,6 @@ jobs:
 
       - name: Prettier
         run: npm run check:prettier
-        continue-on-error: true
 
       # ── Security ─────────────────────────────────────────────────────────
       - name: Audit (high/critical)
@@ -84,35 +61,3 @@ 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@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.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@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: |
             ajbura/cinny
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.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@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.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@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.gitignore

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

.npmrc

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

LOTUS_TESTING.md

@@ -1,736 +0,0 @@
-# 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
-
-**Room Widgets (MSC1236, 2026-07 — needs the CSP `frame-src` widening + `nginx -s reload` first):** In a room, the header **Widgets** button (grid icon, desktop) opens a right-side panel. As an admin (PL to modify widgets): **Add Widget** with a name + an https URL (e.g. an Etherpad `https://…` or any embeddable page) → it appears in the list; click it → it renders in a sandboxed iframe in the panel; **Remove** clears it. A non-admin sees the list + can open widgets but has no Add/Remove. Check: a non-https or same-origin URL is rejected on Add with a clear message; the panel is a full-screen overlay on mobile and is mutually exclusive with the Thread/Gallery/Members panels; if a widget stays blank, the prod CSP `frame-src` still needs widening. Widgets get only benign display capabilities (they can't send/read room events in v1).
-
-**QR Device Verification (2026-07):** With two logged-in Lotus sessions (or Lotus + Element), start a device verification. On the **Ready** step you now see your own QR code plus a **"Scan their QR code"** button and a **"Verify with emoji instead"** fallback. Have one device **scan** the other's code (grant camera permission) → the showing device asks you to **Confirm**, and both reach **verified**. Check: emoji-SAS still works unchanged; denying camera shows a graceful "verify with emojis instead" message; a deliberately-wrong scan cancels cleanly. Desktop (WebView2) auto-grants the camera; web needs the Permissions-Policy camera allowance (already set).
-
-**Disappearing Messages (MSC1763 `m.room.retention`, 2026-07):** In Room Settings → General → **Message Retention**, an admin picks Off / 1 Day / 1 Week / 1 Month (non-admins see the buttons disabled). After setting e.g. 1 Day, messages older than a day **vanish from the timeline** for everyone in Lotus (toggle Settings → General → **Show Hidden Events** to reveal them again). Setting back to **Off** restores them. Separately, each user can enable Settings → General → **Enforce Message Retention** (default OFF) → their OWN expired messages then get **permanently redacted** within ~30 s (verify: OTHER people's messages are NEVER redacted by this; only your own). Note true server-side purge also needs Synapse `retention:` configured.
-
-**Mark as Unread + Low Priority (MSC2867 / m.lowpriority, 2026-07):** Right-click a room in the sidebar → **Mark as Unread** puts a dot on the row (bold name) even with no new messages; opening/reading the room clears it, and it syncs to another device. **Mark as Read** on a marked room clears it too. Right-click → **Add to Low Priority** moves the room into a collapsed "Low Priority" category at the bottom of the room list (and removes it from Favorites if it was there, and vice-versa); **Remove from Low Priority** returns it to Rooms.
-
-**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.
-
----

LOTUS_TODO.md

@@ -1,248 +0,0 @@
-# Lotus Chat — Work Backlog
-
-**Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`
-**Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
-
-> Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md). Manual test steps live in [LOTUS_TESTING.md](./LOTUS_TESTING.md). This file is **open work only** — resolved audit findings and shipped-feature write-ups were removed 2026-07 (full history in git).
-
-Status legend: `[ ]` pending · `[~]` in progress / shipped-awaiting-QA · `[x]` done · `[BLOCKED]` server/upstream-gated · `[DEFERRED]`/`[DROPPED]`/`[WON'T FIX]` decided.
-
----
-
-## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
-
-> **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
-> Do NOT hardcode hex values. Do NOT invent new variable names. Canonical tokens: `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green`, `--lt-glow-*`, `--lt-box-glow-*`, `--lt-border-color`, `--lt-font-mono`. Syntax-highlight token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn`.
-> Reference patterns: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css). Applies to every task without exception.
-> New components must respect both TDS dark (`LotusTerminalTheme`) and TDS light (`LotusTerminalLightTheme`); non-TDS theme work uses vanilla-extract (match `src/lotus-terminal.css.ts`).
-
-## 🧩 NATIVE-CINNY LAW — EVERY FEATURE MUST FEEL LIKE STOCK CINNY
-
-> **Every feature must feel native to upstream Cinny — indistinguishable from what the Cinny team would ship.** Reference: <https://github.com/cinnyapp/cinny>.
->
-> - **Use the `folds` design system, not bespoke UI** (`Button`, `Chip`, `IconButton`, `Menu`, `MenuItem`, `Dialog`, `Modal`, `Input`, `Switch`, `Badge`, `SettingTile`, `SequenceCard`, …) and folds tokens (`color.*`, `config.space.*`, `config.radii.*`). **Use folds `Icon`/`Icons`, never literal emoji, in UI chrome.** No hardcoded hex/`rgba()`, no invented CSS variables.
-> - **Match Cinny's existing patterns** — find the closest existing component/flow and mirror it before adding UI.
-> - **The ONE exception:** explicit **TDS** features, which follow the TDS Design Law above (opt-in, only in Lotus Terminal mode).
-
----
-
-## ✅ Audit (2026-07) — closed out
-
-A three-wave feature bug-hunt (~15 parallel agents, each batch independently reviewed) plus a low-tail cleanup. All confirmed 🔴/🟠 and the clean 🟡 tail are **fixed, reviewed, and gate-green**; details in git history + LOTUS_FEATURES. Only the minor items below remain open.
-
-**Still open (low tail — all 🟡 minor):**
-
-- **Calls host:** C-M1 deafen DOM-fallback leaks late-added `<audio>` tracks; C-M2 `.click()`-by-testid toggles no-op if EC renames — **both retire via EC-fork P6-2**. C-L1 AFK mic not released if EC elides the echo; C-L2 ringtone-preview global cross-cancel; C-L3 first ring after cold load can be silent (ctx not unlocked); C-L5 speaker-observer churn on membership change; C-L7 all-muted DOM miscount if EC label format differs; C-L8 PiP sw/nw resize anchor jitter at min size.
-- **Threads:** T5 `participating` detection is server-bundle-only (`thread.hasCurrentUserParticipated`) → can under-notify a thread you just replied to; T6 room "Mentions & Keywords" not honored for participated/Default thread replies (over-notify); T7 account-data thread-mute write is a lost-update race.
-- **Crypto/session:** F5 OIDC refresh drops `expiresAt` on persist (`persistTokens` can't reach the expiry without SDK-internal plumbing; refresh is reactive on 401).
-- **Native/desktop:** D7 Unity badge `application://cinny.desktop` id may not match the installed `.desktop` basename — **runtime-verify** on the `.deb`/AppImage. H10 room-name setter fire-and-forget/silent length reject (trivial). N6 per-message read-receipt avatars may not refresh on membership change (emitter uncertain, low impact).
-- **EC fork (EC1–EC6 fixed on `element-call:lotus`, needs a republish):** re-apply `setTimeout` cleanup, remote-gated subscription → `allConnections$`, per-call decoration state leak, re-subscribe-every-render, focus-clear on missing `userId`. Rides with **P6-2 phase 2**.
-
----
-
-## ✅ Shipped — Awaiting Live Verification
-
-Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then graduate to LOTUS_FEATURES.md. Includes the **desktop/native Tier A/B stack** (P5-35/36/41/42/43/44/46/47/48/49/55/56/57, P6-1 Linux parity) — all **CI-compile-verified, runtime-verify on Windows/Linux** — plus:
-
-| Area                                                                        | Test guide            |
-| :-------------------------------------------------------------------------- | :-------------------- |
-| Full-Screen Camera Broadcasts (per-participant focus)                       | A5 / G2               |
-| Advanced search filters + virtualized infinite scroll                       | K2 / M1 / M2 / M4     |
-| Custom Accent Color Picker (non-TDS) · 5 Color Theme Presets                | M3 / M5               |
-| Intersection lazy media loading · context-aware thumbnails                  | H1 / H2               |
-| Thread Panel (side drawer) + per-thread notification modes (P4-1)           | (thread QA)           |
-| Encrypted message search indexing/caching (opt-in, default OFF)             | search backlog        |
-| Remind Me Later · Mobile Bookmarks access                                   | K1 / E5               |
-| In-Call Soundboard (P5-15) · Quality Controls (P5-31) · Permissions (P5-31) | D2-7 / D2-8 / D2-9    |
-| Desktop proactive update notifications (P5-40)                              | J1                    |
-| OIDC/SSO login (P4-6, needs an MSC3861 server — pick mozilla.org on login)  | OIDC                  |
-| Windows native WinRT toast quick-reply / click-to-open (D6, AUMID)          | rich-toast (§backlog) |
-
----
-
-## 🔴 Open — Actionable
-
-### ✅ Unread/read-receipt flakiness (reported 2026-07) — FIXED (pending prod QA)
-
-Room unread dots were inconsistent: reading a message sometimes cleared the dot, sometimes left it stuck, sometimes it resurrected. Root cause (confirmed by tracing + diffing upstream cinny `dev`): **our own "N4" change.** `handleReceipt` recomputed via `getUnreadInfo`, which reads `room.getUnreadNotificationCount()` — server-computed and **stale on the synchronous synthetic receipt echo** (SDK only zeroes it immediately when the last event is your own message) → it PUT the stale non-zero count back → stuck/resurrecting. Compounded by `hasUnread = !!unread` lighting the dot on any present map entry, incl. phantom `{0,0}` PUTs from our `UnreadNotifications` listener. Plus a Mark-as-Unread (MSC2867) flag that never cleared on opening an already-read room (no receipt → no auto-clear).
-
-**Fix:** `roomToUnread.ts` — `handleReceipt` reverts to upstream's optimistic `DELETE` on own receipt; reducer collapses `{0,0}` PUT → DELETE. `notifications.ts markAsRead` clears the marked-unread flag directly. `markedUnread.ts onReceipt` gated to main/unthreaded receipts (`myMainReceiptPresent`). Unit tests added; 700/700 pass, typecheck + build clean. Deploy + manual QA (read → dot clears & stays; thread read; mark-unread → open → clears; reconnect no resurrect).
-
-### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED
-
-Observed live in prod 2026-06-30 during a 2-person **Element Call** (E2EE). These span client rust-crypto (`matrix-js-sdk@41.7.0`) ↔ Synapse ↔ EC MatrixRTC E2EE and are **interrelated** — do NOT spot-fix. **Capture first:** run **Settings → Developer Tools → Crypto Diagnostics** during the next affected call + a synapse-side trace before any fix. (Full runbook was in `LOTUS_E2EE_INVESTIGATION.md`, now in git history.) None are caused by the EC fork work.
-
-- **KE-1 — OTK upload conflict storm (CRITICAL, root-cause candidate).** `POST /keys/upload` returns `400 M_UNKNOWN: One time key … already exists` continuously — the rust-crypto store and Synapse have **diverged OTK state** (upstream `matrix-rust-sdk#5200`, OPEN: on the 400 the SDK never marks the request sent → re-uploads forever; **not** fixed in 41.7.0). Leading web trigger: cinny never calls **`navigator.storage.persist()`**, so the IndexedDB crypto store is evictable while the `localStorage` session survives → device resurrects with a blank store. **Buildable preventive fix (no call needed):** request persistent storage on login (+ optional multi-tab guard + a 400-loop→recovery prompt). Healing an already-diverged device still needs a clean logout+login.
-- **KE-2 — EC media keys not arriving/decrypting → audio/video cut out (CRITICAL).** `MissingKey … for participant`, unexpected encrypted to-device `io.element.call.encryption_keys`. Almost certainly downstream of KE-1 (broken Olm sessions). This is the "friend's audio cuts out" symptom.
-- **KE-3 — Timeline decrypt error: missing `algorithm` field (HIGH).** rust-crypto can't parse a malformed/legacy encrypted event — capture the offending event id + raw content.
-- **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH).** `Restart delayed event timed out`, repeated `msc4157.update_delayed_event` — may be partly HS responsiveness; correlate with synapse latency. Same planning session (shares the call-reliability surface).
-
-### Security & Privacy
-
-- **N97 — Access token + device id in plaintext `localStorage`** (`state/sessions.ts`), XSS-exposed. Architectural — needs a token-protection / session-storage redesign.
-- **Persisted PII without encryption:** user status message + expiry (`Profile.tsx`), unsent composer drafts (`RoomInput.tsx`). Leak risk on shared devices.
-
-### PWA / Offline / Web Push
-
-- **N107 — Web Push is non-functional:** `src/sw.ts` has no `push` handler. Needs a `push` listener + Matrix push-gateway integration. **The one substantive remaining feature** (session/crypto groundwork it waited on has landed).
-- **No app-asset caching strategy** in `src/sw.ts` — no offline capability.
-
-### Dependencies / Build / Hygiene
-
-- Build-time: `lotusDenoise` does heavy sequential `fs` in `closeBundle`; `viteStaticCopy` has redundant renames — could be streamlined.
-- `patch-folds.mjs` edits `node_modules` directly (robust today; `patch-package` considered but more brittle to folds restructuring — WON'T-DO unless it breaks).
-- `types/matrix/` mirrors SDK types instead of importing them — drift risk; spot-fix highest-risk only.
-- `contrib/nginx`/`contrib/caddy` examples: headers + `try_files` already synced with prod; the prod nginx `add_header` isn't inherited by cache `location` blocks (pre-existing; SPA entry `/` still gets all headers).
-- `as any` casts across `src/` — gradual typing cleanup. Keep commits scoped (bisect-friendly). Keep README fork-sync version/logo current.
-
----
-
-## 🌐 Matrix Protocol Gaps
-
-Genuine Matrix client-spec / MSC features Lotus does **not** yet implement (audited 2026-07 against the codebase — almost everything else is built: pinning, stickers+picker, room directory, mutual rooms MSC2666, blurhash, key backup/recovery/SSSS, SAS verification, ignore list, invite spam-filter, voice messages, polls, threads, spaces, OIDC, extended profiles, delayed events, authed media). Build each **fully** — spec-correct events, native-Cinny folds UI, tests. Order = clean wins first.
-
-**Phase A ✅ (2026-07, gate-green 683 tests):**
-
-- [x] **Mark as Unread — MSC2867 `m.marked_unread`.** Room account data `{ unread: true }` (+ unstable `com.famedly.marked_unread`) via `mx.setRoomAccountData`; clear on read. Context-menu item in `RoomNavItem` + light the existing unread dot; integrate `state/room/roomToUnread.ts`.
-- [x] **Low Priority rooms — `m.lowpriority` tag.** Mirror the favourite impl (`RoomNavItem.tsx:331-337` `setRoomTag/deleteRoomTag` + the favourites category in `home/Home.tsx`): context-menu toggle + a collapsed "Low Priority" category sorted to the bottom, excluded from normal unread nudging.
-
-**Phase B ✅ (2026-07, gate-green 688 tests):**
-
-- [x] **Disappearing Messages — MSC1763 `m.room.retention`.** PL-gated room-settings `SettingTile` to set `{ max_lifetime }`; retention badge; a client-side sweep hides/self-redacts own expired events (pattern like the mute-timer restore in `ClientNonUIFeatures.tsx`). True server deletion also wants Synapse `retention:` (LXC 151).
-- [x] **QR Device Verification — reciprocate QR.** Add the QR path beside emoji-SAS in `components/DeviceVerification.tsx`: render with `qrcode.react` (already a dep), scan via `BarcodeDetector` (fallback `jsQR`); uses the SDK `VerificationRequest` QR/reciprocate support.
-
-**Phase C (Room Widgets ✅ 2026-07; Sliding Sync ❌ evaluated — parked):**
-
-- [x] **Room Widgets — MSC1236 + widget API.** No general widget UI exists (only the PL entry `im.vector.modular.widgets`; the EC call widget is hardcoded). Read `im.vector.modular.widgets`/`m.widget` state, add an Add/Manage panel + sandboxed iframe renderer via `matrix-widget-api` — **extend the existing EC widget plumbing** (`plugins/call/CallEmbed.ts`). Enables Etherpad/notes/dashboards/integrations.
-- **[PARKED] Sliding Sync — MSC3575 / simplified MSC4186** (evaluated 2026-07, 3 research passes). Server side is GA (`simplified_msc3575`), but the **client** side is not viable for a safe rollout: matrix-js-sdk's `SlidingSync`/`SlidingSyncSdk` are `_internal_`/`@experimental` (Element shipped labs-only, never GA in ~2 yrs, moved to the Rust SDK); **presence isn't delivered over sliding sync** (regresses Lotus presence badges/rings/status); **no upstream Cinny impl** to follow; and Cinny's whole nav (sidebar/spaces/DM/unread) is derived from the **full local room set** (`allRoomsAtom` ← `mx.getRooms()`), so ~14 subsystems (4 core) need re-architecting to a server-windowed list. ~10% confidence a full rollout wouldn't break/regress (missing rooms/messages/unread = worst failure class). **Revisit only if we adopt the Rust SDK or accounts grow large enough that startup latency is a real complaint; an off-by-default experimental spike is possible but not recommended.** Full assessment: git plan history.
-
-**Room Widgets v1 follow-ups:** capability-approval consent prompt (let widgets request send/read room events); Jitsi/stickerpicker special types; account-data (user/sticker) widgets; per-widget popout / always-on-screen. Requires the prod CSP `frame-src` widening (done in `matrix/cinny/nginx.conf` → **`nginx -s reload`**) or external widgets are blocked.
-
-**Server-gated / advanced (capture, don't build yet):** QR sign-in for a new device (**MSC4108** rendezvous — needs an HS-side endpoint); dehydrated devices (**MSC3814** — offline key delivery, also helps the E2EE KE cluster); E2EE history key sharing on invite (**MSC3061** `shared_history`, niche); voice broadcast (Element MSC3888, low value — skip).
-
-### Remaining spec/MSC gaps (2026-07 full-surface survey)
-
-After Phases A–C the client spec is ~complete. What's left, flagged by **what unblocks it**:
-
-**✅ Buildable NOW (client-only, no server/infra change):**
-
-- [ ] **Custom room tags / sections** — user-defined room categories in the sidebar via standard `u.*` room tags (beyond the built-in Favourite / Low-Priority). Mirrors the favourite/low-priority category pattern (`RoomNavItem` context-menu + `Home.tsx` categories). _Medium._ The only substantive client-only feature left.
-
-**🔧 Needs INFRASTRUCTURE (NOT a Synapse-flag flip — you'd have to stand it up):**
-
-- **Invite by email / 3PID invite** — we invite by Matrix user-ID only (`mx.invite` is user-ID-only). Email invites need an **identity server** (lotusguild runs none). Build only if an identity server is deployed.
-- QR sign-in for a new device (**MSC4108**) — needs a **rendezvous** endpoint. Dehydrated devices (**MSC3814**) — needs server support. (Also listed above.)
-
-**🚫 BLOCKED until a Synapse upgrade enables the flag** — re-run `/_matrix/client/versions` `unstable_features` after each upgrade; client work is ready the moment the flag flips. See the **Blocked Features** section below:
-
-- Live Location Sharing (**MSC3489** + **MSC3672** — both `false`)
-- Reaction / relation redaction (**MSC3892** — `false`)
-- Room preview before joining (**MSC3266** — summary endpoint 404s on 1.155)
-- Thread subscriptions (**MSC4306** — `false`)
-
-**Niche / low-value (noted, not planned):** E2EE history-key-on-invite (MSC3061), voice broadcast (MSC3888), a native account-deactivation flow (currently delegated to the OIDC provider for OIDC accounts).
-
-**Already implemented (verified, not gaps):** space reordering (drag — confirmed working in the desktop client), pinning, stickers + picker, room directory, mutual rooms (MSC2666), blurhash, key backup / recovery / SSSS / cross-signing / key export-import, SAS **and** QR verification, ignore list, invite spam-filter, voice messages, polls, threads + per-thread notifs, spaces, OIDC, extended profiles, delayed/scheduled events, authed media, report user/room/message, 3PID contact-info display, disappearing messages, mark-unread, low-priority, room widgets.
-
----
-
-## 📋 Open Feature Backlog
-
-### [ ] Basic in-app audio editor / video→audio extractor (LARGE PROJECT)
-
-A minimal audio editor for soundboard clips and voice content. Scope: (1) **trim/clip** an audio file to a chosen start/end (waveform scrubber, in/out handles); (2) **upload a video file → strip and discard the video track, keep only the audio** (extract audio, then the source video is dropped — never uploaded/stored); (3) minimal edits only (trim, maybe gain/normalize, fade in/out) — not a full DAW. Likely Web Audio API (`AudioContext.decodeAudioData` → trim `AudioBuffer` → re-encode) + `MediaRecorder`/an encoder for output; video demux via a `<video>`+`MediaElementSource` capture or ffmpeg.wasm (weigh bundle cost). Feeds the soundboard uploader (`utils/soundboardClips.ts`, `SoundboardPackEditor`) and attachments. Design under TDS + native-cinny law. Big build — plan a dedicated session; evaluate ffmpeg.wasm size/CSP (wasm) before committing.
-
-### [ ] P4-4 · Math / LaTeX Rendering (LOW PRIORITY)
-
-Render `$…$` / `$$…$$` via KaTeX; graceful fallback to raw text. **Sanitizer must be patched** — `src/app/utils/sanitize.ts` (sanitize-html, `disallowedTagsMode:'discard'`) strips all MathML: add `<math><mi><mo><mn><mrow><mfrac><msqrt><mroot><msub><msup><msubsup><munder><mover><mtable><mtr><mtd>…` + `annotation` to `permittedHtmlTags`, and `xmlns`/`display`/`mathvariant` to `permittedTagToAttributes`. Parser: split text nodes on `/(\$\$.*?\$\$|\$.*?\$)/g` in `react-custom-html-parser.tsx` → `<KaTeX>`. Lazy-import `katex/dist/katex.min.css` only when a math block renders. Verify KaTeX bundle-size impact.
-
-### [~] P5-20 · Quick Reply from Browser Notification (partial)
-
-Done: notifications show the real body, click navigates to the specific event + focuses the tab. **Remaining:** inline reply via Notification Actions API needs the SW `push`+`notificationclick` pipeline (switch `new Notification()` → `serviceWorkerRegistration.showNotification()` so the SW receives `notificationclick`; on `event.action==='reply'` POST `m.room.message` with the stored `{roomId, threadId}`). Ties into N107.
-
-### [~] P5-30 · Advanced ML Noise Suppression — open verification
-
-Shipped in the EC fork (DeepFilterNet3 default-capable / DTLN / RNNoise / Speex; AEC on, AGC off for ML tier; never-silent watchdog). **Open:** real-call by-ear **A/B** — model choice, `lotusDenoiseFloor`, AGC on/off (LOTUS_TESTING §D2-1 / J2). **GTCRN (deferred):** tiny MIT 16 kHz model beating RNNoise, but no drop-in browser package — needs `onnxruntime-web` in a Web Worker behind a custom AudioWorklet ring-buffer (ORT can't run in an AudioWorklet, issue #13072); ~1-week build. Revisit only if low-power quality proves insufficient. HW-gated (FRCRN/Maxine) = desktop-Rust-only future.
-
-### [~] P6-2 · Element Call fork — retire remaining DOM hacks (Phase 2 needs publish)
-
-Phase 1 shipped: `io.lotus.set_deafen` (LiveKit-source deafen/screenshare-audio-mute) replaces the brittle `<audio>.muted` iframe hack; cinny sends it join-gated alongside the transitional DOM fallback. **Phase 2 (blocked on user npm publish):** publish fork `0.20.1-lotus.2` → bump cinny pin `lotus.1`→`lotus.2` → delete the `CallControl.ts` `.muted` fallback + the EC1–EC6 fixes ship. **Deferred pieces (P6-2b):** the `useCallSpeakers` DOM-scrape is a dormant fallback behind `io.lotus.call_state`; `.click()`-by-`data-testid` UI toggles are low-value fork surface. Divergence to confirm: deafen doesn't silence soundboard/`Unknown`-source audio (setVolume type limit).
-
-### [ ] Mobile audit
-
-Comprehensive audit of all LOTUS_FEATURES.md features for mobile PWA usability + responsiveness. Method: 44px touch targets, no horizontal overflow, full-screen modals/drawers on mobile, composer not obscured by keyboard.
-
-### Deferred / dropped (decided — kept for context)
-
-- **[DEFERRED] P5-51** Federated "Identity Contexts" (session isolation) — multi-sprint, touches auth/crypto/storage core; smaller intermediate step = plain multi-account switch. **[DROPPED] P5-52** per-room sync governor — js-sdk can't truly per-room filter `/sync`; only a cosmetic hide. **[DEFERRED] P5-53** local scripting plugin — prefer a declarative automation-rules feature (no arbitrary code). **[DEFERRED] Audit-3** profile banner — MSC4427 open/unmerged; revisit on merge. **[WON'T FIX] P5-50** Windows HW media pipeline (WebRTC decode lives in WebView2; not injectable). **[MOVED] P5-9** LFG → LotusBot `!lfg`.
-
----
-
-## 🚫 Blocked Features (server / upstream gated)
-
-Re-run `/_matrix/client/versions` + `unstable_features` after each Synapse upgrade.
-
-- **[BLOCKED] Live Location Sharing** (MSC3489 + MSC3672 both `false`) — real-time GPS beacons over the existing static share.
-- **[BLOCKED] Reaction/Relation Redaction** (MSC3892 `false`) — remove a reaction without redacting the parent; current full-redaction fallback is acceptable.
-- **[BLOCKED] Room Preview before joining** (MSC3266) — `GET /v1/rooms/{id}/summary` returns 404 `M_UNRECOGNIZED` on Synapse 1.155 despite `msc3266_enabled:true`.
-- **[BLOCKED] Thread Subscriptions** (MSC4306 `false`) — "Follow thread" button (depends on the shipped Thread Panel).
-
----
-
-## 📖 Reference
-
-### Server Capabilities (as of 2026-06)
-
-- **Homeserver** `matrix.lotusguild.org` · **Synapse** `1.155.0` · **Matrix spec** up to `v1.12` (+ MSC `unstable_features`).
-- **MSC ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` (flag on but v1 summary 404s) · `msc3401_matrix_rtc`. **OFF/blocked:** `msc4306` · `msc3882` · `msc3912` · `msc4155` · `msc3489`/`msc3672` · `msc3892`.
-- **Live endpoints:** Report User (MSC4260) **200** ✅ · Report Room (MSC4151) ✅.
-- **Homeserver access (audits):** Synapse = LXC 151 (`pct exec 151 -- bash`), config `/etc/matrix-synapse/homeserver.yaml`. Web deploy = LXC 106. Voice guard = `voice-limit-guard.py` on LXC 151.
-- **SDK notes:** no arbitrary profile-field methods (use `mx.http.authedRequest()` for MSC4133); js-sdk can't per-room filter `/sync`; sanitizer strips `<math>`/MathML; SW exists at `src/sw.ts`; `getMatrixToRoom()` builds invite URLs; EC audio-inject unblocked via the fork's `io.lotus.inject_audio`.
-
-### Key File Reference
-
-| What                           | File                                                                | Lines               |
-| ------------------------------ | ------------------------------------------------------------------- | ------------------- |
-| Global keydown / room nav      | `hooks/useKeyDown.ts` · `hooks/useRoomNavigate.ts`                  | whole / 19-72       |
-| Room unread counts atom        | `state/room/roomToUnread.ts`                                        | `roomToUnreadAtom`  |
-| Overlay portal provider        | `pages/App.tsx` · `index.html`                                      | 65 / 101            |
-| Room settings tabs             | `features/room-settings/RoomSettings.tsx`                           | 27-56               |
-| State event read/write pattern | `features/common-settings/general/RoomEncryption.tsx`               | 42-52               |
-| Power levels                   | `hooks/usePowerLevels.ts`                                           | whole               |
-| Slash commands                 | `hooks/useCommands.ts`                                              | 140-537             |
-| Chat background picker/defs    | `features/settings/general/General.tsx` · `lotus/chatBackground.ts` | 945-981 / whole     |
-| Matrix.to URL builder          | `plugins/matrix-to.ts`                                              | `getMatrixToRoom()` |
-| Media URL conversion           | `utils/matrix.ts`                                                   | `mxcUrlToHttp()`    |
-| Search pagination / virtual    | `features/message-search/{useMessageSearch,MessageSearch}.tsx`      | 74-121 / 234-365    |
-| Call mic control               | `plugins/call/CallControl.ts`                                       | 206-212             |
-| Knock support check            | `utils/matrix.ts`                                                   | 376-391             |
-| Notification mute push rules   | `hooks/useRoomsNotificationPreferences.ts`                          | 110-150             |
-
-### Element Call fork — operational reference
-
-Fork = `LotusGuild/element-call` (branch `lotus`, from upstream tag `v0.20.1`); cinny consumes the npm package `@lotusguild/element-call-embedded` (built bundle copied into `public/element-call/`).
-
-**Publish a new version (manual; needs the Gitea npm token):** bump `embedded/web/package.json` (current unpublished `0.20.1-lotus.2`) → `pnpm run build:embedded` (Node 24, pnpm 10.33) → `cd embedded/web && npm version <tag> --no-git-tag-version && npm publish` (Gitea registry) → in cinny bump the `@lotusguild/element-call-embedded` pin (currently `0.20.1-lotus.1`) → `npm install` → build.
-
-**`io.lotus.*` widget actions** (add new toWidget actions to the enum + `LOTUS_TO_WIDGET_ACTIONS` in `src/lotus/lotusActions.ts`; only send AFTER call-join or a 10s timeout fires):
-
-| Action                       | Dir     | Purpose                                                | Module                |
-| :--------------------------- | :------ | :----------------------------------------------------- | :-------------------- |
-| `io.lotus.call_state`        | EC→host | speaker/mute/camera stream (`lotusCallState=1`)        | `lotusCallState.ts`   |
-| `io.lotus.focus_participant` | host→EC | spotlight (works during screenshare)                   | `lotusFocus.ts`       |
-| `io.lotus.inject_audio`      | host→EC | soundboard clip mixed into call (`lotusAudioInject=1`) | `lotusAudioInject.ts` |
-| `io.lotus.set_quality`       | host→EC | audio/screenshare bitrate/fps caps                     | `lotusQuality.ts`     |
-| `io.lotus.decorations`       | host→EC | in-call avatar decorations                             | `lotusDecorations.ts` |
-| `io.lotus.set_deafen`        | host→EC | LiveKit-source deafen (P6-2)                           | `lotusDeafen.ts`      |
-
-Also flag-gated: `lotusTransparent`/`lotusTheme`, `lotusDenoiseSource=1` (in-source ML denoise).
-
-### CI/CD + per-feature checklist
-
-```
-edit → commit → git push origin lotus
-→ Gitea Actions: tsc --noEmit, eslint, prettier (~3 min)
-→ lotus_deploy.sh on LXC 106 polls CI → npm ci && npm run build → rsync → live (~11 min)
-```
-
-Before marking a feature complete: `npx tsc --noEmit` (0 errors) · `npx eslint src/` (0 new) · `npx prettier --check src/` · `npm test` (Node runner via tsx, hard CI gate — colocated `*.test.ts`) · update `README.md`/`landing/index.html` for Lotus-custom features · visually verify on `chat.lotusguild.org`.

README.md

@@ -1,204 +1,182 @@
 # Lotus Chat
 
-A Matrix chat client built for Lotus Guild — fast, private, and packed with the features you actually want.
+A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1.
 
-**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)**  |  Forked from [Cinny](https://github.com/cinnyapp/cinny), synced through v4.12.3
+Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).
 
 ---
 
-## Licensing & Attribution
+## Changes from upstream Cinny
 
-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).
+### Branding & Identity
 
-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.
+- Package renamed to `lotus-chat`, description updated to "Lotus Chat — Matrix client for Lotus Guild"
+- 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.
+
+### Messaging Enhancements
+
+- **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.
+- **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`.
+
+### 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`.
+
+### 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.
 
 ---
 
-## 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
+## Build
 
 ```bash
-npm ci && npm run build   # outputs to dist/
+npm ci
+npm run build   # outputs to dist/
 ```
 
-If the build is killed due to out-of-memory:
-
+Vite's render-chunks phase requires ~6 GB Node heap. If OOM killed, set:
 ```bash
 NODE_OPTIONS=--max_old_space_size=6144 npm run build
 ```
 
-### CI/CD
+## Development workflow
+
+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 min    →    live at chat.lotusguild.org
+edit → commit → git push    # ~11 minutes → auto-deployed to 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) |

build/lotus-denoise.js

@@ -1,357 +0,0 @@
-/*
- * 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;
-    });
-  };
-})();

config.json

@@ -1,7 +1,7 @@
 {
   "defaultHomeserver": 0,
-  "homeserverList": ["matrix.lotusguild.org", "matrix.org", "mozilla.org"],
-  "allowCustomHomeservers": true,
+  "homeserverList": ["matrix.lotusguild.org"],
+  "allowCustomHomeservers": false,
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [],
@@ -12,5 +12,5 @@
     "enabled": false,
     "basename": "/"
   },
-  "gifApiKey": ""
+  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
 }

contrib/caddy/caddyfile

@@ -1,17 +1,6 @@
 # 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,15 +17,6 @@ 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

@@ -1,112 +0,0 @@
-# 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

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

dev/oidc-test/synapse-msc3861.yaml

@@ -1,16 +0,0 @@
-# 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,26 +115,6 @@ 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.
     },
   },
   {
@@ -143,17 +123,4 @@ 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,8 +29,10 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
-    <link rel="stylesheet" href="/fonts/custom-fonts.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap"
+      rel="stylesheet"
+    />
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
     <link rel="manifest" href="/manifest.json" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lotus-chat",
-  "version": "4.12.3-lotus",
+  "version": "4.12.2-lotus",
   "description": "Lotus Chat — Matrix client for Lotus Guild",
   "main": "index.js",
   "type": "module",
@@ -16,11 +16,9 @@
     "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",
-    "sync:decorations": "node scripts/syncDecorations.mjs"
+    "postinstall": "node scripts/patch-folds.mjs"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": "eslint",
@@ -45,11 +43,11 @@
     "@giphy/js-types": "5.1.0",
     "@giphy/js-util": "5.2.0",
     "@giphy/react-components": "10.1.2",
-    "@sapphi-red/web-noise-suppressor": "0.3.5",
+    "@sentry/react": "10.53.1",
     "@tanstack/react-query": "5.100.13",
     "@tanstack/react-query-devtools": "5.100.13",
     "@tanstack/react-virtual": "3.13.25",
-    "@workadventure/noise-suppression": "0.0.4",
+    "@types/dompurify": "3.2.0",
     "await-to-js": "3.0.0",
     "badwords-list": "2.0.1-4",
     "blurhash": "2.0.5",
@@ -58,8 +56,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",
@@ -74,17 +72,14 @@
     "immer": "11.1.8",
     "is-hotkey": "0.2.0",
     "jotai": "2.20.0",
-    "jsqr": "1.4.0",
-    "katex": "0.16.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
-    "matrix-js-sdk": "41.7.0",
+    "lodash": "4.18.1",
+    "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": "1.5.4",
-    "qrcode.react": "4.2.0",
     "react": "19.2.6",
     "react-aria": "3.48.0",
     "react-blurhash": "0.3.0",
@@ -101,20 +96,18 @@
     "slate-history": "0.113.1",
     "slate-react": "0.124.2",
     "styled-components": "6.4.2",
-    "ua-parser-js": "2.0.10",
-    "workbox-precaching": "7.4.1"
+    "ua-parser-js": "2.0.10"
   },
   "devDependencies": {
-    "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
+    "@element-hq/element-call-embedded": "0.19.4",
     "@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/qrcode": "1.5.6",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
     "@types/react-google-recaptcha": "2.1.9",
@@ -138,7 +131,6 @@
     "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/config.json

@@ -1,7 +1,7 @@
 {
   "defaultHomeserver": 0,
-  "homeserverList": ["matrix.lotusguild.org", "matrix.org", "mozilla.org"],
-  "allowCustomHomeservers": true,
+  "homeserverList": ["matrix.lotusguild.org"],
+  "allowCustomHomeservers": false,
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [],
@@ -12,5 +12,5 @@
     "enabled": false,
     "basename": "/"
   },
-  "gifApiKey": ""
+  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
 }

public/fonts/JetBrainsMono-400.woff2

@@ -1,11 +0,0 @@
-<!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

@@ -1,11 +0,0 @@
-<!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

@@ -1,11 +0,0 @@
-<!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

@@ -1,51 +0,0 @@
-/* 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,57 +2,6 @@
   "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,61 +11,49 @@
   "theme_color": "#980000",
   "icons": [
     {
-      "src": "./res/android/android-chrome-36x36.png",
+      "src": "./public/android/android-chrome-36x36.png",
       "sizes": "36x36",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-48x48.png",
+      "src": "./public/android/android-chrome-48x48.png",
       "sizes": "48x48",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-72x72.png",
+      "src": "./public/android/android-chrome-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-96x96.png",
+      "src": "./public/android/android-chrome-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-144x144.png",
+      "src": "./public/android/android-chrome-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-192x192.png",
+      "src": "./public/android/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-256x256.png",
+      "src": "./public/android/android-chrome-256x256.png",
       "sizes": "256x256",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-384x384.png",
+      "src": "./public/android/android-chrome-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
-      "src": "./res/android/android-chrome-512x512.png",
+      "src": "./public/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,17 +19,8 @@ try {
     writeFileSync(foldsPath, content, 'utf8');
     console.log('Applied defensive Icon src guard to folds.');
   } else {
-    // 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);
+    console.warn('Warning: folds Icon patch target not found - may need updating.');
   }
 } catch (e) {
-  console.error('ERROR: Could not patch folds:', e.message);
-  process.exit(1);
+  console.warn('Warning: Could not patch folds:', e.message);
 }

scripts/syncDecorations.mjs

@@ -1,123 +0,0 @@
-#!/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,7 +213,6 @@ 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,7 +9,6 @@ import {
   config,
   Dialog,
   Icon,
-  IconButton,
   Icons,
   Overlay,
   OverlayBackdrop,
@@ -20,7 +19,6 @@ import {
 import {
   EventTimelineSetHandlerMap,
   EventType,
-  JoinRule,
   RelationType,
   Room,
   RoomEvent,
@@ -37,16 +35,12 @@ 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 { previewRingtone, startRingtone } from '../utils/ringtones';
+import CallSound from '../../../public/sound/call.ogg';
 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';
 import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
@@ -54,12 +48,10 @@ 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, getStateEvents, getMemberDisplayName } from '../utils/room';
+import { getStateEvent, getMemberDisplayName } from '../utils/room';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -67,7 +59,6 @@ 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;
@@ -109,8 +100,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   const canAnswer = livekitSupported && rtcSupported;
   const { room } = info;
 
-  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
-  const [ringtoneId] = useSetting(settingsAtom, 'ringtoneId');
+  const audioRef = useRef<HTMLAudioElement>(null);
 
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room, dm);
@@ -131,11 +121,23 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
     ),
   );
 
+  const playSound = useCallback(() => {
+    const audioElement = audioRef.current;
+    audioElement?.play().catch(() => undefined);
+  }, []);
+
   useEffect(() => {
-    if (info.notificationType !== 'ring') return undefined;
-    const stop = startRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
-    return stop;
-  }, [info.notificationType, ringtoneId, ringtoneVolume]);
+    const audioEl = audioRef.current;
+    if (info.notificationType === 'ring') {
+      playSound();
+    }
+    return () => {
+      if (audioEl) {
+        audioEl.pause();
+        audioEl.currentTime = 0;
+      }
+    };
+  }, [playSound, info.notificationType]);
 
   useEffect(() => {
     const remaining = info.senderTs + info.lifetime - Date.now();
@@ -148,255 +150,112 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   }, [info.senderTs, info.lifetime, onIgnore]);
 
   return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => onIgnore(),
-            clickOutsideDeactivates: false,
-            escapeDeactivates: false,
-          }}
-        >
-          <Dialog style={{ maxWidth: toRem(324) }}>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
-              <Text size="T200" align="Center">
-                {getMemberDisplayName(info.room, info.sender) ??
-                  getMxIdLocalPart(info.sender) ??
-                  info.sender}
-              </Text>
-              <Box direction="Column" gap="500" alignItems="Center">
-                <Box shrink="No">
-                  <Avatar size="500" className={CallAvatarAnimation}>
-                    <RoomAvatar
-                      roomId={room.roomId}
-                      src={avatarUrl}
-                      alt={roomName}
-                      renderFallback={() => (
-                        <RoomIcon
-                          roomType={room.getType()}
-                          size="400"
-                          joinRule={room.getJoinRule()}
-                          filled
-                        />
-                      )}
-                    />
-                  </Avatar>
+    <>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => onIgnore(),
+              clickOutsideDeactivates: false,
+              escapeDeactivates: false,
+            }}
+          >
+            <Dialog style={{ maxWidth: toRem(324) }}>
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
+                <Text size="T200" align="Center">
+                  {getMemberDisplayName(info.room, info.sender) ??
+                    getMxIdLocalPart(info.sender) ??
+                    info.sender}
+                </Text>
+                <Box direction="Column" gap="500" alignItems="Center">
+                  <Box shrink="No">
+                    <Avatar size="500" className={CallAvatarAnimation}>
+                      <RoomAvatar
+                        roomId={room.roomId}
+                        src={avatarUrl}
+                        alt={roomName}
+                        renderFallback={() => (
+                          <RoomIcon
+                            roomType={room.getType()}
+                            size="400"
+                            joinRule={room.getJoinRule()}
+                            filled
+                          />
+                        )}
+                      />
+                    </Avatar>
+                  </Box>
+                  <Box grow="Yes" direction="Column" gap="100">
+                    <Text size="H3" align="Center" truncate>
+                      {roomName}
+                    </Text>
+                    <Text size="T300">
+                      {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice Call'}
+                    </Text>
+                  </Box>
                 </Box>
-                <Box grow="Yes" direction="Column" gap="100" alignItems="Center">
-                  <Text size="H3" align="Center" truncate>
-                    {roomName}
+                {!livekitSupported && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your homeserver does not support calling.
                   </Text>
-                  <Text size="T300" align="Center">
-                    {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice Call'}
+                )}
+                {!webRTCSupported() && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your browser does not support WebRTC, which is required for calling.
                   </Text>
+                )}
+                <Box direction="Column" gap="300">
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Success"
+                    size="400"
+                    radii="400"
+                    onClick={() => onAnswer(room, info.intent === 'video')}
+                    before={
+                      <Icon
+                        size="200"
+                        src={info.intent === 'video' ? Icons.VideoCamera : Icons.Phone}
+                        filled
+                      />
+                    }
+                    disabled={!canAnswer}
+                  >
+                    <Text as="span" size="B400">
+                      Answer
+                    </Text>
+                  </Button>
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant={dm ? 'Critical' : 'Secondary'}
+                    fill="Soft"
+                    size="400"
+                    radii="400"
+                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+                    before={<Icon size="200" src={Icons.Cross} filled />}
+                  >
+                    <Text as="span" size="B400">
+                      {dm ? 'Reject' : 'Ignore'}
+                    </Text>
+                  </Button>
                 </Box>
               </Box>
-              {!livekitSupported && (
-                <Text
-                  style={{ margin: 'auto', color: color.Critical.Main }}
-                  size="L400"
-                  align="Center"
-                >
-                  Your homeserver does not support calling.
-                </Text>
-              )}
-              {!webRTCSupported() && (
-                <Text
-                  style={{ margin: 'auto', color: color.Critical.Main }}
-                  size="L400"
-                  align="Center"
-                >
-                  Your browser does not support WebRTC, which is required for calling.
-                </Text>
-              )}
-              <Box direction="Column" gap="300">
-                <Button
-                  style={{ flexGrow: 1 }}
-                  variant="Success"
-                  size="400"
-                  radii="400"
-                  onClick={() => onAnswer(room, info.intent === 'video')}
-                  before={
-                    <Icon
-                      size="200"
-                      src={info.intent === 'video' ? Icons.VideoCamera : Icons.Phone}
-                      filled
-                    />
-                  }
-                  disabled={!canAnswer}
-                >
-                  <Text as="span" size="B400">
-                    Answer
-                  </Text>
-                </Button>
-                <Button
-                  style={{ flexGrow: 1 }}
-                  variant={dm ? 'Critical' : 'Secondary'}
-                  fill="Soft"
-                  size="400"
-                  radii="400"
-                  onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
-                  before={<Icon size="200" src={Icons.Cross} filled />}
-                >
-                  <Text as="span" size="B400">
-                    {dm ? 'Reject' : 'Ignore'}
-                  </Text>
-                </Button>
-              </Box>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
-
-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>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+      <audio ref={audioRef} loop style={{ display: 'none' }}>
+        <source src={CallSound} type="audio/ogg" />
+      </audio>
+    </>
   );
 }
 
@@ -408,28 +267,16 @@ 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()) {
@@ -438,34 +285,6 @@ 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 ||
@@ -503,16 +322,6 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       );
       if (!hasCallPermission) return;
 
-      // Only ring in rooms where the call button is visible: DMs or invite-only rooms
-      // with no space parent. Persistent voice rooms (call rooms), space channels,
-      // restricted rooms, and public rooms must never trigger ringing.
-      if (room.isCallRoom()) return;
-      const isDirect = directs.has(room.roomId);
-      const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
-      const joinRule = room.getJoinRule();
-      const isPrivateInviteGroup = !isSpaceChild && joinRule === JoinRule.Invite;
-      if (!isDirect && !isPrivateInviteGroup) return;
-
       const info: IncomingCallInfo = {
         room,
         sender,
@@ -528,7 +337,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       setCallInfo(info);
     },
-    [mx, directs, callEmbed, setToast],
+    [mx],
   );
 
   useEffect(() => {
@@ -564,25 +373,10 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
     [startCall, navigateRoom],
   );
 
-  if (!callInfo) return null;
-  // Already in this room's own call — no notification at all.
-  if (callEmbed?.roomId === callInfo.room.roomId) {
+  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
     return null;
   }
-  // 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 (
+  return !joined && callInfo ? (
     <IncomingCall
       dm={dm}
       info={callInfo}
@@ -590,16 +384,14 @@ 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(() => {
@@ -610,69 +402,6 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
   return null;
 }
 
-/**
- * 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 mx = useMatrixClient();
-  const controlState = useCallControlState(callEmbed.control);
-  const allRemoteMuted = useRemoteAllMuted(callEmbed);
-
-  const localMicMuted = !controlState.microphone;
-  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',
-    zIndex: 3,
-    background: 'rgba(0,0,0,0.65)',
-    backdropFilter: 'blur(4px)',
-    borderRadius: config.radii.R300,
-    padding: `${config.space.S100} ${config.space.S200}`,
-    display: 'flex',
-    alignItems: 'center',
-    gap: config.space.S100,
-    pointerEvents: 'none',
-    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 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>
-      )}
-    </>
-  );
-}
-
 type CallEmbedProviderProps = {
   children?: ReactNode;
 };
@@ -720,27 +449,11 @@ 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, reduced),
-    [chatBackground, isDark, reduced],
+    () => getChatBg(chatBackground, isDark),
+    [chatBackground, isDark],
   );
 
-  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;
@@ -767,25 +480,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     if (pipMode) {
       if (!wasInPip) {
         const saved = localStorage.getItem('pip-position');
-        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;
-          }
-        }
+        const savedPos = saved ? (JSON.parse(saved) as { left: number; top: number }) : null;
         el.style.right = 'auto';
         el.style.bottom = 'auto';
         if (savedPos) {
@@ -981,54 +676,6 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     document.addEventListener('touchend', onTouchEnd);
   };
 
-  function applyResize(
-    el: HTMLElement,
-    corner: Corner,
-    sx: number,
-    sy: number,
-    sw: number,
-    sh: number,
-    sl: number,
-    st: number,
-    cx: number,
-    cy: number,
-  ) {
-    const dx = cx - sx;
-    const dy = cy - sy;
-    let w = sw;
-    let h = sh;
-    let l = sl;
-    let t = st;
-    if (corner === 'se') {
-      w = sw + dx;
-      h = sh + dy;
-    }
-    if (corner === 'sw') {
-      w = sw - dx;
-      h = sh + dy;
-      l = sl + sw - Math.max(PIP_MIN_W, w);
-    }
-    if (corner === 'ne') {
-      w = sw + dx;
-      h = sh - dy;
-      t = st + sh - Math.max(PIP_MIN_H, h);
-    }
-    if (corner === 'nw') {
-      w = sw - dx;
-      h = sh - dy;
-      l = sl + sw - Math.max(PIP_MIN_W, w);
-      t = st + sh - Math.max(PIP_MIN_H, h);
-    }
-    w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
-    h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
-    l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
-    t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
-    el.style.width = `${w}px`;
-    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();
@@ -1044,7 +691,40 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     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 dx = ev.clientX - sx;
+      const dy = ev.clientY - sy;
+      let w = sw;
+      let h = sh;
+      let l = sl;
+      let t = st;
+      if (corner === 'se') {
+        w = sw + dx;
+        h = sh + dy;
+      }
+      if (corner === 'sw') {
+        w = sw - dx;
+        h = sh + dy;
+        l = sl + sw - Math.max(PIP_MIN_W, w);
+      }
+      if (corner === 'ne') {
+        w = sw + dx;
+        h = sh - dy;
+        t = st + sh - Math.max(PIP_MIN_H, h);
+      }
+      if (corner === 'nw') {
+        w = sw - dx;
+        h = sh - dy;
+        l = sl + sw - Math.max(PIP_MIN_W, w);
+        t = st + sh - Math.max(PIP_MIN_H, h);
+      }
+      w = Math.max(PIP_MIN_W, Math.min(w, window.innerWidth));
+      h = Math.max(PIP_MIN_H, Math.min(h, window.innerHeight));
+      l = Math.max(0, Math.min(l, window.innerWidth - PIP_MIN_W));
+      t = Math.max(0, Math.min(t, window.innerHeight - PIP_MIN_H));
+      el.style.width = `${w}px`;
+      el.style.height = `${h}px`;
+      el.style.left = `${l}px`;
+      el.style.top = `${t}px`;
     };
     const onUp = () => {
       document.removeEventListener('mousemove', onMove);
@@ -1063,38 +743,6 @@ 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} />}
@@ -1140,46 +788,21 @@ 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: config.radii.R300,
-                    padding: `${config.space.S100} ${config.space.S200}`,
-                    color: '#fff',
-                    fontSize: '11px',
-                    fontWeight: 600,
-                    pointerEvents: 'none',
-                  }}
-                >
-                  ↗ Return to call
-                </div>
+              <div
+                style={{
+                  background: 'rgba(0,0,0,0.65)',
+                  backdropFilter: 'blur(4px)',
+                  borderRadius: '6px',
+                  padding: '3px 8px',
+                  color: '#fff',
+                  fontSize: '11px',
+                  fontWeight: 600,
+                  pointerEvents: 'none',
+                }}
+              >
+                ↗ Return to call
               </div>
             </div>
-            <PipMuteOverlay callEmbed={callEmbed} />
             {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
               const s = corner.includes('s');
               const e2 = corner.includes('e');
@@ -1201,7 +824,6 @@ 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/ClientConfigLoader.tsx

@@ -21,7 +21,7 @@ export function ClientConfigLoader({ fallback, error, children }: ClientConfigLo
   const ignoreCallback = useCallback(() => setIgnoreError(true), []);
 
   useEffect(() => {
-    load().catch(() => undefined);
+    load();
   }, [load]);
 
   if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {

src/app/components/DeviceVerification.tsx

@@ -1,14 +1,11 @@
 import {
-  ShowQrCodeCallbacks,
   ShowSasCallbacks,
   VerificationPhase,
   VerificationRequest,
   Verifier,
 } from 'matrix-js-sdk/lib/crypto-api';
-import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import QRCode from 'qrcode';
 import {
   Box,
   Button,
@@ -29,13 +26,10 @@ import {
   useVerificationRequestPhase,
   useVerificationRequestReceived,
   useVerifierCancel,
-  useVerifierShowReciprocateQr,
   useVerifierShowSas,
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
-import { useModalStyle } from '../hooks/useModalStyle';
-import { QrScanner } from './QrScanner';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -56,23 +50,21 @@ 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">{t('Organisms.DeviceVerification.close')}</Text>
+        <Text size="B400">Close</Text>
       </Button>
     </Box>
   );
 }
 
 function VerificationWaitAccept() {
-  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>{t('Organisms.DeviceVerification.please_accept')}</Text>
-      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_accept')} />
+      <Text>Please accept the request from other device.</Text>
+      <WaitingMessage message="Waiting for request to be accepted..." />
     </Box>
   );
 }
@@ -81,13 +73,12 @@ 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>{t('Organisms.DeviceVerification.click_accept')}</Text>
+      <Text>Click accept to start the verification process.</Text>
       <Button
         variant="Primary"
         fill="Solid"
@@ -95,14 +86,37 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
         before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
         disabled={accepting}
       >
-        <Text size="B400">{t('Organisms.DeviceVerification.accept')}</Text>
+        <Text size="B400">Accept</Text>
       </Button>
     </Box>
   );
 }
 
+function VerificationWaitStart() {
+  return (
+    <Box direction="Column" gap="400">
+      <Text>Verification request has been accepted.</Text>
+      <WaitingMessage message="Waiting for the response from other device..." />
+    </Box>
+  );
+}
+
+type VerificationStartProps = {
+  onStart: () => Promise<void>;
+};
+function AutoVerificationStart({ onStart }: VerificationStartProps) {
+  useEffect(() => {
+    onStart();
+  }, [onStart]);
+
+  return (
+    <Box direction="Column" gap="400">
+      <WaitingMessage message="Starting verification using emoji comparison..." />
+    </Box>
+  );
+}
+
 function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
-  const { t } = useTranslation();
   const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
 
   const confirming =
@@ -110,7 +124,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 
   return (
     <Box direction="Column" gap="400">
-      <Text>{t('Organisms.DeviceVerification.confirm_emoji')}</Text>
+      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
       <Box
         className={ContainerColor({ variant: 'SurfaceVariant' })}
         style={{
@@ -142,7 +156,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           disabled={confirming}
           before={confirming && <Spinner size="100" variant="Primary" />}
         >
-          <Text size="B400">{t('Organisms.DeviceVerification.they_match')}</Text>
+          <Text size="B400">They Match</Text>
         </Button>
         <Button
           variant="Primary"
@@ -150,7 +164,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           onClick={() => sasData.mismatch()}
           disabled={confirming}
         >
-          <Text size="B400">{t('Organisms.DeviceVerification.do_not_match')}</Text>
+          <Text size="B400">Do not Match</Text>
         </Button>
       </Box>
     </Box>
@@ -162,7 +176,6 @@ type SasVerificationProps = {
   onCancel: () => void;
 };
 function SasVerification({ verifier, onCancel }: SasVerificationProps) {
-  const { t } = useTranslation();
   const [sasData, setSasData] = useState<ShowSasCallbacks>();
 
   useVerifierShowSas(verifier, setSasData);
@@ -178,7 +191,7 @@ function SasVerification({ verifier, onCancel }: SasVerificationProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
+      <WaitingMessage message="Starting verification using emoji comparison..." />
     </Box>
   );
 }
@@ -187,14 +200,13 @@ type VerificationDoneProps = {
   onExit: () => void;
 };
 function VerificationDone({ onExit }: VerificationDoneProps) {
-  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
       <div>
-        <Text>{t('Organisms.DeviceVerification.device_verified')}</Text>
+        <Text>Your device is verified.</Text>
       </div>
       <Button variant="Primary" fill="Solid" onClick={onExit}>
-        <Text size="B400">{t('Organisms.DeviceVerification.okay')}</Text>
+        <Text size="B400">Okay</Text>
       </Button>
     </Box>
   );
@@ -204,138 +216,22 @@ type VerificationCanceledProps = {
   onClose: () => void;
 };
 function VerificationCanceled({ onClose }: VerificationCanceledProps) {
-  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>{t('Organisms.DeviceVerification.verification_canceled')}</Text>
+      <Text>Verification has been canceled.</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
+        <Text size="B400">Close</Text>
       </Button>
     </Box>
   );
 }
 
-function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    // Byte-mode so the raw verification bytes round-trip (a string value would
-    // mangle high bytes via UTF-8).
-    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
-      width: 220,
-      margin: 2,
-      color: { dark: '#000000', light: '#ffffff' },
-    }).catch(() => undefined);
-  }, [data]);
-  return (
-    <Box justifyContent="Center">
-      <canvas ref={canvasRef} style={{ borderRadius: config.radii.R300 }} />
-    </Box>
-  );
-}
-
-type VerificationReadyProps = {
-  request: VerificationRequest;
-  onStartSas: () => void;
-  onScanned: (bytes: Uint8ClampedArray) => void;
-};
-function VerificationReady({ request, onStartSas, onScanned }: VerificationReadyProps) {
-  const [myQr, setMyQr] = useState<Uint8ClampedArray>();
-  const [scanning, setScanning] = useState(false);
-  const canShowMine = request.otherPartySupportsMethod(VerificationMethod.ScanQrCode);
-  const canScanTheirs = request.otherPartySupportsMethod(VerificationMethod.ShowQrCode);
-
-  useEffect(() => {
-    if (!canShowMine) return;
-    request
-      .generateQRCode()
-      .then((bytes) => {
-        if (bytes) setMyQr(bytes);
-      })
-      .catch(() => undefined);
-  }, [request, canShowMine]);
-
-  if (scanning) {
-    return <QrScanner onScan={onScanned} onCancel={() => setScanning(false)} />;
-  }
-
-  return (
-    <Box direction="Column" gap="400">
-      {myQr && (
-        <Box direction="Column" gap="200">
-          <Text size="T300">Scan this code with your other device to verify.</Text>
-          <QrCodeImage data={myQr} />
-        </Box>
-      )}
-      <Box direction="Column" gap="200">
-        {canScanTheirs && (
-          <Button variant="Primary" fill="Solid" onClick={() => setScanning(true)}>
-            <Text size="B400">Scan their QR code</Text>
-          </Button>
-        )}
-        <Button variant="Secondary" fill="Soft" onClick={onStartSas}>
-          <Text size="B400">Verify with emoji instead</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
-type ReciprocateVerificationProps = {
-  verifier: Verifier;
-  onCancel: () => void;
-};
-function ReciprocateVerification({ verifier, onCancel }: ReciprocateVerificationProps) {
-  const [qrCallbacks, setQrCallbacks] = useState<ShowQrCodeCallbacks>();
-  const [confirmState, confirm] = useAsyncCallback(
-    useCallback(async () => qrCallbacks?.confirm(), [qrCallbacks]),
-  );
-
-  useVerifierShowReciprocateQr(verifier, setQrCallbacks);
-  useVerifierCancel(verifier, onCancel);
-
-  const confirming =
-    confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
-
-  // The showing side gets ShowReciprocateQr callbacks after the other device
-  // scans; the scanning side never does (it already called verify()) and just
-  // waits for completion.
-  if (!qrCallbacks) {
-    return (
-      <Box direction="Column" gap="400">
-        <WaitingMessage message="Verifying…" />
-      </Box>
-    );
-  }
-
-  return (
-    <Box direction="Column" gap="400">
-      <Text>The other device scanned this code. Confirm it now shows as verified.</Text>
-      <Box direction="Column" gap="200">
-        <Button variant="Primary" fill="Soft" onClick={confirm} disabled={confirming}>
-          <Text size="B400">Confirm</Text>
-        </Button>
-        <Button
-          variant="Primary"
-          fill="Soft"
-          onClick={() => qrCallbacks.cancel()}
-          disabled={confirming}
-        >
-          <Text size="B400">Cancel</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
 type DeviceVerificationProps = {
   request: VerificationRequest;
   onExit: () => void;
 };
 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) {
@@ -348,17 +244,6 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
   const handleStart = useCallback(async () => {
     await request.startVerification(VerificationMethod.Sas);
   }, [request]);
-  const handleScanned = useCallback(
-    async (bytes: Uint8ClampedArray) => {
-      try {
-        const verifier = await request.scanQRCode(bytes);
-        await verifier.verify();
-      } catch {
-        // A bad/mismatched scan cancels the request; the Cancelled phase renders.
-      }
-    },
-    [request],
-  );
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -370,7 +255,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
             escapeDeactivates: false,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog variant="Surface">
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
                 <Text as="h2" size="H4">
@@ -393,20 +278,15 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
                 ) : (
                   <VerificationAccept onAccept={handleAccept} />
                 ))}
-              {phase === VerificationPhase.Ready && (
-                <VerificationReady
-                  request={request}
-                  onStartSas={handleStart}
-                  onScanned={handleScanned}
-                />
-              )}
+              {phase === VerificationPhase.Ready &&
+                (request.initiatedByMe ? (
+                  <AutoVerificationStart onStart={handleStart} />
+                ) : (
+                  <VerificationWaitStart />
+                ))}
               {phase === VerificationPhase.Started &&
                 (request.verifier ? (
-                  request.chosenMethod === VerificationMethod.Reciprocate ? (
-                    <ReciprocateVerification verifier={request.verifier} onCancel={handleCancel} />
-                  ) : (
-                    <SasVerification verifier={request.verifier} onCancel={handleCancel} />
-                  )
+                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
                 ) : (
                   <VerificationUnexpected
                     message="Unexpected Error! Verification is started but verifier is missing."

src/app/components/DeviceVerificationSetup.tsx

@@ -13,10 +13,9 @@ import {
   color,
   Spinner,
 } from 'folds';
+import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
-import { useSaveFile } from '../hooks/useSaveFile';
-import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { copyToClipboard } from '../utils/dom';
@@ -230,7 +229,6 @@ type RecoveryKeyDisplayProps = {
 };
 function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
   const [show, setShow] = useState(false);
-  const saveFile = useSaveFile();
 
   const handleCopy = () => {
     copyToClipboard(recoveryKey);
@@ -240,7 +238,7 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
     const blob = new Blob([recoveryKey], {
       type: 'text/plain;charset=us-ascii',
     });
-    saveFile(blob, 'recovery-key.txt');
+    FileSaver.saveAs(blob, 'recovery-key.txt');
   };
 
   const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
@@ -289,10 +287,9 @@ type DeviceVerificationSetupProps = {
 export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
   ({ onCancel }, ref) => {
     const [recoveryKey, setRecoveryKey] = useState<string>();
-    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog ref={ref}>
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -327,10 +324,9 @@ type DeviceVerificationResetProps = {
 export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
   ({ onCancel }, ref) => {
     const [reset, setReset] = useState(false);
-    const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog ref={ref}>
         <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, color, config } from 'folds';
+import { Box } 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 color-mix(in srgb, var(--lt-accent-orange) 20%, transparent)',
+            borderBottom: '1px solid rgba(255,107,0,0.2)',
             fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
             fontSize: '10px',
             fontWeight: 700,
             letterSpacing: '0.1em',
-            color: 'var(--lt-accent-orange)',
+            color: '#FF6B00',
             userSelect: 'none',
           }}
         >
@@ -82,20 +82,19 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
 
   const containerStyle = lotusTerminal
     ? {
-        background: 'var(--lt-bg-secondary)',
-        border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)',
+        background: '#060c14',
+        border: '1px solid rgba(255,107,0,0.35)',
         borderRadius: '4px',
         overflow: 'hidden',
-        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)',
+        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
         width: `${PICKER_WIDTH}px`,
       }
     : {
-        background: color.Surface.Container,
-        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-        borderRadius: config.radii.R400,
+        background: 'var(--bg-surface)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: '12px',
         overflow: 'hidden',
-        boxShadow: color.Other.Shadow,
+        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
         width: `${PICKER_WIDTH}px`,
       };
 
@@ -103,7 +102,6 @@ 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,7 +3,6 @@ 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 {
@@ -17,7 +16,6 @@ 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(
@@ -35,7 +33,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
 
     return (
-      <Dialog variant="Surface" ref={ref} style={modalStyle}>
+      <Dialog variant="Surface" ref={ref}>
         <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 { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
 
 type MemberVerificationBadgeProps = {
@@ -9,7 +9,8 @@ type MemberVerificationBadgeProps = {
 export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
   const vs = useUserVerifiedStatus(userId);
   if (vs === 'unknown') return null;
-  const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
+  const color =
+    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
   const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
   return (
     <TooltipProvider
@@ -26,7 +27,7 @@ export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps
           title={label}
           style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
         >
-          <Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
+          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
         </span>
       )}
     </TooltipProvider>

src/app/components/Modal500.tsx

@@ -2,14 +2,12 @@ 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>
@@ -21,25 +19,7 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <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
-            }
-          >
+          <Modal size="500" variant="Background">
             {children}
           </Modal>
         </FocusTrap>

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -19,7 +19,7 @@ import {
   config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useSaveFile } from '../../hooks/useSaveFile';
+import FileSaver from 'file-saver';
 import * as css from './PdfViewer.css';
 import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
@@ -36,7 +36,6 @@ export const PdfViewer = as<'div', PdfViewerProps>(
   ({ className, name, src, requestClose, ...props }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
-    const saveFile = useSaveFile();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
 
     const [pdfJSState, loadPdfJS] = usePdfJSLoader();
@@ -77,7 +76,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
     }, [docState, pageNo, zoom]);
 
     const handleDownload = () => {
-      saveFile(src, name);
+      FileSaver.saveAs(src, name);
     };
 
     const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {

src/app/components/QrScanner.tsx

@@ -1,101 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Box, Button, color, config, Text } from 'folds';
-import jsQR from 'jsqr';
-
-type QrScannerProps = {
-  onScan: (bytes: Uint8ClampedArray) => void;
-  onCancel: () => void;
-};
-
-// Camera QR scanner. Decodes frames with jsQR and hands back the raw byte
-// segment (`result.binaryData`) — Matrix QR verification needs the raw bytes,
-// not a decoded string, so the string-only `BarcodeDetector` can't be used.
-export function QrScanner({ onScan, onCancel }: QrScannerProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [error, setError] = useState<string>();
-  const doneRef = useRef(false);
-
-  useEffect(() => {
-    let stream: MediaStream | undefined;
-    let raf = 0;
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d', { willReadFrequently: true });
-
-    const tick = () => {
-      const video = videoRef.current;
-      if (!doneRef.current && video && ctx && video.readyState === video.HAVE_ENOUGH_DATA) {
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const result = jsQR(image.data, image.width, image.height);
-        if (result && result.binaryData.length > 0) {
-          doneRef.current = true;
-          onScan(new Uint8ClampedArray(result.binaryData));
-          return;
-        }
-      }
-      raf = requestAnimationFrame(tick);
-    };
-
-    (async () => {
-      try {
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'environment' },
-        });
-        if (videoRef.current) {
-          videoRef.current.srcObject = stream;
-          await videoRef.current.play();
-        }
-        raf = requestAnimationFrame(tick);
-      } catch {
-        setError(
-          'Could not access the camera. Grant camera permission, or verify with emojis instead.',
-        );
-      }
-    })();
-
-    return () => {
-      doneRef.current = true;
-      cancelAnimationFrame(raf);
-      stream?.getTracks().forEach((track) => track.stop());
-    };
-  }, [onScan]);
-
-  if (error) {
-    return (
-      <Box direction="Column" gap="400">
-        <Text style={{ color: color.Critical.Main }} size="T300">
-          {error}
-        </Text>
-        <Button variant="Secondary" fill="Soft" onClick={onCancel}>
-          <Text size="B400">Back</Text>
-        </Button>
-      </Box>
-    );
-  }
-
-  return (
-    <Box direction="Column" gap="400" alignItems="Center">
-      <Text size="T300" align="Center">
-        Point your camera at the QR code shown on your other device.
-      </Text>
-      <video
-        ref={videoRef}
-        muted
-        playsInline
-        style={{
-          width: '100%',
-          maxWidth: 280,
-          borderRadius: config.radii.R400,
-          background: '#000',
-        }}
-      >
-        <track kind="captions" />
-      </video>
-      <Button variant="Secondary" fill="Soft" onClick={onCancel}>
-        <Text size="B400">Cancel</Text>
-      </Button>
-    </Box>
-  );
-}

src/app/components/RenderMessageContent.tsx

@@ -31,36 +31,13 @@ import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
-import { IAudioContent, IFileContent, IImageContent } from '../../types/matrix/common';
-
-// Audio is frequently sent as m.file (bridges/other clients, or when the browser
-// reported a non-audio/* mime on upload). Detect that so we can play it inline
-// like m.audio instead of showing only a download button.
-const AUDIO_EXT_MIME: Record<string, string> = {
-  mp3: 'audio/mpeg',
-  m4a: 'audio/mp4',
-  aac: 'audio/aac',
-  oga: 'audio/ogg',
-  ogg: 'audio/ogg',
-  opus: 'audio/ogg',
-  wav: 'audio/wav',
-  flac: 'audio/flac',
-  weba: 'audio/webm',
-};
-const resolveInlineAudioMime = (content: IFileContent): string | undefined => {
-  const mime = content.info?.mimetype;
-  if (typeof mime === 'string' && mime.startsWith('audio')) return mime;
-  const name = content.filename ?? content.body ?? '';
-  const ext = name.split('.').pop()?.toLowerCase();
-  return ext ? AUDIO_EXT_MIME[ext] : undefined;
-};
+import { IImageContent } from '../../types/matrix/common';
 
 type RenderMessageContentProps = {
   displayName: string;
   msgType: string;
   ts: number;
   edited?: boolean;
-  onEditHistoryClick?: () => void;
   getContent: <T>() => T;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
@@ -68,14 +45,12 @@ type RenderMessageContentProps = {
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
-  eventId?: string;
 };
 export function RenderMessageContent({
   displayName,
   msgType,
   ts,
   edited,
-  onEditHistoryClick,
   getContent,
   mediaAutoLoad,
   urlPreview,
@@ -83,7 +58,6 @@ export function RenderMessageContent({
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
-  eventId,
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     const filteredUrls = urls.filter((url) => !testMatrixTo(url));
@@ -103,7 +77,6 @@ export function RenderMessageContent({
         <MText
           style={{ marginTop: config.space.S200 }}
           edited={edited}
-          onEditHistoryClick={onEditHistoryClick}
           content={content}
           renderBody={(props) => (
             <RenderBody
@@ -160,7 +133,6 @@ export function RenderMessageContent({
     return (
       <MText
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -171,7 +143,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -181,7 +152,6 @@ export function RenderMessageContent({
       <MEmote
         displayName={displayName}
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -192,7 +162,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -201,7 +170,6 @@ export function RenderMessageContent({
     return (
       <MNotice
         edited={edited}
-        onEditHistoryClick={onEditHistoryClick}
         content={getContent()}
         renderBody={(props) => (
           <RenderBody
@@ -212,7 +180,6 @@ export function RenderMessageContent({
           />
         )}
         renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        eventId={eventId}
       />
     );
   }
@@ -254,18 +221,7 @@ export function RenderMessageContent({
                       <ThumbnailContent
                         info={info}
                         renderImage={(src) => (
-                          <Image
-                            alt={body}
-                            title={body}
-                            src={src}
-                            loading="lazy"
-                            style={{
-                              objectFit: 'cover',
-                              objectPosition: 'center top',
-                              width: '100%',
-                              height: '100%',
-                            }}
-                          />
+                          <Image alt={body} title={body} src={src} loading="lazy" />
                         )}
                       />
                     )
@@ -298,29 +254,6 @@ export function RenderMessageContent({
   }
 
   if (msgType === MsgType.File) {
-    // If an m.file is actually audio, play it inline (like m.audio) instead of
-    // only offering a download. MAudio falls back to renderFile if playback fails.
-    const audioMime = resolveInlineAudioMime(getContent<IFileContent>());
-    if (audioMime) {
-      const fileContent = getContent<IFileContent>();
-      const audioContent = {
-        ...fileContent,
-        info: { ...(fileContent.info ?? {}), mimetype: audioMime },
-      } as unknown as IAudioContent;
-      return (
-        <>
-          <MAudio
-            content={audioContent}
-            renderAsFile={renderFile}
-            renderAudioContent={(props) => (
-              <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
-            )}
-            outlined={outlineAttachment}
-          />
-          {renderCaption()}
-        </>
-      );
-    }
     return renderFile();
   }
 

src/app/components/TauriDesktopFeatures.tsx

@@ -1,27 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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, color, config, toRem } from 'folds';
+import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -51,8 +51,6 @@ 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);
@@ -194,7 +192,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         alignItems="Center"
         gap="200"
         style={{
-          background: color.SurfaceVariant.Container,
+          background: 'var(--bg-surface-variant)',
           borderRadius: config.radii.R300,
           padding: `${toRem(4)} ${toRem(8)}`,
         }}
@@ -205,7 +203,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
-            background: lotusTerminal ? 'var(--lt-accent-orange)' : color.Critical.Main,
+            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
             flexShrink: 0,
             animation: 'pttLivePulse 900ms ease-in-out infinite',
           }}
@@ -216,11 +214,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             minWidth: toRem(32),
             fontVariantNumeric: 'tabular-nums',
             ...(lotusTerminal
-              ? {
-                  fontFamily: 'JetBrains Mono, monospace',
-                  color: 'var(--lt-accent-green)',
-                  fontWeight: 700,
-                }
+              ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
               : {}),
           }}
         >
@@ -234,12 +228,13 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
         >
           {waveformBars.map((h, i) => (
             <div
+              // eslint-disable-next-line react/no-array-index-key
               key={i}
               style={{
                 width: toRem(2),
                 height: toRem(2 + (h / barMax) * 16),
                 borderRadius: toRem(1),
-                background: lotusTerminal ? 'var(--lt-accent-green)' : color.Primary.Main,
+                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
                 flexShrink: 0,
               }}
             />
@@ -275,41 +270,14 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
       alignItems="Center"
       gap="200"
       style={{
-        background: color.SurfaceVariant.Container,
+        background: 'var(--bg-surface-variant)',
         borderRadius: config.radii.R300,
         padding: `${toRem(4)} ${toRem(8)}`,
       }}
     >
       {previewUrl && (
-        <>
-          <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>
-        </>
+        // eslint-disable-next-line jsx-a11y/media-has-caption
+        <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
       )}
       <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
         {formatDuration(previewDurationRef.current)}

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

@@ -1,64 +0,0 @@
-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,14 +78,11 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
 
   return (
     <Box shrink="No" direction="Column" gap="100">
-      <Text as="label" htmlFor="create-room-alias" size="L400">
-        Address (Optional)
-      </Text>
+      <Text 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,5 +1,4 @@
 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';
@@ -18,7 +17,6 @@ export function CreateRoomTypeSelector({
   disabled,
   getIcon,
 }: CreateRoomTypeSelectorProps) {
-  const { t } = useTranslation();
   return (
     <Box shrink="No" direction="Column" gap="100">
       <SequenceCard
@@ -38,10 +36,10 @@ export function CreateRoomTypeSelector({
         >
           <Box gap="200" alignItems="Baseline">
             <Text size="H6" style={{ flexShrink: 0 }}>
-              {t('Organisms.CreateRoom.chat_room')}
+              Chat Room
             </Text>
             <Text size="T300" priority="300" truncate>
-              - {t('Organisms.CreateRoom.chat_room_desc')}
+              - Messages, photos, and videos.
             </Text>
           </Box>
         </SettingTile>
@@ -63,10 +61,10 @@ export function CreateRoomTypeSelector({
         >
           <Box gap="200" alignItems="Baseline">
             <Text size="H6" style={{ flexShrink: 0 }}>
-              {t('Organisms.CreateRoom.voice_room')}
+              Voice Room
             </Text>
             <Text size="T300" priority="300" truncate>
-              - {t('Organisms.CreateRoom.voice_room_desc')}
+              - Live audio and video conversations.
             </Text>
             <BetaNoticeBadge />
           </Box>

src/app/components/editor/Editor.tsx

@@ -66,8 +66,6 @@ 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;
@@ -84,7 +82,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       maxHeight = '50vh',
       editor,
       placeholder,
-      ariaLabel,
       onKeyDown,
       onKeyUp,
       onChange,
@@ -142,7 +139,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
-                aria-label={ariaLabel ?? placeholder ?? 'Message input'}
+                aria-label={placeholder ?? 'Message input'}
                 aria-multiline="true"
                 renderPlaceholder={renderPlaceholder}
                 renderElement={renderElement}

src/app/components/editor/Toolbar.tsx

@@ -252,7 +252,6 @@ 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, useState } from 'react';
+import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } 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, loadEmojiData } from '../../../plugins/emoji';
+import { IEmoji, emojis } from '../../../plugins/emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
@@ -47,32 +47,13 @@ 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)),
-      loadedEmojis,
+      emojis,
     );
-  }, [imagePacks, loadedEmojis]);
+  }, [imagePacks]);
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,

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

@@ -20,8 +20,6 @@ import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 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;
 
@@ -49,16 +47,12 @@ function UnknownMentionItem({
       }
       onClick={() => handleAutocomplete(userId, name)}
       before={
-        <AvatarDecoration userId={userId}>
-          <PresenceRingAvatar userId={userId}>
-            <Avatar size="200">
-              <UserAvatar
-                userId={userId}
-                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-              />
-            </Avatar>
-          </PresenceRingAvatar>
-        </AvatarDecoration>
+        <Avatar size="200">
+          <UserAvatar
+            userId={userId}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
       }
     >
       <Text style={{ flexGrow: 1 }} size="B400">
@@ -180,18 +174,14 @@ export function UserMentionAutocomplete({
                 </Text>
               }
               before={
-                <AvatarDecoration userId={roomMember.userId}>
-                  <PresenceRingAvatar userId={roomMember.userId}>
-                    <Avatar size="200">
-                      <UserAvatar
-                        userId={roomMember.userId}
-                        src={avatarUrl ?? undefined}
-                        alt={getName(roomMember)}
-                        renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                      />
-                    </Avatar>
-                  </PresenceRingAvatar>
-                </AvatarDecoration>
+                <Avatar size="200">
+                  <UserAvatar
+                    userId={roomMember.userId}
+                    src={avatarUrl ?? undefined}
+                    alt={getName(roomMember)}
+                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                  />
+                </Avatar>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>

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

@@ -8,7 +8,6 @@ import React, {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react';
 import { Box, config, Icons, Scroll } from 'folds';
 import FocusTrap from 'focus-trap-react';
@@ -16,7 +15,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 { EmojiData, IEmoji, emojiGroups, emojis, loadEmojiData } from '../../plugins/emoji';
+import { IEmoji, emojiGroups, emojis } from '../../plugins/emoji';
 import { useEmojiGroupLabels } from './useEmojiGroupLabels';
 import { useEmojiGroupIcons } from './useEmojiGroupIcons';
 import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
@@ -57,33 +56,6 @@ 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;
@@ -103,7 +75,6 @@ const useGroups = (
 
   const recentEmojis = useRecentEmoji(mx, 21);
   const labels = useEmojiGroupLabels();
-  const { emojiGroups: loadedEmojiGroups } = useEmojiData();
 
   const emojiGroupItems = useMemo(() => {
     const g: EmojiGroupItem[] = [];
@@ -128,7 +99,7 @@ const useGroups = (
       });
     });
 
-    loadedEmojiGroups.forEach((group) => {
+    emojiGroups.forEach((group) => {
       g.push({
         id: group.id,
         name: labels[group.id],
@@ -137,7 +108,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab, loadedEmojiGroups]);
+  }, [mx, recentEmojis, labels, imagePacks, tab]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
@@ -206,17 +177,6 @@ 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);
@@ -238,7 +198,8 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
         <SidebarStack>
           <SidebarDivider />
           {packs.map((pack) => {
-            const label = packLabels.get(pack.id);
+            let label = pack.meta.name;
+            if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
             const url =
               mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
@@ -264,7 +225,7 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
         }}
       >
         <SidebarDivider />
-        {loadedEmojiGroups.map((group) => (
+        {emojiGroups.map((group) => (
           <GroupIcon
             key={group.id}
             active={activeGroupId === group.id}
@@ -291,16 +252,6 @@ 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);
@@ -310,7 +261,8 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
     <Sidebar>
       <SidebarStack>
         {packs.map((pack) => {
-          const label = packLabels.get(pack.id);
+          let label = pack.meta.name;
+          if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
 
           const url =
             mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ?? undefined;
@@ -439,14 +391,13 @@ 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(loadedEmojis);
+    if (emojiTab) list = list.concat(emojis);
     return list;
-  }, [emojiTab, usage, imagePacks, loadedEmojis]);
+  }, [emojiTab, usage, imagePacks]);
 
   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="500"
+          size="600"
           style={
             lotusTerminal
               ? {
-                  borderBottomWidth: config.borderWidth.B300,
-                  boxShadow: 'var(--lt-box-glow-cyan)',
+                  borderBottom: '1px solid rgba(0,212,255,0.30)',
+                  boxShadow: '0 2px 12px rgba(0,212,255,0.08)',
                 }
               : undefined
           }
@@ -83,8 +83,8 @@ export const EventReaders = as<'div', EventReadersProps>(
               style={
                 lotusTerminal
                   ? {
-                      color: 'var(--lt-accent-cyan)',
-                      textShadow: 'var(--lt-glow-cyan)',
+                      color: '#00D4FF',
+                      textShadow: '0 0 6px rgba(0,212,255,0.45)',
                       letterSpacing: '0.05em',
                     }
                   : undefined
@@ -93,7 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
               Seen by
             </Text>
           </Box>
-          <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
+          <IconButton size="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: 'var(--lt-accent-amber)',
-                                  textShadow: 'var(--lt-glow-amber)',
+                                  color: '#FFB300',
+                                  textShadow: '0 0 5px rgba(255,179,0,0.45)',
+                                  fontSize: '0.72rem',
                                 }
-                              : undefined
+                              : { opacity: 0.6 }
                           }
                         >
                           {formatReadTs(receiptTs, hour24Clock)}

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

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

src/app/components/image-viewer/ImageViewer.tsx

@@ -1,8 +1,7 @@
 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';
-import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
@@ -16,14 +15,12 @@ export type ImageViewerProps = {
 
 export const ImageViewer = as<'div', ImageViewerProps>(
   ({ className, alt, src, requestClose, ...props }, ref) => {
-    const { t } = useTranslation();
-    const saveFile = useSaveFile();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
     const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
 
     const handleDownload = async () => {
       const fileContent = await downloadMedia(src);
-      saveFile(fileContent, alt);
+      FileSaver.saveAs(fileContent, alt);
     };
 
     return (
@@ -72,7 +69,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               radii="300"
               before={<Icon size="50" src={Icons.Download} />}
             >
-              <Text size="B300">{t('Organisms.ImageViewer.download')}</Text>
+              <Text size="B300">Download</Text>
             </Chip>
           </Box>
         </Header>

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

@@ -7,7 +7,6 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   Overlay,
   OverlayBackdrop,
@@ -35,13 +34,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
-import {
-  getCanonicalAliasOrRoomId,
-  getMxIdLocalPart,
-  getMxIdServer,
-  isRoomAlias,
-  isUserId,
-} from '../../utils/matrix';
+import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
 import { Membership } from '../../../types/matrix/room';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
@@ -49,10 +42,6 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
 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,
@@ -67,24 +56,8 @@ 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);
-
-  const inviteUrl = (() => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    return getMatrixToRoom(roomIdOrAlias, viaServers);
-  })();
-
-  const handleCopyLink = () => {
-    copyToClipboard(inviteUrl);
-    setLinkCopied(true);
-    setTimeout(() => setLinkCopied(false), 2000);
-  };
 
   const inputRef = useRef<HTMLInputElement>(null);
   const directUsers = useDirectUsers();
@@ -188,7 +161,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog style={modalStyle}>
+          <Dialog>
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
@@ -196,62 +169,15 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
               >
                 <Box grow="Yes">
                   <Text size="H4" truncate>
-                    {t('Organisms.InviteUser.invite')}
+                    Invite
                   </Text>
                 </Box>
-                <Box shrink="No" gap="100" alignItems="Center">
-                  <Button
-                    size="300"
-                    variant={linkCopied ? 'Success' : 'Secondary'}
-                    fill="Soft"
-                    radii="300"
-                    before={<Icon size="100" src={linkCopied ? Icons.Check : Icons.Link} />}
-                    onClick={handleCopyLink}
-                    aria-label="Copy room link"
-                  >
-                    <Text size="B300">{linkCopied ? 'Copied!' : 'Copy Link'}</Text>
-                  </Button>
-                  <Button
-                    size="300"
-                    radii="300"
-                    variant={showQr ? 'Primary' : 'Secondary'}
-                    fill={showQr ? 'Soft' : 'None'}
-                    aria-label="Toggle QR code"
-                    aria-pressed={showQr}
-                    onClick={() => setShowQr((v) => !v)}
-                  >
-                    <Text size="B300">QR Code</Text>
-                  </Button>
+                <Box shrink="No">
                   <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>
               </Header>
-              {showQr && (
-                <Box
-                  direction="Column"
-                  alignItems="Center"
-                  gap="200"
-                  style={{
-                    padding: config.space.S300,
-                    borderBottom: `1px solid ${color.Surface.ContainerLine}`,
-                  }}
-                >
-                  <img
-                    src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(inviteUrl)}`}
-                    alt="QR code for room invite link"
-                    width={180}
-                    height={180}
-                    style={{ display: 'block', borderRadius: config.radii.R300 }}
-                  />
-                  <Text
-                    size="T200"
-                    style={{ opacity: 0.6, wordBreak: 'break-all', textAlign: 'center' }}
-                  >
-                    {inviteUrl}
-                  </Text>
-                </Box>
-              )}
               <Box
                 as="form"
                 onSubmit={handleSubmit}
@@ -261,12 +187,9 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                 gap="400"
               >
                 <Box direction="Column" gap="100">
-                  <Text as="label" htmlFor="invite-user-id" size="L400">
-                    User ID
-                  </Text>
+                  <Text size="L400">User ID</Text>
                   <div>
                     <Input
-                      id="invite-user-id"
                       size="500"
                       ref={inputRef}
                       onChange={handleSearchChange}
@@ -337,11 +260,8 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   </div>
                 </Box>
                 <Box direction="Column" gap="100">
-                  <Text as="label" htmlFor="invite-reason" size="L400">
-                    Reason (Optional)
-                  </Text>
+                  <Text size="L400">Reason (Optional)</Text>
                   <TextArea
-                    id="invite-reason"
                     size="500"
                     name="reasonInput"
                     variant="Background"
@@ -359,7 +279,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   disabled={!validUserId || inviting}
                   before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
                 >
-                  <Text size="B400">{t('Organisms.InviteUser.invite')}</Text>
+                  <Text size="B400">Invite</Text>
                 </Button>
               </Box>
             </Box>

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

@@ -18,7 +18,6 @@ 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';
 
@@ -27,7 +26,6 @@ type JoinAddressProps = {
   onCancel: () => void;
 };
 export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
-  const modalStyle = useModalStyle(480);
   const [invalid, setInvalid] = useState(false);
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -73,7 +71,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog variant="Surface">
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -108,11 +106,8 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
                 </Text>
               </Box>
               <Box direction="Column" gap="100">
-                <Text as="label" htmlFor="join-address" size="L400">
-                  Address
-                </Text>
+                <Text size="L400">Address</Text>
                 <Input
-                  id="join-address"
                   size="500"
                   autoFocus
                   name="addressInput"

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

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

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

@@ -20,7 +20,6 @@ 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;
@@ -29,7 +28,6 @@ type LeaveSpacePromptProps = {
 };
 export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
   const mx = useMatrixClient();
-  const modalStyle = useModalStyle(480);
 
   const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
     useCallback(async () => {
@@ -58,7 +56,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog variant="Surface">
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/math/KaTeX.tsx

@@ -1,41 +0,0 @@
-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,7 +5,6 @@ export const Image = style([
   DefaultReset,
   {
     objectFit: 'cover',
-    objectPosition: 'center top',
     width: '100%',
     height: '100%',
   },

src/app/components/message/FileHeader.tsx

@@ -1,8 +1,8 @@
 import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
+import FileSaver from 'file-saver';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
-import { useSaveFile } from '../../hooks/useSaveFile';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@@ -24,7 +24,6 @@ type FileDownloadButtonProps = {
 export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const saveFile = useSaveFile();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
@@ -35,19 +34,18 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
         : await downloadMedia(mediaUrl);
 
       const fileURL = URL.createObjectURL(fileContent);
-      saveFile(fileURL, filename);
+      FileSaver.saveAs(fileURL, filename);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename, saveFile]),
+    }, [mx, url, useAuthentication, mimeType, encInfo, filename]),
   );
 
   const downloading = downloadState.status === AsyncStatus.Loading;
   const hasError = downloadState.status === AsyncStatus.Error;
-  const succeeded = downloadState.status === AsyncStatus.Success;
   return (
     <IconButton
       disabled={downloading}
       onClick={download}
-      variant={hasError ? 'Critical' : succeeded ? 'Success' : 'SurfaceVariant'}
+      variant={hasError ? 'Critical' : 'SurfaceVariant'}
       size="300"
       radii="300"
       aria-label={
@@ -55,15 +53,13 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
           ? 'Downloading...'
           : hasError
             ? 'Download failed, click to retry'
-            : succeeded
-              ? 'Downloaded — click to download again'
-              : 'Download file'
+            : 'Download file'
       }
     >
       {downloading ? (
         <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
       ) : (
-        <Icon size="100" src={succeeded ? Icons.Check : Icons.Download} />
+        <Icon size="100" src={Icons.Download} />
       )}
     </IconButton>
   );

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,6 +1,5 @@
-import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
+import React, { CSSProperties, ReactNode } from 'react';
+import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
@@ -32,89 +31,6 @@ import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 
-const COLLAPSE_MAX_HEIGHT = 320; // px ≈ 20 lines
-
-type CollapsibleBodyProps = {
-  eventId?: string;
-  children: ReactNode;
-};
-function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const [needsCollapse, setNeedsCollapse] = useState(false);
-  const [collapsed, setCollapsed] = useState(true);
-
-  // Reset collapsed state when the event changes (new message)
-  useEffect(() => {
-    setCollapsed(true);
-    setNeedsCollapse(false);
-  }, [eventId]);
-
-  useEffect(() => {
-    const el = bodyRef.current;
-    if (!el) return undefined;
-    const observer = new ResizeObserver(() => {
-      setNeedsCollapse(el.scrollHeight > COLLAPSE_MAX_HEIGHT);
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  const prefersReducedMotion =
-    typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  return (
-    <div>
-      <div
-        ref={bodyRef}
-        style={{
-          position: 'relative',
-          ...(needsCollapse && collapsed
-            ? {
-                maxHeight: `${COLLAPSE_MAX_HEIGHT}px`,
-                overflow: 'hidden',
-                transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
-              }
-            : {
-                transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
-              }),
-        }}
-      >
-        {children}
-        {needsCollapse && collapsed && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              height: '3rem',
-              background: `linear-gradient(transparent, ${color.Surface.Container})`,
-              pointerEvents: 'none',
-            }}
-          />
-        )}
-      </div>
-      {needsCollapse && (
-        <button
-          type="button"
-          onClick={() => setCollapsed((c) => !c)}
-          style={{
-            cursor: 'pointer',
-            background: 'none',
-            border: 'none',
-            padding: 0,
-            marginTop: config.space.S100,
-          }}
-        >
-          <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
-            {collapsed ? 'Read more ↓' : 'Show less ↑'}
-          </Text>
-        </button>
-      )}
-    </div>
-  );
-}
-
 export function MBadEncrypted() {
   return (
     <Text>
@@ -164,22 +80,12 @@ type RenderBodyProps = {
 };
 type MTextProps = {
   edited?: boolean;
-  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
   style?: CSSProperties;
-  eventId?: string;
 };
-export function MText({
-  edited,
-  onEditHistoryClick,
-  content,
-  renderBody,
-  renderUrlsPreview,
-  style,
-  eventId,
-}: MTextProps) {
+export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -189,19 +95,17 @@ export function MText({
 
   return (
     <>
-      <CollapsibleBody eventId={eventId}>
-        <MessageTextBody
-          preWrap={typeof customBody !== 'string'}
-          jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-          style={style}
-        >
-          {renderBody({
-            body: trimmedBody,
-            customBody: typeof customBody === 'string' ? customBody : undefined,
-          })}
-          {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
-        </MessageTextBody>
-      </CollapsibleBody>
+      <MessageTextBody
+        preWrap={typeof customBody !== 'string'}
+        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+        style={style}
+      >
+        {renderBody({
+          body: trimmedBody,
+          customBody: typeof customBody === 'string' ? customBody : undefined,
+        })}
+        {edited && <MessageEditedContent />}
+      </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
   );
@@ -210,20 +114,16 @@ export function MText({
 type MEmoteProps = {
   displayName: string;
   edited?: boolean;
-  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
-  eventId?: string;
 };
 export function MEmote({
   displayName,
   edited,
-  onEditHistoryClick,
   content,
   renderBody,
   renderUrlsPreview,
-  eventId,
 }: MEmoteProps) {
   const { body, formatted_body: customBody } = content;
 
@@ -234,20 +134,18 @@ export function MEmote({
 
   return (
     <>
-      <CollapsibleBody eventId={eventId}>
-        <MessageTextBody
-          emote
-          preWrap={typeof customBody !== 'string'}
-          jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-        >
-          <b>{`${displayName} `}</b>
-          {renderBody({
-            body: trimmedBody,
-            customBody: typeof customBody === 'string' ? customBody : undefined,
-          })}
-          {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
-        </MessageTextBody>
-      </CollapsibleBody>
+      <MessageTextBody
+        emote
+        preWrap={typeof customBody !== 'string'}
+        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+      >
+        <b>{`${displayName} `}</b>
+        {renderBody({
+          body: trimmedBody,
+          customBody: typeof customBody === 'string' ? customBody : undefined,
+        })}
+        {edited && <MessageEditedContent />}
+      </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
   );
@@ -255,20 +153,11 @@ export function MEmote({
 
 type MNoticeProps = {
   edited?: boolean;
-  onEditHistoryClick?: () => void;
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
-  eventId?: string;
 };
-export function MNotice({
-  edited,
-  onEditHistoryClick,
-  content,
-  renderBody,
-  renderUrlsPreview,
-  eventId,
-}: MNoticeProps) {
+export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
@@ -278,19 +167,17 @@ export function MNotice({
 
   return (
     <>
-      <CollapsibleBody eventId={eventId}>
-        <MessageTextBody
-          notice
-          preWrap={typeof customBody !== 'string'}
-          jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-        >
-          {renderBody({
-            body: trimmedBody,
-            customBody: typeof customBody === 'string' ? customBody : undefined,
-          })}
-          {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
-        </MessageTextBody>
-      </CollapsibleBody>
+      <MessageTextBody
+        notice
+        preWrap={typeof customBody !== 'string'}
+        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
+      >
+        {renderBody({
+          body: trimmedBody,
+          customBody: typeof customBody === 'string' ? customBody : undefined,
+        })}
+        {edited && <MessageEditedContent />}
+      </MessageTextBody>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
   );
@@ -508,7 +395,6 @@ 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);
@@ -529,7 +415,7 @@ export function MLocation({ content }: MLocationProps) {
         style={{
           width: '280px',
           height: '160px',
-          border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+          border: '1px solid var(--bg-surface-border)',
           borderRadius: '8px',
           display: 'block',
         }}
@@ -537,22 +423,21 @@ export function MLocation({ content }: MLocationProps) {
         loading="lazy"
         sandbox="allow-scripts"
       />
-      <Text size="T300" priority="300">
+      <Text size="T300" style={{ opacity: 0.65 }}>
         {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
       </Text>
-      <Button
+      <Chip
         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="Secondary"
-        fill="Solid"
-        radii="300"
+        variant="Primary"
+        radii="Pill"
         before={<Icon src={Icons.External} size="50" />}
       >
-        <Text size="B300">{t('Organisms.Message.open_location')}</Text>
-      </Button>
+        <Text size="B300">Open Location</Text>
+      </Chip>
     </Box>
   );
 }

src/app/components/message/Reaction.tsx

@@ -15,42 +15,34 @@ export const Reaction = as<
     reaction: string;
     useAuthentication?: boolean;
   }
->(({ 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}
-    >
-      <Text className={css.ReactionText} as="span" size="T400">
-        {reaction.startsWith('mxc://') ? (
-          <img
-            className={css.ReactionImg}
-            src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction}
-            alt={reaction}
-          />
-        ) : (
-          <Text as="span" size="Inherit" truncate>
-            {reaction}
-          </Text>
-        )}
-      </Text>
-      <Text as="span" size="T300">
-        {count}
-      </Text>
-    </Box>
-  );
-});
+>(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
+  <Box
+    as="button"
+    className={classNames(css.Reaction, className)}
+    alignItems="Center"
+    shrink="No"
+    gap="200"
+    {...props}
+    ref={ref}
+  >
+    <Text className={css.ReactionText} as="span" size="T400">
+      {reaction.startsWith('mxc://') ? (
+        <img
+          className={css.ReactionImg}
+          src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction}
+          alt={reaction}
+        />
+      ) : (
+        <Text as="span" size="Inherit" truncate>
+          {reaction}
+        </Text>
+      )}
+    </Text>
+    <Text as="span" size="T300">
+      {count}
+    </Text>
+  </Box>
+));
 
 type ReactionTooltipMsgProps = {
   room: Room;

src/app/components/message/Reply.tsx

@@ -1,7 +1,6 @@
 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';
@@ -38,22 +37,19 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
   ),
 );
 
-export const ThreadIndicator = as<'div'>(({ ...props }, ref) => {
-  const { t } = useTranslation();
-  return (
-    <Box
-      shrink="No"
-      className={css.ThreadIndicator}
-      alignItems="Center"
-      gap="100"
-      {...props}
-      ref={ref}
-    >
-      <Icon size="50" src={Icons.Thread} />
-      <Text size="L400">{t('Organisms.Message.thread')}</Text>
-    </Box>
-  );
-});
+export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
+  <Box
+    shrink="No"
+    className={css.ThreadIndicator}
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    <Icon size="50" src={Icons.Thread} />
+    <Text size="L400">Thread</Text>
+  </Box>
+));
 
 type ReplyProps = {
   room: Room;
@@ -61,7 +57,6 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
-  onThreadClick?: ((threadRootId: string) => void) | undefined;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -75,7 +70,6 @@ export const Reply = as<'div', ReplyProps>(
       replyEventId,
       threadRootId,
       onClick,
-      onThreadClick,
       getMemberPowerTag,
       accessibleTagColors,
       legacyUsernameColor,
@@ -109,16 +103,10 @@ 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={onThreadClick ? () => onThreadClick(threadRootId) : onClick}
-            aria-label="View thread"
-          />
+          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
         )}
         <ReplyLayout
           as="button"
-          aria-label="Jump to original message"
           userColor={usernameColor}
           username={
             sender && (

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

@@ -96,34 +96,6 @@ export function AudioContent({
     useThrottle(handlePlayTimeCallback, PLAY_TIME_THROTTLE_OPS),
   );
 
-  const [playbackSpeed, setPlaybackSpeed] = useState<0.75 | 1 | 1.5 | 2>(1);
-
-  useEffect(() => {
-    const audio = audioRef.current;
-    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];
-
-  const handleSpeedClick = () => {
-    const currentIndex = SPEED_STEPS.indexOf(playbackSpeed);
-    const nextIndex = (currentIndex + 1) % SPEED_STEPS.length;
-    setPlaybackSpeed(SPEED_STEPS[nextIndex]);
-  };
-
   const handlePlay = () => {
     if (srcState.status === AsyncStatus.Success) {
       setPlaying(!playing);
@@ -191,15 +163,6 @@ export function AudioContent({
         <Text size="T200">{`${secondsToMinutesAndSeconds(
           currentTime,
         )} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
-
-        <Chip
-          onClick={handleSpeedClick}
-          variant="Secondary"
-          radii="300"
-          aria-label={`Playback speed: ${playbackSpeed}×`}
-        >
-          <Text size="B300">{`${playbackSpeed}×`}</Text>
-        </Chip>
       </>
     ),
     rightControl: (

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

@@ -66,26 +66,8 @@ export const MessageVerificationRequestContent = as<'div', { children?: never }>
   ),
 );
 
-export const MessageEditedContent = as<
-  'span',
-  { children?: never; onEditHistoryClick?: () => void }
->(({ onEditHistoryClick, ...props }, ref) =>
-  onEditHistoryClick ? (
-    <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
-      <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">
-          {' (edited)'}
-        </Text>
-      </button>
-    </span>
-  ) : (
-    <Text as="span" size="T200" priority="300" {...props} ref={ref}>
-      {' (edited)'}
-    </Text>
-  ),
-);
+export const MessageEditedContent = as<'span', { children?: never }>(({ ...props }, ref) => (
+  <Text as="span" size="T200" priority="300" {...props} ref={ref}>
+    {' (edited)'}
+  </Text>
+));