i hate npm audit

The forked-in Cinny issue setup funneled reporters to the upstream project:
- config.yml disabled blank issues and linked to cinnyapp/cinny GitHub
  Discussions
- preapproved.md was Cinny's "do not open an issue, use Discussions"
  template (Gitea has no Discussions anyway)

Replace it with a Lotus setup: enable blank issues, drop the upstream
contact link, and add Bug Report + Feature Request templates. Now
/issues/new/choose offers Lotus templates and files against this repo.

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

.gitea/workflows/ci.yml

@@ -6,6 +6,18 @@ on:
   pull_request:
     branches: [lotus]
 
+# Only the newest commit per ref needs to build: a superseded push cancels its
+# in-flight run. This keeps the shared act_runner free (web CI otherwise queues
+# behind long Tauri desktop builds) and — since `trigger-desktop` is `needs:
+# build` — means only the latest lotus commit ever kicks a desktop build,
+# instead of one per rapid push. Cancelling a superseded run is deploy-safe
+# ONLY because lotus_deploy.sh re-resolves origin/lotus each poll iteration and
+# retargets its CI gate to HEAD — otherwise a run cancelled mid-poll would
+# strand the newest commit undeployed. Keep those two in sync.
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Build & Quality Checks
@@ -53,26 +65,34 @@ jobs:
       - name: Unit tests
         run: npm test
 
-      # ── Quality checks (informational — pre-existing issues exist) ───────
+      # ── Quality gates (hard — a failure fails the job and blocks deploy) ──
+      # The tree is held clean (typecheck 0, eslint 0 errors, prettier
+      # formatted), so these gate real regressions instead of relying on local
+      # runs. NOTE: an upstream-stable merge (the lotus-build.sh path) could
+      # introduce upstream type/lint/format issues; that path deploys without
+      # CI, but a subsequent normal push would surface the failure here — fix
+      # forward (or briefly re-soften a gate) rather than let it deploy broken.
+      # eslint gates on errors only (existing `no-explicit-any` warnings stay
+      # informational — `check:eslint` has no --max-warnings).
       - name: TypeScript
         run: npm run typecheck
-        continue-on-error: true
 
       - name: ESLint
         run: npm run check:eslint
-        continue-on-error: true
 
-      - name: Prettier
-        run: npm run check:prettier
-        continue-on-error: true
+      - name: Prettier Check and Fix
+        run: |
+          npx prettier --write . 
+          npm run check:prettier
 
-      # ── Security ─────────────────────────────────────────────────────────
+      # ── Security (informational — findings shouldn't block a deploy) ─────
       - name: Audit (high/critical)
         run: npm audit --audit-level=high --omit=dev
         continue-on-error: true
 
-      # ── Bundle size report ───────────────────────────────────────────────
+      # ── Bundle size report (informational — never blocks a deploy) ───────
       - name: Report bundle sizes
+        continue-on-error: true
         run: |
           echo "### Bundle sizes" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug Report
+about: Report something that isn't working in Lotus Chat
+title: ''
+labels: bug
+---
+
+**Describe the bug**
+A clear and concise description of what went wrong.
+
+**Steps to reproduce**
+
+1. Go to '...'
+2. Click on '...'
+3. See error
+
+**Expected behavior**
+What you expected to happen instead.
+
+**Client info**
+
+- Lotus Chat version (Settings → Help & About):
+- Platform: Web / Desktop (Windows / macOS / Linux)
+- Browser + version (if web):
+
+**Screenshots / logs**
+If applicable, add screenshots or the browser devtools console output.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Features, Bug Reports, Questions
-    url: https://github.com/cinnyapp/cinny/discussions/new/choose
-    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,15 @@
+---
+name: Feature Request
+about: Suggest an idea or improvement for Lotus Chat
+title: ''
+labels: enhancement
+---
+
+**What would you like?**
+A clear and concise description of the feature or change.
+
+**Why / use case**
+What problem does it solve, or what does it make better?
+
+**Alternatives considered**
+Any workarounds or other approaches you've thought about.

.github/ISSUE_TEMPLATE/preapproved.md

@@ -1,9 +0,0 @@
----
-name: Pre-Discussed and Approved Topics
-about: |-
-  Only for topics already discussed and approved in the GitHub Discussions section.
----
-
-**DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
-
-**I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**

LOTUS_FEATURES.md

@@ -1,7 +1,7 @@
 # Lotus Chat — Feature Reference
 
 Everything added to Lotus Chat beyond upstream Cinny v4.12.1.
-Last updated: June 2026.
+Last updated: July 2026.
 
 ---
 
@@ -679,6 +679,17 @@ The indicator is hidden once the server confirms the event (when the internal st
 - Picker UI is styled with TDS variables when the TDS theme is active
 - Located at `src/app/components/GifPicker.tsx`
 
+### Sticker Picker — Recently used
+
+The sticker tab of the shared `EmojiBoard` now has a **"Recent" group** (a sidebar
+`RecentClock` icon + top group), matching the emoji and GIF pickers — the stickers you last sent
+surface for one-click re-sending instead of hunting through packs. Only shown once you've sent at
+least one sticker (hidden otherwise). Persisted in localStorage (`cinny_recent_stickers_v1`),
+deduped by url, most-recent-first, capped at 16, via the pure/unit-tested `addRecentSticker`
+(`src/app/state/recentStickers.ts`). Recent entries are rebuilt into minimal `PackImageReader`s
+(`StickerItem` only needs `url`/`shortcode`/`body`) so they render and re-send exactly like pack
+stickers. Recorded on select for both the grouped and search paths (shared delegated click).
+
 ### Message Forwarding
 
 Context menu → **Forward** allows forwarding a message to any room the user is a member of.
@@ -687,6 +698,41 @@ Context menu → **Forward** allows forwarding a message to any room the user is
 
 Context menu → **Copy Text** copies a message's plain-text body to the clipboard (reply fallback stripped via `trimReplyFromBody`), complementing the existing **Copy Link** (permalink) action. It renders only when the event has a usable text body, so media without a caption doesn't show an empty action.
 
+### On-Device Message Translation
+
+Translate chat messages written in other languages into a language you choose,
+inline in the timeline — running **entirely on your device** so message text
+never leaves it.
+
+- **Per-message translate** — a foreign-language message shows a **Translate**
+  action in its message menu; once translated, the message displays an inline
+  **"Translated from <language> · Show original"** toggle that swaps between
+  the translation and the original text.
+- **Fully on-device / E2EE-preserving** — translation and language detection run
+  through the browser's built-in **Translator** and **Language Detector** APIs
+  (the Chromium on-device AI translation models). Message text is **never** sent
+  to any cloud translation service — no Google / DeepL / Microsoft, not even a
+  self-hosted server — and there is **no network fallback**, so end-to-end
+  encryption is preserved. That privacy guarantee is the whole point of the
+  feature.
+- **Automatic detection** — the language of each message is detected
+  automatically; messages already in your target language are skipped (no
+  Translate action is shown).
+- **Settings (Settings → General → Messages):**
+  - **Translate Messages Into** — your target language (default **English**;
+    ~26 common languages).
+  - **Auto-translate Incoming Messages** (default **off**) — automatically
+    translates foreign-language messages whose on-device language model is
+    already downloaded.
+- **One-time model download** — the first time you translate from a given
+  language, a small on-device model (a few MB) downloads once. Because the
+  browser requires a user gesture for that first download, the initial
+  translation needs a click.
+- **Availability** — Chromium desktop browsers (**Chrome / Edge 138+**) and the
+  **Lotus desktop app** (WebView2 / Chromium). Not available in Firefox, Safari,
+  or mobile browsers; where the APIs are unavailable the feature hides itself and
+  the settings tile shows a note.
+
 ### Draft Persistence
 
 - Composer drafts are stored in `localStorage` keyed by `roomId`
@@ -799,12 +845,12 @@ resolver, `parseMediaEmbed(url, host)` in `src/app/utils/videoEmbed.ts`, maps a
 URL to `{ provider, kind, embedUrl }`; `MediaEmbedCard` / `TikTokEmbedCard` /
 `TwitterCard` in `UrlPreviewCard.tsx` render it. Four render `kind`s:
 
-| kind        | shape                    | providers                                                          |
-| ----------- | ------------------------ | ----------------------------------------------------------------- |
-| `landscape` | 16:9 video player        | YouTube, Vimeo, Dailymotion, Streamable, Twitch, Loom, Kick (live) |
-| `portrait`  | 9:16 video player        | YouTube Shorts, TikTok                                            |
-| `audio`     | fixed-height audio player | Spotify, SoundCloud, Apple Music, Tidal                          |
-| `rich`      | self-resizing post embed | X/Twitter, Instagram, Reddit, Bluesky                            |
+| kind        | shape                     | providers                                                          |
+| ----------- | ------------------------- | ------------------------------------------------------------------ |
+| `landscape` | 16:9 video player         | YouTube, Vimeo, Dailymotion, Streamable, Twitch, Loom, Kick (live) |
+| `portrait`  | 9:16 video player         | YouTube Shorts, TikTok                                             |
+| `audio`     | fixed-height audio player | Spotify, SoundCloud, Apple Music, Tidal                            |
+| `rich`      | self-resizing post embed  | X/Twitter, Instagram, Reddit, Bluesky                              |
 
 **Privacy-friendly facade.** The tile first shows the homeserver's cached
 `og:image` thumbnail + a play button; the third-party `<iframe>` is only mounted
@@ -855,6 +901,7 @@ player.kick).
 
 - `PollCreator.tsx` creates stable `m.poll.start` events (with a text fallback body for non-poll clients)
 - Supports 2 to 10 answer options; single-choice or multiple-choice
+- **Max selections** — for a multiple-choice poll, a "Voters can pick up to N of M options" control sets `max_selections` (2 … option count), so you can run "pick your top 2" polls rather than only "select all". Defaults to the option count (unchanged "select all that apply" behavior) until you lower it; the display side already enforces the cap ("Select up to N")
 - **Results visibility toggle** — _Show live results_ (disclosed, default) vs _Hidden until ended_ (undisclosed)
 - Accessible via the `Icons.OrderList` button in the composer toolbar
 
@@ -900,9 +947,9 @@ Root messages in the main timeline show a **"N replies · time"** chip (server-a
 
 ### Thread Composer
 
-The panel embeds the full composer (uploads, emoji, stickers, GIFs, voice, location, polls) with drafts, reply state, and upload queues **isolated per thread** (`roomId::threadRootId` keys). Replies-to-replies produce spec-correct `m.thread` + `m.in_reply_to` (`is_falling_back: false`). Scheduling and slash commands are disabled inside threads (v1).
+The panel embeds the full composer (uploads, emoji, stickers, GIFs, voice, location, polls) with drafts, reply state, and upload queues **isolated per thread** (`roomId::threadRootId` keys). Replies-to-replies produce spec-correct `m.thread` + `m.in_reply_to` (`is_falling_back: false`). **Slash commands work in threads** — content-transform commands (`/me`, `/notice`, `/shrug`, `/tableflip`, `/unflip`) route into the thread via the normal send path, and room-level commands (`/invite`, `/kick`, …) act on the room; this also matches the command autocomplete, which was already shown in the thread composer. Scheduling is still disabled inside threads (v1).
 
-**↑ to edit last reply**: pressing Up-arrow in the empty thread composer opens the editor on your most recent editable reply *in that thread* — parity with the main timeline. The thread composer carries a distinct `editableName="ThreadInput"` so the main timeline's global up-arrow handler and the thread's no longer cross-fire (previously the thread composer had the same name, so Up-arrow there wrongly targeted the main timeline's last message).
+**↑ to edit last reply**: pressing Up-arrow in the empty thread composer opens the editor on your most recent editable reply _in that thread_ — parity with the main timeline. The thread composer carries a distinct `editableName="ThreadInput"` so the main timeline's global up-arrow handler and the thread's no longer cross-fire (previously the thread composer had the same name, so Up-arrow there wrongly targeted the main timeline's last message).
 
 ### Notifications (Slack-style, P4-1)
 
@@ -938,6 +985,7 @@ A presence status selector in the user panel offering five modes:
 ### Custom Status Message
 
 - Up to 64 characters of free text plus an emoji
+- **Emoji picker is unicode-only** (`EmojiBoard hideCustomEmojis`): a status is plain-text presence (`status_msg`) that can't render a custom mxc-image emoji, so the picker hides custom/image-pack emojis (packs, sidebar icons, search, and custom entries in Recent) — every emoji shown actually inserts. (Previously custom emojis were listed but silently did nothing when clicked, since there was no `onCustomEmojiSelect` on this field.)
 - Optional auto-clear timer with presets: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days
 - Status is broadcast via `mx.setPresence({ status_msg: ... })`
 - Character counter appears at 56/64 characters remaining to warn of the limit
@@ -971,10 +1019,12 @@ Fixed by replacing the single read with a `readStatus()` function called inside
 
 The browser tab title updates to reflect unread state:
 
-- `(N) Lotus Chat` — N unread messages
-- `· Lotus Chat` — unread activity without a specific count
+- `(N) Lotus Chat` — N mentions / keyword highlights (the count is highlights, not total unread)
+- `· Lotus Chat` — unread messages without a mention (activity, no specific count)
 - `Lotus Chat` — no unread items
 
+The favicon mirrors this (highlight badge / unread dot / default).
+
 ### Extended Profile Fields
 
 Supports MSC4133 custom profile fields via `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`:
@@ -1015,7 +1065,7 @@ Hook: `src/app/hooks/useUserNotes.ts`
 The Forward Message dialog is a checkbox multi-select: pick any number of rooms (search + select persist across queries) and **"Send to N rooms"** forwards in one batch (`Promise.allSettled`). Full success auto-closes; a partial failure keeps the dialog open with a "Forwarded to X/N — failed: …" summary. The forwarded content (latest edit via `m.new_content`, reply-quote stripped, undecryptable refused) is built by the shared, unit-tested `forwardContent.ts`.
 
 - **Message preview**: a compact preview at the top of the dialog shows the sender + body (and a thumbnail for image/video) so you can see what you're forwarding.
-- **Optional comment**: an "Add a comment" field sends a short `m.text` note to each target room *before* the forwarded message (sequenced per room; a room counts as failed if either send fails).
+- **Optional comment**: an "Add a comment" field sends a short `m.text` note to each target room _before_ the forwarded message (sequenced per room; a room counts as failed if either send fails).
 - **Recent targets**: a "Recent" chip row (hidden while searching) surfaces the rooms you last forwarded to for one-tap selection. Successful targets are recorded most-recent-first, deduped, capped at 8, in localStorage (`cinny_recent_forward_targets_v1`) via the pure, unit-tested `addRecentForwardTarget` (`state/recentForwardTargets.ts`); rooms you've since left are dropped from the row.
 
 ### Live Bookmark Previews (P6-3)
@@ -1046,10 +1096,9 @@ OS-level notifications are unchanged and still fire when the window is not focus
 
 ### Collapsible Long Messages
 
-Messages exceeding a configurable line threshold are truncated with a "Show more" toggle.
+Messages exceeding a fixed height threshold are truncated with a "Show more" toggle.
 
-- Default threshold: 20 lines
-- Threshold is configurable in **Settings → Appearance**
+- Threshold: a fixed `COLLAPSE_MAX_HEIGHT` of 320px (≈ 20 lines) — not currently user-configurable
 - Uses CSS `max-height` + `overflow: hidden` with a smooth transition
 - Transition is disabled when `prefers-reduced-motion: reduce` is active
 
@@ -1240,9 +1289,9 @@ Features:
 
 Accessible via **Room/Space Settings → Policy Lists** (admin only).
 
-- Displays the room's subscribed policy lists in read-only format
-- Subscribe (join) and unsubscribe (leave) controls for each list
-- Enforcement is delegated to Draupnir or equivalent tooling; Lotus only manages list membership
+- Enter a policy-list room's **ID or alias** (one you have already joined) to view its `m.policy.rule.user` / `.room` / `.server` rules in read-only format
+- Viewer only — there are **no** subscribe/unsubscribe controls and no listing of "subscribed" lists; join or leave the policy-list room itself the normal way
+- Enforcement is delegated to Draupnir or equivalent tooling
 
 ---
 

LOTUS_TESTING.md

@@ -1,6 +1,6 @@
 # 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)
+**Generated:** June 2026 · **Updated:** July 2026 (added §O — threads, per-thread notifications, math, search cache, session hardening, audit wave, desktop CSP; added the **Automated coverage map** below — logic now pinned by unit tests, so manual QA can focus on the human-only surface)
 **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.
@@ -28,6 +28,30 @@
 
 ---
 
+## Automated coverage map — what the unit tests already pin (2026-07)
+
+**Read this before working the guide.** Much of the _logic_ these manual checks were written to catch is now locked by deterministic unit tests (`npm test`, 920+ cases, green in CI). Unit tests do **not** prove visual rendering, real-call behavior, the desktop build, E2EE, or cross-device sync — those still need a human. But where a decision is pure logic, you can **trust the test and spend your manual time on the human-only part**. For each row below, the middle column is "don't bother re-deriving this by hand"; the right column is "this is what your manual pass is actually for."
+
+| Guide item                                 | Logic **pinned by a unit test** (trust it)                                                                                                                                                                                                                                            | What still needs **you** (manual)                                                                                          |
+| :----------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------- |
+| **A1** ringtone previews                   | `callSounds.test.ts` — each style's synthesized melody (chime/soft/retro), click-free gain ramps, context unlock/reuse, unknown = no-op                                                                                                                                               | that it's actually **audible** + the WebAudio first-gesture caveat                                                         |
+| **A2** ringtone persist/fallback           | `settings.test.ts` — unknown `ringtoneId` → default, malformed JSON → defaults, merge-over-defaults (this **is** A2 step 3)                                                                                                                                                           | the dropdown shows the persisted value after reload (trivial glance)                                                       |
+| **B2/B3** poll voting                      | `poll.test.ts` (18) — vote tally, latest-per-sender, multi-select, cleared/re-vote, winners, results-visible, single-vs-multi validation                                                                                                                                              | **visual** only: borders, radio-vs-checkbox, progress-bar fill, on each theme                                              |
+| **O2/P4-1** thread notifications           | `threadNotifications.test.ts` (32) — the **entire** notify decision (participating default, All/Mentions/Mute, @mention+highlight override, room-mute trumps), mode-map + muted-badge hygiene                                                                                         | live **2-person** delivery + sound + **cross-device** account-data sync                                                    |
+| **O3** math / LaTeX                        | `mathParse.test.ts` (14) — inline `$…$`, block `$$…$$`, **currency guard** (`$5 and $10`), escaped/unbalanced stay text, adjacency rules                                                                                                                                              | KaTeX **renders** visually + lazy-chunk load; code-block-literal is the markdown pipeline                                  |
+| **O4/P4-8** encrypted search cache         | `searchCache.test.ts` — the pure helpers `mergeSearchResults` (merge/dedupe/sort) + `computeCoverage` (window widening) + resilient-when-IDB-absent. **The IDB round-trip test is `skip`ped under `npm test`** (node has no IndexedDB), so it runs only in a browser-like env, not CI | the actual IndexedDB persist-across-**reload**, Clear button, **logout wipe** (integration — and the round-trip itself)    |
+| **M1** `has:image/file/video`              | `useMessageSearch.test.ts` — `filterGroupsByMsgType` union filter, drops empty groups, ignores non-string msgtype                                                                                                                                                                     | the chips render + compose with room/sender/date filters                                                                   |
+| **M4** pinned-only filter                  | `useMessageSearch.test.ts` — `filterGroupsByPinned` keeps pinned, drops empty                                                                                                                                                                                                         | chip renders; needs a room with actual pins                                                                                |
+| **M2** recent searches                     | `recentSearches.test.ts` (6) — prepend, dedupe+move-to-front, trim, ignore-empty, cap-at-10                                                                                                                                                                                           | chips render/click-re-run; persistence across refresh                                                                      |
+| **Retention** (disappearing msgs)          | `retention.test.ts` — `isExpired` window math (strict boundary), disabled = never, preset monotonicity                                                                                                                                                                                | the timeline **hide** + self-**redact** integration; Synapse-side purge                                                    |
+| **O5/N97a** session hardening              | `sessions.test.ts` (22) — blob migration, legacy-key coercion, dual-write blob↔legacy sync, corrupt/partial-blob fallback, token-refresh, AND the `subscribeSessionChanges` storage-event logic (fires on session/null, ignores unrelated keys)                                       | the real **cross-tab** logout _behavior_ end-to-end (two live tabs)                                                        |
+| **Q1/Q2** embeds (URL→player)              | `videoEmbed.test.ts` (26) — every provider's URL→`{provider, kind, embedUrl, height}` parse (incl. Mixcloud/Deezer, TikTok, reserved-path guards)                                                                                                                                     | the click-to-play **facade**, no-network-until-Play, the **CSP** (esp. desktop), visuals                                   |
+| **Seasonal theme resolution** (part of F2) | `seasonSchedule.test.ts` — `resolveSeasonTheme` (off→none, auto→active season, pinned→that) + `getActiveSeason` priority/boundary days. **NB: this pins _which_ theme shows for a date, NOT F2's background↔seasonal mutual exclusion** — that write-side logic is untested           | all of **F2**: the picker actually clearing the _other_ setting live, and the overlay suppression when a background is set |
+
+Everything else in the guide (calls, screen readers, desktop/Tauri, chat backgrounds, animated visuals, PWA install, real E2EE) is genuinely manual — no unit test substitutes for it. Items already **verified live** are listed at the very bottom ("Verified working in live testing").
+
+---
+
 ## A. Calls — new ringtone + notification work (highest priority)
 
 ### A1. Ringtone selection — preview in Settings

LOTUS_TODO.md

@@ -32,10 +32,9 @@ A three-wave feature bug-hunt (~15 parallel agents, each batch independently rev
 
 **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).
+- ✅ **Low-tail batch FIXED** (`a267e9e9`, 2-agent-reviewed, gate-green): **T5** (`participated` now also scans the local thread timeline, not just the server bundle → no under-notify), **T6** (room "Mentions & Keywords" honored for Default thread replies via a new `roomMentionsOnly` gate → no over-notify; +4 tests), **T7** (thread-mode account-data writes serialized with content carried forward → no lost update), **C-L2** (a real incoming ring cancels a lingering Settings preview), **C-L3** (ringtone AudioContext primed on first page gesture → first ring after cold load not silent), **C-L5** (`useCallSpeakers` depends on a stable boolean → no observer churn on membership change), **F5** (OIDC refresher forwards the refreshed token `expiry` as `expiresInMs` → `expiresAt` no longer stale across reloads). **Verified already-handled, no change:** **N6** (`useMemberAvatar` already subscribes via `useRoomMemberChange`), **H10** (`RoomProfile` already has `maxLength={255}` + surfaces the submit error).
+- **Calls host (still open):** 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-L7 all-muted DOM miscount if EC label format differs; C-L8 PiP sw/nw resize anchor jitter at min size. **All four are EC-DOM/echo-behavior or visual-jitter items — need a real call + the EC iframe to verify; deferred.**
+- **Native/desktop:** D7 Unity badge `application://cinny.desktop` id may not match the installed `.desktop` basename — **runtime-verify** on the `.deb`/AppImage.
 - **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**.
 
 ---
@@ -67,35 +66,86 @@ Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then gr
 
 Agent-surveyed + TPVR-verified correctness / a11y / tech-debt fixes (DP1–DP18) are implemented, review-fixed, and gate-green (tsc + eslint + 737 tests + build). Verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md) §R, then remove this note. Full detail in git history — commits `8eb961b6` `db864326` `6cf18c3b` `165714e1` `8c0e2b42` `e545706c` `b1ee3ada` `4fc3f7a3` `101e4116` `4fa4327a` `c2598d21`.
 
-### 🔍 Discovery pass 2 (2026-07) — perf / security / correctness (agent-surveyed, single-pass — NOT yet TPVR'd)
+### ✅ Discovery pass 2 (2026-07) — perf / security / correctness — DONE
 
-Three agents swept fresh lenses (performance, security/privacy, correctness in under-covered subsystems); each verified its own findings against the code + SDK. `Sev`/`Eff` = S/M/L. Confirm before fixing (no independent TPVR yet).
+Agent-surveyed findings, each **verified against the code before fixing**, then implemented and gate-green (tsc + eslint + prettier + 857 tests + build), with **two review agents on every staged diff before commit**. Verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then remove this note.
 
-**Performance / rendering:**
+- [x] **PERF-1 — presence: 3 client listeners PER avatar → one shared presence store** (3 listeners total). `8a154051`.
+- [x] **PERF-2 — `#`-mention autocomplete mutated + re-sorted the shared `allRoomsAtom` every keystroke** → copy + `useMemo` (also fixed a real shared-array mutation hitting ~27 consumers). `4708a179`.
+- [x] **PERF-3 — read-receipt rows: ~6 global `Members` listeners per row → one shared member-change store** (`useRoomMemberChange`). `1b8f5545`.
+- [x] **PERF-4 — message-search room filter re-sorted every render** → `useMemo`. `4708a179`.
+- [x] **PERF-5 — DM-preview `Decrypted` listener ran for every nav item** → gated on `direct`. `4708a179`.
+- [x] **SEC-1 / SEC-2 — scheduled-message plaintext + recent searches survived logout** → `clearPlaintextCaches()` on both logout paths, extended to the whole `recent_*` family + nav-paths. `726cefb5`.
+- [x] **SEC-3 — `window.open(_blank)` without `noopener`** → `noopener,noreferrer` at 5 sites (SSOStage excluded — needs the handle). `3e1106b2`.
+- [x] **SEC-4 — `/acl` self-lockout footgun** → shared `serverAcl.ts` validation, no-brick allow default, fail-closed self-ban guard. `3e1106b2`.
+- [x] **COR-1 — space-child UNLINK over-deleted** → targeted `UNLINK` reducer action. `fd3b8b42`.
+- [x] **COR-2 — `useCallJoined` stuck true on 2nd-call embed swap** → re-seed on `[embed]`. `1f80d1d1`.
+- [x] **COR-3 — incoming-call lifetime guard only corrected future clock-skew** → `Math.abs(...)` (±20s). `ab01d27a`.
+- [x] **COR-4 — shared notify-dedupe slot double-notified** → key by `roomId|threadId`. `1f80d1d1`.
+- [x] **COR-5 — upload cancel ignored during retry back-off** → `AbortSignal` threaded into the retry loop. `ab01d27a`.
+- [x] **COR-6 — `CallControl.forceState` dropped `screenshareAudioMuted`** → passes it. `ab01d27a`.
 
-- [ ] **PERF-1 — Presence: 3 global client listeners registered PER avatar (Sev High · Eff M).** `hooks/useUserPresence.ts:43-53` (via `PresenceRingAvatar.tsx:19`, `MembersDrawer.tsx:142`) — every timeline/member avatar adds `mx.on` for `Presence`/`CurrentlyActive`/`LastPresenceTs` → 100–250 global listeners; each presence event fans out across all, and fast scroll churns add/remove per Message mount. Fix: one shared presence store (context + `useSyncExternalStore` or a jotai `atomFamily`) with 3 listeners total; components select by userId.
-- [ ] **PERF-2 — `#`-mention autocomplete re-sorts AND mutates the room list every keystroke (Sev Med · Eff S).** `components/editor/autocomplete/RoomMentionAutocomplete.tsx:83` — `useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx))` is unmemoized (O(N log N) `mx.getRoom` per compare, N=all joined rooms, per keypress) **and `.sort()` mutates the shared `allRoomsAtom` array in place.** Fix: `useMemo(() => [...rooms].sort(...), [rooms, mx])`.
-- [ ] **PERF-3 — Read-receipt rows attach per-instance global `RoomStateEvent.Members` listeners (Sev Med · Eff M).** `components/read-receipt-avatars/ReadReceiptAvatars.tsx:74` + `hooks/useMemberAvatar.ts:44` — up to ~6 global `Members` listeners per receipt row; fires on any membership/name/avatar change in any room. Fix: one shared room-member-change subscription fanning out by roomId+userId (shares with PERF-1).
-- [ ] **PERF-4 — Message-search room filter re-sorts full room list every render (Sev Low–Med · Eff S).** `features/message-search/SearchFilters.tsx:155` — `Array.from(...).sort(factoryRoomIdByAtoZ(mx))` outside `useMemo` (re-sorts as the user types). Fix: `useMemo`.
-- [ ] **PERF-5 — DM-preview hook subscribes a global `Decrypted` listener for EVERY nav item incl. non-DMs (Sev Low–Med · Eff S).** `hooks/useRoomLatestRenderedEvent.ts:64-67` (called at `RoomNavItem.tsx:681`) — preview is only used for `direct` rooms but the hook + its `MatrixEventEvent.Decrypted` listener run for all; wasteful, and fans out across all during bulk decryption. Fix: gate the hook/subscription on `direct`.
-- [ ] **PERF-6 — Avatar-decoration profile-fetch on first render of large member/timeline views (Sev Low · Eff M, likely leave).** `hooks/useAvatarDecoration.ts` — one `/profile/{userId}` per new user (well-guarded: module cache + in-flight dedupe + backoff). Network/HS-load note only; batch/skip only if it proves costly.
+**Deferred / decided (not built):**
 
-**Security / privacy:** _(no exploitable XSS found — `sanitize.ts` strips `javascript:`, forces mxc `<img>` + `rel=noopener` `<a>`; embeds use host-allowlist + origin-scoped `postMessage`; KaTeX `trust:false`. These are storage-hygiene / URL items.)_
+- [DEFERRED] **PERF-6 — avatar-decoration `/profile` fetch** — well-guarded (module cache + in-flight dedupe + backoff); a network/HS-load note only. Batch/skip only if it proves costly.
+- [DEFERRED] **SEC-5 — embeds' `allow-popups-to-escape-sandbox`** — informational; main-app hijack already prevented (no `allow-top-navigation`), and popups are arguably needed for "open in provider." Revisit with per-provider verification if dropped.
+- **KE-1 preventive (`navigator.storage.persist()`)** is **already implemented** (`initClient` → `requestPersistentStorage()` + `src/index.tsx` boot). The rest of the KE cluster stays under **Encryption / E2EE** below (needs live capture).
 
-- [ ] **SEC-1 — Scheduled-message plaintext persists in `localStorage`, survives logout (Sev Med · Eff S).** `state/scheduledMessages.ts:12-19` — full `IContent` (incl. E2EE cleartext `body`) under `cinny_scheduled_messages_v1`; normal logout (`removeFallbackSession`, N98) keeps it. Leak on shared/kiosk browser. Fix: clear on logout (add to `removeFallbackSession`) — or encrypt-at-rest with N97.
-- [ ] **SEC-2 — Recent search terms persist in `localStorage`, survive logout (Sev Low · Eff S).** `state/recentSearches.ts:4-12` — last 10 queries (often PII) under `cinny_recent_searches_v1`, survive normal logout. Fix: clear on logout.
-- [ ] **SEC-3 — `window.open(url, '_blank')` without `'noopener'` → reverse tab-nabbing (Sev Low · Eff S).** `components/user-profile/UserChips.tsx:117` (+ `SSOStage.tsx:23`, `settings/devices/Verification.tsx:276`, `OtherDevices.tsx:36,49`, `OidcManageAccount.tsx:23`) — `window.open` doesn't null `window.opener`. UserChips opens a user/room-derived server URL. Fix: pass `'noopener,noreferrer'` (or set `w.opener = null`).
-- [ ] **SEC-4 — `/acl` has no `*`/self-lockout guard or glob validation (Sev Low · Eff S–M).** `hooks/useCommands.ts:489-538` — `/acl -d *` writes `deny:['*']` (can brick the room); empty/whitespace globs pushed unvalidated into `m.room.server_acl`. PL-gated + matches upstream, but a destructive footgun. Fix: reject a `*`/empty deny matching the local server, validate glob syntax, confirm on `*`.
-- [ ] **SEC-5 — Embeds get `allow-popups-to-escape-sandbox` (Sev Low, informational · Eff M).** `components/url-preview/UrlPreviewCard.tsx:590-591` (`EMBED_SANDBOX`) — a hijacked provider script could spawn an un-sandboxed popup (phishing). Main-app hijack already prevented (no `allow-top-navigation`); popups arguably needed for "open in provider." Fix (if desired): drop the escape flag + verify per-provider.
+### 🔍 Feature bug hunt (2026-07, 5-agent, LOTUS_FEATURES surface) — open findings
 
-**Correctness (under-covered subsystems):**
+Per-slice bug hunt (5 agents: theming · calls · messaging · threads/presence/UX · rooms/mod/notif/infra/desktop), each **verified against current code** (already-fixed items not re-flagged; the heavily-audited hot paths came back clean). Residual findings below. `[live]` / `[desktop]` = needs a real call / the desktop app to confirm.
 
-- [ ] **COR-1 — Space-child UNLINK nukes a room's OTHER parents + orphans descendants (Sev Med · Eff M).** `state/room/roomToParents.ts:102-103` (DELETE reducer `:53-66`) — removing one `m.space.child` fires the same `DELETE` used for "room left," wiping ALL of the child's parents and stripping it as a parent everywhere. Remove C from space A only → C also loses parent B, and C's own children lose C, until a full resync. Fix: a targeted "remove one parent from one child" action. (Reducer inherited from upstream.)
-- [ ] **COR-2 — `useCallJoined` stays `true` across a direct embed swap (answering a 2nd call) (Sev Med · Eff S).** `hooks/useCallEmbed.ts:140-158` — the reset effect only clears `joined` when `!embed`; answering call B from the banner swaps embed A→B directly, so `joined` stays true → B renders as live/joined before EC actually joins, skipping the loading/watchdog UI. Fix: `useEffect(() => setJoined(embed?.joined ?? false), [embed])`.
-- [ ] **COR-3 — Incoming-call lifetime guard only corrects FUTURE clock-skew, not past (Sev Low · Eff S).** `components/CallEmbedProvider.tsx:476-477` — distrusts `sender_ts` only when >20 s ahead of `origin_server_ts`; a caller clock that's behind leaves `sender_ts` in the past → `remaining ≤ 0` → ring auto-dismisses/never shows for a fresh invite. Fix: `Math.abs(...) > 20000` or just use `event.getTs()`.
-- [ ] **COR-4 — Shared notify-dedupe slot double-notifies a re-fired main message after an interleaving thread reply (Sev Low · Eff S).** `pages/client/ClientNonUIFeatures.tsx:521,530` — `lastNotifiedEventRef` is one `Map<roomId,eventId>` slot shared by the main + thread paths; a thread reply overwrites it, so a re-emitted main message (decrypt/edit re-fire, common in E2EE) mis-dedupes and notifies again. Fix: separate dedupe keys per path (or key by `roomId|eventId`).
-- [ ] **COR-5 — Upload cancel during retry back-off is silently ignored (upload resurrects) (Sev Low · Eff M).** `utils/matrix.ts:204-238` + `state/upload.ts:125-129` — during the 1–30 s back-off the atom holds the previous (rejected) promise, so `cancelUpload` is a no-op and the loop wakes to start the next attempt. Fix: thread an abort flag into the retry loop.
-- [ ] **COR-6 — `CallControl.forceState` resets `screenshareAudioMuted` to false (Sev Low · Eff S).** `plugins/call/CallControl.ts:155-162` — `forceState` passes only 5 args so the 6th defaults false; low impact today (runs at join, no screenshare yet) but silently discards the field. Fix: pass `this.screenshareAudioMuted`.
+**Embeds / URL previews**
+
+- [x] **[Med] Desktop (Tauri) CSP `frame-src` was missing `store.steampowered.com`, `www.mixcloud.com`, `widget.deezer.com`** → the Steam widget (shipped) + new Mixcloud/Deezer embeds were silently blocked (blank iframe) **in the desktop app**. **FIXED** (`cinny-desktop` `daba59b`): all three added to `frame-src` (no `connect-src` — these don't do a client oEmbed fetch). Web was always fine (`frame-src 'self' https:`). Needs desktop-app QA to confirm the widgets render.
+- [x] **[Low]** `searchCache.ts` encrypted-search index has no size/count cap — unbounded on-disk growth (mitigated by the manual "Clear cached index" + logout wipe). **FIXED** (`fff811cb`): per-room cap of 5000 rows, oldest-by-ts evicted on write via a self-chaining IDB cursor + pure unit-tested `evictCount`. IDB-spec correctness (cursor delete/continue, tx liveness, range bracketing) confirmed by 2 review agents since CI can't run IndexedDB.
+- [x] **[Low]** `MsgTypeRenderers.tsx` `MLocation` OSM permalink uses raw `geo:` lat/lon substrings, not the validated floats — harmless (URL context, malformed input only). **FIXED** (`8a461610`): permalink uses the `parseFloat`+`isFinite` validated `lat`/`lon` (as the map iframe already did).
+
+**Voice / video calls**
+
+- [x] **[Med]** `DenoiseTester.play()` (Settings → Calls A/B model test) leaks the denoise model node — calls `ctx.close()` but never `denoise.dispose()` (inconsistent with `stopLive`, which disposes) → leaks the DeepFilterNet/DTLN worker/WASM per press. **FIXED** (`c9d9d914`): `stopPlayback` now mirrors `stopLive` (dispose model + gate), and a generation token also closes the rapid-click / stop-during-load / unmount-during-load leak windows (3 review passes, all 6 interleavings traced).
+- [x] **[Med] [live]** PiP auto-spotlight never released on return to the call room — the release branch sits inside the `if (!pipMode) return` guard, so screenshare→PiP→back leaves spotlight forced on and `pipAutoSpotlightRef` stuck `true`. `CallEmbedProvider.tsx:733-744`. **FIXED** (`08e19100`, code-level; still wants live QA): effect guards only on `!callEmbed`, releases whenever `pipMode && pipScreenshare` is false; + ref-reset on embed teardown + deps comment (2-agent reviewed).
+- [x] **[Low]** DenoiseTester async paths (`getUserMedia`) have no mounted-guard → ctx/stream leak + setState-after-unmount if Settings closes during the mic prompt. **FIXED** (`c9d9d914`): a `mountedRef` guards `startLive`/`startRecord` after the `getUserMedia` await (and `play()` after its model load); the ref is set on mount, not only cleared on unmount, so it survives a StrictMode/Activity remount.
+- [x] **[Low]** Soundboard 30s safety timeout never cleared on natural clip end (`CallSoundboard.tsx:115`); `PrescreenControls` `PermissionStatus.onchange` not removed on unmount (`PrescreenControls.tsx:22-28`). **FIXED** (`56561627`): per-play timer token cleared on end/unmount (identity-guarded so a stale clip can't disarm a newer one); permission `onchange` detached + `cancelled`-guarded setState.
+- [ ] **[Low] [live]** Call-to-call switch disposes the embed without an explicit `HangupCall` → possible transient ghost RTC membership until EC's unload-leave fires.
+
+**Theming / visuals**
+
+- [x] **[Med]** `invalidateDecorationCache` clears the module cache but has no pub/sub → changing **your own** avatar decoration doesn't update live in already-mounted avatars (timeline/members) until remount. Add a listener set / bump counter. `useAvatarDecoration.ts:67`. **FIXED** (`29ff1654`): per-user listener set notified on invalidation (+ clears the give-up counter); concurrent re-fetches de-dupe via the existing `pending` map.
+- [x] **[Med/Low]** Decoration picker grid thumbnails use the raw `DECORATION_CDN` constant instead of `decorationUrl()`, ignoring the `VITE_DECORATION_CDN` override → broken thumbnails if decorations are repointed. `ProfileDecoration.tsx:51`. **FIXED** (`29ff1654`): grid uses `decorationUrl(slug)`.
+- [x] **[Low]** Seasonal "Auto" is computed once at mount (no ticker, unlike NightLight) → won't flip across a holiday-window boundary in a long-lived session. `SeasonalEffect.tsx:100`. **FIXED** (`d416c62b`): hourly re-eval ticker (auto only) + refresh on entering auto; decision extracted to pure `resolveSeasonTheme` + tested.
+- [x] **[Low]** Selecting seasonal "Auto" while a chat background is set is a silent no-op (asymmetric mutual exclusion — SeasonalEffect early-returns when `chatBackground !== 'none'`). `General.tsx:550`. **FIXED** (`d416c62b`): any active seasonal mode (incl. auto) now clears the chat background; only "off" leaves it (symmetric with the bg picker).
+- [x] **[Low]** Decoration settings fetch the `/{field}` sub-resource → console 404 for users with no decoration set. `ProfileDecoration.tsx:79`. **FIXED** (`29ff1654`): reads the full `/profile/{userId}` (matching `useAvatarDecoration`); PUT/save path unchanged.
+
+**Threads / presence / UX**
+
+- [x] **[Med]** `PresenceBadge` renders DND (`unavailable` + `status_msg:'dnd'`) as a **yellow "Idle"** badge + label, while `PresenceRingAvatar` correctly shows **red** — inconsistent. Give the badge the same `status === 'dnd' → Critical` + "Do Not Disturb" branch. `Presence.tsx:17-59`. **FIXED** (`29ff1654`): badge now matches the ring + settings picker (Critical / "Do Not Disturb", `'dnd'` sentinel line suppressed).
+- [x] **[Med]** Collapsible-message threshold is hardcoded (`COLLAPSE_MAX_HEIGHT = 320`), but the docs claim it's "configurable in Settings → Appearance (default 20 lines)" — unimplemented. Add the setting + control, or fix the doc. `MsgTypeRenderers.tsx:38`. **FIXED** (doc): LOTUS_FEATURES now describes the fixed 320px (≈20-line) threshold; the full 320px is sensible and a per-user setting wasn't worth the surface — reconciled the doc rather than build a marginal setting.
+- [x] **[Med/Low]** In-app toast container has no visible cap / scroll — a burst of messages across rooms while focused stacks toasts unbounded and can cover the viewport. Cap visible N or `overflow-y:auto` + max-height. `LotusToastContainer.tsx:223-247`. **FIXED** (`1963222d`): queue capped at 5 in the atom writer (drops oldest non-sticky, never the newest or a sticky action toast) + container maxHeight/overflow + scroll-to-newest; +4 tests. (3 review passes — the 2nd caught a newest-dropped edge when the cap is full of stickies.)
+- [x] **[Low]** "Unread First" room sort leaves the (larger) read portion unordered — no activity fallback for the equal-unread case. `Home.tsx:213-222`. **FIXED** (`1963222d`): `factoryRoomIdByUnread` breaks ties by recent activity; relocated to `utils/sort.ts` (pure) + unit-tested.
+- [x] **[Low]** Tab title "(N)" counts mentions, not unread messages (doc says unread) — reconcile doc vs. code. `ClientNonUIFeatures.tsx:120-123`. **FIXED** (doc): the mention-count + unread-dot behavior is intentional (mirrors the favicon); LOTUS_FEATURES now describes it accurately (N = highlights, `·` = other unread).
+
+**Rooms / moderation / notifications / infra / desktop**
+
+- [ ] **[Med] [desktop]** `useTauriFocusAssist` never queries the initial OS Focus-Assist state on mount (unlike `useTauriDnd`, which rehydrates via `get_tray_dnd`) → if Focus Assist is already ON at launch, notifications/sounds leak through until the OS state next flips. Add a `get_focus_assist` mount query (confirm whether the native poll emits an initial reading). `useTauriFocusAssist.ts:18-24`.
+- [x] **[Low]** Push-rule enable toggle holds stale local `useState` after an external rule change (toggled on another device) — sync from the `pushRule.enabled` prop. `PushRuleEditor.tsx:55-79`. **FIXED** (`2c0cd0d2`): `useEffect` resyncs on `pushRule.enabled` change (prop flows from live `useAccountData(m.push_rules)`; no optimistic conflict).
+- [x] **[Low]** Server-support `.well-known/matrix/support` is fetched from `mx.getHomeserverUrl()` (client-API host) instead of the MXID **server-name** host → silently missing on delegated/split-domain servers. `About.tsx:45-47`. **FIXED** (`2c0cd0d2`): fetched from `https://{mx.getDomain()}` (MSC1929-correct); identical for non-delegated, graceful catch otherwise.
+- [x] **[Low]** Cleared/partial quiet-hours `time` input (`''` → window inactive) silently disables the window while the toggle still reads "on" — no feedback. `SystemNotification.tsx:364-382`. **FIXED** (`5175c095`): inline Critical hint when the toggle is on but a time field is empty.
+- [~] **[Low] [desktop]** Native quick-reply swallows send errors (`.catch(() => undefined)`); the `show_rich_toast` trigger has no verified web-side caller. `useTauriToastActions.ts:35-38`. **ROOT CAUSE FOUND + web fix shipped** (`0ddf86c6`): `show_rich_toast` was dead because `showOsNotification` preferred the service worker (WebView2 has one), shadowing the injected `window.Notification` shim. Now skips the SW path under Tauri → notifications route to the rich toast, whose click navigates to the message.
+
+### 🖥️ Desktop notification rich-toast — follow-ups (activated by `0ddf86c6`, need a Windows build)
+
+The web-side nav fix (`0ddf86c6`) makes the native rich-toast path live for the first time. It fixes click→navigate, but exposes latent behaviors in the **cinny-desktop Rust** that need a Windows build to fix + verify:
+
+- [ ] **[Med] [desktop]** **Tag-coalescing lost.** The web SW notification used `tag` to _replace_ prior notifications for the same room; `show_rich_toast` (`cinny-desktop/src-tauri/src/native/toast.rs`) ignores `tag` and shows a new WinRT toast every time → rapid same-room messages stack instead of collapsing. Fix: dedupe/replace by room in the toast store (`toast.rs:226-230`).
+- [ ] **[Med] [desktop]** **Thread / invite quick-reply misroutes.** The reply target is the coalescing `tag` — `${roomId}:${threadId}` for thread replies, `'lotus-invites'` for invites (`ClientNonUIFeatures.tsx:471,192`) — not a real room id, so `mx.sendMessage(tag, …)` fails silently (`useTauriToastActions.ts:37`). Body-click navigation is correct (uses `path`). Fix: pass the real `roomId` separately (e.g. `data.roomId`) and have the shim (`lib.rs` `NOTIFICATION_BRIDGE`) + `toast.rs` use it for the reply target; keep `tag` for coalescing. Invite toasts should also drop the reply box (nothing to reply to).
+- [ ] **[desktop QA] Windows notification checklist** (verify `0ddf86c6` + the above): (1) confirm the pre-fix symptom was focus-without-navigate; (2) message toast → click navigates to the message, quick-reply sends to the room; (3) thread toast → navigates, reply currently misroutes (until fixed above); (4) invite toast → navigates to invites; (5) rapid same-room messages → stacking until coalescing restored; (6) AUMID-missing/dev build → plain-notification fallback still shows; (7) web PWA unaffected.
+- [x] **[Low]** Export-history date-range early-break can over-paginate + mislabel "truncated" in E2EE rooms (`oldestRawTs` only advances on decrypted `m.room.message`, so undecryptable old events never move it). `ExportRoomHistory.tsx:104,136`. **FIXED** (`3ff8fb8e`): boundary now advances on every event (getTs is envelope metadata), above the type/decryption filters; guarded `ts > 0` so a bogus 0-ts can't cause the opposite (silent under-pagination). 2-agent reviewed.
+- [x] **[Info/doc]** `PolicyListViewer` is a manual room-ID/alias viewer with **no** subscribe/unsubscribe controls and no subscribed-lists listing — `LOTUS_FEATURES.md:1287` describes both. Docs oversell; not a runtime bug. **FIXED** (`8a461610`, doc): LOTUS_FEATURES corrected to describe the read-only room-ID/alias viewer (no subscribe controls).
+
+### ✅ Composer autocomplete-insert crash (reported 2026-07) — FIXED (`477df4ae`)
+
+Picking an autocomplete item (mention/emoji/command) occasionally tripped the composer error boundary ("encountered an error" → forced refresh) even though the element inserted. Root-caused (3 agents, incl. a headless slate simulation) to `moveCursor` deferring its cursor work to `setTimeout`, leaving the caret on the just-inserted inline-void's zero-width edge; slate-react's commit-phase `setBaseAndExtent(voidEdge, 1)` then threw `IndexSizeError` mid-render → boundary. **Fix:** do `Transforms.move` (escape the void) + `insertText(' ')` synchronously in the same commit as the insert, so the caret is a resolvable text point when the selection sync runs. Plus a recoverable boundary ("Reload composer" + `onReset` deselect) so any residual composer crash no longer needs a page refresh. (A first "sync insertText without move" attempt was caught in review — the void guard drops the space + traps the caret; `move` is required.)
 
 ### ✅ Unread/read-receipt flakiness (reported 2026-07) — FIXED (pending prod QA)
 
@@ -155,6 +205,31 @@ Genuine Matrix client-spec / MSC features Lotus does **not** yet implement (audi
 
 **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).
 
+### [PARKED] Matrix 2.0 call membership — MSC4354 Sticky Events (investigated 2026-07, 3 agents + live infra check)
+
+Move MatrixRTC/Element Call call-membership from state events (MSC3401) to **sticky events** — the "Matrix 2.0" path. **Not a flag flip; a coordinated rollout. Parked deliberately.**
+
+Findings:
+
+- **Server (Synapse 1.157.1, LXC 151):** `msc4354_enabled` defaults `false`. Enabling is **low-risk, additive, reversible** — schema (`sticky_events` table) already ships unconditionally, no migration/backfill, all runtime paths flag-gated, residual rows self-expire ≤1h. The one historical `/sync` EDU-filter bug (#19787) was fixed in 1.155.0; SQLite guard N/A (we're Postgres).
+- **The flag alone is a no-op for behavior.** Our EC fork (upstream **v0.20.1** base, `@lotusguild/element-call-embedded`, bundled into Cinny at build → fleet upgrades atomically) gates sticky mode behind BOTH server support AND a per-device **developer-settings** radio (`matrix-rtc-mode`, defaults `Legacy`). Enabling the flag only un-greys that radio; no client changes what it sends until a human toggles it.
+- **Matrix-layer mixed-mode = safe:** js-sdk (v41.6.0) reads + merges sticky and state membership, so cross-mode participants see each other.
+- **Open risk before any real rollout:** media layer. Sticky mode drops `livekit_alias` + uses lk-jwt-service `/get_token` (slot `m.call#ROOM`); legacy uses `/sfu/get` (`room=roomId`). Both endpoints are **live** on our lk-jwt-service, but whether they resolve to the **same LiveKit room** is unverified — must confirm with a **two-account cross-mode test call** (one device `Matrix_2_0`, one `Legacy`) before changing the default, else split-at-media.
+
+To actually adopt (future): (1) enable `msc4354_enabled: true` + restart; (2) two-account media-interop test; (3) if unified, flip EC default mode `Legacy`→`Compatibility`/`Matrix_2_0` in the fork + redeploy; (4) keep legacy fallback during transition. **No user benefit until step 3.**
+
+### [ ] Matrix 2.0 call membership — MSC4354 sticky events (INVESTIGATED 2026-07, deliberately NOT enabled)
+
+3-agent investigation after the 1.157.1 upgrade (EC-fork behavior · Synapse/upstream readiness · client-fleet composition). **Conclusion: leave `msc4354_enabled` OFF for now** — enabling it is safe but delivers **zero user-visible benefit on its own**, and introduces a latent footgun.
+
+**Why it's a no-op alone:** the EC fork's `doesServerSupportUnstableFeature(MSC4354)` probe feeds **exactly one thing** — whether the "Matrix 2.0" radio in **Developer Settings** is greyed out (`DeveloperSettingsTab.tsx:349-353`). The real switch is the per-device `matrixRTCMode` setting (`settings.ts:149-152`), which **defaults to `Legacy`** and never auto-enables. Sticky sending is gated at `LocalMember.ts:862` (`unstableSendStickyEvents: mode === Matrix_2_0`). So flipping the server flag changes nothing any client sends.
+
+**Verified safe:** Synapse-side is **additive and cleanly reversible** — the `sticky_events` schema ships unconditionally (no migration/backfill on enable), every write/read/serialize/replication path is flag-gated, disabling stops it instantly and residual rows self-expire ≤1h. The one relevant bug (#19787 `/sync` EDU-filter) was fixed in 1.155.0; the SQLite<3.40 guard doesn't apply (we're on PG 17.10). Matrix-layer **mixed-mode visibility is safe**: js-sdk `collectMembersEvents` reads **both** sticky and state membership and merges them, so sticky-mode and legacy-mode participants see each other. Our `lk-jwt-service` already serves **both** JWT endpoints (legacy `/sfu/get` **and** the sticky-mode `/get_token` — both probed live, 400-with-validation-error = present). EC is bundled into cinny's build (`@lotusguild/element-call-embedded`), so the fleet upgrades **atomically** — the "all EC clients ≥ v0.17.0" precondition is structurally guaranteed for our own users.
+
+**The one unresolved risk (blocks a real rollout, not the flag):** sticky mode drops `livekit_alias` and uses `/get_token` (slot `m.call#ROOM`) while legacy uses `/sfu/get` (`room=roomId`). **Whether both resolve to the same LiveKit room is a property of lk-jwt-service, not the client** — unverified. If they diverge, cross-mode participants appear in each other's member list but are **split at the media layer** (silent, no error). Requires a **two-account test call** (one device on Legacy, one on Matrix 2.0) to confirm before anyone relies on it.
+
+**If we ever do this:** (1) run the two-account media-interop test; (2) only then consider enabling `msc4354_enabled: true` in `/etc/matrix-synapse/homeserver.yaml` (LXC 151) + restart; (3) treat a default-mode change as a separate coordinated EC rollout. MSC4354 is still **OPEN upstream** (not in FCP, `needs-implementation`), so this stays experimental regardless.
+
 ### 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**:
@@ -209,13 +284,25 @@ Shipped in the EC fork (DeepFilterNet3 default-capable / DTLN / RNNoise / Speex;
 
 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
+### [~] Mobile audit — code-level pass DONE (device QA + deferred items open)
 
-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.
+Comprehensive **code-level** responsive audit of the LOTUS_FEATURES surface (12 survey agents — 6 area slices + 6 deep per-feature dives — each finding verified, fixed in reviewed batches, then a 5-agent all-files regression+efficacy gate; gate-green tsc/eslint/857 tests/build). Shipped `lotus` commits `d6159997` `836e4a66` `4c298a36` `09415f95` `36fdbdd3` `154e35ef` `09f37f89` (M1–M6 + N1–N2): message-table/composer/call-bar/url-preview/explore overflow fixes; full-screen media/file/avatar viewers + touch-pan for zoomed images; full-screen scrollable member profile (+close btn); native SettingsSelect + tile-body volume sliders + measured GifPicker; full-screen Report/"Seen by" dialogs + full-width toasts + popover clamps; **image/video aspect-ratio (no crop/letterbox on phones)**; 44px room-row + space-rail touch targets. The app was found **structurally sound** on mobile (thread panel, dialogs, drawers, settings shells, ACL/widgets/search/QR/auth all already responsive).
+
+Intentional desktop deltas (disclosed, non-regressive): volume sliders below labels; Report dialog 380→480px & "Seen by" modals 460→360px (sibling-modal normalization); translate select → folds SettingsSelect.
+
+**NOT done — needs a real device / product decisions (open):**
+
+- [ ] **Runtime mobile QA** — none of the above is validated on an actual phone (static analysis only). Needs device/devtools walk-through per LOTUS_TESTING §E.
+- [x] **Element Call fork in-call mobile UI** — DONE (`element-call:lotus` `e36aef8a`, 3-agent survey + 2-agent review). Fixed the EC iframe's own phone UI: footer control row wraps so hangup can't clip (320–500px), portrait 1:1 self-PiP safe-area inset, 44px camera-flip + reaction-picker targets, settings-tab horizontal scroll, landscape spotlight filmstrip. All mobile-gated (EC is mobile-first CSS). Rides to users on the next fork republish (P6-2). Runtime on-device QA still pending (needs a phone).
+- [ ] **M2 — touch discoverability** — message quick-reactions/actions are hover-gated; long-press is the fallback but is **unreliable on iOS Safari** (deep audit). A visible touch affordance is needed but the naive fix hides unread badges / clutters messages (member-profile-style redesign).
+- [~] **Sub-44px touch-target sweep** — primary controls DONE via a shared `MobileTouchTarget` `@media` class (`P1`, `8a1168bc`): in-call bar ×7, call-status bar ×4, thread "N replies" chip, knock Approve/Deny, ACL remove. Secondary batch DONE (`r2`, `72e7447d`): image-viewer close/zoom±/zoom%/download, embed-player Close/Collapse/Fullscreen/View-post, read-receipt "seen by" pill. **Deferred (rationale, not built):** PiP fullscreen/resize handles — enlarging four 24px corners to 44px would swallow a ~160px mobile PiP and block "Return to call" (needs a design rethink, not a blunt bump); presence dot is a non-interactive status indicator (no target needed).
+- [x] **Avatar-decoration `prefers-reduced-motion`** — DONE (`P2`, `c3e1fbff`): renders just the avatar (no animated APNG overlay) under the preference; no static-frame asset to freeze to.
+- [x] **Twitch/Twitter/TikTok preview cards** — DONE (`r2`, `72e7447d`). These fragment cards render header/thumbnail beside content as direct children of the `UrlPreview` flex row; added `StackOnMobile` (mobile-only `@media (max-width:750px){ flex-direction:column }`) scoped to those variants via `cardClass`. folds `Box` has no default `direction` so the override wins uncontested; desktop unchanged (verified by 2 review agents). Pre-existing desktop quirk (header bar beside content on Twitter/TikTok at desktop width) left as-is — the fuller fix is wrapping each card body in a column `Box`; out of scope for a mobile pass.
+- [ ] **M2 — message action/quick-reaction touch discoverability** — hover-gated + iOS-long-press-unreliable; a visible touch affordance collides with unread-badge placement / per-message clutter → needs a design decision + device look.
 
 ### [ ] Inline media embeds — remaining providers (LOW PRIORITY)
 
-The inline embed system (`videoEmbed.ts`) covers 16 providers; three more were **deliberately deferred** (verified against 2026 docs by review agents):
+The inline embed system (`videoEmbed.ts`) covers 18 providers (16 + Mixcloud/Deezer); three more were **deliberately deferred** (verified against 2026 docs by review agents):
 
 - **Bandcamp** (highest-value audio add) — needs an **oEmbed** round-trip: the player URL requires numeric `album`/`track` item ids that aren't in the page URL (`bandcamp.com/oembed` is the resolver; mirror the `TikTokEmbedCard` on-click oEmbed pattern). CSP `frame-src`: `bandcamp.com`. Classify `kind: 'audio'`.
 - **SoundCloud `on.soundcloud.com` short links** — the `w.soundcloud` widget resolver does **not** follow the redirect; needs the same on-click oEmbed resolve (`soundcloud.com/oembed`, CORS-enabled) to get the canonical URL. (Canonical `soundcloud.com/{user}/{track}` links already work.)
@@ -223,6 +310,19 @@ The inline embed system (`videoEmbed.ts`) covers 16 providers; three more were *
 
 Also open (from the quality review): a real `onError`/error-state fallback for iframes that fail to load (deleted post / region lock / X login-wall) — cross-origin frames don't fire `onError` reliably, so this needs a load-timeout heuristic; the Close button + badge link are the current escape hatch.
 
+**✅ Steam detailed embed (2026-07, 2-agent review) — `ef82650c`.** `store.steampowered.com` content URLs get rich cards: **app** pages → OG capsule header + click-to-play facade → Steam's official `/widget/{id}` store iframe (live region-aware price / discount % / Buy on Steam, gated by `inlineMediaEmbeds`); **news/announcement** → banner + headline + body-preview card; **bundle/sub/dlc** → OG store card. `getSteamTarget`/`steamWidgetEmbedUrl` in `videoEmbed.ts` (+tests). Grounded in prod CSP (`frame-src https:` allows the widget with no infra change; images via homeserver `mxc`; NO client-side Steam API — `connect-src` + Steam CORS both block it, which is the honest ceiling: no review scores/genres/screenshots client-side). **Needs on-device QA:** the live widget iframe height/fit (can't render headlessly) — verify the price/Buy stay visible on desktop-wide and phone.
+
+**✅ GIF previews now animate + Mixcloud/Deezer embeds (2026-07, 2-agent review) — `4154cae5`.** Reported live: a `media.giphy.com` link "shows the gif's image but doesn't play it." Root cause: **Synapse's `/thumbnail` endpoint flattens animated GIFs to a still first frame**, and every preview image went through it. `GifCard` (Giphy/Tenor) + the generic OG card now request the **original** via `/download` (`mxcUrlToHttp` with no width/height) when the preview is a GIF (`og:image:type === 'image/gif'` or a `.gif` pathname). Guarded: `shouldServeGifOriginal()` keeps the frozen thumbnail past a **10 MB** `matrix:image:size` cap, and the generic card's eager `<img>` gained the `loading="lazy"` it was the only preview image missing. Also added **Mixcloud + Deezer** audio embeds, and fixed Deezer podcasts (they live at `/show/<id>`, **not** `/podcast/<id>` — the latter 404s on Deezer's own oEmbed; verified against the live API). **Needs on-device QA:** confirm a large GIF still animates and doesn't stall the timeline.
+
+**✅ Embed bug hunt (2026-07, 3 survey agents + 2-agent review) — `f2673eff`.** Core posture verified **sound** (iframe sandbox, `useIframeAutoHeight` postMessage origin+source trust, no XSS/`dangerouslySetInnerHTML`, `rel="noreferrer"` on all 21 links, oEmbed no-SSRF, the whole facade→iframe/abort/observer lifecycle). Fixed: Twitch/Kick/SoundCloud/Streamable reserved-path over-match (utility pages rendered as broken players), Vimeo hash over-capture (`[0-9a-f]{6,}`), Spotify/Steam/Discord/IMDb `og:image` now via `mxcUrlToHttp` (was a broken raw `mxc://` `<img>` + a pre-click 3p-request facade bypass), `wide` class follows the og:url-resolved embed, Twitter host alignment (`mobile.twitter.com`/`/statuses/`), URL de-dupe.
+
+**Deferred / surfaced from the hunt (not fixed — decide before doing):**
+
+- **Security-vs-functionality tradeoff (needs a call):** drop `allow-popups-to-escape-sandbox` and/or `clipboard-write` from `EMBED_SANDBOX`/`allow=` on embed iframes — real hardening against a _compromised_ provider (phishing popup / clipboard hijack), but risks breaking a legit provider popup/copy on the trusted major providers we embed. Low marginal value; not shipped blindly.
+- **Defense-in-depth:** `encodeURIComponent` the Bluesky authority + Apple Music path/search interpolated into the embed `src` (not currently exploitable — host is fixed and value comes from `URL.pathname`; React escapes the attribute).
+- **Out of embed scope (real, low-sev):** `LotusDenoiseFeature` (`ClientNonUIFeatures.tsx`) has a `window` `message` listener with **no origin/source check** → any frame/window can post `{type:'lotus-denoise-status', error}` and pop a forged **"System"** toast (text only, no XSS). Validate `event.source`.
+- **Lifecycle Lows (cosmetic/latent):** a re-fetch flips a playing embed back to the spinner (latent — url is keyed); auto-height retained across close→reopen; `extractEmbedHeight` generic `.height` fallback accepts any allowed-origin message; `TweetEmbed` theme is a one-time `matchMedia` snapshot (no live theme switch); host-normalization gaps (`vt.tiktok.com` misses `StackOnMobile`, `m.instagram.com`, `www.youtu.be`).
+
 ### 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`.
@@ -231,11 +331,11 @@ Also open (from the quality review): a real `onError`/error-state fallback for i
 
 ## 🚫 Blocked Features (server / upstream gated)
 
-Re-run `/_matrix/client/versions` + `unstable_features` after each Synapse upgrade.
+Re-run `/_matrix/client/versions` + `unstable_features` after each Synapse upgrade. **Re-checked on 1.157.1 (2026-07-23): no change — all four below are still `false`.** The 1.156.0→1.157.1 delta unblocked nothing (it's a bugfix release; the only feature-bearing release in the gap was 1.156.0, which we were already running).
 
 - **[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.
-- **[DONE 2026-07] Room Preview before joining** (MSC3266) — the client was always built (`JoinBeforeNavigate` → `RoomCard` via `mx.getRoomSummary`). The earlier "blocked" flag was a **misdiagnosis**: it tested `/v1/rooms/{id}/summary` (404), but the SDK calls the *unstable* `im.nheko.summary/summary/{id}` path, which returns **200** with name/topic/members/join_rule. Verified live after the 1.156 upgrade; also added a join-rule/encryption chip + Request-to-join for knock rooms to the preview card.
+- **[DONE 2026-07] Room Preview before joining** (MSC3266) — the client was always built (`JoinBeforeNavigate` → `RoomCard` via `mx.getRoomSummary`). The earlier "blocked" flag was a **misdiagnosis**: it tested `/v1/rooms/{id}/summary` (404), but the SDK calls the _unstable_ `im.nheko.summary/summary/{id}` path, which returns **200** with name/topic/members/join_rule. Verified live after the 1.156 upgrade; also added a join-rule/encryption chip + Request-to-join for knock rooms to the preview card.
 - **[BLOCKED] Thread Subscriptions** (MSC4306 `false`) — "Follow thread" button (depends on the shipped Thread Panel).
 
 ---
@@ -244,8 +344,9 @@ Re-run `/_matrix/client/versions` + `unstable_features` after each Synapse upgra
 
 ### Server Capabilities (as of 2026-07)
 
-- **Homeserver** `matrix.lotusguild.org` · **Synapse** `1.156.0+trixie1` (upgraded 2026-07-07 from 1.155; apt package on Debian 13, LXC 151) · **Matrix spec** up to `v1.12` (Synapse still advertises v1.12; MSC features via `unstable_features`).
-- **MSC ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` (room summary live at unstable `im.nheko.summary/summary/{id}` — 200; the `/v1/rooms/{id}/summary` path is still 404) · `msc3401_matrix_rtc`. **OFF/blocked:** `msc4306` · `msc3882` · `msc3912` · `msc4155` · `msc3489`/`msc3672` · `msc3892`.
+- **Homeserver** `matrix.lotusguild.org` · **Synapse** `1.157.1+trixie1` (upgraded 2026-07-23 from **1.156.0** — note the host was found on 1.156.0 while the docs claimed 1.155.0, so **always verify with `dpkg-query -W matrix-synapse-py3`**, don't trust the docs; apt package on Debian 13, LXC 151) · **Matrix spec** up to `v1.12` (Synapse still advertises v1.12; MSC features via `unstable_features`).
+- **MSC ON** (re-dumped live from `/_matrix/client/versions` on 1.157.1): `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` (room summary live at unstable `im.nheko.summary/summary/{id}` — 200; the `/v1/rooms/{id}/summary` path is still 404) · `msc3401_matrix_rtc` · `msc2285.stable` · `msc3827.stable` · `msc3981` · `msc4380.stable` · `msc4445` · `msc2659.stable` · `msc2666` · `msc2432` · `e2e_cross_signing` · `label_based_filtering`. **OFF/blocked:** `msc4306` · `msc3882` · `msc3912` · `msc4155` · `msc3489`/`msc3672` · `msc3892` · `msc4028` · `msc4069` · `msc4108` · `msc3391` · `msc4354` (sticky events — **deliberately off**, see the Matrix 2.0 section above) · `msc4143` (RTC foci — **not a gap**: LiveKit is discovered via `.well-known` `org.matrix.msc4143.rtc_foci`, confirmed live, not this flag).
+- **Dead client code:** Synapse 1.157.0 **removed** `msc3861` (MAS auth delegation) entirely — the ~6 `msc3861`/`msc2965` references in `src/` can never activate against this homeserver (we auth via Authelia `oidc_providers`). Harmless, but cleanup material.
 - **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`.
@@ -292,8 +393,20 @@ Also flag-gated: `lotusTransparent`/`lotusTheme`, `lotusDenoiseSource=1` (in-sou
 
 ```
 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)
+→ Gitea Actions (.gitea/workflows/ci.yml): npm ci → build + npm test + tsc + eslint + prettier (ALL hard gates) → audit + bundle-size (informational)
+→ lotus_deploy.sh on LXC 106 polls the "Build & Quality Checks" status → 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`.
+
+**CI hardening (2026-07, reviewed):**
+
+- [x] **Concurrency** — `cancel-in-progress` on cinny `ci.yml` and cinny-desktop `release.yml` (`386a2979` / `c5461ce`): a superseded lotus push cancels its in-flight web CI and collapses queued ~30-min Tauri desktop builds to just the newest. Safe for deploys because `lotus_deploy.sh` now **follows origin/lotus HEAD** each poll iteration + resets to the gated SHA (`matrix` `c15a489`) — closes the latched-SHA freeze race.
+- [x] **Hard quality gates** — typecheck/eslint/prettier promoted from `continue-on-error` to blocking (tree held clean). eslint gates on errors only; `no-explicit-any` warnings stay informational.
+
+**CI follow-ups (open):**
+
+- [ ] **Dedicated `desktop-linux` runner** (infra) — concurrency only collapses _burst_ stacking; a single in-flight `build-linux` (Tauri, `ubuntu-latest`) still shares the runner with web CI and can queue a web CI/deploy up to ~30 min. Fix = register a 2nd Linux act_runner labelled `desktop-linux` (root, network, RAM for a Tauri build; do NOT also label it `ubuntu-latest`) and point only `build-linux: runs-on` at it. Relabeling without a matching runner hangs the job forever.
+- [ ] **Debounce the desktop trigger** — `trigger-desktop` fires a full desktop build on _every_ lotus commit; consider tag/`workflow_dispatch`/schedule-gating to decouple desktop cadence from web commits (biggest remaining runner-load source).
+- [ ] **Verify Gitea ≥ 1.24** actually honors workflow `concurrency` (older silently ignores it → safe no-op, but the change is then inert — confirm on a test burst).
+- [ ] **Deferred (chosen-not-now):** build-once/deploy-the-artifact (kill the CI-then-deploy double build); CI-gate the `lotus-build.sh` upstream-merge path (currently builds+deploys+then pushes, bypassing CI).

README.md

@@ -13,7 +13,38 @@ The source code is licensed under [AGPLv3](LICENSE), the same license as the ups
 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.
 
 ---
-
+## Development Environment Setup
+#### Getting correct Node version
+- Ensure you have the correct version of node installed, specified in `.node-version`
+- Use this command from the terminal to install nvm 
+```bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
+``` 
+- Reload your terminal shell using (for Ubuntu):
+```bash
+source ~/.bashrc
+```
+- Install the specified Node version 
+```bash
+NODE_VERSION="$(tr -d '[:space:]' < .node-version)"
+nvm install "$NODE_VERSION"
+nvm use "$NODE_VERSION"
+```
+- verify the correct version was installed by running
+```bash
+node --version
+```
+and comparing the output to what is listed in `.node-version`
+#### Install npm packages
+- To install the npm packages listed in `package.json` run: 
+```bash
+ npm i 
+ ```
+### Start Development Server
+```bash
+npm run start
+```
+You should now have an active development server at `localhost:8080`, where you can make changes to the code and see the UI update in real time
 ## Features
 
 ### Messaging
@@ -36,6 +67,7 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
 - 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)
+- On-device message translation — foreign-language messages show a "Translate" action, then an inline "Translated from <language> · Show original" toggle. Runs entirely on your device via the browser's built-in translation models, so message text never leaves your device or touches a cloud service (no Google/DeepL/Microsoft) — preserving end-to-end encryption. Pick your target language and optionally auto-translate incoming messages at Settings → General → Messages. Chromium desktop (Chrome/Edge 138+) and the Lotus desktop app only; hidden where unavailable (Firefox, Safari, mobile)
 - 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
@@ -166,6 +198,23 @@ The source code lives in `/root/code/cinny`. All changes should be made on the `
 
 See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_TODO.md](LOTUS_TODO.md) for the work backlog.
 
+### Local Development
+
+Lotus Chat is a **pure client — there is no backend of its own to run.** It talks directly to a Matrix homeserver (Synapse) over HTTPS, so the only thing you run locally is the Vite dev server; it connects to a real homeserver for all data. If you were looking for "the backend to pair with it," there isn't one — that's the homeserver.
+
+**Prerequisites:** Node 20+ (CI builds on Node 24) and npm.
+
+```bash
+npm ci        # deps; @lotusguild/* come from our Gitea npm registry (public read — no auth/token needed)
+npm start     # Vite dev server → http://localhost:8080
+```
+
+The dev server defaults to **port 8080** (`vite.config.js`); if 8080 is already in use it falls through to 8081+, so check the "Local:" URL Vite prints on startup. If it boots but the page renders blank, it's almost always a failed module/asset resolution, not a "missing backend" — open the devtools console and read the first error.
+
+**Which homeserver / logging in:** `config.json` sets `defaultHomeserver: 0` → `matrix.lotusguild.org`, so you sign in with your normal `@you:matrix.lotusguild.org` account. That homeserver is **live production** — anything you send is real, so keep test traffic to a DM with yourself or a throwaway room. To develop fully isolated instead, point `config.json` at a throwaway `matrix.org` account (already in `homeserverList`) or a local Synapse.
+
+- **SSO / OIDC works from localhost.** Login goes through Authelia via OIDC dynamic registration; the provider redirects back to `http://localhost:8080/…` and the client registers that redirect on the fly, so no server-side allow-listing is needed. After the callback you may see a `GET …/_matrix/media/v1/thumbnail/… 404` — that's just a missing avatar thumbnail, **not** a login failure.
+
 ### 🔱 Element Call fork ("Lotus Call") — LIVE
 
 Voice/video channels embed **Element Call**, which is now our **self-built fork**

eslint.config.mjs

@@ -109,7 +109,7 @@ export default [
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
       ],
       '@typescript-eslint/no-shadow': 'error',
-      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-explicit-any': 'off',
 
       // jsx-a11y — media captions not required for this app
       'jsx-a11y/media-has-caption': 'off',

package.json

@@ -12,13 +12,12 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "npm run check:eslint && npm run check:prettier",
-    "check:eslint": "eslint src/*",
+    "check:eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "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"
   },
@@ -26,11 +25,6 @@
     "*.{ts,tsx,js,jsx}": "eslint",
     "*": "prettier --ignore-unknown --write"
   },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
   "keywords": [],
   "author": "Ajay Bura",
   "license": "AGPL-3.0-only",
@@ -43,7 +37,7 @@
     "@fontsource-variable/inter": "5.2.8",
     "@giphy/js-fetch-api": "5.8.0",
     "@giphy/js-types": "5.1.0",
-    "@giphy/js-util": "5.2.0",
+    "@giphy/js-util": "2.0.0",
     "@giphy/react-components": "10.1.2",
     "@sapphi-red/web-noise-suppressor": "0.3.5",
     "@tanstack/react-query": "5.100.13",
@@ -95,7 +89,7 @@
     "react-i18next": "17.0.8",
     "react-range": "1.10.0",
     "react-router-dom": "7.15.1",
-    "sanitize-html": "2.17.4",
+    "sanitize-html": "2.17.6",
     "slate": "0.124.1",
     "slate-dom": "0.124.1",
     "slate-history": "0.113.1",
@@ -130,6 +124,7 @@
     "cz-conventional-changelog": "3.3.0",
     "eslint": "9.39.4",
     "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
@@ -149,5 +144,8 @@
       "dompurify": ">=3.3.4"
     },
     "js-cookie": ">=3.0.6"
+  },
+  "allowScripts": {
+    "esbuild@0.28.1": true
   }
 }

src/app/components/CallEmbedProvider.tsx

@@ -42,7 +42,7 @@ 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 { previewRingtone, startRingtone, unlockRingtoneAudio } from '../utils/ringtones';
 import { useCallMembersChange, useCallSession } from '../hooks/useCall';
 import { useCallJoinLeaveSounds } from '../hooks/useCallJoinLeaveSounds';
 import { useCallQuality } from '../hooks/useCallQuality';
@@ -473,8 +473,16 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       const sender = event.getSender();
       const content = event.getContent<IRTCNotificationContent>();
+      // Trust the caller's sender_ts only when it's within 20s of the server's
+      // timestamp in EITHER direction. A fast caller clock made a fresh invite
+      // look expired-in-the-future; a SLOW one left sender_ts in the past so
+      // `Date.now() >= senderTs + lifetime` hid/dismissed the ring for a
+      // genuinely fresh invite (COR-3). Fall back to the server ts on large skew.
       const senderTs =
-        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
+        typeof content.sender_ts === 'number' &&
+        Math.abs(content.sender_ts - event.getTs()) <= 20000
+          ? content.sender_ts
+          : event.getTs();
       const lifetime = Math.min(content.lifetime, 120000);
       const notificationType = content.notification_type;
       const relation =
@@ -695,6 +703,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
 
   const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
 
+  // C-L3 — prime the ringtone AudioContext on the first user gesture of the
+  // session so the first incoming-call ring isn't silent (a fresh context stays
+  // suspended until a gesture, and an incoming ring has none of its own).
+  useEffect(() => {
+    const prime = () => {
+      unlockRingtoneAudio();
+      window.removeEventListener('pointerdown', prime);
+      window.removeEventListener('keydown', prime);
+    };
+    window.addEventListener('pointerdown', prime, { once: true, passive: true });
+    window.addEventListener('keydown', prime, { once: true, passive: true });
+    return () => {
+      window.removeEventListener('pointerdown', prime);
+      window.removeEventListener('keydown', prime);
+    };
+  }, []);
+
   // Sync pip mode into CallControl so it can adjust behavior accordingly
   useEffect(() => {
     if (!callEmbed) return;
@@ -706,8 +731,24 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   // When screenshare ends, release the spotlight we auto-enabled.
   const pipAutoSpotlightRef = React.useRef(false);
   useEffect(() => {
-    if (!pipMode || !callEmbed) return;
-    if (pipScreenshare) {
+    if (!callEmbed) {
+      // The embed (and its spotlight) is torn down with the call; drop the latch
+      // so a stale ref can't act on the next call's fresh embed.
+      pipAutoSpotlightRef.current = false;
+      return;
+    }
+    // Spotlight is wanted only while in pip with an active screenshare. Release
+    // it when EITHER ends — including leaving pip (returning to the call room).
+    // The release must not sit behind a `!pipMode` early-return, or a
+    // screenshare→pip→back sequence leaves the auto-enabled spotlight stuck on
+    // with pipAutoSpotlightRef latched true. The ref gates release so we only
+    // ever undo a spotlight we turned on (never one the user set).
+    // NB: `control.spotlight` is read below but deliberately NOT a dependency —
+    // this effect reacts to pip/screenshare *intent*, not to spotlight changes.
+    // Adding it as a dep would re-run on every manual spotlight toggle and fight
+    // the user.
+    const wantSpotlight = pipMode && pipScreenshare;
+    if (wantSpotlight) {
       if (!callEmbed.control.spotlight) {
         callEmbed.control.toggleSpotlight();
         pipAutoSpotlightRef.current = true;

src/app/components/GifPicker.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useAtom } from 'jotai';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
 import { Box, color, config } from 'folds';
+import { useElementSizeObserver } from '../hooks/useElementSizeObserver';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { addRecentGif, RecentGif, recentGifsAtom } from '../state/recentGifs';
@@ -146,8 +147,18 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
 
   const showRecents = recents.length > 0 && !(term ?? '').trim();
 
+  // The container is min(312px, 100vw-16); feed the Grid the live pixel width
+  // (minus the inner 8px padding on each side) so it doesn't overflow a phone
+  // narrower than 312px with a fixed 296px grid.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [gridWidth, setGridWidth] = useState(PICKER_WIDTH - 16);
+  useElementSizeObserver(
+    useCallback(() => containerRef.current, []),
+    useCallback((w) => setGridWidth(Math.max(1, Math.floor(w) - 16)), []),
+  );
+
   return (
-    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }}>
+    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }} ref={containerRef}>
       {lotusTerminal && (
         <div
           style={{
@@ -178,7 +189,7 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         <Grid
           key={searchKey}
           fetchGifs={fetchGifs}
-          width={PICKER_WIDTH - 16}
+          width={gridWidth}
           columns={2}
           gutter={4}
           onGifClick={handleClick}

src/app/components/RenderMessageContent.tsx

@@ -88,8 +88,9 @@ export function RenderMessageContent({
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     // Cap previews per message so a link-dump doesn't spawn dozens of preview
-    // fetches + iframes at once.
-    const filteredUrls = urls.filter((url) => !testMatrixTo(url)).slice(0, 6);
+    // fetches + iframes at once. De-dupe first: a message linking the same URL
+    // twice would otherwise render sibling cards with identical React keys.
+    const filteredUrls = [...new Set(urls.filter((url) => !testMatrixTo(url)))].slice(0, 6);
     if (filteredUrls.length === 0) return undefined;
     return (
       <UrlPreviewHolder>

src/app/components/UserRoomProfileRenderer.tsx

@@ -1,5 +1,19 @@
 import React from 'react';
-import { Menu, PopOut, toRem } from 'folds';
+import {
+  Box,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  PopOut,
+  config,
+  toRem,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
 import { UserRoomProfile } from './user-profile';
@@ -8,6 +22,20 @@ import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
 import { stopPropagation } from '../utils/keyboard';
 import { SpaceProvider } from '../hooks/useSpace';
 import { RoomProvider } from '../hooks/useRoom';
+import { ScreenSize, useScreenSize } from '../hooks/useScreenSize';
+
+// Matches useModalStyle's mobile branch: fill the phone screen with internal
+// scroll so tall profiles (moderation actions, device list, notes) are fully
+// reachable — the anchored 340px popout below can't scroll and clipped them.
+const MOBILE_FULLSCREEN = {
+  width: '100%',
+  height: '100%',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  borderRadius: 0,
+  display: 'flex',
+  flexDirection: 'column',
+} as const;
 
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
   const { roomId, spaceId, userId, cords, position } = state;
@@ -15,32 +43,61 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
   const getRoom = useGetRoom(allJoinedRooms);
   const room = getRoom(roomId);
   const space = spaceId ? getRoom(spaceId) : undefined;
+  const screenSize = useScreenSize();
 
   const close = useCloseUserRoomProfile();
 
   if (!room) return null;
 
+  const profile = (
+    <SpaceProvider value={space ?? null}>
+      <RoomProvider value={room}>
+        <UserRoomProfile userId={userId} />
+      </RoomProvider>
+    </SpaceProvider>
+  );
+
+  const focusTrapOptions = {
+    initialFocus: false,
+    onDeactivate: close,
+    clickOutsideDeactivates: true,
+    escapeDeactivates: stopPropagation,
+  };
+
+  // On phones, render as a full-screen scrollable modal instead of an anchored,
+  // fixed-width, unscrollable popout.
+  if (screenSize === ScreenSize.Mobile) {
+    return (
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap focusTrapOptions={focusTrapOptions}>
+            <Modal size="500" style={MOBILE_FULLSCREEN}>
+              {/* Full-screen covers the backdrop (no tap-to-dismiss) and the
+                  profile has no self-close, so provide an explicit close. */}
+              <Header size="600" style={{ flexShrink: 0, paddingRight: config.space.S200 }}>
+                <Box grow="Yes" />
+                <IconButton size="300" radii="300" onClick={close} aria-label="Close">
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              </Header>
+              <Box grow="Yes" style={{ overflow: 'hidden auto' }}>
+                {profile}
+              </Box>
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    );
+  }
+
   return (
     <PopOut
       anchor={cords}
       position={position ?? 'Top'}
       align="Start"
       content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: close,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu style={{ width: toRem(340) }}>
-            <SpaceProvider value={space ?? null}>
-              <RoomProvider value={room}>
-                <UserRoomProfile userId={userId} />
-              </RoomProvider>
-            </SpaceProvider>
-          </Menu>
+        <FocusTrap focusTrapOptions={focusTrapOptions}>
+          <Menu style={{ width: toRem(340) }}>{profile}</Menu>
         </FocusTrap>
       }
     />

src/app/components/VoiceMessageRecorder.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
+import { MobileTouchTarget } from '../styles/mobile.css';
 
 type RecorderState = 'idle' | 'recording' | 'paused' | 'preview';
 
@@ -239,6 +240,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
   if (state === 'idle') {
     return (
       <IconButton
+        className={MobileTouchTarget}
         onClick={startRecording}
         aria-label="Record voice message"
         variant="SurfaceVariant"

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
+import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { decorationUrl } from '../../features/lotus/avatarDecorations';
 
 const DEFAULT_INSET = 8;
@@ -16,8 +17,14 @@ export function AvatarDecoration({
   inset = DEFAULT_INSET,
 }: AvatarDecorationProps) {
   const slug = useAvatarDecoration(userId);
+  const reducedMotion = useReducedMotion();
 
-  if (!slug) {
+  // Decorations are animated APNGs with no static asset to freeze to, so honor
+  // prefers-reduced-motion by not rendering the animation at all (consistent
+  // with the rest of the theming stack — chat backgrounds / seasonal overlays —
+  // which all suppress motion under this preference; also avoids dozens of live
+  // APNGs animating in scrolling mobile lists).
+  if (!slug || reducedMotion) {
     return <>{children}</>;
   }
 

src/app/components/editor/Editor.css.ts

@@ -16,9 +16,23 @@ export const EditorOptions = style([
   DefaultReset,
   {
     padding: config.space.S200,
+    '@media': {
+      // On phones the toolbar can hold many 44px buttons; let them wrap to a
+      // second line instead of overflowing horizontally.
+      '(max-width: 750px)': { flexWrap: 'wrap' },
+    },
   },
 ]);
 
+// The composer's before | editable | after row. On phones, allow the toolbar
+// (`after`) to wrap below the input instead of squeezing the editable to zero
+// and pushing the Send button off-screen.
+export const EditorInputRow = style({
+  '@media': {
+    '(max-width: 750px)': { flexWrap: 'wrap' },
+  },
+});
+
 export const EditorTextareaScroll = style({});
 
 export const EditorTextarea = style([

src/app/components/editor/Editor.tsx

@@ -124,7 +124,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       <div className={css.Editor} ref={ref}>
         <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
           {top}
-          <Box alignItems="Start">
+          <Box className={css.EditorInputRow} alignItems="Start">
             {before && (
               <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
                 {before}

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

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
+import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
 import { JoinRule, MatrixClient } from 'matrix-js-sdk';
@@ -80,7 +80,14 @@ export function RoomMentionAutocomplete({
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
 
-  const allRooms = useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx));
+  // Copy before sorting: `.sort()` mutates in place, and `allRoomsAtom`'s array
+  // is shared app-wide — sorting it here reorders it for every other consumer.
+  // Also memoize so a keystroke doesn't re-run the O(N log N) getRoom compare.
+  const allRoomsList = useAtomValue(allRoomsAtom);
+  const allRooms = useMemo(
+    () => [...allRoomsList].sort(factoryRoomIdByActivity(mx)),
+    [allRoomsList, mx],
+  );
 
   const [result, search, resetSearch] = useAsyncSearch(
     allRooms,

src/app/components/editor/output.test.ts

@@ -7,8 +7,7 @@ import { BlockType } from './types';
 // Loose Slate node builders for the test.
 const txt = (text: string, marks: Record<string, unknown> = {}) =>
   ({ text, ...marks }) as unknown as Descendant;
-const el = (type: BlockType, children: unknown[]) =>
-  ({ type, children }) as unknown as Descendant;
+const el = (type: BlockType, children: unknown[]) => ({ type, children }) as unknown as Descendant;
 
 const OPTS = {
   allowTextFormatting: true,

src/app/components/editor/output.ts

@@ -42,7 +42,7 @@ const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
         .map((seg) =>
           seg.type === 'text'
             ? textToCustomHtml({ ...node, text: seg.value }, { ...opts, allowMath: false })
-            : mathToCustomHtml(seg.value, seg.type === 'block')
+            : mathToCustomHtml(seg.value, seg.type === 'block'),
         )
         .join('');
     }

src/app/components/editor/utils.ts

@@ -194,22 +194,43 @@ export const createCommandElement = (command: string): CommandElement => ({
 });
 
 export const replaceWithElement = (editor: Editor, selectRange: BaseRange, element: Element) => {
-  Transforms.select(editor, selectRange);
-  Transforms.insertNodes(editor, element);
-  Transforms.collapse(editor, {
-    edge: 'end',
-  });
+  // Wrap the whole sequence: on a stale autocomplete range (the document changed
+  // between the menu opening and the pick) `insertNodes` — not `select`, which is
+  // lazy in this Slate version — can throw. This runs inside the pick's event
+  // handler, so an escape wouldn't hit the error boundary, but keep it contained.
+  try {
+    Transforms.select(editor, selectRange);
+    Transforms.insertNodes(editor, element);
+    Transforms.collapse(editor, { edge: 'end' });
+  } catch {
+    /* stale range — the pick is a no-op rather than an uncaught error */
+  }
 };
 
 export const moveCursor = (editor: Editor, withSpace?: boolean) => {
-  // Defer to the next tick so React can flush any pending void-element DOM
-  // updates (e.g. after inserting a mention) before Slate resolves cursor
-  // positions via ReactEditor.toDOMNode — otherwise Slate throws
-  // "Cannot resolve a DOM node from slate node".
+  // Move the caret out of the just-inserted inline void and land it in a real
+  // trailing text node — SYNCHRONOUSLY, in the same commit as the insert.
+  // `Transforms.move` escapes the void (after insertNodes+collapse the caret is
+  // INSIDE the void's inner text node; insertText there is a no-op, blocked by
+  // Slate's void guard). The space then lands in a real text node.
+  // Doing this in the same commit (vs the old deferred setTimeout) means the
+  // caret never sits on the void's zero-width edge on a racy tick — that edge's
+  // DOM (a U+FEFF node) isn't populated yet, so slate-react's commit-phase
+  // selection sync (setBaseAndExtent) threw IndexSizeError mid-render and tripped
+  // the composer error boundary. Both ops are pure model transforms (no DOM
+  // resolution), so running them synchronously is safe.
+  Transforms.move(editor);
+  if (withSpace) editor.insertText(' ');
+  // Re-assert focus next tick (a pick usually keeps the editor focused). Guarded
+  // because ReactEditor.focus resolves the DOM; with the caret now in a real text
+  // node this is safe, but stay defensive against a mid-flight editor.
   setTimeout(() => {
-    ReactEditor.focus(editor);
-    Transforms.move(editor);
-    if (withSpace) editor.insertText(' ');
+    try {
+      ReactEditor.focus(editor);
+    } catch {
+      // The editor DOM can be mid-flight (autocomplete just closed / re-render
+      // landed). The element is already inserted, so skip the focus nudge.
+    }
   }, 0);
 };
 

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

@@ -14,7 +14,7 @@ import { Box, config, Icons, Scroll } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';
-import { atom, PrimitiveAtom, useAtom, useSetAtom } from 'jotai';
+import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { EmojiData, IEmoji, emojiGroups, emojis, loadEmojiData } from '../../plugins/emoji';
 import { useEmojiGroupLabels } from './useEmojiGroupLabels';
@@ -29,6 +29,7 @@ import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearc
 import { useDebounce } from '../../hooks/useDebounce';
 import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
+import { addRecentSticker, recentStickersAtom } from '../../state/recentStickers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
 import { getEmoticonSearchStr } from '../../plugins/utils';
@@ -56,6 +57,9 @@ import { VirtualTile } from '../virtualizer';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
+// Stable empty pack list for hideCustomEmojis (unicode-only) mode — a fresh []
+// each render would needlessly re-run the memoized group/search builders.
+const NO_IMAGE_PACKS: ImagePack[] = [];
 
 /**
  * Lazily pull in the emojibase data (see plugins/emoji `loadEmojiData`). The
@@ -98,10 +102,12 @@ type StickerGroupItem = {
 const useGroups = (
   tab: EmojiBoardTab,
   imagePacks: ImagePack[],
+  hideCustomEmojis?: boolean,
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
   const mx = useMatrixClient();
 
   const recentEmojis = useRecentEmoji(mx, 21);
+  const recentStickers = useAtomValue(recentStickersAtom);
   const labels = useEmojiGroupLabels();
   const { emojiGroups: loadedEmojiGroups } = useEmojiData();
 
@@ -112,7 +118,9 @@ const useGroups = (
     g.push({
       id: RECENT_GROUP_ID,
       name: 'Recent',
-      items: recentEmojis,
+      // In unicode-only mode drop recently-used CUSTOM emojis (PackImageReader);
+      // keep only unicode ones (IEmoji has `unicode`).
+      items: hideCustomEmojis ? recentEmojis.filter((e) => 'unicode' in e) : recentEmojis,
     });
 
     imagePacks.forEach((pack) => {
@@ -137,12 +145,22 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab, loadedEmojiGroups]);
+  }, [mx, recentEmojis, labels, imagePacks, tab, loadedEmojiGroups, hideCustomEmojis]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
     if (tab !== EmojiBoardTab.Sticker) return g;
 
+    if (recentStickers.length > 0) {
+      g.push({
+        id: RECENT_GROUP_ID,
+        name: 'Recent',
+        // StickerItem only reads url/shortcode/body, so a minimal PackImageReader
+        // reconstructed from the stored data renders and re-sends correctly.
+        items: recentStickers.map((s) => new PackImageReader(s.shortcode, s.url, { body: s.body })),
+      });
+    }
+
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;
       if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
@@ -157,7 +175,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, imagePacks, tab]);
+  }, [mx, imagePacks, tab, recentStickers]);
 
   return [emojiGroupItems, stickerGroupItems];
 };
@@ -289,6 +307,7 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
   const useAuthentication = useMediaAuthentication();
 
   const [activeGroupId, setActiveGroupId] = useAtom(activeGroupAtom);
+  const recentStickers = useAtomValue(recentStickersAtom);
   const usage = ImageUsage.Sticker;
 
   const packLabels = useMemo(() => {
@@ -308,6 +327,17 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
 
   return (
     <Sidebar>
+      {recentStickers.length > 0 && (
+        <SidebarStack>
+          <GroupIcon
+            active={activeGroupId === RECENT_GROUP_ID}
+            id={RECENT_GROUP_ID}
+            label="Recent"
+            icon={Icons.RecentClock}
+            onClick={handleScrollToGroup}
+          />
+        </SidebarStack>
+      )}
       <SidebarStack>
         {packs.map((pack) => {
           const label = packLabels.get(pack.id);
@@ -410,6 +440,11 @@ type EmojiBoardProps = {
   onStickerSelect?: (mxc: string, shortcode: string, label: string) => void;
   allowTextCustomEmoji?: boolean;
   addToRecentEmoji?: boolean;
+  // Unicode-only mode: hide custom/image-pack emojis (packs, sidebar icons,
+  // search, and custom entries in Recent). For targets that can only hold plain
+  // text — e.g. the presence status message, which can't render an mxc image —
+  // so users only see emojis that actually insert.
+  hideCustomEmojis?: boolean;
 };
 
 export function EmojiBoard({
@@ -423,6 +458,7 @@ export function EmojiBoard({
   onStickerSelect,
   allowTextCustomEmoji,
   addToRecentEmoji = true,
+  hideCustomEmojis,
 }: EmojiBoardProps) {
   const mx = useMatrixClient();
 
@@ -435,8 +471,12 @@ export function EmojiBoard({
   );
   const activeGroupIdAtom = useMemo(() => atom<string | undefined>(undefined), []);
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
-  const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
-  const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks);
+  const setRecentStickers = useSetAtom(recentStickersAtom);
+  const relevantImagePacks = useRelevantImagePacks(usage, imagePackRooms);
+  // Unicode-only mode: drop all custom/image packs so the sidebar, group list,
+  // and search show only insertable unicode emojis.
+  const imagePacks = hideCustomEmojis ? NO_IMAGE_PACKS : relevantImagePacks;
+  const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks, hideCustomEmojis);
   const groups = emojiTab ? emojiGroupItems : stickerGroupItems;
   const renderItem = useItemRenderer(tab);
   const { emojis: loadedEmojis } = useEmojiData();
@@ -494,6 +534,13 @@ export function EmojiBoard({
     }
     if (emojiInfo.type === EmojiType.Sticker) {
       onStickerSelect?.(emojiInfo.data, emojiInfo.shortcode, emojiInfo.label);
+      setRecentStickers((prev) =>
+        addRecentSticker(prev, {
+          url: emojiInfo.data,
+          shortcode: emojiInfo.shortcode,
+          body: emojiInfo.label,
+        }),
+      );
     }
     if (!evt.altKey && !evt.shiftKey) requestClose();
   };

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

@@ -46,7 +46,13 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
       const { address } = imagePack;
       if (!address) return;
 
-      await sendStateEvent(mx, address.roomId, StateEvent.PoniesRoomEmotes, packContent, address.stateKey);
+      await sendStateEvent(
+        mx,
+        address.roomId,
+        StateEvent.PoniesRoomEmotes,
+        packContent,
+        address.stateKey,
+      );
     },
     [mx, imagePack],
   );

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

@@ -7,6 +7,7 @@ import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
 import { downloadMedia } from '../../utils/matrix';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 
 export type ImageViewerProps = {
   alt: string;
@@ -19,7 +20,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
     const { t } = useTranslation();
     const saveFile = useSaveFile();
     const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
-    const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
+    const { pan, cursor, onMouseDown, onTouchStart } = usePan(zoom !== 1);
 
     const handleDownload = async () => {
       const fileContent = await downloadMedia(src);
@@ -35,7 +36,13 @@ export const ImageViewer = as<'div', ImageViewerProps>(
       >
         <Header className={css.ImageViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
+            <IconButton
+              size="300"
+              radii="300"
+              className={MobileTouchTarget}
+              onClick={requestClose}
+              aria-label="Close"
+            >
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>
@@ -48,12 +55,18 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               outlined={zoom < 1}
               size="300"
               radii="Pill"
+              className={MobileTouchTarget}
               onClick={zoomOut}
               aria-label="Zoom Out"
             >
               <Icon size="50" src={Icons.Minus} />
             </IconButton>
-            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
+            <Chip
+              variant="SurfaceVariant"
+              radii="Pill"
+              className={MobileTouchTarget}
+              onClick={() => setZoom(zoom === 1 ? 2 : 1)}
+            >
               <Text size="B300">{Math.round(zoom * 100)}%</Text>
             </Chip>
             <IconButton
@@ -61,6 +74,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               outlined={zoom > 1}
               size="300"
               radii="Pill"
+              className={MobileTouchTarget}
               onClick={zoomIn}
               aria-label="Zoom In"
             >
@@ -70,6 +84,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               variant="Primary"
               onClick={handleDownload}
               radii="300"
+              className={MobileTouchTarget}
               before={<Icon size="50" src={Icons.Download} />}
             >
               <Text size="B300">{t('Organisms.ImageViewer.download')}</Text>
@@ -100,6 +115,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
             src={src}
             alt={alt}
             onMouseDown={onMouseDown}
+            onTouchStart={onTouchStart}
           />
         </Box>
       </Box>

src/app/components/math/KaTeX.tsx

@@ -34,7 +34,6 @@ export default function KaTeX({ latex, displayMode = false }: KaTeXProps) {
   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/MediaControls.tsx

@@ -11,7 +11,7 @@ export const MediaControl = as<'div', MediaControlProps>(
   ({ before, after, leftControl, rightControl, children, ...props }, ref) => (
     <Box grow="Yes" direction="Column" gap="300" {...props} ref={ref}>
       {before && <Box direction="Column">{before}</Box>}
-      <Box alignItems="Center" gap="200">
+      <Box alignItems="Center" gap="200" wrap="Wrap">
         <Box alignItems="Center" grow="Yes" gap="Inherit">
           {leftControl}
         </Box>

src/app/components/message/MsgTypeRenderers.tsx

@@ -10,9 +10,12 @@ import {
   MessageBrokenContent,
   MessageDeletedContent,
   MessageEditedContent,
+  MessageTranslatedContent,
   MessageUnsupportedContent,
   MessageVerificationRequestContent,
 } from './content';
+import { useMessageTranslation } from '../../hooks/useMessageTranslation';
+import { languageName } from '../../utils/translation/langUtils';
 import {
   IAudioContent,
   IAudioInfo,
@@ -162,6 +165,76 @@ type RenderBodyProps = {
   body: string;
   customBody?: string;
 };
+
+// Shared body renderer for m.text / m.emote / m.notice. Handles the on-device
+// translation swap: when translation is active and done, the translated text is
+// rendered through the plain-text path (linkify + emoji, no stored HTML) inside
+// a dir="auto" span for RTL, with a "Translated from … · Show original" chip.
+type TranslatableBodyProps = {
+  variant: 'text' | 'emote' | 'notice';
+  displayName?: string;
+  eventId: string;
+  trimmedBody: string;
+  customBody?: string;
+  renderBody: (props: RenderBodyProps) => ReactNode;
+  edited?: boolean;
+  onEditHistoryClick?: () => void;
+  style?: CSSProperties;
+};
+function TranslatableBody({
+  variant,
+  displayName,
+  eventId,
+  trimmedBody,
+  customBody,
+  renderBody,
+  edited,
+  onEditHistoryClick,
+  style,
+}: TranslatableBodyProps) {
+  const translation = useMessageTranslation(eventId, trimmedBody);
+  const showTranslated =
+    translation.active && translation.status === 'done' && !!translation.translated;
+  const shownBody = showTranslated ? translation.translated! : trimmedBody;
+
+  const chipStatus = translation.status === 'detecting' ? 'translating' : translation.status;
+  const showChip =
+    translation.active &&
+    (chipStatus === 'downloading' ||
+      chipStatus === 'translating' ||
+      chipStatus === 'done' ||
+      chipStatus === 'error');
+
+  return (
+    <MessageTextBody
+      emote={variant === 'emote'}
+      notice={variant === 'notice'}
+      preWrap={showTranslated || typeof customBody !== 'string'}
+      jumboEmoji={JUMBO_EMOJI_REG.test(shownBody)}
+      style={style}
+    >
+      {variant === 'emote' && <b>{`${displayName} `}</b>}
+      {showTranslated ? (
+        <span dir="auto">{renderBody({ body: shownBody, customBody: undefined })}</span>
+      ) : (
+        renderBody({
+          body: trimmedBody,
+          customBody: typeof customBody === 'string' ? customBody : undefined,
+        })
+      )}
+      {edited && <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />}
+      {showChip && (
+        <MessageTranslatedContent
+          fromLangName={languageName(translation.fromLang ?? '')}
+          status={chipStatus as 'downloading' | 'translating' | 'done' | 'error'}
+          downloadProgress={translation.downloadProgress}
+          onToggle={translation.toggle}
+        />
+      )}
+    </MessageTextBody>
+  );
+}
+
 type MTextProps = {
   edited?: boolean;
   onEditHistoryClick?: () => void;
@@ -190,17 +263,30 @@ 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>
+        {eventId ? (
+          <TranslatableBody
+            variant="text"
+            eventId={eventId}
+            trimmedBody={trimmedBody}
+            customBody={typeof customBody === 'string' ? customBody : undefined}
+            renderBody={renderBody}
+            edited={edited}
+            onEditHistoryClick={onEditHistoryClick}
+            style={style}
+          />
+        ) : (
+          <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>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -235,18 +321,31 @@ 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>
+        {eventId ? (
+          <TranslatableBody
+            variant="emote"
+            displayName={displayName}
+            eventId={eventId}
+            trimmedBody={trimmedBody}
+            customBody={typeof customBody === 'string' ? customBody : undefined}
+            renderBody={renderBody}
+            edited={edited}
+            onEditHistoryClick={onEditHistoryClick}
+          />
+        ) : (
+          <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>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -279,17 +378,29 @@ 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>
+        {eventId ? (
+          <TranslatableBody
+            variant="notice"
+            eventId={eventId}
+            trimmedBody={trimmedBody}
+            customBody={typeof customBody === 'string' ? customBody : undefined}
+            renderBody={renderBody}
+            edited={edited}
+            onEditHistoryClick={onEditHistoryClick}
+          />
+        ) : (
+          <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>
       {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
     </>
@@ -306,6 +417,22 @@ type RenderImageContentProps = {
   markedAsSpoiler?: boolean;
   spoilerReason?: string;
 };
+// Media frame sizing. When intrinsic width/height are known, drive the box by
+// aspect-ratio so its height tracks the responsive (maxWidth:100%) width — a
+// fixed pixel height computed for a 400px-wide layout otherwise crops (images,
+// object-fit:cover) or letterboxes (videos, object-fit:contain) on phones where
+// the box narrows below 400px. On desktop the box stays 400px wide, so the
+// aspect-ratio yields the identical height. Falls back to the fixed height when
+// dimensions are unknown.
+const attachmentMediaStyle = (
+  w: number | undefined,
+  h: number | undefined,
+  fallbackHeight: number,
+): CSSProperties =>
+  w && h
+    ? { aspectRatio: `${w} / ${h}`, minHeight: toRem(48) }
+    : { height: toRem(fallbackHeight < 48 ? 48 : fallbackHeight) };
+
 type MImageProps = {
   content: IImageContent;
   renderImageContent: (props: RenderImageContentProps) => ReactNode;
@@ -321,11 +448,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
 
   return (
     <Attachment outlined={outlined}>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+      <AttachmentBox style={attachmentMediaStyle(imgInfo?.w, imgInfo?.h, height)}>
         {renderImageContent({
           body: content.body || 'Image',
           info: imgInfo,
@@ -387,11 +510,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           }
         />
       </AttachmentHeader>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+      <AttachmentBox style={attachmentMediaStyle(videoInfo.w, videoInfo.h, height)}>
         {renderVideoContent({
           body: content.body || 'Video',
           info: videoInfo,
@@ -432,9 +551,9 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
   }
 
   const filename = content.filename ?? content.body ?? 'Audio';
-  const waveform = (
-    content as unknown as { 'org.matrix.msc1767.audio'?: { waveform?: number[] } }
-  )['org.matrix.msc1767.audio']?.waveform;
+  const waveform = (content as unknown as { 'org.matrix.msc1767.audio'?: { waveform?: number[] } })[
+    'org.matrix.msc1767.audio'
+  ]?.waveform;
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
@@ -566,7 +685,7 @@ export function MLocation({ content }: MLocationProps) {
       <Button
         as="a"
         size="400"
-        href={`https://www.openstreetmap.org/?mlat=${location.latitude}&mlon=${location.longitude}#map=16/${location.latitude}/${location.longitude}`}
+        href={`https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=16/${lat}/${lon}`}
         target="_blank"
         rel="noreferrer noopener"
         variant="Secondary"

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

@@ -89,3 +89,47 @@ export const MessageEditedContent = as<
     </Text>
   ),
 );
+
+type TranslatedStatus = 'downloading' | 'translating' | 'done' | 'error';
+
+const translatedLabel = (
+  status: TranslatedStatus,
+  fromLangName: string,
+  downloadProgress?: number,
+): string => {
+  if (status === 'downloading') {
+    const pct =
+      typeof downloadProgress === 'number' ? ` ${Math.round(downloadProgress * 100)}%` : '';
+    return `Downloading translation model…${pct}`;
+  }
+  if (status === 'translating') return 'Translating…';
+  if (status === 'error') return 'Translation failed — show original';
+  return `Translated from ${fromLangName} · Show original`;
+};
+
+// Inline chip shown beside a translated message body. Clicking it toggles back
+// to the original text (the same per-event toggle the message menu drives).
+export const MessageTranslatedContent = as<
+  'span',
+  {
+    children?: never;
+    fromLangName: string;
+    status: TranslatedStatus;
+    downloadProgress?: number;
+    onToggle: () => void;
+  }
+>(({ fromLangName, status, downloadProgress, onToggle, ...props }, ref) => (
+  <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={status === 'done'}
+      aria-label="Toggle message translation"
+      style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
+    >
+      <Text as="span" size="T200" priority="300">
+        {` · ${translatedLabel(status, fromLangName, downloadProgress)}`}
+      </Text>
+    </button>
+  </span>
+));

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Chip, color, config, Icon, Icons, Text, toRem } from 'folds';
 import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
@@ -36,7 +35,7 @@ function computePollState(
   mx: ReturnType<typeof useMatrixClient>,
   room: Room,
   eventId: string,
-  parsed: ParsedPoll
+  parsed: ParsedPoll,
 ): PollState {
   const relations = room.getUnfilteredTimelineSet().relations;
   const myUserId = mx.getSafeUserId();
@@ -80,7 +79,7 @@ function computePollState(
     const answerIds = validateSelections(
       parseResponseAnswerIds(ev.getContent()),
       validIds,
-      parsed.maxSelections
+      parsed.maxSelections,
     );
     responses.push({ sender, ts, answerIds });
   }
@@ -131,10 +130,14 @@ export function PollContent({
       relations.getChildEventsForEvent(
         eventId,
         'm.reference',
-        'org.matrix.msc3381.poll.response' as any
+        'org.matrix.msc3381.poll.response' as any,
       ),
       relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.end' as any),
-      relations.getChildEventsForEvent(eventId, 'm.reference', 'org.matrix.msc3381.poll.end' as any),
+      relations.getChildEventsForEvent(
+        eventId,
+        'm.reference',
+        'org.matrix.msc3381.poll.end' as any,
+      ),
     ];
     relObjs.forEach((r) => {
       r?.on(RelationsEvent.Add, refresh);
@@ -252,7 +255,7 @@ export function PollContent({
     if (!nav.includes(evt.key)) return;
     evt.preventDefault();
     const buttons = Array.from(
-      evt.currentTarget.querySelectorAll<HTMLButtonElement>('[data-poll-answer]')
+      evt.currentTarget.querySelectorAll<HTMLButtonElement>('[data-poll-answer]'),
     );
     if (buttons.length === 0) return;
     const current = buttons.findIndex((b) => b === document.activeElement);
@@ -324,123 +327,119 @@ export function PollContent({
           const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
           const isWinner = winners.has(id);
           // Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
-          const tabIndex = isMultiple
-            ? 0
-            : selected || (myVotes.size === 0 && i === 0)
-              ? 0
-              : -1;
+          const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
           return (
             <React.Fragment key={id}>
-            <button
-              type="button"
-              data-poll-answer
-              data-selected={selected}
-              role={isMultiple ? 'checkbox' : 'radio'}
-              aria-checked={selected}
-              aria-disabled={!canVote}
-              aria-label={isWinner ? `${text}, winning answer` : undefined}
-              aria-describedby={
-                showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
-                  ? `poll-voters-${eventId}-${id}`
-                  : undefined
-              }
-              tabIndex={tabIndex}
-              onClick={canVote ? () => handleVote(id) : undefined}
-              style={{
-                padding: `${config.space.S200} ${config.space.S300}`,
-                borderRadius: config.radii.R300,
-                background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
-                border: `${config.borderWidth.B300} solid ${
-                  isWinner
-                    ? color.Success.Main
-                    : selected
-                      ? color.Primary.Main
-                      : color.SurfaceVariant.ContainerLine
-                }`,
-                lineHeight: 1.4,
-                textAlign: 'left',
-                cursor: canVote ? 'pointer' : 'default',
-                color: 'inherit',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: config.space.S100,
-                width: '100%',
-                position: 'relative',
-                overflow: 'hidden',
-                transition: 'border-color 0.15s, background 0.15s',
-              }}
-            >
-              {showResults && total > 0 && (
-                <span
-                  aria-hidden
-                  style={{
-                    position: 'absolute',
-                    inset: 0,
-                    right: 'auto',
-                    width: `${pct}%`,
-                    background: selected
-                      ? color.Primary.ContainerActive
-                      : color.SurfaceVariant.ContainerActive,
-                    pointerEvents: 'none',
-                    transition: 'width 0.3s ease',
-                  }}
-                />
-              )}
-              <span
+              <button
+                type="button"
+                data-poll-answer
+                data-selected={selected}
+                role={isMultiple ? 'checkbox' : 'radio'}
+                aria-checked={selected}
+                aria-disabled={!canVote}
+                aria-label={isWinner ? `${text}, winning answer` : undefined}
+                aria-describedby={
+                  showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
+                    ? `poll-voters-${eventId}-${id}`
+                    : undefined
+                }
+                tabIndex={tabIndex}
+                onClick={canVote ? () => handleVote(id) : undefined}
                 style={{
+                  padding: `${config.space.S200} ${config.space.S300}`,
+                  borderRadius: config.radii.R300,
+                  background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
+                  border: `${config.borderWidth.B300} solid ${
+                    isWinner
+                      ? color.Success.Main
+                      : selected
+                        ? color.Primary.Main
+                        : color.SurfaceVariant.ContainerLine
+                  }`,
+                  lineHeight: 1.4,
+                  textAlign: 'left',
+                  cursor: canVote ? 'pointer' : 'default',
+                  color: 'inherit',
                   display: 'flex',
-                  alignItems: 'center',
-                  gap: config.space.S200,
+                  flexDirection: 'column',
+                  gap: config.space.S100,
+                  width: '100%',
                   position: 'relative',
+                  overflow: 'hidden',
+                  transition: 'border-color 0.15s, background 0.15s',
                 }}
               >
-                <span
-                  aria-hidden
-                  style={{
-                    flexShrink: 0,
-                    width: toRem(14),
-                    height: toRem(14),
-                    border: `${config.borderWidth.B300} solid ${
-                      selected ? color.Primary.Main : color.Primary.ContainerLine
-                    }`,
-                    borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
-                    background: selected ? color.Primary.Main : 'transparent',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    color: color.Primary.OnMain,
-                    transition: 'all 0.15s',
-                  }}
-                >
-                  {selected ? <Icon size="50" src={Icons.Check} /> : null}
-                </span>
-                <Text as="span" size="T300" style={{ flexGrow: 1 }}>
-                  {text}
-                </Text>
-                {isWinner && (
-                  <Icon
-                    size="50"
-                    src={Icons.Check}
-                    style={{ flexShrink: 0, color: color.Success.Main }}
+                {showResults && total > 0 && (
+                  <span
+                    aria-hidden
+                    style={{
+                      position: 'absolute',
+                      inset: 0,
+                      right: 'auto',
+                      width: `${pct}%`,
+                      background: selected
+                        ? color.Primary.ContainerActive
+                        : color.SurfaceVariant.ContainerActive,
+                      pointerEvents: 'none',
+                      transition: 'width 0.3s ease',
+                    }}
                   />
                 )}
-                {showResults && total > 0 && (
-                  <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
-                    {pct}%
+                <span
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: config.space.S200,
+                    position: 'relative',
+                  }}
+                >
+                  <span
+                    aria-hidden
+                    style={{
+                      flexShrink: 0,
+                      width: toRem(14),
+                      height: toRem(14),
+                      border: `${config.borderWidth.B300} solid ${
+                        selected ? color.Primary.Main : color.Primary.ContainerLine
+                      }`,
+                      borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
+                      background: selected ? color.Primary.Main : 'transparent',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: color.Primary.OnMain,
+                      transition: 'all 0.15s',
+                    }}
+                  >
+                    {selected ? <Icon size="50" src={Icons.Check} /> : null}
+                  </span>
+                  <Text as="span" size="T300" style={{ flexGrow: 1 }}>
+                    {text}
                   </Text>
-                )}
-              </span>
-            </button>
-            {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
-              <Text
-                id={`poll-voters-${eventId}-${id}`}
-                size="T200"
-                priority="300"
-                style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
-              >
-                {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
-              </Text>
-            )}
+                  {isWinner && (
+                    <Icon
+                      size="50"
+                      src={Icons.Check}
+                      style={{ flexShrink: 0, color: color.Success.Main }}
+                    />
+                  )}
+                  {showResults && total > 0 && (
+                    <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
+                      {pct}%
+                    </Text>
+                  )}
+                </span>
+              </button>
+              {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
+                <Text
+                  id={`poll-voters-${eventId}-${id}`}
+                  size="T200"
+                  priority="300"
+                  style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
+                >
+                  {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
+                </Text>
+              )}
             </React.Fragment>
           );
         })}

src/app/components/nav/styles.css.ts

@@ -53,6 +53,11 @@ const NavItemBase = style({
   color: OnContainer,
   outline: 'none',
   minHeight: toRem(36),
+  '@media': {
+    // The room/nav row is the app's primary tap target; give it a 44px touch
+    // area on phones (desktop stays the denser 36px).
+    '(max-width: 750px)': { minHeight: toRem(44) },
+  },
 
   selectors: {
     '&:hover, &:focus-visible': {

src/app/components/presence/Presence.tsx

@@ -27,7 +27,14 @@ type PresenceBadgeProps = {
 };
 export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
-  const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence];
+  // DND is encoded as unavailable + status_msg 'dnd'; render it red/"Do Not
+  // Disturb" to match PresenceRingAvatar and the settings picker (which both
+  // special-case 'dnd' → Critical) — the badge was the lone outlier showing a
+  // yellow "Idle". The 'dnd' sentinel isn't surfaced as a status line.
+  const isDnd = presence === Presence.Unavailable && status === 'dnd';
+  const displayLabel = isDnd ? 'Do Not Disturb' : label[presence];
+  const displayStatus = isDnd ? undefined : status;
+  const ariaLabel = displayStatus ? `${displayLabel} — ${displayStatus}` : displayLabel;
 
   return (
     <TooltipProvider
@@ -38,9 +45,9 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
       tooltip={
         <Tooltip>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
-            <Text size="L400">{label[presence]}</Text>
-            {status && <Text size="T200">•</Text>}
-            {status && <Text size="T200">{status}</Text>}
+            <Text size="L400">{displayLabel}</Text>
+            {displayStatus && <Text size="T200">•</Text>}
+            {displayStatus && <Text size="T200">{displayStatus}</Text>}
           </Box>
         </Tooltip>
       }
@@ -50,7 +57,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
           aria-label={ariaLabel}
           ref={triggerRef}
           size={size}
-          variant={PresenceToColor[presence]}
+          variant={isDnd ? 'Critical' : PresenceToColor[presence]}
           fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
           radii="Pill"
         />

src/app/components/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Room, RoomStateEvent, RoomStateEventHandlerMap } from 'matrix-js-sdk';
+import React, { useState } from 'react';
+import { Room } from 'matrix-js-sdk';
 import {
   Icon,
   Icons,
@@ -12,7 +12,6 @@ import {
   config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { getMemberName } from '../../utils/room';
@@ -21,8 +20,9 @@ import { StackedAvatar } from '../stacked-avatar';
 import { EventReaders } from '../event-readers';
 import { stopPropagation } from '../../utils/keyboard';
 import { useModalStyle } from '../../hooks/useModalStyle';
-import { useForceUpdate } from '../../hooks/useForceUpdate';
 import { useMemberAvatar } from '../../hooks/useMemberAvatar';
+import { useRoomMembersChange } from '../../hooks/useRoomMemberChange';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 import * as css from './ReadReceiptAvatars.css';
 
 const MAX_DISPLAY = 5;
@@ -50,32 +50,15 @@ export function ReadReceiptAvatars({
   eventId: string;
   userIds: string[];
 }) {
-  const mx = useMatrixClient();
   const [open, setOpen] = useState(false);
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const modalStyle = useModalStyle(360);
-  const [, forceUpdate] = useForceUpdate();
 
-  // The avatars + names below are read from room member state at render time, so
-  // they only refresh when this component re-renders (which the timeline does on a
-  // receipt change). Re-render on a member-state change of any displayed reader so
-  // an avatar/display-name update shows live. RoomStateEvent.Members fires for name,
-  // avatar AND membership changes (RoomMemberEvent has no Avatar signal).
-  useEffect(() => {
-    const handleMembers: RoomStateEventHandlerMap[RoomStateEvent.Members] = (
-      event,
-      _state,
-      member,
-    ) => {
-      if (event.getRoomId() === room.roomId && userIds.includes(member.userId)) {
-        forceUpdate();
-      }
-    };
-    mx.on(RoomStateEvent.Members, handleMembers);
-    return () => {
-      mx.removeListener(RoomStateEvent.Members, handleMembers);
-    };
-  }, [mx, room.roomId, userIds, forceUpdate]);
+  // The tooltip names below are read from room member state at render time.
+  // Re-render on a member-state change of any displayed reader so a display-name
+  // update shows live (each avatar handles its own via useMemberAvatar). Uses the
+  // shared member-change store — one global listener for the whole app (PERF-3).
+  useRoomMembersChange(room.roomId, userIds);
 
   if (userIds.length === 0) return null;
 
@@ -110,7 +93,7 @@ export function ReadReceiptAvatars({
         onClick={() => setOpen(true)}
         title={tooltipNames}
         aria-label={tooltipNames}
-        className={css.ReceiptTrigger}
+        className={`${css.ReceiptTrigger} ${MobileTouchTarget}`}
       >
         {/* Pill wrapper ensures visibility on any wallpaper/background */}
         <span

src/app/components/room-card/style.css.ts

@@ -6,6 +6,11 @@ export const CardGrid = style({
   display: 'grid',
   gridTemplateColumns: 'repeat(3, 1fr)',
   gap: config.space.S400,
+  '@media': {
+    // Cards squish/overflow below ~360px each; drop to a single column on phones
+    // (mirrors the 750px breakpoint the nav uses).
+    '(max-width: 750px)': { gridTemplateColumns: '1fr' },
+  },
 });
 
 export const RoomCardBase = style([

src/app/components/seasonal/SeasonalEffect.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom } from '../../state/settings';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { zIndices } from '../../styles/zIndex';
 import { SeasonTheme } from './types';
-import { getActiveSeason } from './seasonSchedule';
+import { resolveSeasonTheme } from './seasonSchedule';
 import { HalloweenOverlay } from './themes/Halloween';
 import { ChristmasOverlay } from './themes/Christmas';
 import { NewYearOverlay } from './themes/NewYear';
@@ -96,13 +96,25 @@ export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
 export function SeasonalEffect() {
   const settings = useAtomValue(settingsAtom);
   const reduced = useReducedMotion();
+  const override = settings.seasonalThemeOverride ?? 'auto';
 
-  const theme = useMemo<SeasonTheme | null>(() => {
-    const override = settings.seasonalThemeOverride ?? 'auto';
-    if (override === 'off') return null;
-    if (override === 'auto') return getActiveSeason(new Date());
-    return override as SeasonTheme;
-  }, [settings.seasonalThemeOverride]);
+  // In auto mode, re-evaluate hourly so a long-lived session crosses a
+  // season/holiday-window boundary (e.g. into a new day) without a reload —
+  // otherwise the active season is frozen at the value it had on mount.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (override !== 'auto') return undefined;
+    // Refresh on entering auto too: `now` may be a stale mount-time value if we
+    // were previously in a pinned/off mode (the interval only runs while auto).
+    setNow(Date.now());
+    const id = window.setInterval(() => setNow(Date.now()), 60 * 60 * 1000);
+    return () => window.clearInterval(id);
+  }, [override]);
+
+  const theme = useMemo<SeasonTheme | null>(
+    () => resolveSeasonTheme(override, now),
+    [override, now],
+  );
 
   if (!theme) return null;
   // Suppress seasonal overlay when a chat background is active — both running simultaneously

src/app/components/seasonal/seasonSchedule.test.ts

@@ -1,7 +1,12 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { getActiveSeason, SEASON_SCHEDULE, SEASON_DATE_RANGES } from './seasonSchedule';
+import {
+  getActiveSeason,
+  resolveSeasonTheme,
+  SEASON_SCHEDULE,
+  SEASON_DATE_RANGES,
+} from './seasonSchedule';
 import { SeasonTheme } from './types';
 
 // Date(year, monthIndex0, day)
@@ -52,6 +57,27 @@ test('window boundaries are inclusive at both ends', () => {
   assert.equal(getActiveSeason(on(1, 16)), null); // Feb 16 just after
 });
 
+test('resolveSeasonTheme: off → null, pinned → that theme, auto → active season', () => {
+  const halloweenTs = on(9, 20).getTime(); // Oct 20 → halloween season
+  const offSeasonTs = on(5, 15).getTime(); // Jun 15 → no season
+  // 'off' never renders, regardless of date.
+  assert.equal(resolveSeasonTheme('off', halloweenTs), null);
+  // A pinned theme renders regardless of date (even off-season).
+  assert.equal(resolveSeasonTheme('christmas', offSeasonTs), 'christmas');
+  // 'auto' tracks the active season for the given instant.
+  assert.equal(resolveSeasonTheme('auto', halloweenTs), 'halloween');
+  assert.equal(resolveSeasonTheme('auto', offSeasonTs), null);
+});
+
+test('resolveSeasonTheme: auto re-evaluates as `now` advances across a boundary', () => {
+  // The same 'auto' override yields different themes at different instants — this
+  // is what the SeasonalEffect ticker relies on (incl. the switch-into-auto case
+  // where `now` must be current, not a stale mount value).
+  assert.equal(resolveSeasonTheme('auto', on(9, 20).getTime()), 'halloween'); // Oct 20
+  assert.equal(resolveSeasonTheme('auto', on(11, 15).getTime()), 'christmas'); // Dec 15
+  assert.equal(resolveSeasonTheme('auto', on(6, 4).getTime()), null); // Jul 4
+});
+
 test('SEASON_DATE_RANGES has a label for every scheduled theme', () => {
   assert.equal(SEASON_SCHEDULE.length, 11);
   const themes = SEASON_SCHEDULE.map((e) => e.theme);

src/app/components/seasonal/seasonSchedule.ts

@@ -93,3 +93,18 @@ export function getActiveSeason(now: Date): SeasonTheme | null {
   const day = now.getDate();
   return SEASON_SCHEDULE.find((entry) => entry.matches(month, day))?.theme ?? null;
 }
+
+/** A seasonal-theme setting value: the active season, a pinned theme, or off. */
+export type SeasonalOverride = SeasonTheme | 'auto' | 'off';
+
+/**
+ * The theme to render for a `seasonalThemeOverride` at time `now` (epoch ms):
+ * 'off' → none, 'auto' → the active season for that instant, else the pinned
+ * theme. Kept pure (and unit-tested) so the decision is verifiable without
+ * mounting the React overlay.
+ */
+export function resolveSeasonTheme(override: SeasonalOverride, now: number): SeasonTheme | null {
+  if (override === 'off') return null;
+  if (override === 'auto') return getActiveSeason(new Date(now));
+  return override;
+}

src/app/components/sidebar/Sidebar.css.ts

@@ -81,6 +81,10 @@ export const SidebarItem = recipe({
       justifyContent: 'center',
       position: 'relative',
       transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+      '@media': {
+        // Space-rail buttons to a 44px touch target on phones (2px larger).
+        '(max-width: 750px)': { minWidth: toRem(44), minHeight: toRem(44) },
+      },
 
       selectors: {
         '&:hover': {

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

@@ -275,6 +275,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
         key={key}
         alignItems="Center"
         gap="200"
+        wrap="Wrap"
         style={{
           padding: config.space.S200,
           borderRadius: config.radii.R400,

src/app/components/url-preview/UrlPreview.css.tsx

@@ -4,7 +4,9 @@ import { DefaultReset, color, config, toRem } from 'folds';
 export const UrlPreview = style([
   DefaultReset,
   {
-    width: toRem(400),
+    // 25rem (=400px) on desktop, but shrink to fit narrow phones so a single
+    // card doesn't exceed the viewport (mirrors UrlPreviewWide's min()).
+    width: 'min(25rem, 92vw)',
     minHeight: toRem(102),
     backgroundColor: color.SurfaceVariant.Container,
     color: color.SurfaceVariant.OnContainer,
@@ -21,6 +23,19 @@ export const UrlPreviewWide = style({
   width: 'min(38rem, 94vw)',
 });
 
+// The Twitch/Twitter/TikTok-fallback cards lay their header/thumbnail out BESIDE
+// the content as direct children of the UrlPreview flex row; on a phone that
+// squeezes both. Stack them vertically on narrow viewports only. `UrlPreview`'s
+// Box has no explicit direction (browser default row), so this override wins
+// with nothing to compete against, and desktop (>750px) is unchanged.
+export const StackOnMobile = style({
+  '@media': {
+    '(max-width: 750px)': {
+      flexDirection: 'column',
+    },
+  },
+});
+
 export const UrlPreviewImg = style([
   DefaultReset,
   {
@@ -404,6 +419,56 @@ export const BadgeSteam = style({
   color: '#c7d5e0',
 });
 
+// ---------------------------------------------------------------------------
+// Steam card — full-width header/banner image + official store widget iframe
+// ---------------------------------------------------------------------------
+
+export const SteamBannerWrapper = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    display: 'block',
+    width: '100%',
+    // Steam header capsules are 460×215 (~2.14:1); news banners vary but crop
+    // fine to the same ratio.
+    aspectRatio: '460 / 215',
+    overflow: 'hidden',
+    flexShrink: 0,
+    backgroundColor: '#0e1520',
+    cursor: 'pointer',
+
+    ':hover': {
+      filter: 'brightness(0.9)',
+    },
+  },
+]);
+
+export const SteamBannerImg = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center',
+    display: 'block',
+  },
+]);
+
+// The official Steam store widget is a compact banner (~646×190). Full-width,
+// fixed height so the iframe doesn't collapse to its intrinsic size.
+export const SteamWidget = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: toRem(190),
+    border: 0,
+    display: 'block',
+    borderRadius: config.radii.R300,
+    backgroundColor: '#1b2838',
+    marginTop: config.space.S100,
+  },
+]);
+
 export const BadgeWikipedia = style({
   backgroundColor: color.SurfaceVariant.ContainerLine,
   color: color.SurfaceVariant.OnContainer,
@@ -484,6 +549,16 @@ export const BadgeTidal = style({
   color: '#ffffff',
 });
 
+export const BadgeMixcloud = style({
+  backgroundColor: '#52aad8',
+  color: '#ffffff',
+});
+
+export const BadgeDeezer = style({
+  backgroundColor: '#a238ff',
+  color: '#ffffff',
+});
+
 // ---------------------------------------------------------------------------
 // Twitch LIVE badge
 // ---------------------------------------------------------------------------

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1,8 +1,21 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
-import { Box, Chip, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
+import {
+  Box,
+  Chip,
+  Icon,
+  IconButton,
+  Icons,
+  Scroll,
+  Spinner,
+  Text,
+  as,
+  color,
+  config,
+} from 'folds';
 import { ImageOverlay } from '../ImageOverlay';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
@@ -21,11 +34,13 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import {
   extractEmbedHeight,
+  getSteamTarget,
   getTikTokVideoId,
   getTweetId,
   isTikTokLink,
   MediaEmbed,
   parseMediaEmbed,
+  steamWidgetEmbedUrl,
   tiktokIdFromOembed,
   tiktokOembedUrl,
   tiktokPlayerEmbedUrl,
@@ -103,11 +118,15 @@ function isGitHubRepo(url: string): boolean {
   }
 }
 
+// Keep these hosts + the /status(es) pattern in sync with getTweetId
+// (videoEmbed.ts): otherwise a mobile.twitter.com / legacy /statuses/ tweet has
+// an extractable id but never routes to the Twitter card or "View post" embed.
+const TWITTER_HOSTS = new Set(['twitter.com', 'x.com', 'mobile.twitter.com']);
+
 function isTwitter(url: string): boolean {
   try {
     const { hostname } = new URL(url);
-    const h = hostname.replace(/^www\./, '');
-    return h === 'twitter.com' || h === 'x.com';
+    return TWITTER_HOSTS.has(hostname.replace(/^www\./, ''));
   } catch {
     return false;
   }
@@ -116,9 +135,8 @@ function isTwitter(url: string): boolean {
 function isTwitterTweet(url: string): boolean {
   try {
     const { hostname, pathname } = new URL(url);
-    const h = hostname.replace(/^www\./, '');
-    if (h !== 'twitter.com' && h !== 'x.com') return false;
-    return /\/status\/\d+/.test(pathname);
+    if (!TWITTER_HOSTS.has(hostname.replace(/^www\./, ''))) return false;
+    return /\/status(?:es)?\/\d+/.test(pathname);
   } catch {
     return false;
   }
@@ -207,17 +225,6 @@ function isTwitch(url: string): boolean {
   }
 }
 
-function isSteamApp(url: string): boolean {
-  try {
-    const { hostname, pathname } = new URL(url);
-    const h = hostname.replace(/^www\./, '');
-    if (h !== 'store.steampowered.com') return false;
-    return pathname.startsWith('/app/');
-  } catch {
-    return false;
-  }
-}
-
 function isWikipedia(url: string): boolean {
   try {
     const { hostname, pathname } = new URL(url);
@@ -298,6 +305,32 @@ function isTenor(url: string): boolean {
   }
 }
 
+// Synapse's thumbnailer flattens animated images to a single still frame, so a
+// GIF served from /thumbnail renders but never plays. Detect GIF previews so the
+// card can point at /download (the original) instead.
+function isGifPreview(url: string, prev: IPreviewUrlResponse): boolean {
+  if (prev['og:image:type'] === 'image/gif') return true;
+  try {
+    return new URL(url).pathname.toLowerCase().endsWith('.gif');
+  } catch {
+    return false;
+  }
+}
+
+// Ceiling on the /download upgrade below: a self-hosted GIF can be hundreds of
+// MB, and unlike a thumbnail it is served unscaled. Past the cap we keep the
+// (frozen) thumbnail — the card still links out, so the GIF is one click away.
+const GIF_ORIGINAL_MAX_BYTES = 10 * 1024 * 1024;
+
+// Should this preview's image be fetched whole (so it animates) rather than
+// thumbnailed? Size is advisory: Synapse usually reports it, and when it's
+// absent we prefer a working animation over a hypothetical huge file.
+function shouldServeGifOriginal(url: string, prev: IPreviewUrlResponse): boolean {
+  if (!isGifPreview(url, prev)) return false;
+  const size = prev['matrix:image:size'];
+  return typeof size !== 'number' || size <= GIF_ORIGINAL_MAX_BYTES;
+}
+
 function getCardVariant(url: string): CardVariant {
   // NOTE: embeddable providers (YouTube/Vimeo/TikTok/Spotify/Twitch/…) are handled
   // upstream by parseMediaEmbed + MediaEmbedCard; getCardVariant only routes the
@@ -308,7 +341,7 @@ function getCardVariant(url: string): CardVariant {
   if (getRedditSubreddit(url) !== null) return 'reddit';
   if (getSpotifyType(url) !== null) return 'spotify';
   if (isTwitch(url)) return 'twitch';
-  if (isSteamApp(url)) return 'steam';
+  if (getSteamTarget(url)) return 'steam';
   if (isWikipedia(url)) return 'wikipedia';
   if (isDiscordInvite(url)) return 'discord';
   if (isNpm(url)) return 'npm';
@@ -714,6 +747,7 @@ function TwitterCard({
             size="300"
             radii="300"
             variant="SurfaceVariant"
+            className={MobileTouchTarget}
             onClick={() => setExpanded(false)}
             aria-label="Collapse post"
           >
@@ -768,6 +802,7 @@ function TwitterCard({
             <Chip
               variant="Secondary"
               radii="Pill"
+              className={MobileTouchTarget}
               onClick={() => setExpanded(true)}
               before={<Icon size="50" src={Icons.Play} />}
             >
@@ -1068,6 +1103,8 @@ const EMBED_BADGE: Record<string, { label: string; class: string }> = {
   bluesky: { label: 'Bluesky', class: previewCss.BadgeBluesky },
   loom: { label: 'Loom', class: previewCss.BadgeLoom },
   kick: { label: 'Kick', class: previewCss.BadgeKick },
+  mixcloud: { label: 'Mixcloud', class: previewCss.BadgeMixcloud },
+  deezer: { label: 'Deezer', class: previewCss.BadgeDeezer },
 };
 
 // The homeserver preview for some sites (notably Reddit) comes back as a bot-check
@@ -1237,6 +1274,7 @@ function MediaEmbedCard({
                 <Chip
                   variant="Secondary"
                   radii="Pill"
+                  className={MobileTouchTarget}
                   onClick={enterFullscreen}
                   aria-label="Fullscreen"
                 >
@@ -1247,6 +1285,7 @@ function MediaEmbedCard({
                 size="300"
                 radii="300"
                 variant="SurfaceVariant"
+                className={MobileTouchTarget}
                 onClick={() => setPlaying(false)}
                 aria-label="Close player"
               >
@@ -1360,9 +1399,7 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
             onClick={start}
             disabled={resolving}
             aria-busy={resolving}
-            aria-label={
-              resolving ? 'Loading TikTok…' : `Play TikTok${title ? `: ${title}` : ''}`
-            }
+            aria-label={resolving ? 'Loading TikTok…' : `Play TikTok${title ? `: ${title}` : ''}`}
           >
             {facadeInner}
           </button>
@@ -1397,6 +1434,7 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
               <Chip
                 variant="Secondary"
                 radii="Pill"
+                className={MobileTouchTarget}
                 onClick={enterFullscreen}
                 aria-label="Fullscreen"
               >
@@ -1406,6 +1444,7 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
                 size="300"
                 radii="300"
                 variant="SurfaceVariant"
+                className={MobileTouchTarget}
                 onClick={() => setPlaying(false)}
                 aria-label="Close player"
               >
@@ -1482,9 +1521,17 @@ function GitHubCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
 }
 
 function SpotifyCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
-  const artworkUrl = (prev['og:image'] as string | undefined) ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  // Route through the homeserver like every other card — a raw og:image would
+  // be an mxc:// URI (broken <img>) on a standard HS, or an off-HS request that
+  // defeats the click-to-play facade on a nonstandard one.
+  const artworkUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 96, 96, 'scale', false)
+    : null;
   const spotifyType = getSpotifyType(url) ?? 'track';
   const typeLabel = spotifyType.charAt(0).toUpperCase() + spotifyType.slice(1);
 
@@ -1534,10 +1581,16 @@ function SpotifyCard({ url, prev }: { url: string; prev: IPreviewUrlResponse })
   );
 }
 
-function SteamCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+// Steam bundle/sub/dlc or other store page — OG card (no per-app widget).
+function SteamStoreCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
-  const thumbnailUrl = (prev['og:image'] as string | undefined) ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  const thumbnailUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 480, 270, 'scale', false)
+    : null;
 
   return (
     <>
@@ -1598,6 +1651,167 @@ function SteamCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
   );
 }
 
+// Steam news / announcement post — rich OG card (Steam has no official embed
+// widget for announcements): banner + headline + body preview.
+function SteamNewsCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const title = prev['og:title'] ?? '';
+  const description = prev['og:description'] ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  const bannerUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 460, 215, 'scale', false)
+    : null;
+
+  return (
+    <Box direction="Column" style={{ width: '100%' }}>
+      {bannerUrl && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className={previewCss.SteamBannerWrapper}
+          aria-label={`View on Steam: ${title}`}
+        >
+          <img className={previewCss.SteamBannerImg} src={bannerUrl} alt={title} loading="lazy" />
+        </a>
+      )}
+      <UrlPreviewContent>
+        <Box alignItems="Center" gap="100" wrap="Wrap">
+          <SiteBadge label="Steam" colorClass={previewCss.BadgeSteam} />
+          <Text size="T200" priority="300" style={{ opacity: 0.7 }}>
+            Announcement
+          </Text>
+        </Box>
+        {title && (
+          <Text
+            priority="400"
+            style={{
+              fontWeight: 700,
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+            }}
+          >
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text size="T200" priority="300">
+            <UrlPreviewDescription>{description}</UrlPreviewDescription>
+          </Text>
+        )}
+        <Text
+          style={linkStyles}
+          as="a"
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          size="T200"
+          priority="300"
+        >
+          View on Steam
+        </Text>
+      </UrlPreviewContent>
+    </Box>
+  );
+}
+
+// Steam store app page — OG header + a click-to-play facade that loads Steam's
+// official store-widget iframe (live, region-aware price / discount / Buy on
+// Steam). Nothing loads from Steam until the user presses "Show price & store".
+function SteamAppCard({
+  url,
+  prev,
+  appId,
+}: {
+  url: string;
+  prev: IPreviewUrlResponse;
+  appId: string;
+}) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [inlineMediaEmbeds] = useSetting(settingsAtom, 'inlineMediaEmbeds');
+  const [showWidget, setShowWidget] = useState(false);
+  const title = prev['og:title'] ?? '';
+  const description = prev['og:description'] ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  const capsuleUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 460, 215, 'scale', false)
+    : null;
+
+  return (
+    <Box direction="Column" style={{ width: '100%' }}>
+      {capsuleUrl && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          className={previewCss.SteamBannerWrapper}
+          aria-label={`View on Steam: ${title}`}
+        >
+          <img className={previewCss.SteamBannerImg} src={capsuleUrl} alt={title} loading="lazy" />
+        </a>
+      )}
+      <UrlPreviewContent>
+        <SiteBadge label="Steam" colorClass={previewCss.BadgeSteam} />
+        {title && (
+          <Text truncate priority="400">
+            <b>{title}</b>
+          </Text>
+        )}
+        {description && (
+          <Text size="T200" priority="300">
+            <UrlPreviewDescription>{description}</UrlPreviewDescription>
+          </Text>
+        )}
+        {showWidget ? (
+          <iframe
+            className={previewCss.SteamWidget}
+            src={steamWidgetEmbedUrl(appId)}
+            title={title ? `Steam store: ${title}` : 'Steam store widget'}
+            sandbox={EMBED_SANDBOX}
+            loading="lazy"
+          />
+        ) : (
+          <Box alignItems="Center" gap="200" justifyContent="SpaceBetween">
+            <Text
+              style={linkStyles}
+              truncate
+              as="a"
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+              size="T200"
+              priority="300"
+            >
+              store.steampowered.com
+            </Text>
+            {inlineMediaEmbeds && (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                onClick={() => setShowWidget(true)}
+                before={<Icon size="50" src={Icons.Setting} />}
+              >
+                <Text size="T200">Show price &amp; store</Text>
+              </Chip>
+            )}
+          </Box>
+        )}
+      </UrlPreviewContent>
+    </Box>
+  );
+}
+
+function SteamCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const target = getSteamTarget(url);
+  if (target?.kind === 'news') return <SteamNewsCard url={url} prev={prev} />;
+  if (target?.kind === 'app') return <SteamAppCard url={url} prev={prev} appId={target.appId} />;
+  return <SteamStoreCard url={url} prev={prev} />;
+}
+
 function WikipediaCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
   const title = prev['og:title'] ?? '';
   const rawDescription = prev['og:description'] ?? '';
@@ -1654,9 +1868,14 @@ function WikipediaCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }
 
 function DiscordCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
   const { t } = useTranslation();
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
-  const iconUrl = (prev['og:image'] as string | undefined) ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  const iconUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 96, 96, 'scale', false)
+    : null;
 
   return (
     <>
@@ -1817,9 +2036,14 @@ function StackOverflowCard({ url, prev }: { url: string; prev: IPreviewUrlRespon
 }
 
 function ImdbCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
-  const posterUrl = (prev['og:image'] as string | undefined) ?? '';
+  const mxcImage = prev['og:image'] as string | undefined;
+  const posterUrl = mxcImage
+    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 120, 180, 'scale', false)
+    : null;
 
   return (
     <>
@@ -1885,8 +2109,13 @@ function GifCard({
   const title = (prev['og:title'] as string | undefined) ?? '';
   const mxcImage = prev['og:image'] as string | undefined;
 
+  // A GIF card exists to show a moving GIF, so request the original rather than
+  // a thumbnail — the thumbnail endpoint would return a frozen first frame.
+  // `loading="lazy"` below keeps it off the wire until it's near the viewport.
   const thumbSrc = mxcImage
-    ? mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
+    ? shouldServeGifOriginal(url, prev)
+      ? mxcUrlToHttp(mx, mxcImage, useAuthentication)
+      : mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
     : null;
 
   // If there's no image, fall back to a generic-style layout
@@ -1984,6 +2213,7 @@ function GenericCard({
           src={displayThumb}
           alt={prev['og:title']}
           title={prev['og:title']}
+          loading="lazy"
           tabIndex={0}
           onKeyDown={(evt) => onEnterOrSpace(() => onOpenViewer())(evt)}
           onClick={onOpenViewer}
@@ -2058,21 +2288,37 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     // Interactive embeds (players, tweets) render in a wider, responsive card so
     // player chrome / tweet content isn't cramped or clipped.
     const embed = parseMediaEmbed(url, window.location.hostname);
-    const wide = !!embed || isTwitterTweet(url);
-    const cardClass = wide ? previewCss.UrlPreviewWide : undefined;
-
-    const renderContent = (prev: IPreviewUrlResponse): React.ReactNode => {
-      // Embeddable media (YouTube/Vimeo/TikTok/Dailymotion/Streamable/Twitch/
-      // Spotify/SoundCloud/Apple Music/Tidal/Instagram/Reddit) → click-to-play tile.
-      // Short "copy-link" share URLs (e.g. vm.tiktok.com, tiktok.com/t/…, youtu.be
-      // redirects) don't carry the id, so fall back to the canonical og:url that
-      // the homeserver already resolved when fetching the preview.
+    // Short "copy-link" links carry no id, so the embed is only resolvable from
+    // the homeserver's canonical og:url. Resolve it here so `wide` reflects the
+    // ACTUALLY rendered card — an og:url-resolved MediaEmbedCard must still get
+    // the wide layout, not the cramped narrow one.
+    const resolveEmbed = (prev: IPreviewUrlResponse): MediaEmbed | null => {
+      if (embed) return embed;
       const ogUrl = prev['og:url'];
-      const resolvedEmbed =
-        embed ??
-        (typeof ogUrl === 'string' && ogUrl !== url
-          ? parseMediaEmbed(ogUrl, window.location.hostname)
-          : null);
+      return typeof ogUrl === 'string' && ogUrl !== url
+        ? parseMediaEmbed(ogUrl, window.location.hostname)
+        : null;
+    };
+    // A Steam app page renders the official ~646px store-widget iframe, so it
+    // needs the wide card too.
+    const steamAppWide = getSteamTarget(url)?.kind === 'app';
+    // Twitter/Twitch/TikTok(fallback) cards render header/thumbnail beside content
+    // in the card flex row; stack them on phones (no-op for the single-column
+    // embed cards). Desktop keeps the row layout.
+    const stackOnMobile = isTwitter(url) || isTwitch(url) || isTikTok(url);
+    const buildCardClass = (wide: boolean): string | undefined =>
+      [wide && previewCss.UrlPreviewWide, stackOnMobile && previewCss.StackOnMobile]
+        .filter(Boolean)
+        .join(' ') || undefined;
+
+    const renderContent = (
+      prev: IPreviewUrlResponse,
+      resolvedEmbed: MediaEmbed | null,
+    ): React.ReactNode => {
+      // Embeddable media (YouTube/Vimeo/TikTok/Dailymotion/Streamable/Twitch/
+      // Spotify/SoundCloud/Apple Music/Tidal/Instagram/Reddit) → click-to-play
+      // tile. `resolvedEmbed` (computed by the caller via resolveEmbed) already
+      // folds in the og:url fallback for short "copy-link" share URLs.
       if (resolvedEmbed) {
         return <MediaEmbedCard url={url} prev={prev} embed={resolvedEmbed} />;
       }
@@ -2137,16 +2383,11 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
           // Generic fallback — skip empty cards
           if (!prev['og:title'] && !prev['og:description']) return null;
 
-          const thumbUrl = mxcUrlToHttp(
-            mx,
-            prev['og:image'] || '',
-            useAuthentication,
-            256,
-            256,
-            'scale',
-            false,
-          );
           const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication);
+          // Show the original for GIFs so they animate; thumbnailing freezes them.
+          const thumbUrl = shouldServeGifOriginal(url, prev)
+            ? imgUrl
+            : mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);
 
           return (
             <GenericCard
@@ -2165,17 +2406,27 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
 
     // Don't render the card wrapper when content is empty (loaded but nothing to show)
     if (previewStatus.status === AsyncStatus.Success) {
-      const content = renderContent(previewStatus.data);
+      const prev = previewStatus.data;
+      const resolvedEmbed = resolveEmbed(prev);
+      const content = renderContent(prev, resolvedEmbed);
       if (content === null) return null;
+      // `wide` follows the resolved embed (incl. the og:url fallback), so a short
+      // link that resolves to a player still gets the wide layout.
+      const wide = !!resolvedEmbed || isTwitterTweet(url) || steamAppWide;
       return (
-        <UrlPreview {...props} ref={ref} className={cardClass}>
+        <UrlPreview {...props} ref={ref} className={buildCardClass(wide)}>
           {content}
         </UrlPreview>
       );
     }
 
+    // Loading/idle: no preview data yet, so base `wide` on the url-only embed.
     return (
-      <UrlPreview {...props} ref={ref} className={cardClass}>
+      <UrlPreview
+        {...props}
+        ref={ref}
+        className={buildCardClass(!!embed || isTwitterTweet(url) || steamAppWide)}
+      >
         <Box grow="Yes" alignItems="Center" justifyContent="Center">
           <Spinner variant="Secondary" size="400" />
         </Box>

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

@@ -114,7 +114,7 @@ export function ServerChip({ server }: { server: string }) {
                 size="300"
                 radii="300"
                 onClick={() => {
-                  window.open(`https://${server}`, '_blank');
+                  window.open(`https://${server}`, '_blank', 'noopener,noreferrer');
                   close();
                 }}
               >

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

@@ -17,6 +17,7 @@ import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { BreakWord, LineClamp2, LineClamp3 } from '../../styles/Text.css';
+import { ModalMobileFull } from '../../styles/Modal.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { AvatarDecoration } from '../avatar-decoration/AvatarDecoration';
@@ -83,7 +84,11 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                <Modal
+                  size="500"
+                  className={ModalMobileFull}
+                  onContextMenu={(evt: any) => evt.stopPropagation()}
+                >
                   <ImageViewer
                     src={viewAvatar}
                     alt={userId}

src/app/features/bookmarks/BookmarksPanel.tsx

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { Room } from 'matrix-js-sdk';
 import { useAtom } from 'jotai';
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';

src/app/features/call-status/CallControl.tsx

@@ -5,6 +5,7 @@ import { StatusDivider } from './components';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 
 type MicrophoneButtonProps = {
   enabled: boolean;
@@ -31,6 +32,7 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
           fill="Soft"
           radii="300"
           size="300"
+          className={MobileTouchTarget}
           onClick={toggleMic}
           outlined
           disabled={disabled || loading}
@@ -66,6 +68,7 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
           fill="Soft"
           radii="300"
           size="300"
+          className={MobileTouchTarget}
           onClick={() => onToggle()}
           aria-label={enabled ? 'Deafen' : 'Undeafen'}
           aria-pressed={enabled}
@@ -108,6 +111,7 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="300"
           size="300"
+          className={MobileTouchTarget}
           onClick={toggleVideo}
           aria-label={enabled ? 'Stop Video' : 'Start Video'}
           aria-pressed={enabled}
@@ -147,6 +151,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
           fill="Soft"
           radii="300"
           size="300"
+          className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
           aria-pressed={enabled}

src/app/features/call/CallControls.tsx

@@ -35,6 +35,7 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { callEmbedAtom } from '../../state/callEmbed';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
@@ -51,18 +52,25 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   const controlRef = useRef<HTMLDivElement>(null);
   const callEmbedRef = useCallEmbedRef();
   const setCallEmbed = useSetAtom(callEmbedAtom);
-  const [compact, setCompact] = useState(document.body.clientWidth < 500);
+  const screenSize = useScreenSize();
+  const [narrowContainer, setNarrowContainer] = useState(document.body.clientWidth < 500);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useResizeObserver(
     useCallback(() => {
       const element = controlRef.current;
       if (!element) return;
-      setCompact(element.clientWidth < 500);
+      setNarrowContainer(element.clientWidth < 500);
     }, []),
     useCallback(() => controlRef.current, []),
   );
 
+  // Collapse to the stacked/compact layout whenever the bar's own container is
+  // narrow (a small desktop call window) OR the viewport is a phone. The old
+  // element-only `< 500` check left the ~11-control row overflowing off-screen
+  // in the 500–750px band (landscape phones / small tablets).
+  const compact = narrowContainer || screenSize === ScreenSize.Mobile;
+
   useEffect(() => {
     const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFullscreenChange);
@@ -330,6 +338,9 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               padding: '1rem 1.25rem',
               zIndex: 100,
               minWidth: '260px',
+              // Don't run past the screen edges on a narrow phone (centered via
+              // translateX(-50%)); clamp to the viewport minus a small margin.
+              maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
               boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
               display: 'flex',
               flexDirection: 'column',
@@ -376,6 +387,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
         radii="500"
         alignItems="Center"
         justifyContent="SpaceBetween"
+        wrap="Wrap"
       >
         <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">

src/app/features/call/CallSoundboard.tsx

@@ -67,9 +67,11 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
   // C-L6: the play() flow schedules a 30s safety timeout that clears playingKey;
   // guard those setState calls against the component unmounting first.
   const mountedRef = useRef(true);
+  const safetyTimerRef = useRef<number | undefined>(undefined);
   useEffect(
     () => () => {
       mountedRef.current = false;
+      if (safetyTimerRef.current !== undefined) window.clearTimeout(safetyTimerRef.current);
     },
     [],
   );
@@ -96,7 +98,17 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
       if (playingKey) return; // one at a time (fork also enforces this)
       setPlayingKey(flat.key);
       setError(undefined);
+      // Per-play timer token: `done` clears its OWN timer by identity, so a
+      // stale done() from a prior clip can't disarm a newer clip's safety timer
+      // (which — since a rejected audio.play() fires neither ended nor error —
+      // is sometimes the only thing that unsticks the playingKey guard).
+      let myTimer: number | undefined;
       const done = () => {
+        if (myTimer !== undefined) {
+          window.clearTimeout(myTimer);
+          if (safetyTimerRef.current === myTimer) safetyTimerRef.current = undefined;
+          myTimer = undefined;
+        }
         if (!mountedRef.current) return;
         setPlayingKey((k) => (k === flat.key ? undefined : k));
       };
@@ -108,11 +120,12 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
         if (audio) {
           audio.addEventListener('ended', done, { once: true });
           audio.addEventListener('error', done, { once: true });
+          // Safety: clear the guard even if the audio never signals end.
+          myTimer = window.setTimeout(done, 30_000);
+          safetyTimerRef.current = myTimer;
         } else {
           done();
         }
-        // Safety: clear the guard even if the audio never signals end.
-        window.setTimeout(done, 30_000);
       } catch {
         setError('Could not play that clip.');
         done();
@@ -135,7 +148,12 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Menu style={{ maxWidth: manage ? toRem(420) : toRem(340), maxHeight: '70vh' }}>
+          <Menu
+            style={{
+              maxWidth: `min(${manage ? toRem(420) : toRem(340)}, calc(100vw - 2 * ${config.space.S400}))`,
+              maxHeight: '70vh',
+            }}
+          >
             <Box direction="Column" style={{ maxHeight: '70vh' }}>
               <Box
                 shrink="No"

src/app/features/call/Controls.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds';
 import { useAtom } from 'jotai';
 import * as css from './styles.css';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 import { callChatAtom } from '../../state/callEmbed';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 
@@ -36,6 +37,7 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={toggleMic}
           aria-label={enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
           outlined
@@ -70,6 +72,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={() => onToggle()}
           aria-label={enabled ? 'Undeafen' : 'Deafen'}
           outlined
@@ -113,6 +116,7 @@ export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={toggleVideo}
           outlined
           disabled={disabled || loading}
@@ -155,6 +159,7 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={() => onToggle()}
           aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
           outlined
@@ -200,6 +205,7 @@ export function FullscreenButton({ isFullscreen, onToggle }: FullscreenButtonPro
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
           aria-pressed={isFullscreen}
@@ -234,6 +240,7 @@ export function ScreenshareAudioButton({ muted, onToggle }: ScreenshareAudioButt
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={muted ? 'Unmute Screenshare Audio' : 'Mute Screenshare Audio'}
           aria-pressed={muted}
@@ -266,6 +273,7 @@ export function ChatButton() {
           fill="Soft"
           radii="400"
           size="400"
+          className={MobileTouchTarget}
           onClick={() => setChat(!chat)}
           aria-label={chat ? 'Close Chat' : 'Open Chat'}
           aria-pressed={chat}

src/app/features/call/PrescreenControls.tsx

@@ -17,15 +17,29 @@ function useMediaPermissions(): MediaPermState {
   useEffect(() => {
     if (!navigator.permissions) {
       setState('unknown');
-      return;
+      return undefined;
     }
+    let cancelled = false;
+    let permStatus: PermissionStatus | undefined;
     navigator.permissions
       .query({ name: 'microphone' as unknown as PermissionDescriptor['name'] })
       .then((result) => {
+        if (cancelled) return;
+        permStatus = result;
         setState(result.state as MediaPermState);
-        result.onchange = () => setState(result.state as MediaPermState);
+        result.onchange = () => {
+          if (!cancelled) setState(result.state as MediaPermState);
+        };
       })
-      .catch(() => setState('unknown'));
+      .catch(() => {
+        if (!cancelled) setState('unknown');
+      });
+    // Detach the onchange handler on unmount so it can't setState afterward (and
+    // so the PermissionStatus doesn't retain the callback).
+    return () => {
+      cancelled = true;
+      if (permStatus) permStatus.onchange = null;
+    };
   }, []);
 
   return state;

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -58,7 +58,6 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       await mx.setRoomAccountData(room.roomId, type as any, content);
     },
     [mx, room.roomId],

src/app/features/common-settings/general/RoomQuality.tsx

@@ -55,7 +55,6 @@ export function RoomQuality({ permissions }: RoomQualityProps) {
   const [submitState, submit] = useAsyncCallback(
     useCallback(
       async (next: RoomQualityContent) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         await sendStateEvent(mx, room.roomId, StateEvent.LotusRoomQuality, next);
       },
       [mx, room.roomId],

src/app/features/common-settings/general/RoomRetention.tsx

@@ -31,7 +31,6 @@ export function RoomRetention({ permissions }: RoomRetentionProps) {
         const content: RetentionContent = ms > 0 ? { max_lifetime: ms } : {};
         // Lotus custom-state convention: cast the type key (RoomRetention isn't a
         // typed key in the SDK's StateEvents map).
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         await sendStateEvent(mx, room.roomId, StateEvent.RoomRetention, content);
       },
       [mx, room.roomId],

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

@@ -119,7 +119,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   return (
     <Box onSubmit={handleSubmit} as="form" direction="Column" gap="400">
       <Box direction="Column" gap="300">
-        <Box gap="200">
+        <Box gap="200" wrap="Wrap">
           <Box shrink="No" direction="Column" gap="100">
             <Text size="L400">Color</Text>
             <Box gap="200">

src/app/features/message-search/SearchFilters.tsx

@@ -152,7 +152,10 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
     getRoomNameStr,
     SEARCH_OPTS,
   );
-  const rooms = Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(mx));
+  const rooms = useMemo(
+    () => Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(mx)),
+    [searchResult, roomList, mx],
+  );
 
   const virtualizer = useVirtualizer({
     count: rooms.length,

src/app/features/message-search/useLocalMessageSearch.ts

@@ -46,7 +46,6 @@ const extractText = (event: MatrixEvent): ExtractedText | null => {
   const content = event.getContent();
 
   if (POLL_START_TYPES.includes(evType)) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const poll = (content['m.poll'] ?? content['org.matrix.msc3381.poll.start']) as any;
     if (!poll) return null;
     const qBody =
@@ -57,7 +56,6 @@ const extractText = (event: MatrixEvent): ExtractedText | null => {
       .map(
         (a) =>
           ((a['m.text'] as Array<{ body: string }> | undefined)?.[0]?.body ??
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (a['org.matrix.msc3381.poll.answer'] as any)?.body ??
             '') as string,
       )
@@ -104,7 +102,6 @@ const rowToResultItem = (row: SearchCacheRow): ResultItem => {
   };
   return {
     rank: 0,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     event: syntheticEvent as any,
     context: { events_before: [], events_after: [], profile_info: {} },
   };
@@ -227,7 +224,6 @@ export const useLocalMessageSearch = () => {
           };
           memoryItems.push({
             rank: 0,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             event: syntheticEvent as any,
             context: { events_before: [], events_after: [], profile_info: {} },
           });

src/app/features/message-search/useMessageSearch.ts

@@ -146,7 +146,6 @@ export const useMessageSearch = (params: MessageSearchParams) => {
               ...(fromTs !== undefined && { from_ts: fromTs }),
               ...(toTs !== undefined && { to_ts: toTs }),
               ...(containsUrl !== undefined && { contains_url: containsUrl }),
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
             include_state: false,
             order_by: order as SearchOrderBy.Recent,

src/app/features/room-nav/RoomNavItem.tsx

@@ -698,7 +698,9 @@ function RoomNavItem_({
   );
   const hasDraft = useAtomValue(hasDraftAtom);
 
-  const latestEvent = useRoomLatestRenderedEvent(room);
+  // Only DM rows render this preview — pass `direct` so non-DM nav items don't
+  // register the global decryption listener (PERF-5).
+  const latestEvent = useRoomLatestRenderedEvent(room, !!direct);
   const dmPreview = (() => {
     if (!direct || !latestEvent) return null;
     const type = latestEvent.getType();

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

@@ -92,6 +92,16 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
           const evId = ev.getId();
           if (!evId || seen.has(evId)) continue;
           seen.add(evId);
+          // Advance the raw pagination boundary for EVERY event (any type,
+          // decrypted or not) — getTs() is unencrypted metadata. Gating this on
+          // a decrypted m.room.message let undecryptable/non-message old events
+          // stall oldestRawTs, so the fromTs break never fired → over-paginate
+          // and a false "truncated".
+          const ts = ev.getTs();
+          // Require a positive ts: an event with a bogus 0/negative
+          // origin_server_ts must not collapse the boundary and trigger an early
+          // break (silent under-pagination in the export).
+          if (ts > 0 && ts < oldestRawTs) oldestRawTs = ts;
           // Attempt decryption for events that haven't been decrypted yet
           // (paginateEventTimeline may fetch events before the SDK decrypts them)
           if (ev.isEncrypted() && !ev.getClearContent()) {
@@ -100,8 +110,6 @@ export function ExportRoomHistory({ requestClose }: ExportRoomHistoryProps) {
           }
           if (ev.getType() !== EventType.RoomMessage) continue;
           if (ev.isDecryptionFailure()) continue;
-          const ts = ev.getTs();
-          if (ts < oldestRawTs) oldestRawTs = ts;
           if (fromTs !== null && ts < fromTs) continue;
           if (toTs !== null && ts > toTs) continue;
           const content = ev.getContent();

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

@@ -307,7 +307,7 @@ export function PolicyListViewer({ requestClose }: PolicyListViewerProps) {
                     gap="300"
                   >
                     {/* Tabs */}
-                    <Box gap="200">
+                    <Box gap="200" wrap="Wrap">
                       <TabButton
                         label="Users"
                         count={userEntries.length}

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

@@ -32,6 +32,8 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../components/sequence-card';
 import { SequenceCardStyle } from '../common-settings/styles.css';
 import { stopPropagation } from '../../utils/keyboard';
+import { isValidServerPattern, matchesAnyGlob } from '../../utils/serverAcl';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useModalStyle } from '../../hooks/useModalStyle';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -48,57 +50,6 @@ const DEFAULT_ACL: ServerAclContent = {
   allow_ip_literals: false,
 };
 
-// ── Validation ────────────────────────────────────────────────────────────────
-
-/**
- * Validate a server-name glob for an ACL entry.
- *
- * Matrix ACL `allow`/`deny` entries are globs where `*` (any run of chars) and
- * `?` (single char) may appear ANYWHERE — e.g. `*`, `*.example.com`,
- * `1.2.3.*`, `10.0.0.?`, `*.evil.*`, `*bad*`. We therefore validate the *glob*
- * rather than a concrete hostname:
- *   - reject empty / whitespace-only
- *   - allow only hostname/IP chars plus the wildcards `*` and `?`
- *     (letters, digits, dots, hyphens, colons for ports/IPv6 — NO underscore)
- *   - reject consecutive/leading/trailing dots (`...`, `.foo`, `foo.`)
- *   - reject entries with no alphanumeric or wildcard char (bare `-`, lone `:`)
- */
-function isValidServerPattern(value: string): boolean {
-  const v = value.trim();
-  if (!v) return false;
-  // Only hostname/IP glob chars — wildcards may appear at any position.
-  if (!/^[A-Za-z0-9.:*?-]+$/.test(v)) return false;
-  // Structural rules for the dotted parts.
-  if (v.startsWith('.') || v.endsWith('.') || v.includes('..')) return false;
-  // Must carry actual signal — reject pure punctuation like `-`, `:` or `-.-`.
-  if (!/[A-Za-z0-9*?]/.test(v)) return false;
-  return true;
-}
-
-/**
- * Convert an ACL glob (`*` = any run, `?` = single char) to an anchored RegExp,
- * escaping every other regex metacharacter. Used only for local self-ban
- * detection — never sent to the server.
- */
-function globToRegExp(glob: string): RegExp {
-  const escaped = glob.replace(/[.+^${}()|[\]\\]/g, '\\$&');
-  const pattern = escaped.replace(/\*/g, '.*').replace(/\?/g, '.');
-  // Case-INsensitive: Synapse's glob_to_regex uses IGNORECASE and hostnames are
-  // case-insensitive, so a deny like `MATRIX.foo.org` must still be detected as
-  // self-banning `matrix.foo.org` (otherwise the warning is a false negative).
-  return new RegExp(`^${pattern}$`, 'i');
-}
-
-function matchesAnyGlob(domain: string, globs: string[]): boolean {
-  return globs.some((glob) => {
-    try {
-      return globToRegExp(glob).test(domain);
-    } catch {
-      return false;
-    }
-  });
-}
-
 // ── Server list sub-component ─────────────────────────────────────────────────
 
 type ServerListProps = {
@@ -198,6 +149,7 @@ function ServerList({ label, entries, canEdit, onAdd, onRemove }: ServerListProp
                   size="300"
                   variant="Background"
                   radii="300"
+                  className={MobileTouchTarget}
                   aria-label={`Remove ${entry}`}
                   onClick={() => onRemove(i)}
                   style={{ flexShrink: 0 }}
@@ -389,7 +341,6 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
                       variant="Primary"
                     />
                     <Box direction="Column" gap="0">
-                      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
                       <label
                         htmlFor="allow-ip-literals"
                         style={{ cursor: canEdit ? 'pointer' : 'default' }}

src/app/features/room/MediaGallery.tsx

@@ -190,6 +190,7 @@ function LightboxMedia({
   pan,
   cursor,
   onMouseDown,
+  onTouchStart,
   onImageDoubleClick,
 }: {
   item: LightboxItem;
@@ -198,6 +199,7 @@ function LightboxMedia({
   pan: Pan;
   cursor: string;
   onMouseDown: React.MouseEventHandler<HTMLElement>;
+  onTouchStart: React.TouchEventHandler<HTMLElement>;
   onImageDoubleClick: () => void;
 }) {
   const mx = useMatrixClient();
@@ -253,6 +255,7 @@ function LightboxMedia({
             alt={item.body}
             draggable={false}
             onMouseDown={onMouseDown}
+            onTouchStart={onTouchStart}
             onDoubleClick={onImageDoubleClick}
             style={{
               maxWidth: '100%',
@@ -297,7 +300,7 @@ function Lightbox({
   const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
   // Pan is only active for a zoomed-in image; usePan resets its offset when this
   // flips false (i.e. back to 1x, on navigation, or on a video).
-  const { pan, cursor, onMouseDown } = usePan(isImage && zoom !== 1);
+  const { pan, cursor, onMouseDown, onTouchStart } = usePan(isImage && zoom !== 1);
   const toggleZoom = useCallback(() => setZoom((z) => (z === 1 ? 2 : 1)), [setZoom]);
 
   // Reset zoom when navigating to another item (and thus pan, via usePan).
@@ -512,6 +515,7 @@ function Lightbox({
                 pan={pan}
                 cursor={cursor}
                 onMouseDown={onMouseDown}
+                onTouchStart={onTouchStart}
                 onImageDoubleClick={toggleZoom}
               />
             </Box>
@@ -1065,7 +1069,9 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                       // Sanitize the mimetype the way MAudio does (e.g. application/ogg →
                       // audio/ogg) so the decrypted blob actually plays.
                       const mimeType = getBlobSafeMimeType(c.info?.mimetype ?? 'audio/ogg');
-                      const filename = body.includes('.') ? body : `${body}.${mimeTypeToExt(mimeType)}`;
+                      const filename = body.includes('.')
+                        ? body
+                        : `${body}.${mimeTypeToExt(mimeType)}`;
                       const waveform = (
                         c as unknown as { 'org.matrix.msc1767.audio'?: { waveform?: number[] } }
                       )['org.matrix.msc1767.audio']?.waveform;

src/app/features/room/MembersDrawer.tsx

@@ -30,6 +30,7 @@ import {
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 import { Membership } from '../../../types/matrix/room';
 
 import * as css from './MembersDrawer.css';
@@ -460,6 +461,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                           variant="Success"
                           radii="300"
                           fill="Soft"
+                          className={MobileTouchTarget}
                           onClick={() => mx.invite(room.roomId, knockMember.userId)}
                         >
                           <Text size="B300">Approve</Text>
@@ -469,6 +471,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                           variant="Critical"
                           radii="300"
                           fill="Soft"
+                          className={MobileTouchTarget}
                           onClick={() => mx.kick(room.roomId, knockMember.userId)}
                         >
                           <Text size="B300">Deny</Text>

src/app/features/room/PollCreator.tsx

@@ -34,6 +34,10 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
   const [question, setQuestion] = useState('');
   const [options, setOptions] = useState<string[]>(['', '']);
   const [isMultiple, setIsMultiple] = useState(false);
+  // For multiple-choice polls: the most options a voter may pick. Defaults high
+  // so an untouched multiple poll means "select all that apply" (the previous
+  // behavior); the effective value is clamped to the current option count.
+  const [maxSelections, setMaxSelections] = useState(10);
   // Results visibility: disclosed (live results, default) vs undisclosed (hidden
   // until the poll is ended).
   const [disclosed, setDisclosed] = useState(true);
@@ -78,15 +82,16 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
     try {
       // Text fallback for clients that don't understand polls: the question + a
       // numbered list of the options.
-      const fallbackBody = [
-        trimmedQuestion,
-        ...filledOptions.map((o, i) => `${i + 1}. ${o}`),
-      ].join('\n');
+      const fallbackBody = [trimmedQuestion, ...filledOptions.map((o, i) => `${i + 1}. ${o}`)].join(
+        '\n',
+      );
       await mx.sendEvent(roomId, 'm.poll.start' as any, {
         'm.poll': {
           question: { 'm.text': trimmedQuestion },
           answers: filledOptions.map((o, i) => ({ 'm.id': `${i}`, 'm.text': o })),
-          max_selections: isMultiple ? filledOptions.length : 1,
+          max_selections: isMultiple
+            ? Math.min(Math.max(2, maxSelections), filledOptions.length)
+            : 1,
           kind: disclosed ? 'm.poll.disclosed' : 'm.poll.undisclosed',
         },
         body: fallbackBody,
@@ -223,6 +228,31 @@ export function PollCreator({ roomId, onClose }: PollCreatorProps) {
                     );
                   })}
                 </Box>
+                {isMultiple && (
+                  <Box alignItems="Center" gap="200" style={{ marginTop: config.space.S200 }}>
+                    <Text as="label" htmlFor="poll-max-select" size="T200" priority="400">
+                      Voters can pick up to
+                    </Text>
+                    <Input
+                      id="poll-max-select"
+                      variant="Background"
+                      size="300"
+                      type="number"
+                      min={2}
+                      max={options.length}
+                      value={Math.min(maxSelections, options.length)}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                        setMaxSelections(
+                          Math.min(options.length, Math.max(2, parseInt(e.target.value, 10) || 2)),
+                        )
+                      }
+                      style={{ width: '4rem' }}
+                    />
+                    <Text size="T200" priority="300">
+                      of {options.length} options
+                    </Text>
+                  </Box>
+                )}
               </Box>
 
               {/* Results visibility */}

src/app/features/room/RoomInput.tsx

@@ -157,7 +157,10 @@ interface RoomInputProps {
   editableName?: string;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room, threadRootId, editableName = 'RoomInput' }, ref) => {
+  (
+    { editor, fileDropContainerRef, roomId, room, threadRootId, editableName = 'RoomInput' },
+    ref,
+  ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
@@ -227,7 +230,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
     const [composerToolbarButtons] = useSetting(settingsAtom, 'composerToolbarButtons');
-    const touchTarget = mobileOrTablet() ? { minWidth: '44px', minHeight: '44px' } : undefined;
+    const isMobile = mobileOrTablet();
+    // On phones the composer's secondary action buttons (attach, GIF, poll,
+    // location, voice, formatting, schedule) collapse behind a "+" toggle so the
+    // input stays one compact row instead of wrapping into a tall stack. Emoji +
+    // Send remain inline. Desktop keeps everything inline (isMobile === false).
+    const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
+    const touchTarget = isMobile ? { minWidth: '44px', minHeight: '44px' } : undefined;
     const showFormat = composerToolbarButtons?.showFormat ?? true;
     const showEmoji = composerToolbarButtons?.showEmoji ?? true;
     const showSticker = composerToolbarButtons?.showSticker ?? true;
@@ -518,9 +527,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const submit = useCallback(() => {
       uploadBoardHandlers.current?.handleSend();
 
-      // Slash-command interpretation is disabled in thread mode (v1): "/foo"
-      // sends literally rather than being parsed as a command.
-      const commandName = threadRootId ? undefined : getBeginCommand(editor);
+      // Slash commands work in threads too: content-transform commands (/me,
+      // /notice, /shrug, /tableflip, /unflip) flow into the normal send below,
+      // which routes to the thread via `threadRootId`; the rest (/invite, /kick,
+      // …) are room-level actions. This also matches the command autocomplete,
+      // which is already shown in the thread composer.
+      const commandName = getBeginCommand(editor);
       let plainText = toPlainText(editor.children, isMarkdown).trim();
       let customHtml = trimCustomHtml(
         toMatrixCustomHTML(editor.children, {
@@ -870,6 +882,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       );
     }
 
+    // Mobile "+" overflow: the `after` builder stashes the collapsed secondary
+    // buttons here and the `bottom` slot renders them when the toggle is open.
+    // React evaluates JSX props in source order (before → after → bottom), so
+    // `after` assigns this before `bottom` reads it within the same render.
+    let composerOverflow: ReactNode = null;
+
     return (
       <div ref={ref}>
         {selectedFiles.length > 0 && (
@@ -1029,16 +1047,31 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             )
           }
           before={
-            <IconButton
-              onClick={() => pickFile('*')}
-              aria-label="Attach file"
-              variant="SurfaceVariant"
-              size="300"
-              radii="300"
-              style={touchTarget}
-            >
-              <Icon src={Icons.PlusCircle} />
-            </IconButton>
+            isMobile ? (
+              <IconButton
+                onClick={() => setMobileToolsOpen((open) => !open)}
+                aria-label="More actions"
+                aria-expanded={mobileToolsOpen}
+                aria-controls="composer-more-actions"
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+                style={touchTarget}
+              >
+                <Icon src={mobileToolsOpen ? Icons.Cross : Icons.Plus} />
+              </IconButton>
+            ) : (
+              <IconButton
+                onClick={() => pickFile('*')}
+                aria-label="Attach file"
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+                style={touchTarget}
+              >
+                <Icon src={Icons.PlusCircle} />
+              </IconButton>
+            )
           }
           after={(() => {
             const formatButton = showFormat ? (
@@ -1300,9 +1333,37 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               }
             });
 
+            // Mobile: keep only emoji/sticker inline beside Send; the rest move
+            // into the "+" overflow row (rendered via `bottom`), led by the attach
+            // button that `before` gives up on mobile. Desktop renders all inline.
+            const emojiInline = orderedButtons.filter(
+              (node) => React.isValidElement(node) && node.key === 'showEmojiSticker',
+            );
+            const overflowButtons = orderedButtons.filter(
+              (node) => !(React.isValidElement(node) && node.key === 'showEmojiSticker'),
+            );
+            if (isMobile) {
+              composerOverflow = (
+                <>
+                  <IconButton
+                    key="showAttach"
+                    onClick={() => pickFile('*')}
+                    aria-label="Attach file"
+                    variant="SurfaceVariant"
+                    size="300"
+                    radii="300"
+                    style={touchTarget}
+                  >
+                    <Icon src={Icons.PlusCircle} />
+                  </IconButton>
+                  {overflowButtons}
+                </>
+              );
+            }
+
             return (
               <>
-                {orderedButtons}
+                {isMobile ? emojiInline : orderedButtons}
                 {gifError && (
                   <Text
                     size="T200"
@@ -1359,12 +1420,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             );
           })()}
           bottom={
-            toolbar && (
-              <div>
-                <Line variant="SurfaceVariant" size="300" />
-                <Toolbar />
-              </div>
-            )
+            <>
+              {isMobile && mobileToolsOpen && composerOverflow && (
+                <div>
+                  <Line variant="SurfaceVariant" size="300" />
+                  <Box
+                    id="composer-more-actions"
+                    role="group"
+                    aria-label="More actions"
+                    alignItems="Center"
+                    gap="100"
+                    wrap="Wrap"
+                    style={{ padding: config.space.S200 }}
+                  >
+                    {composerOverflow}
+                  </Box>
+                </div>
+              )}
+              {toolbar && (
+                <div>
+                  <Line variant="SurfaceVariant" size="300" />
+                  <Toolbar />
+                </div>
+              )}
+            </>
           }
         />
         {pollOpen && <PollCreator room={room} roomId={roomId} onClose={() => setPollOpen(false)} />}

src/app/features/room/RoomView.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Box, Text, config } from 'folds';
+import { Box, Button, Text, config } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
+import { Transforms } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { StateEvent } from '../../../types/matrix/room';
@@ -152,17 +153,38 @@ export function RoomView({ eventId }: { eventId?: string }) {
             <>
               {canMessage && (
                 <ErrorBoundary
-                  fallback={
+                  onReset={() => {
+                    // The composer crash is a transient bad-selection render
+                    // (e.g. after an autocomplete insert); the draft content is
+                    // intact. Clear the selection so the remounted composer can
+                    // render — the user clicks in to continue, no page refresh.
+                    try {
+                      Transforms.deselect(editor);
+                    } catch {
+                      /* editor already in a safe state */
+                    }
+                  }}
+                  fallbackRender={({ resetErrorBoundary }) => (
                     <RoomInputPlaceholder
+                      role="alert"
                       style={{ padding: config.space.S200 }}
+                      direction="Column"
                       alignItems="Center"
                       justifyContent="Center"
+                      gap="200"
                     >
-                      <Text align="Center">
-                        Message composer encountered an error. Try refreshing.
-                      </Text>
+                      <Text align="Center">The message composer hit a snag.</Text>
+                      <Button
+                        size="300"
+                        variant="Secondary"
+                        fill="Soft"
+                        radii="300"
+                        onClick={resetErrorBoundary}
+                      >
+                        <Text size="B300">Reload composer</Text>
+                      </Button>
                     </RoomInputPlaceholder>
-                  }
+                  )}
                 >
                   <RoomInput
                     room={room}

src/app/features/room/RoomViewFollowing.tsx

@@ -21,6 +21,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomLatestRenderedEvent } from '../../hooks/useRoomLatestRenderedEvent';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { EventReaders } from '../../components/event-readers';
+import { useModalStyle } from '../../hooks/useModalStyle';
 import { stopPropagation } from '../../utils/keyboard';
 
 export function RoomViewFollowingPlaceholder() {
@@ -34,6 +35,7 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
   ({ className, room, ...props }, ref) => {
     const mx = useMatrixClient();
     const [open, setOpen] = useState(false);
+    const modalStyle = useModalStyle(360);
     const latestEvent = useRoomLatestRenderedEvent(room);
     const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId());
     const names = latestEventReaders
@@ -55,7 +57,7 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Modal variant="Surface" size="300">
+                <Modal variant="Surface" size="300" style={modalStyle}>
                   <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
                 </Modal>
               </FocusTrap>

src/app/features/room/ScheduleMessageModal.tsx

@@ -21,7 +21,13 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { scheduleMessage } from '../../utils/scheduledMessages';
 import { useModalStyle } from '../../hooks/useModalStyle';
-import { toLocalDate, toLocalTime, parseLocalDateTime, pickerInputStyle } from '../../utils/datetimeInput';
+import {
+  toLocalDate,
+  toLocalTime,
+  parseLocalDateTime,
+  pickerInputStyle,
+  formatFriendlyDateTime,
+} from '../../utils/datetimeInput';
 
 interface ScheduleMessageModalProps {
   roomId: string;
@@ -47,25 +53,6 @@ function formatRelativeTime(ms: number): string {
   return 'in less than a minute';
 }
 
-function formatSendAt(sendAt: Date): string {
-  const now = new Date();
-  const isToday =
-    sendAt.getFullYear() === now.getFullYear() &&
-    sendAt.getMonth() === now.getMonth() &&
-    sendAt.getDate() === now.getDate();
-  const tomorrow = new Date(now);
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  const isTomorrow =
-    sendAt.getFullYear() === tomorrow.getFullYear() &&
-    sendAt.getMonth() === tomorrow.getMonth() &&
-    sendAt.getDate() === tomorrow.getDate();
-
-  const timeStr = sendAt.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-  if (isToday) return `Today at ${timeStr}`;
-  if (isTomorrow) return `Tomorrow at ${timeStr}`;
-  return `${sendAt.toLocaleDateString()} at ${timeStr}`;
-}
-
 export function ScheduleMessageModal({
   roomId,
   initialBody,
@@ -112,7 +99,10 @@ export function ScheduleMessageModal({
       setPreview(null);
       return;
     }
-    setPreview({ label: formatSendAt(sendAt), relative: formatRelativeTime(diffMs) });
+    setPreview({
+      label: formatFriendlyDateTime(sendAt.getTime()),
+      relative: formatRelativeTime(diffMs),
+    });
   }, [getSendAt]);
 
   useEffect(() => {

src/app/features/room/ScheduledMessagesTray.tsx

@@ -242,119 +242,123 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
           background: color.SurfaceVariant.Container,
         }}
       >
-      {/* Tray header */}
-      <Button
-        variant="Secondary"
-        fill="None"
-        radii="0"
-        onClick={() => setExpanded((v) => !v)}
-        aria-expanded={expanded}
-        aria-label={`${messages.length} scheduled message${messages.length !== 1 ? 's' : ''}`}
-        before={<Icon src={Icons.Clock} size="50" />}
-        after={<Icon src={expanded ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
-        style={{
-          padding: `${config.space.S100} ${config.space.S300}`,
-          justifyContent: 'flex-start',
-        }}
-      >
-        <Text size="T200" style={{ flex: 1, fontWeight: 600, textAlign: 'left' }}>
-          {messages.length} scheduled message{messages.length !== 1 ? 's' : ''}
-        </Text>
-      </Button>
+        {/* Tray header */}
+        <Button
+          variant="Secondary"
+          fill="None"
+          radii="0"
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          aria-label={`${messages.length} scheduled message${messages.length !== 1 ? 's' : ''}`}
+          before={<Icon src={Icons.Clock} size="50" />}
+          after={<Icon src={expanded ? Icons.ChevronTop : Icons.ChevronBottom} size="50" />}
+          style={{
+            padding: `${config.space.S100} ${config.space.S300}`,
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Text size="T200" style={{ flex: 1, fontWeight: 600, textAlign: 'left' }}>
+            {messages.length} scheduled message{messages.length !== 1 ? 's' : ''}
+          </Text>
+        </Button>
 
-      {/* Tray items */}
-      {expanded && (
-        <Box direction="Column">
-          {messages.map((msg) => {
-            const bodyPreview =
-              typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)';
-            const rowDesc = `${bodyPreview} at ${formatSendAt(msg.sendAt)}`;
-            return (
-            <Box
-              key={msg.delayId}
-              direction="Column"
-              style={{
-                padding: `${config.space.S100} ${config.space.S300}`,
-                borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
-              }}
-            >
-              <Box alignItems="Center" gap="200">
-                <Text
-                  size="T200"
-                  priority="400"
+        {/* Tray items */}
+        {expanded && (
+          <Box direction="Column">
+            {messages.map((msg) => {
+              const bodyPreview =
+                typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)';
+              const rowDesc = `${bodyPreview} at ${formatSendAt(msg.sendAt)}`;
+              return (
+                <Box
+                  key={msg.delayId}
+                  direction="Column"
                   style={{
-                    flex: 1,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
+                    padding: `${config.space.S100} ${config.space.S300}`,
+                    borderTop: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
                   }}
                 >
-                  {bodyPreview}
-                </Text>
-                <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
-                  {formatSendAt(msg.sendAt)}
-                </Text>
-                <IconButton
-                  size="300"
-                  radii="300"
-                  variant="SurfaceVariant"
-                  aria-label={`Send scheduled message now: ${rowDesc}`}
-                  disabled={cancelling.has(msg.delayId)}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleSendNow(msg);
-                  }}
-                >
-                  <Icon src={Icons.Send} size="50" />
-                </IconButton>
-                <IconButton
-                  size="300"
-                  radii="300"
-                  variant="SurfaceVariant"
-                  aria-label={`Edit scheduled message: ${rowDesc}`}
-                  disabled={cancelling.has(msg.delayId)}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setEditing(msg);
-                  }}
-                >
-                  <Icon src={Icons.Pencil} size="50" />
-                </IconButton>
-                <IconButton
-                  size="300"
-                  radii="300"
-                  variant="SurfaceVariant"
-                  aria-label={`Cancel scheduled message: ${rowDesc}`}
-                  disabled={cancelling.has(msg.delayId)}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleCancel(msg);
-                  }}
-                >
-                  <Icon src={Icons.Cross} size="50" />
-                </IconButton>
-              </Box>
-              {cancelErrors.has(msg.delayId) && (
-                <Text
-                  size="T200"
-                  style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
-                >
-                  Could not cancel this message. Try again.
-                </Text>
-              )}
-              {sendErrors.has(msg.delayId) && (
-                <Text
-                  size="T200"
-                  style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
-                >
-                  Could not send now. Try again.
-                </Text>
-              )}
-            </Box>
-            );
-          })}
-        </Box>
-      )}
+                  <Box alignItems="Center" gap="200">
+                    <Text
+                      size="T200"
+                      priority="400"
+                      style={{
+                        flex: 1,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {bodyPreview}
+                    </Text>
+                    <Text
+                      size="T200"
+                      priority="300"
+                      style={{ whiteSpace: 'nowrap', flexShrink: 0 }}
+                    >
+                      {formatSendAt(msg.sendAt)}
+                    </Text>
+                    <IconButton
+                      size="300"
+                      radii="300"
+                      variant="SurfaceVariant"
+                      aria-label={`Send scheduled message now: ${rowDesc}`}
+                      disabled={cancelling.has(msg.delayId)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSendNow(msg);
+                      }}
+                    >
+                      <Icon src={Icons.Send} size="50" />
+                    </IconButton>
+                    <IconButton
+                      size="300"
+                      radii="300"
+                      variant="SurfaceVariant"
+                      aria-label={`Edit scheduled message: ${rowDesc}`}
+                      disabled={cancelling.has(msg.delayId)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setEditing(msg);
+                      }}
+                    >
+                      <Icon src={Icons.Pencil} size="50" />
+                    </IconButton>
+                    <IconButton
+                      size="300"
+                      radii="300"
+                      variant="SurfaceVariant"
+                      aria-label={`Cancel scheduled message: ${rowDesc}`}
+                      disabled={cancelling.has(msg.delayId)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleCancel(msg);
+                      }}
+                    >
+                      <Icon src={Icons.Cross} size="50" />
+                    </IconButton>
+                  </Box>
+                  {cancelErrors.has(msg.delayId) && (
+                    <Text
+                      size="T200"
+                      style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
+                    >
+                      Could not cancel this message. Try again.
+                    </Text>
+                  )}
+                  {sendErrors.has(msg.delayId) && (
+                    <Text
+                      size="T200"
+                      style={{ color: color.Critical.Main, paddingTop: config.space.S100 }}
+                    >
+                      Could not send now. Try again.
+                    </Text>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+        )}
       </Box>
     </>
   );

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

@@ -116,7 +116,9 @@ function ForwardPreview({
   const mx = useMatrixClient();
   const room = mx.getRoom(mEvent.getRoomId() ?? '') ?? undefined;
   const senderId = mEvent.getSender() ?? '';
-  const senderName = room ? getMemberName(room, senderId) : senderId.split(':')[0]?.slice(1) || senderId;
+  const senderName = room
+    ? getMemberName(room, senderId)
+    : senderId.split(':')[0]?.slice(1) || senderId;
   const senderMxc = room ? getMemberAvatarMxc(room, senderId) : undefined;
   const senderAvatarUrl = senderMxc
     ? (mxcUrlToHttp(mx, senderMxc, useAuthentication, 48, 48, 'crop') ?? undefined)
@@ -297,9 +299,7 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
     () =>
       recents
         .map((id) => mx.getRoom(id))
-        .filter(
-          (r): r is Room => !!r && r.getMyMembership() === 'join' && !r.isSpaceRoom(),
-        ),
+        .filter((r): r is Room => !!r && r.getMyMembership() === 'join' && !r.isSpaceRoom()),
     [recents, mx],
   );
 
@@ -318,7 +318,6 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
     const results = await Promise.allSettled(
       ids.map((id) => {
         // threadId-aware overload (P3-8): explicit null = send to the main timeline.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const sendForward = () => mx.sendEvent(id, null, mEvent.getType() as any, fwdContent);
         // Send the optional comment first so it reads as a note above the
         // forwarded content. The room counts as failed if either send rejects.
@@ -327,7 +326,6 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
         const needsComment = commentBody && !commentSentRef.current.has(id);
         const step = needsComment
           ? mx
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
               .sendMessage(id, null, { msgtype: MsgType.Text, body: commentBody } as any)
               .then(() => {
                 commentSentRef.current.add(id);

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

@@ -38,6 +38,7 @@ import { useHover, useFocusWithin } from 'react-aria';
 import { MatrixEvent, Room, EventStatus } from 'matrix-js-sdk';
 import { Relations } from 'matrix-js-sdk/lib/models/relations';
 import classNames from 'classnames';
+import { useAtom } from 'jotai';
 import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import {
   AvatarBase,
@@ -61,7 +62,10 @@ import {
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { messageAriaLabel } from '../../../utils/a11y';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
+import { msgTranslationActiveAtomFamily } from '../../../state/translation';
+import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
 import { MsgAppearClass, SendingSpinClass } from '../../../styles/Animations.css';
@@ -257,6 +261,7 @@ export const MessageReadReceiptItem = as<
   }
 >(({ room, eventId, onClose, ...props }, ref) => {
   const [open, setOpen] = useState(false);
+  const modalStyle = useModalStyle(360);
 
   const handleClose = () => {
     setOpen(false);
@@ -275,7 +280,7 @@ export const MessageReadReceiptItem = as<
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal variant="Surface" size="300">
+            <Modal variant="Surface" size="300" style={modalStyle}>
               <EventReaders room={room} eventId={eventId} requestClose={handleClose} />
             </Modal>
           </FocusTrap>
@@ -453,6 +458,47 @@ export const MessageCopyTextItem = as<
   );
 });
 
+export const MessageTranslateItem = as<
+  'button',
+  {
+    mEvent: MatrixEvent;
+    onClose?: () => void;
+  }
+>(({ mEvent, onClose, ...props }, ref) => {
+  const content = mEvent.getContent();
+  const msgtype = content.msgtype;
+  const isTextual = msgtype === 'm.text' || msgtype === 'm.emote' || msgtype === 'm.notice';
+  const rawBody = typeof content.body === 'string' ? content.body : '';
+  const body = trimReplyFromBody(rawBody).trim();
+  const eventId = mEvent.getId() ?? '';
+
+  const [active, setActive] = useAtom(msgTranslationActiveAtomFamily(eventId));
+
+  // On-device translation is Chromium-desktop only; hide the action entirely
+  // where the engine can't run, and for non-textual/empty messages.
+  if (!chromeTranslationEngine.isSupported() || !isTextual || !body || !eventId) return null;
+
+  const handleToggle = () => {
+    setActive((a) => !a);
+    onClose?.();
+  };
+
+  return (
+    <MenuItem
+      size="300"
+      after={<Icon size="100" src={Icons.Globe} />}
+      radii="300"
+      onClick={handleToggle}
+      {...props}
+      ref={ref}
+    >
+      <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+        {active ? 'Show Original' : 'Translate'}
+      </Text>
+    </MenuItem>
+  );
+});
+
 export const MessagePinItem = as<
   'button',
   {
@@ -630,6 +676,7 @@ export const MessageReportItem = as<
 >(({ room, mEvent, onClose, ...props }, ref) => {
   const mx = useMatrixClient();
   const [open, setOpen] = useState(false);
+  const modalStyle = useModalStyle(480);
   const [reportState, reportMessage] = useAsyncCallback(
     useCallback(
       (eventId: string, score: number, reason: string) =>
@@ -671,7 +718,7 @@ export const MessageReportItem = as<
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog variant="Surface" style={modalStyle}>
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -1327,6 +1374,7 @@ export const Message = React.memo(
                               />
                             )}
                             <MessageCopyTextItem mEvent={mEvent} onClose={closeMenu} />
+                            <MessageTranslateItem mEvent={mEvent} onClose={closeMenu} />
                             <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                             {canPinEvent && (
                               <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
@@ -1342,7 +1390,6 @@ export const Message = React.memo(
                                   after={<Icon size="100" src={Icons.Send} />}
                                   radii="300"
                                   onClick={() => {
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     (mx as any).resendEvent(mEvent, room);
                                     closeMenu();
                                   }}
@@ -1361,7 +1408,6 @@ export const Message = React.memo(
                                   after={<Icon size="100" src={Icons.Cross} />}
                                   radii="300"
                                   onClick={() => {
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                     (mx as any).cancelPendingEvent(mEvent);
                                     closeMenu();
                                   }}
@@ -1557,6 +1603,7 @@ export const Event = React.memo(
                               />
                             )}
                             <MessageCopyTextItem mEvent={mEvent} onClose={closeMenu} />
+                            <MessageTranslateItem mEvent={mEvent} onClose={closeMenu} />
                             <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
                           </Box>
                           {((!mEvent.isRedacted() && canDelete && !stateEvent) ||

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

@@ -141,8 +141,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           delete orig['m.relates_to'];
           delete orig['m.new_content'];
 
-          const filename =
-            typeof orig.filename === 'string' ? orig.filename : (editFilename ?? '');
+          const filename = typeof orig.filename === 'string' ? orig.filename : (editFilename ?? '');
           const hasFormatting = !customHtmlEqualsPlainText(customHtml, plainText);
 
           const mediaContent: IContent = { ...orig };
@@ -188,7 +187,6 @@ export const MessageEditor = as<'div', MessageEditorProps>(
               rel_type: RelationType.Replace,
             },
           };
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           return mx.sendMessage(roomId, content as any);
         }
 
@@ -237,7 +235,6 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           },
         };
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return mx.sendMessage(roomId, content as any);
       }, [
         mx,

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

@@ -70,10 +70,7 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
   // Reminders already set on this message (soonest first) — so the user can see
   // and cancel them instead of silently stacking duplicates.
   const existing = useMemo(
-    () =>
-      reminders
-        .filter((r) => r.eventId === eventId)
-        .sort((a, b) => a.timestamp - b.timestamp),
+    () => reminders.filter((r) => r.eventId === eventId).sort((a, b) => a.timestamp - b.timestamp),
     [reminders, eventId],
   );
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Badge, Box, Chip, Icon, Icons, Text, config } from 'folds';
 import { MatrixEvent, Room } from 'matrix-js-sdk';
+import { MobileTouchTarget } from '../../../styles/mobile.css';
 import { useThreadSummary } from '../../../hooks/useThreadSummary';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
@@ -31,6 +32,7 @@ export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) {
       <Chip
         variant="SurfaceVariant"
         radii="300"
+        className={MobileTouchTarget}
         before={<Icon size="50" src={Icons.Thread} />}
         after={
           unread > 0 ? <Badge variant="Success" fill="Solid" radii="Pill" size="200" /> : undefined

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

@@ -564,7 +564,6 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
       mx.sendEvent(
         room.roomId,
         thread.id,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         MessageEvent.Reaction as any,
         getReactionContent(targetEventId, key, rShortcode),
       );

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

@@ -2,18 +2,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';
 import { NotificationCountType, Room, Thread } from 'matrix-js-sdk';
-import {
-  Avatar,
-  Box,
-  Button,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Scroll,
-  Text,
-  config,
-} from 'folds';
+import { Avatar, Box, Button, Header, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import * as css from './ThreadsListPanel.css';
@@ -130,9 +119,7 @@ function ThreadRow({ room, thread, unread, highlight, participants, onOpen }: Th
   const rootSender = rootEvent?.getSender() ?? '';
   const { name: rootName, avatarUrl } = useMemberAvatar(room, rootSender);
   const bodyRaw =
-    typeof rootEvent?.getContent().body === 'string'
-      ? (rootEvent.getContent().body as string)
-      : '';
+    typeof rootEvent?.getContent().body === 'string' ? (rootEvent.getContent().body as string) : '';
   const snippet = bodyRaw ? scaleSystemEmoji(trimReplyFromBody(bodyRaw)) : '(no preview)';
   const count = thread.length;
   const lastTs = thread.replyToEvent?.getTs() ?? rootEvent?.getTs();
@@ -360,7 +347,9 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
             </Box>
           ) : (
             <Box className={css.ThreadsListContent} direction="Column">
-              <div style={{ position: 'relative', height: virtualizer.getTotalSize(), width: '100%' }}>
+              <div
+                style={{ position: 'relative', height: virtualizer.getTotalSize(), width: '100%' }}
+              >
                 {virtualizer.getVirtualItems().map((vItem) => {
                   const snap = visible[vItem.index];
                   const thread = threadById.get(snap.id);

src/app/features/room/widgets/RoomWidgetView.tsx

@@ -60,7 +60,6 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
       clientApi.stop();
       iframe.remove();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mx, room.roomId, widget.id, widget.templateUrl]);
 
   if (blocked) {

src/app/features/room/widgets/WidgetsPanel.tsx

@@ -84,7 +84,6 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
       data: {},
     };
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       await sendStateEvent(mx, room.roomId, StateEvent.Widget, content, id);
       setAdding(false);
     } catch (e) {
@@ -96,7 +95,6 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
 
   const handleRemove = (id: string) => {
     if (viewingId === id) setViewingId(null);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     sendStateEvent(mx, room.roomId, StateEvent.Widget, {}, id).catch(() => undefined);
   };
 

src/app/features/settings/about/About.tsx

@@ -4,11 +4,13 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import LotusLogo from '../../../../../public/res/Lotus.png';
+import { getOriginBaseUrl, withOriginBaseUrl } from '../../../pages/pathUtils';
 import pkg from '../../../../../package.json';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 
+const LotusLogo = withOriginBaseUrl(getOriginBaseUrl(), '/public/res/Lotus.png');
+
 type MSC1929Contact = {
   matrix_id?: string;
   email_address?: string;
@@ -42,9 +44,16 @@ function useServerSupport(): { support: MSC1929Support | null; loading: boolean
 
   useEffect(() => {
     const controller = new AbortController();
-    const baseUrl = mx.getHomeserverUrl();
+    // MSC1929 support info is served from the MXID server-name host (like
+    // /.well-known/matrix/client), which on delegated/split-domain servers is
+    // NOT the client-API URL. Derive it from the user's domain.
+    const serverName = mx.getDomain();
+    if (!serverName) {
+      setLoading(false);
+      return undefined;
+    }
     setLoading(true);
-    fetch(`${baseUrl}/.well-known/matrix/support`, { signal: controller.signal })
+    fetch(`https://${serverName}/.well-known/matrix/support`, { signal: controller.signal })
       .then((res) => {
         if (!res.ok) return null;
         return res.json();

src/app/features/settings/account/OidcManageAccount.tsx

@@ -20,7 +20,11 @@ export function OidcManageAccount() {
   const open = useCallback(() => {
     const authUrl = authMetadata?.account_management_uri ?? authMetadata?.issuer;
     if (!authUrl) return;
-    window.open(withSearchParam(authUrl, { action: accountManagementActions.profile }), '_blank');
+    window.open(
+      withSearchParam(authUrl, { action: accountManagementActions.profile }),
+      '_blank',
+      'noopener,noreferrer',
+    );
   }, [authMetadata, accountManagementActions]);
 
   if (!authMetadata) return null;

src/app/features/settings/account/Profile.tsx

@@ -648,6 +648,11 @@ function ProfileStatus() {
                 imagePackRooms={[]}
                 returnFocusOnDeactivate={false}
                 onEmojiSelect={handleEmojiSelect}
+                // A status message is plain-text presence (`status_msg`), so it
+                // can't hold a custom mxc-image emoji — show unicode only, so every
+                // emoji in the picker actually inserts (custom ones silently no-op'd
+                // because there's no onCustomEmojiSelect here).
+                hideCustomEmojis
                 requestClose={() => setEmojiAnchor(undefined)}
               />
             }

src/app/features/settings/account/ProfileDecoration.tsx

@@ -4,11 +4,7 @@ import { Method } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SettingTile } from '../../../components/setting-tile';
-import {
-  DECORATION_CATEGORIES,
-  DECORATION_CDN,
-  decorationUrl,
-} from '../../lotus/avatarDecorations';
+import { DECORATION_CATEGORIES, decorationUrl } from '../../lotus/avatarDecorations';
 import { invalidateDecorationCache } from '../../../hooks/useAvatarDecoration';
 
 const PROFILE_FIELD = 'io.lotus.avatar_decoration';
@@ -48,7 +44,7 @@ function DecorationPreviewCell({
       }}
     >
       <img
-        src={`${DECORATION_CDN}/${slug}.png`}
+        src={decorationUrl(slug)}
         alt={name}
         loading="lazy"
         decoding="async"
@@ -73,11 +69,11 @@ export function ProfileDecoration() {
   const [selected, setSelected] = useState<string | null>(null);
 
   useEffect(() => {
+    // Fetch the whole profile, not the `/{field}` sub-resource: an unset field
+    // 404s (a console error for anyone without a decoration). The full profile
+    // returns 200 with all fields incl. custom MSC4133 ones — read it out.
     mx.http
-      .authedRequest<Record<string, string>>(
-        Method.Get,
-        `/profile/${encodeURIComponent(userId)}/${PROFILE_FIELD}`,
-      )
+      .authedRequest<Record<string, string>>(Method.Get, `/profile/${encodeURIComponent(userId)}`)
       .then((res) => {
         const val = (res[PROFILE_FIELD] as string | undefined) ?? null;
         setCurrent(val);

src/app/features/settings/developer-tools/DevelopTools.tsx

@@ -36,9 +36,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
     return (
       <AccountDataEditor
         type={accountDataType ?? undefined}
-        content={
-          accountDataType ? getAccountData<object>(mx, accountDataType) : undefined
-        }
+        content={accountDataType ? getAccountData<object>(mx, accountDataType) : undefined}
         submitChange={submitAccountData}
         requestClose={() => setAccountDataType(undefined)}
       />

src/app/features/settings/devices/OtherDevices.tsx

@@ -38,6 +38,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
         action: accountManagementActions.sessionsList,
       }),
       '_blank',
+      'noopener,noreferrer',
     );
   }, [authMetadata, accountManagementActions]);
 
@@ -52,6 +53,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
           device_id: deviceId,
         }),
         '_blank',
+        'noopener,noreferrer',
       );
     },
     [authMetadata, accountManagementActions],

src/app/features/settings/devices/Verification.tsx

@@ -278,6 +278,7 @@ export function DeviceVerificationOptions() {
           action: accountManagementActions.crossSigningReset,
         }),
         '_blank',
+        'noopener,noreferrer',
       );
       return;
     }

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

@@ -129,6 +129,11 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
     try {
       const ctx = new AudioContext({ sampleRate: sampleRateFor(model) });
       const stream = await navigator.mediaDevices.getUserMedia(MIC_CONSTRAINTS(nativeNS));
+      if (!mountedRef.current) {
+        stream.getTracks().forEach((t) => t.stop());
+        ctx.close().catch(() => undefined);
+        return;
+      }
       const source = ctx.createMediaStreamSource(stream);
       const inAnalyser = ctx.createAnalyser();
       inAnalyser.fftSize = 1024;
@@ -182,7 +187,12 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
     timer: number;
   } | null>(null);
   const clipRef = useRef<AudioBuffer | null>(null);
-  const playRef = useRef<{ ctx: AudioContext; source: AudioBufferSourceNode } | null>(null);
+  const playRef = useRef<{
+    ctx: AudioContext;
+    source: AudioBufferSourceNode;
+    model: DenoiseNode | null;
+    gate: AudioWorkletNode | null;
+  } | null>(null);
   const [recording, setRecording] = useState(false);
   const [recDb, setRecDb] = useState(-100);
   const [hasClip, setHasClip] = useState(false);
@@ -208,6 +218,10 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
   const startRecord = async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia(RAW_CONSTRAINTS);
+      if (!mountedRef.current) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
       const ctx = new AudioContext();
       const source = ctx.createMediaStreamSource(stream);
       const analyser = ctx.createAnalyser();
@@ -249,7 +263,15 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
     }
   };
 
+  // Bumped whenever a playback starts or stops. An in-flight `play()` compares
+  // the generation it claimed against this after its awaits; if it no longer
+  // matches (a newer play, a Stop, or unmount happened during model load) it
+  // discards what it built instead of orphaning it — closes the rapid-click /
+  // unmount-during-load leak.
+  const playGenRef = useRef(0);
+
   const stopPlayback = useCallback(() => {
+    playGenRef.current += 1;
     const p = playRef.current;
     playRef.current = null;
     if (p) {
@@ -259,6 +281,15 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
       } catch {
         /* noop */
       }
+      try {
+        // Mirror stopLive: dispose the model node (worker/WASM) + gate, else each
+        // A/B playback through a model leaks a DeepFilterNet/DTLN worker.
+        p.gate?.disconnect();
+        p.model?.dispose();
+        p.model?.node.disconnect();
+      } catch {
+        /* noop */
+      }
       p.ctx.close().catch(() => undefined);
     }
     setPlaying(null);
@@ -268,37 +299,73 @@ export function DenoiseTester({ model, useGate, gateThreshold, nativeNS }: Denoi
     stopPlayback();
     const clip = clipRef.current;
     if (!clip) return;
+    // Claim this generation AFTER stopPlayback's bump; a later play/stop/unmount
+    // moves it past `gen`, signalling us to discard what we built below.
+    const gen = playGenRef.current;
     try {
       // bufferSource auto-resamples the 48 kHz clip to the context rate, so DTLN
       // gets the 16 kHz it needs while raw/RNNoise/Speex stay at 48 kHz.
       const ctx = new AudioContext({ sampleRate: sampleRateFor(playModel ?? 'rnnoise') });
       const source = ctx.createBufferSource();
       source.buffer = clip;
+      let playGate: AudioWorkletNode | null = null;
+      let playModelNode: DenoiseNode | null = null;
       if (playModel) {
         let head: AudioNode = source;
         if (useGate) {
-          const gate = await buildGateNode(ctx, gateThreshold);
-          head.connect(gate);
-          head = gate;
+          playGate = await buildGateNode(ctx, gateThreshold);
+          head.connect(playGate);
+          head = playGate;
         }
-        const denoise = await buildModelNode(ctx, playModel);
-        head.connect(denoise.node);
-        denoise.node.connect(ctx.destination);
+        playModelNode = await buildModelNode(ctx, playModel);
+        head.connect(playModelNode.node);
+        playModelNode.node.connect(ctx.destination);
       } else {
         source.connect(ctx.destination);
       }
+      // Superseded while the WASM/worklet loaded (another Play, a Stop, or the
+      // panel unmounted)? Tear down this now-orphaned graph instead of storing
+      // it — otherwise its worker/WASM + ctx would leak and its audio would play
+      // over the winner.
+      if (playGenRef.current !== gen || !mountedRef.current) {
+        try {
+          playGate?.disconnect();
+          playModelNode?.dispose();
+          playModelNode?.node.disconnect();
+        } catch {
+          /* noop */
+        }
+        ctx.close().catch(() => undefined);
+        return;
+      }
       source.onended = () => {
         if (playRef.current?.ctx === ctx) stopPlayback();
       };
-      playRef.current = { ctx, source };
+      playRef.current = { ctx, source, model: playModelNode, gate: playGate };
       source.start();
       setPlaying(label);
     } catch (e) {
       console.error('[denoise-tester] playback failed', e);
-      stopPlayback();
+      // Only tear down if we're still the current playback — a superseded
+      // invocation must not stop the winner that replaced it.
+      if (playGenRef.current === gen) stopPlayback();
     }
   };
 
+  // Guards the async getUserMedia paths: if Settings closes while the mic
+  // permission prompt is open, the resolved stream/ctx would otherwise be
+  // created after the unmount cleanup already ran, leaking + setState-after-
+  // unmount. Own [] effect so it only flips on real unmount.
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    // Set on mount (not just cleared on unmount) so a setup→cleanup→setup
+    // remount of the same fiber (StrictMode/Activity) leaves it true.
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
   useEffect(
     () => () => {
       stopLive();

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

@@ -101,6 +101,12 @@ import { BG_OPTIONS, getChatBg } from '../../lotus/chatBackground';
 import { resetBootSequence, runLotusBootSequence } from '../../../../lotus-boot';
 import { useMessageLayoutItems } from '../../../hooks/useMessageLayout';
 import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
+import {
+  TRANSLATE_TARGET_LANGUAGES,
+  normalizeLang,
+  isSupportedTargetLang,
+} from '../../../utils/translation/langUtils';
+import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
 import { SequenceCardStyle } from '../styles.css';
 import { useTauriUpdater } from '../../../hooks/useTauriUpdater';
 import { isTauri as isTauriEnv, invokeTauri, tauriInvoke } from '../../../hooks/useTauri';
@@ -543,7 +549,11 @@ function Appearance() {
             value={seasonalThemeOverride ?? 'auto'}
             onChange={(v) => {
               setSeasonalThemeOverride(v);
-              if (v !== 'auto' && v !== 'off') setChatBackground('none');
+              // Any active seasonal mode (incl. "auto") is mutually exclusive
+              // with a chat background — else picking it is a silent no-op, since
+              // SeasonalEffect suppresses the overlay while a background is set.
+              // Only "off" leaves the background alone.
+              if (v !== 'off') setChatBackground('none');
             }}
           />
         </Box>
@@ -1892,27 +1902,27 @@ function Calls() {
         />
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
-        <SettingTile
-          title="Ringtone Volume"
-          description="Volume of the incoming call ringtone."
-          after={
-            <Box direction="Row" alignItems="Center" gap="200" style={{ minWidth: '160px' }}>
-              <input
-                type="range"
-                min="0"
-                max="100"
-                step="5"
-                value={ringtoneVolume}
-                onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
-                aria-label="Ringtone volume"
-                style={{ flex: 1, accentColor: color.Primary.Main }}
-              />
-              <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
-                {ringtoneVolume}%
-              </Text>
-            </Box>
-          }
-        />
+        <SettingTile title="Ringtone Volume" description="Volume of the incoming call ringtone." />
+        <Box
+          direction="Row"
+          alignItems="Center"
+          gap="200"
+          style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+        >
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="5"
+            value={ringtoneVolume}
+            onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
+            aria-label="Ringtone volume"
+            style={{ flex: 1, accentColor: color.Primary.Main }}
+          />
+          <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
+            {ringtoneVolume}%
+          </Text>
+        </Box>
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
@@ -1984,26 +1994,28 @@ function Calls() {
           }
         />
         {soundboardEnabled && (
-          <SettingTile
-            title="Soundboard Volume"
-            after={
-              <Box alignItems="Center" gap="200" style={{ minWidth: toRem(180) }}>
-                <input
-                  type="range"
-                  min={0}
-                  max={100}
-                  step={5}
-                  value={soundboardVolume}
-                  onChange={(e) => setSoundboardVolume(parseInt(e.target.value, 10))}
-                  style={{ flexGrow: 1 }}
-                  aria-label="Soundboard volume"
-                />
-                <Text size="T200" style={{ minWidth: toRem(36), textAlign: 'right' }}>
-                  {soundboardVolume}%
-                </Text>
-              </Box>
-            }
-          />
+          <>
+            <SettingTile title="Soundboard Volume" />
+            <Box
+              alignItems="Center"
+              gap="200"
+              style={{ padding: `0 ${config.space.S400} ${config.space.S300}` }}
+            >
+              <input
+                type="range"
+                min={0}
+                max={100}
+                step={5}
+                value={soundboardVolume}
+                onChange={(e) => setSoundboardVolume(parseInt(e.target.value, 10))}
+                style={{ flexGrow: 1 }}
+                aria-label="Soundboard volume"
+              />
+              <Text size="T200" style={{ minWidth: toRem(36), textAlign: 'right' }}>
+                {soundboardVolume}%
+              </Text>
+            </Box>
+          </>
         )}
       </SequenceCard>
     </Box>
@@ -2311,6 +2323,15 @@ function Messages() {
     settingsAtom,
     'enforceRetentionLocally',
   );
+  const [translateTargetLang, setTranslateTargetLang] = useSetting(
+    settingsAtom,
+    'translateTargetLang',
+  );
+  const [autoTranslate, setAutoTranslate] = useSetting(settingsAtom, 'autoTranslate');
+  const translationSupported = chromeTranslationEngine.isSupported();
+  const selectedTargetLang = isSupportedTargetLang(translateTargetLang)
+    ? normalizeLang(translateTargetLang)
+    : 'en';
 
   return (
     <Box direction="Column" gap="100">
@@ -2430,6 +2451,32 @@ function Messages() {
           }
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Translate Messages Into"
+          description={
+            translationSupported
+              ? 'Translate messages written in other languages into this one. Runs entirely on your device — message text never leaves your computer or touches a cloud service.'
+              : 'On-device translation isn’t available in this browser. Use a Chromium desktop browser (Chrome/Edge 138+) or the Lotus desktop app.'
+          }
+          after={
+            <SettingsSelect
+              value={selectedTargetLang}
+              onChange={(v) => setTranslateTargetLang(v)}
+              disabled={!translationSupported}
+              aria-label="Translate messages into"
+              options={TRANSLATE_TARGET_LANGUAGES.map((l) => ({ value: l.code, label: l.name }))}
+            />
+          }
+        />
+        {translationSupported && (
+          <SettingTile
+            title="Auto-translate Incoming Messages"
+            description="Automatically translate messages that aren’t already in your language. When off, translate individual messages from their menu. The first time a language is used, its model downloads once (a few MB)."
+            after={<Switch variant="Primary" value={autoTranslate} onChange={setAutoTranslate} />}
+          />
+        )}
+      </SequenceCard>
     </Box>
   );
 }

src/app/features/settings/notifications/PushRuleEditor.tsx

@@ -1,4 +1,11 @@
-import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
+import React, {
+  ChangeEventHandler,
+  FormEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { IPushRule, IPushRules, PushRuleKind } from 'matrix-js-sdk';
 import { Box, Text, Button, Input, config, IconButton, Icons, Icon, Spinner, Switch } from 'folds';
 import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
@@ -56,6 +63,13 @@ function RuleEnableToggle({ kind, pushRule }: RuleEnableToggleProps) {
   const mx = useMatrixClient();
   const [enabled, setEnabled] = useState(pushRule.enabled !== false);
 
+  // Re-sync when the rule changes externally (e.g. toggled on another device →
+  // account-data sync). The useState initializer only runs once, so without
+  // this the Switch would show a stale value.
+  useEffect(() => {
+    setEnabled(pushRule.enabled !== false);
+  }, [pushRule.enabled]);
+
   const [toggleState, toggle] = useAsyncCallback(
     useCallback(
       async (value: boolean) => {

src/app/features/settings/notifications/SystemNotification.tsx

@@ -160,9 +160,7 @@ function PauseNotifications() {
   return (
     <SettingTile
       title="Pause Notifications"
-      description={
-        <span style={active ? { color: color.Warning.Main } : undefined}>{status}</span>
-      }
+      description={<span style={active ? { color: color.Warning.Main } : undefined}>{status}</span>}
       after={
         active ? (
           <Button
@@ -383,6 +381,11 @@ export function SystemNotification() {
                 style={selectStyle}
               />
             </Box>
+            {(!quietHoursStart || !quietHoursEnd) && (
+              <Text size="T200" style={{ color: color.Critical.Main }}>
+                Set both a start and end time — quiet hours stay inactive until both are filled in.
+              </Text>
+            )}
           </Box>
         )}
       </SequenceCard>

src/app/features/toast/LotusToastContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, CSSProperties } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { color, config, Icon, IconButton, Icons } from 'folds';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -37,6 +38,7 @@ function ToastCard({ toast }: ToastCardProps) {
   // folds tokens so toasts render correctly on stock Cinny themes (the --lt-*
   // vars only exist while Terminal mode is active).
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const isMobile = useScreenSize() === ScreenSize.Mobile;
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -80,8 +82,11 @@ function ToastCard({ toast }: ToastCardProps) {
     }`,
     borderRadius: config.radii.R400,
     padding: `${config.space.S300} ${config.space.S400}`,
-    minWidth: '280px',
-    maxWidth: '340px',
+    // Full-width on phones (the container spans the viewport there); a fixed
+    // 280-340px card would otherwise overflow a narrow screen.
+    minWidth: isMobile ? 0 : '280px',
+    maxWidth: isMobile ? 'none' : '340px',
+    width: isMobile ? '100%' : undefined,
     boxShadow: lotusTerminal
       ? toast.sticky
         ? 'var(--lt-box-glow-cyan)'
@@ -216,22 +221,39 @@ export function LotusToastContainer() {
   }, []);
 
   const toasts = useAtomValue(toastQueueAtom);
+  const isMobile = useScreenSize() === ScreenSize.Mobile;
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // The newest toast is the last (bottom) child; if the stack ever overflows its
+  // max-height (many sticky action toasts), keep that newest one in view instead
+  // of leaving it scrolled below the fold.
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [toasts.length]);
 
   if (toasts.length === 0) return null;
 
   const containerStyle: CSSProperties = {
     position: 'fixed',
-    bottom: '1.5rem',
-    right: '1.5rem',
+    // Span the width just inside the screen edges on a phone (so full-width
+    // cards fit); float bottom-right on desktop.
+    bottom: isMobile ? config.space.S200 : '1.5rem',
+    right: isMobile ? config.space.S200 : '1.5rem',
+    left: isMobile ? config.space.S200 : undefined,
     zIndex: zIndices.toast,
     display: 'flex',
     flexDirection: 'column',
     gap: config.space.S200,
     pointerEvents: 'auto',
+    // Safety net beyond the queue cap: if many sticky action toasts pile up they
+    // scroll within a bounded height instead of covering the whole screen.
+    maxHeight: isMobile ? '70vh' : '80vh',
+    overflowY: 'auto',
   };
 
   return (
-    <div style={containerStyle} aria-live="polite" aria-label="Notifications">
+    <div ref={listRef} style={containerStyle} aria-live="polite" aria-label="Notifications">
       {toasts.map((toast) => (
         <ToastCard key={toast.id} toast={toast} />
       ))}

src/app/hooks/useAccountData.ts

@@ -6,9 +6,7 @@ import { getAccountData } from '../utils/room';
 
 export function useAccountData(eventType: string): MatrixEvent | undefined {
   const mx = useMatrixClient();
-  const [event, setEvent] = useState<MatrixEvent | undefined>(() =>
-    getAccountData(mx, eventType),
-  );
+  const [event, setEvent] = useState<MatrixEvent | undefined>(() => getAccountData(mx, eventType));
 
   useAccountDataCallback(
     mx,

src/app/hooks/useAvatarDecoration.ts

@@ -12,6 +12,22 @@ const pending = new Map<string, Array<(val: string | null) => void>>();
 // Transient-failure attempt counts (userId → n) so a flaky federated lookup
 // can retry a couple of times, then gives up for the session.
 const failures = new Map<string, number>();
+// Mounted hooks per userId, so an invalidation (e.g. you change your own
+// decoration) re-fetches live instead of waiting for a remount.
+const listeners = new Map<string, Set<() => void>>();
+
+function subscribeDecoration(userId: string, cb: () => void): () => void {
+  let set = listeners.get(userId);
+  if (!set) {
+    set = new Set();
+    listeners.set(userId, set);
+  }
+  set.add(cb);
+  return () => {
+    set.delete(cb);
+    if (set.size === 0) listeners.delete(userId);
+  };
+}
 
 function fetchDecoration(
   authedRequest: (method: Method, path: string) => Promise<Record<string, string>>,
@@ -66,6 +82,10 @@ function fetchDecoration(
 
 export function invalidateDecorationCache(userId: string): void {
   cache.delete(userId);
+  // Also clear the give-up counter so the next fetch starts fresh.
+  failures.delete(userId);
+  // Notify mounted avatars for this user so they re-fetch immediately.
+  listeners.get(userId)?.forEach((cb) => cb());
 }
 
 export function useAvatarDecoration(userId: string): string | null {
@@ -74,14 +94,22 @@ export function useAvatarDecoration(userId: string): string | null {
 
   useEffect(() => {
     let cancelled = false;
-    fetchDecoration(
-      (method, path) => mx.http.authedRequest<Record<string, string>>(method, path),
-      userId,
-    ).then((val) => {
-      if (!cancelled) setSlug(val);
-    });
+    const load = () => {
+      fetchDecoration(
+        (method, path) => mx.http.authedRequest<Record<string, string>>(method, path),
+        userId,
+      ).then((val) => {
+        if (!cancelled) setSlug(val);
+      });
+    };
+    load();
+    // Re-run on invalidation (fetchDecoration re-fetches since the cache entry
+    // was cleared; concurrent mounts for the same user still de-dupe via
+    // `pending`). Keeps live avatars in sync when the decoration changes.
+    const unsubscribe = subscribeDecoration(userId, load);
     return () => {
       cancelled = true;
+      unsubscribe();
     };
   }, [mx, userId]);
 

src/app/hooks/useCallEmbed.ts

@@ -149,9 +149,11 @@ export const useCallJoined = (embed?: CallEmbed): boolean => {
   );
 
   useEffect(() => {
-    if (!embed) {
-      setJoined(false);
-    }
+    // Re-seed from the (new) embed whenever it changes identity, not only when
+    // it becomes undefined. Answering a 2nd call swaps embed A→B directly (embed
+    // stays truthy), so a plain `if (!embed)` reset left `joined` stuck true and
+    // B rendered as already-joined, skipping the loading/watchdog UI.
+    setJoined(embed?.joined ?? false);
   }, [embed]);
 
   return joined;

src/app/hooks/useCallSpeakers.ts

@@ -25,8 +25,14 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const callMembers = useCallMembers(callSession);
   const joined = useCallJoined(callEmbed);
 
+  // C-L5 — depend on a STABLE boolean, not the callMembers array (whose identity
+  // changes on every membership change). The MutationObserver + io.lotus.call_state
+  // subscription below already track tiles joining/leaving live, so rebuilding
+  // them on each membership change is pure churn.
+  const hasCallMembers = callMembers.length > 0;
+
   useEffect(() => {
-    if (!callMembers || !joined) {
+    if (!hasCallMembers || !joined) {
       setSpeakers(new Set<string>());
       return undefined;
     }
@@ -126,7 +132,7 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
       bodyWatcher?.disconnect();
       unsubLotus();
     };
-  }, [callEmbed, callMembers, joined]);
+  }, [callEmbed, hasCallMembers, joined]);
 
   return speakers;
 };

src/app/hooks/useCommands.ts

@@ -25,6 +25,7 @@ import {
 import { useRoomNavigate } from './useRoomNavigate';
 import { Membership, StateEvent } from '../../types/matrix/room';
 import { getStateEvent, sendStateEvent } from '../utils/room';
+import { isValidServerPattern, matchesAnyGlob } from '../utils/serverAcl';
 import { splitWithSpace } from '../utils/common';
 import { createRoomEncryptionState } from '../components/create-room';
 
@@ -509,8 +510,15 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
             StateEvent.RoomServerAcl,
           )?.getContent<RoomServerAclEventContent>();
 
+          // When there is NO existing ACL, default allow to `*` (allow all) so a
+          // first `/acl -d evil.com` doesn't send `allow: []` — which per spec
+          // allows NO server and bricks the room. But do NOT synthesize `*` for a
+          // room that already HAS an ACL whose allow key is absent/empty: that
+          // would silently widen a deny-all room to allow-all. Such a state is
+          // preserved as-is and then rejected by the guard below (fail closed,
+          // rather than silently opening federation).
           const aclContent: RoomServerAclEventContent = {
-            allow: serverAcl?.allow ? [...serverAcl.allow] : [],
+            allow: serverAcl ? (serverAcl.allow ? [...serverAcl.allow] : []) : ['*'],
             allow_ip_literals: serverAcl?.allow_ip_literals,
             deny: serverAcl?.deny ? [...serverAcl.deny] : [],
           };
@@ -534,6 +542,40 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           aclContent.allow?.sort();
           aclContent.deny?.sort();
 
+          // Validate every added glob (empty/whitespace/malformed patterns).
+          const invalidPattern = [...allowList, ...denyList].find(
+            (servername) => !isValidServerPattern(servername),
+          );
+          if (invalidPattern) {
+            throw new Error(`/acl: invalid server pattern "${invalidPattern}"`);
+          }
+
+          const resultAllow = aclContent.allow ?? [];
+          const resultDeny = aclContent.deny ?? [];
+
+          // Fail CLOSED on the universally-catastrophic cases regardless of
+          // whether we can resolve our own server: an empty allow list bans every
+          // server, and a `*` deny bans everyone.
+          if (resultAllow.length === 0 || resultDeny.includes('*')) {
+            throw new Error(
+              '/acl: refused — this would ban all servers from the room. Use Room Settings → Server ACL to edit safely.',
+            );
+          }
+
+          // Refuse a change that would lock THIS homeserver out of the room — a
+          // room-bricking footgun (denying the local server, or an allow list that
+          // no longer matches it). Mirrors the Room Settings ACL editor's self-ban
+          // detection.
+          const localDomain = mx.getDomain() ?? '';
+          if (
+            localDomain &&
+            (!matchesAnyGlob(localDomain, resultAllow) || matchesAnyGlob(localDomain, resultDeny))
+          ) {
+            throw new Error(
+              `/acl: refused — this would ban this homeserver (${localDomain}) from the room`,
+            );
+          }
+
           await sendStateEvent(mx, room.roomId, StateEvent.RoomServerAcl, aclContent);
         },
       },

src/app/hooks/useMemberAvatar.ts

@@ -1,8 +1,7 @@
-import { useEffect } from 'react';
-import { Room, RoomStateEvent, RoomStateEventHandlerMap } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 import { useMediaAuthentication } from './useMediaAuthentication';
-import { useForceUpdate } from './useForceUpdate';
+import { useRoomMemberChange } from './useRoomMemberChange';
 import { getMemberName } from '../utils/room';
 import { mxcUrlToHttp } from '../utils/matrix';
 
@@ -15,9 +14,8 @@ export type MemberAvatar = {
  * Resolve a room member's display name and avatar http url, staying reactive to
  * that member's profile (name/avatar/membership) changes.
  *
- * Mirrors the reactivity pattern in ReadReceiptAvatars (N6): subscribe to
- * `RoomStateEvent.Members` filtered to this room + userId and force a re-render,
- * since `RoomMemberEvent` has no dedicated Avatar signal.
+ * Stays reactive to this member's profile (name/avatar/membership) changes via
+ * the shared member-change store (one global listener for the whole app).
  */
 export const useMemberAvatar = (
   room: Room,
@@ -28,23 +26,8 @@ export const useMemberAvatar = (
 ): MemberAvatar => {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const [, forceUpdate] = useForceUpdate();
 
-  useEffect(() => {
-    const handleMembers: RoomStateEventHandlerMap[RoomStateEvent.Members] = (
-      event,
-      _state,
-      member,
-    ) => {
-      if (event.getRoomId() === room.roomId && member.userId === userId) {
-        forceUpdate();
-      }
-    };
-    mx.on(RoomStateEvent.Members, handleMembers);
-    return () => {
-      mx.removeListener(RoomStateEvent.Members, handleMembers);
-    };
-  }, [mx, room.roomId, userId, forceUpdate]);
+  useRoomMemberChange(room.roomId, userId);
 
   const name = getMemberName(room, userId);
   const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();

src/app/hooks/useMessageTranslation.ts

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAtom } from 'jotai';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
+import {
+  translationCacheAtom,
+  msgTranslationActiveAtomFamily,
+  makeCacheKey,
+  findTranslation,
+  addTranslation,
+} from '../state/translation';
+import { chromeTranslationEngine as engine } from '../utils/translation/chromeEngine';
+import { sameLanguage } from '../utils/translation/langUtils';
+
+export type MsgTranslationStatus =
+  | 'idle' // not translating (original shown)
+  | 'detecting' // detecting source language
+  | 'downloading' // downloading the on-device model (first use of a pair)
+  | 'translating' // running the translation
+  | 'done' // translation available
+  | 'skipped' // already in the target language (nothing to do)
+  | 'error'; // detection/translation failed
+
+export type MsgTranslation = {
+  /** Whether the on-device engine is usable at all in this browser. */
+  supported: boolean;
+  /** Whether the translated body should be shown in place of the original. */
+  active: boolean;
+  status: MsgTranslationStatus;
+  translated?: string;
+  /** Detected source language (normalized base code). */
+  fromLang?: string;
+  /** 0..1 while `status === 'downloading'`. */
+  downloadProgress?: number;
+  /** Toggle translation on/off for this message (satisfies the user gesture). */
+  toggle: () => void;
+};
+
+/**
+ * Per-message on-device translation. The message menu action and the inline
+ * "Show original" chip both drive the same per-event `active` atom; whichever
+ * component mounts the body runs the actual detect→translate flow (once) and
+ * writes the result to the local cache. Nothing ever leaves the device.
+ */
+export const useMessageTranslation = (eventId: string, text: string): MsgTranslation => {
+  const supported = engine.isSupported();
+  const [targetLang] = useSetting(settingsAtom, 'translateTargetLang');
+  const [autoTranslate] = useSetting(settingsAtom, 'autoTranslate');
+  const [active, setActive] = useAtom(msgTranslationActiveAtomFamily(eventId));
+  const [cache, setCache] = useAtom(translationCacheAtom);
+
+  // The key includes a fingerprint of `text`, so an edit (same event id, new
+  // body) misses the old entry and re-translates instead of showing stale text.
+  const key = makeCacheKey(eventId, targetLang, text);
+  const cached = findTranslation(cache, key);
+
+  const [status, setStatus] = useState<MsgTranslationStatus>('idle');
+  const [translated, setTranslated] = useState<string | undefined>(undefined);
+  const [fromLang, setFromLang] = useState<string | undefined>(undefined);
+  const [downloadProgress, setDownloadProgress] = useState<number | undefined>(undefined);
+
+  const toggle = useCallback(() => setActive((a) => !a), [setActive]);
+
+  // Adopt a cached translation immediately (scrollback / re-render never
+  // re-translates).
+  useEffect(() => {
+    if (cached) {
+      setTranslated(cached.translated);
+      setFromLang(cached.fromLang);
+      if (active) setStatus('done');
+    }
+  }, [cached, active]);
+
+  // Auto-translate: when enabled, flip `active` on for foreign messages whose
+  // model is already downloaded (no gesture/download needed). Messages needing
+  // a first-time download keep the manual chip (which provides the gesture).
+  // Store the text we last auto-tried so an edit (new text) re-triggers auto
+  // detection instead of being suppressed by a one-shot flag.
+  const autoTriedText = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (!supported || !autoTranslate || active || cached || !eventId) return;
+    if (!text.trim() || autoTriedText.current === text) return;
+    autoTriedText.current = text;
+    let alive = true;
+    (async () => {
+      const from = await engine.detect(text);
+      if (!alive || !from || sameLanguage(from, targetLang)) return;
+      const avail = await engine.availability(from, targetLang);
+      if (!alive || avail !== 'available') return;
+      setActive(true);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [supported, autoTranslate, active, cached, text, targetLang, eventId, setActive]);
+
+  // The detect→translate flow. Runs when translation is switched on and we have
+  // no cached result. Guarded against overlapping runs / stale writes.
+  const runIdRef = useRef(0);
+  useEffect(() => {
+    if (!active || cached || !supported) return undefined;
+    if (!text.trim()) {
+      setStatus('skipped');
+      return undefined;
+    }
+
+    const runId = runIdRef.current + 1;
+    runIdRef.current = runId;
+    const stale = () => runId !== runIdRef.current;
+
+    (async () => {
+      try {
+        setStatus('detecting');
+        setDownloadProgress(undefined);
+        const from = await engine.detect(text);
+        if (stale()) return;
+        if (!from || sameLanguage(from, targetLang)) {
+          setStatus('skipped');
+          setActive(false);
+          return;
+        }
+        setFromLang(from);
+
+        const avail = await engine.availability(from, targetLang);
+        if (stale()) return;
+        if (avail === 'unavailable') {
+          setStatus('error');
+          return;
+        }
+        setStatus(avail === 'available' ? 'translating' : 'downloading');
+
+        const result = await engine.translate(text, from, targetLang, (p) => {
+          if (!stale()) setDownloadProgress(p);
+        });
+        if (stale()) return;
+
+        setTranslated(result);
+        setDownloadProgress(undefined);
+        setStatus('done');
+        setCache((prev) => addTranslation(prev, { key, fromLang: from, translated: result }));
+      } catch {
+        if (!stale()) setStatus('error');
+      }
+    })();
+
+    return () => {
+      // Invalidate this run's writes if inputs change / unmount.
+      runIdRef.current += 1;
+    };
+  }, [active, cached, supported, text, targetLang, key, setActive, setCache]);
+
+  // When switched off, drop back to idle (keep the cached translation around so
+  // toggling back on is instant).
+  useEffect(() => {
+    if (!active && status !== 'idle') setStatus('idle');
+  }, [active, status]);
+
+  return {
+    supported,
+    active,
+    status: active ? status : 'idle',
+    translated: cached?.translated ?? translated,
+    fromLang: cached?.fromLang ?? fromLang,
+    downloadProgress,
+    toggle,
+  };
+};
+
+/** Lightweight helper for the message menu — is the translate action offerable? */
+export const isTranslationSupported = (): boolean => engine.isSupported();

src/app/hooks/usePan.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, TouchEventHandler, useEffect, useRef, useState } from 'react';
 
 export type Pan = {
   translateX: number;
@@ -21,6 +21,10 @@ export const usePan = (active: boolean) => {
   const attachedRef = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
     null,
   );
+  const touchAttachedRef = useRef<{
+    move: (e: TouchEvent) => void;
+    end: (e: TouchEvent) => void;
+  } | null>(null);
 
   useEffect(() => {
     setCursor(active ? 'grab' : 'initial');
@@ -53,6 +57,40 @@ export const usePan = (active: boolean) => {
     document.addEventListener('mouseup', handleMouseUp);
   };
 
+  // Touch equivalent so a zoomed image can be dragged on a phone. Single-finger
+  // only (ignore multi-touch / pinch); touch events carry no movementX/Y, so we
+  // derive the delta from the previous touch position.
+  const handleTouchStart: TouchEventHandler<HTMLElement> = (evt) => {
+    if (!active || evt.touches.length !== 1) return;
+    setCursor('grabbing');
+    let lastX = evt.touches[0].clientX;
+    let lastY = evt.touches[0].clientY;
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (e.touches.length !== 1) return;
+      e.preventDefault();
+      const t = e.touches[0];
+      const dx = t.clientX - lastX;
+      const dy = t.clientY - lastY;
+      lastX = t.clientX;
+      lastY = t.clientY;
+      setPan((p) => ({ translateX: p.translateX + dx, translateY: p.translateY + dy }));
+    };
+
+    const handleTouchEnd = () => {
+      setCursor('grab');
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      document.removeEventListener('touchcancel', handleTouchEnd);
+      touchAttachedRef.current = null;
+    };
+
+    touchAttachedRef.current = { move: handleTouchMove, end: handleTouchEnd };
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd);
+    document.addEventListener('touchcancel', handleTouchEnd);
+  };
+
   useEffect(() => {
     if (!active) setPan(INITIAL_PAN);
   }, [active]);
@@ -65,6 +103,12 @@ export const usePan = (active: boolean) => {
         document.removeEventListener('mouseup', attachedRef.current.up);
         attachedRef.current = null;
       }
+      if (touchAttachedRef.current) {
+        document.removeEventListener('touchmove', touchAttachedRef.current.move);
+        document.removeEventListener('touchend', touchAttachedRef.current.end);
+        document.removeEventListener('touchcancel', touchAttachedRef.current.end);
+        touchAttachedRef.current = null;
+      }
     },
     [],
   );
@@ -73,5 +117,6 @@ export const usePan = (active: boolean) => {
     pan,
     cursor,
     onMouseDown: handleMouseDown,
+    onTouchStart: handleTouchStart,
   };
 };

src/app/hooks/useRoomLatestRenderedEvent.ts

@@ -12,13 +12,22 @@ import { useSetting } from '../state/hooks/settings';
 import { MessageEvent, StateEvent } from '../../types/matrix/room';
 import { isMembershipChanged, reactionOrEditEvent } from '../utils/room';
 
-export const useRoomLatestRenderedEvent = (room: Room) => {
+export const useRoomLatestRenderedEvent = (room: Room, enabled = true) => {
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [latestEvent, setLatestEvent] = useState<MatrixEvent>();
 
   useEffect(() => {
+    // The latest-event preview is only rendered for DM rooms. Skip the work —
+    // and especially the GLOBAL client `Decrypted` listener, which every nav
+    // item would otherwise add and which fans out on every decryption app-wide
+    // (PERF-5) — when the caller isn't going to use the result.
+    if (!enabled) {
+      setLatestEvent(undefined);
+      return undefined;
+    }
+
     const getLatestEvent = (): MatrixEvent | undefined => {
       const liveEvents = room.getLiveTimeline().getEvents();
       for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
@@ -67,7 +76,7 @@ export const useRoomLatestRenderedEvent = (room: Room) => {
       room.removeListener(RoomEvent.Timeline, handleTimelineEvent);
       room.client.removeListener(MatrixEventEvent.Decrypted, handleDecrypted);
     };
-  }, [room, hideMembershipEvents, hideNickAvatarEvents, showHiddenEvents]);
+  }, [room, enabled, hideMembershipEvents, hideNickAvatarEvents, showHiddenEvents]);
 
   return latestEvent;
 };