readded allow scripts

Merge remote-tracking branch 'origin/sw-fix' into update-packages
i hate npm audit
2026-08-02 22:28:01 -04:00 · 2026-08-02 22:27:44 -04:00 · 2026-08-02 22:21:32 -04:00 · 2026-08-02 21:58:24 -04:00 · 2026-08-02 21:39:17 -04:00 · 2026-08-02 21:10:59 -04:00
322 changed files with 17641 additions and 8247 deletions
@@ -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
@@ -23,12 +35,12 @@ jobs:
      - name: Install dependencies
        # Harden against transient registry network failures (ECONNRESET etc.):
        # raise npm's built-in fetch retries/timeouts and retry `npm ci` up to
-        # 3 times with backoff before failing the build.
+        # 5 times with backoff before failing the build.
        run: |
          npm config set fetch-retries 5
-          npm config set fetch-retry-mintimeout 20000
-          npm config set fetch-retry-maxtimeout 120000
-          npm config set fetch-timeout 600000
+          npm config set fetch-retry-mintimeout 10000
+          npm config set fetch-retry-maxtimeout 60000
+          npm config set fetch-timeout 300000
          for attempt in 1 2 3; do
            echo "npm ci attempt $attempt…"
            npm ci && break
@@ -53,26 +65,36 @@ 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
+      - name: Prettier Check and Fix
+        run: |
+          npx prettier --write . 
+          npm run check:prettier
        continue-on-error: true

-      # ── 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
@@ -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.
@@ -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
@@ -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.
@@ -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.**
@@ -1,5 +1,19 @@
 {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "prettier.requireConfig": true,
+
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
@@ -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.

 ---

@@ -294,6 +294,7 @@ A warm orange overlay rendered over the entire UI to reduce blue light emission.
 - CSS: `position: fixed; inset: 0; pointer-events: none; z-index: 9998`
 - Orange tint color with configurable opacity
 - **Controls:** Toggle to enable/disable + intensity slider ranging from 5% to 80% opacity
+- **Schedule (auto on at night):** an optional schedule with From/To time inputs; when on, the overlay only shows during that window and turns itself on/off automatically (the overlay re-checks every minute, no reload). Overnight windows that wrap midnight (e.g. 21:00 → 07:00) are handled. Window logic is the pure, unit-tested `isWithinTimeWindow`/`parseHHMM` in `src/app/utils/timeWindow.ts` (`timeWindow.test.ts`). Defaults: 21:00–07:00.
 - Settings persisted via the standard Lotus settings store

 ---
@@ -660,6 +661,7 @@ The indicator is hidden once the server confirms the event (when the internal st

 - API: `GET /_matrix/client/v1/rooms/{roomId}/relations/{eventId}/m.replace`
 - E2EE fix: the "Original" entry uses `getClearContent()` to retrieve the decrypted content rather than the encrypted payload
+- **Word-level diff**: a "Highlight changes" toggle (on by default) renders each edit as a word diff against the previous version — added words highlighted (green), removed words struck-through (red) — using semantic `<ins>`/`<del>`. Toggle off to see full text (formatted messages render rich there; the diff is plain-text only). Diff logic is the pure, unit-tested `diffWords` (LCS) in `src/app/utils/textDiff.ts`.
 - Accessible from the message context menu

 ### Inline GIF Preview
@@ -673,18 +675,70 @@ The indicator is hidden once the server confirms the event (when the internal st
 - Giphy-powered picker accessible from the composer toolbar
 - The button is only shown when `gifApiKey` is set in `config.json`
 - Selected GIFs are sent as `m.image` events
+- **Recently used**: a "Recent" row at the top of the picker (shown on the default view, hidden while searching) surfaces the GIFs you last sent for one-click re-sending — no re-searching. Persisted in localStorage (`cinny_recent_gifs_v1`), deduped by url, most-recent-first, capped at 16, via the pure/unit-tested `addRecentGif` (`src/app/state/recentGifs.ts`).
 - 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.

+### Copy Message Text
+
+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 &lt;language&gt; · 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`
 - Draft is cleared on successful send
 - The Jotai atom is the primary source of truth; `localStorage` is only read on room mount
+- **Room-nav draft indicator**: a subtle green dot (the composer's shared `DraftDot`, `color.Success.Main`) appears on a room's nav item when it has an unsent message draft (and isn't the open room), so you can see at a glance where you left half-written messages. The dot reuses the composer draft affordance's vocabulary (`role="img"`, aria-label "Unsent draft"). It reacts to the shared draft atom via a memoized `selectAtom(…, hasMsgDraft)` (re-renders only when the flag flips; the atom is written on room-leave, not per keystroke). `useHydrateMsgDrafts` (mounted in `ClientNonUIFeatures`) pre-fills the draft atoms from `draft-msg-*` localStorage on startup so indicators are correct after a reload. Emptiness check shared via the pure, unit-tested `hasMsgDraft` (`src/app/utils/draft.ts`), also used by the composer's `DraftIndicator`.

 ### Message Search Date Range

@@ -706,16 +760,21 @@ KaTeX-rendered math in messages, two paths:

 - **Spec path (CS-API §11.5):** `<span/div data-mx-maths="…">` in `formatted_body` renders the attribute's LaTeX (block for div, inline for span); on render failure the element's child fallback content shows instead
 - **Plain-text path:** `$…$` (inline) and `$$…$$` (block) with conservative rules — escape-aware (`\$`), currency-guarded (`$5 and $10` stays text), never inside `code`/`pre`
+- **Outgoing interop:** on send, the composer converts `$…$`/`$$…$$` to spec `<span/div data-mx-maths>` HTML in `formatted_body` (extracted before markdown so LaTeX isn't mangled; off inside code), so math renders on Element and every other client — not just Lotus. The plain `body` keeps literal `$…$` as the fallback
 - KaTeX + its CSS load lazily on first math encountered — zero cost to the main bundle
- Files: `src/app/utils/mathParse.ts` (+14 tests), `components/math/KaTeX.tsx`, `plugins/react-custom-html-parser.tsx`
+- Files: `src/app/utils/mathParse.ts` (+14 tests), `components/math/KaTeX.tsx`, `plugins/react-custom-html-parser.tsx` (render), `components/editor/output.ts` (+ `output.test.ts`, outgoing)

 ### Image / Video Captions

-Images and videos can be sent with a caption. The caption and media are sent as a single event.
+Images and videos can be sent with a caption. The caption and media are sent as a single event (caption = the event `body` when it differs from `filename`).
+
+- **Edit caption**: an image/video you sent shows an **Edit caption** action (quick-actions pencil + message menu). It opens the message editor seeded with the current caption; saving sends an `m.replace` whose `m.new_content` preserves the media (`url`/`info`/encrypted `file`/`filename`) and only changes `body`/`formatted_body`. An empty caption removes it (`body` falls back to `filename`). Gated by `canEditCaption` (`utils/room.ts`) to your own image/video messages that carry an MSC2530 `filename`. Caption edits carry `m.mentions` (an @-mention in a caption notifies) and appear in Edit History (diffed by the word-diff) — even after a caption is removed, the "(edited)" marker remains so history stays reachable. No re-upload — encrypted media keeps its original file/key.

 ### Location Sharing

-`m.location` events render an inline map tile using the coordinates from the event content.
+`m.location` events render an inline map tile using the coordinates from the event content. The renderer reads the top-level `geo_uri` and **falls back to the MSC3488 `org.matrix.msc3488.location`/`m.location` `uri`**, so locations from clients that send only the new shape still render (previously they showed as broken); an MSC3488 `description`, if present, is shown above the coordinates.
+
+Sharing your location (composer → location button) sends an **MSC3488-compliant** `m.location` event: the legacy `geo_uri` plus the `org.matrix.msc3488.location` (uri), `org.matrix.msc3488.asset` (`m.self`), and `org.matrix.msc3488.ts`/`m.ts` blocks, and a human-readable `body`. This makes Lotus-shared locations render as proper pins on Element and other clients instead of falling back to plain text.

 ### Deleted Message Placeholders

@@ -726,15 +785,27 @@ Redacted events display "This message has been deleted" along with the redaction
 - Bookmarks are stored in `io.lotus.bookmarks` account data, syncing across all devices
 - Maximum of 500 bookmarked entries
 - `BookmarksPanel.tsx` is a sidebar panel accessible from the navigation rail
+- Live-renders edits/redactions, text search, jump-to-message, and remove
+- **Author attribution**: each saved-message card shows who wrote it (`{sender} · {time ago}`). The author is snapshotted at save time (`senderId`/`senderName` on the bookmark, optional for backward compatibility) and re-resolved live from the event when the room is joined; search also matches the author name.
+- **Sort & group**: a Newest / Oldest / By-room segmented control sorts the list; "By room" renders collapsible per-room sections (groups ordered by most-recent save). The chosen sort persists across panel opens (`cinny_bookmarks_sort_v1`). Ordering/grouping logic is pure and unit-tested in `src/app/utils/bookmarks.ts` (`bookmarks.test.ts`).
 - Hook: `src/app/hooks/useBookmarks.ts`

 ### Message Scheduling

 - Implements MSC4140 delayed events for scheduling messages to be sent at a future time
 - `ScheduleMessageModal.tsx` provides the date/time picker UI
- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual cancel buttons
+- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual send-now, edit, and cancel buttons
+- **Send now**: the tray's send button fires a pending message immediately via MSC4140 `action: 'send'` (the server dispatches the stored delayed event now, as a normal timeline event — no cancel+retype). The row is pruned only once the server confirms; a failed send leaves an inline "Could not send now" error with the message still sendable/editable/cancellable.
+- **Edit / reschedule**: the tray's edit button re-opens `ScheduleMessageModal` (seeded with the existing body + send-time) to change the text and/or time. Since MSC4140 has no in-place edit, this is implemented as schedule-new-then-cancel-old; the old copy is only removed once the server confirms cancellation, so a failed cancel leaves a visible, cancellable copy rather than losing the message. Edits go through the plain-text composer (rich content becomes `m.text`).
 - Utilities in `src/app/utils/scheduledMessages.ts`

+### Message Reminders
+
+- Message context menu → **Remind Me** sets a personal reminder to revisit a message; reminders are stored in `io.lotus.reminders` account data (sync across devices) via `useReminders`, and fire from `ClientNonUIFeatures`.
+- `RemindMeDialog.tsx` offers quick presets (in 20 min / 1 hour / 3 hours / tomorrow 9am) **plus a "Custom time…" option** that reveals date + time pickers for an arbitrary reminder time (validated to be ≥ 1 minute in the future).
+- **Manage existing reminders**: opening the dialog on a message that already has reminders lists them (soonest first, friendly time via `formatFriendlyDateTime`) each with a cancel (×) button, so you can see and remove pending reminders instead of silently stacking duplicates.
+- The date/time input helpers (`toLocalDate`, `toLocalTime`, `parseLocalDateTime`, `pickerInputStyle`) are shared, pure, and unit-tested in `src/app/utils/datetimeInput.ts` (`datetimeInput.test.ts`) — also used by `ScheduleMessageModal` (deduped from a prior inline copy).
+
 ### File Upload Compression (opt-in)

 - Implemented in `UploadCardRenderer.tsx`
@@ -767,20 +838,92 @@ Redacted events display "This message has been deleted" along with the redaction

 Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unparseable preview responses are suppressed entirely rather than showing a blank card.

+### Inline Media Embeds
+
+Media links play/render **in place** instead of opening a browser tab. A pure
+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                              |
+
+**Privacy-friendly facade.** The tile first shows the homeserver's cached
+`og:image` thumbnail + a play button; the third-party `<iframe>` is only mounted
+on click, so nothing hits Google/Meta/etc. until the user opts in. A **Close**
+button collapses a playing embed back to the facade, and video players carry a
+Fullscreen control. Cookie-less/DNT variants are used where offered
+(`youtube-nocookie.com`, Vimeo `dnt=1`).
+
+**Provider notes.**
+
+- **TikTok** — short "copy-link" URLs (`vm.tiktok.com`, `tiktok.com/t/…`) carry no
+  video id and the homeserver preview is bot-walled, so `TikTokEmbedCard`
+  resolves the id client-side via TikTok's CORS-enabled **oEmbed** API on click
+  (`AbortController`-guarded), then plays the `player/v1` embed.
+- **Reddit / Instagram / Bluesky / X** — post embeds self-size via `postMessage`;
+  `useIframeAutoHeight` listens scoped to each provider's origin **and** our own
+  iframe, parsing each provider's height shape (Instagram `MEASURE`, Reddit
+  `resize.embed`, Twitter `twttr.private.resize`). `redd.it` short links resolve to
+  the subreddit-less `embed.reddit.com/comments/{id}/` route.
+- **Vimeo** unlisted-video privacy hashes (`vimeo.com/{id}/{hash}`) and
+  channel/group/album forms are parsed; **YouTube** handles `/watch`, `youtu.be`,
+  `/embed`, `/live`, `/shorts`, and `m.`/`music.youtube.com`.
+
+**Defense-in-depth.** Every embed iframe carries a `sandbox` that omits
+`allow-top-navigation` (so a compromised embed can't redirect the whole app —
+phishing guard) on top of the CSP `frame-src` allowlist. Previews are also capped
+at 6 per message.
+
+**Setting.** `inlineMediaEmbeds` (Settings → General → "Inline Media Players",
+default **on**). Off → media links fall back to plain link tiles.
+
+**Latent web bug fixed along the way.** YouTube thumbnails now come from the
+homeserver `og:image` instead of `img.youtube.com` — which was silently broken on
+the web build (nginx `img-src` has no YouTube host) — removing a pre-click Google
+request as a bonus.
+
+**CSP.** Desktop Tauri `frame-src` (`cinny-desktop` `tauri.conf.json`) and the web
+nginx `frame-src` allowlist enumerate every embed host (youtube-nocookie,
+player.vimeo, geo.dailymotion, streamable, player/clips.twitch, open.spotify,
+w.soundcloud, embed.music.apple, embed.tidal, www.tiktok + connect-src for its
+oEmbed, platform.twitter, www.instagram, embed.reddit, embed.bsky.app, www.loom,
+player.kick).
+
+**Files:** `src/app/utils/videoEmbed.ts` (resolver + parsers, unit-tested),
+`src/app/components/url-preview/{UrlPreviewCard,UrlPreview.css}.tsx`.
+
 ### Poll Creation

- `PollCreator.tsx` creates stable `m.poll.start` events
- Supports 2 to 10 answer options
- Supports both single-choice and multiple-choice modes
+- `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

-### Poll Display
+### Poll Display & Voting (MSC3381, full lifecycle)

-`PollContent.tsx` renders polls in read-only mode. Handles both the stable `m.poll` format and the legacy MSC3381 unstable `org.matrix.msc3381.poll.start` format. Displays current vote counts and a note directing users to Element to cast votes.
+`PollContent.tsx` is a fully interactive, spec-correct poll card:

-### Voice Message Playback Speed
+- **Vote / change / clear** in place — sends stable `m.poll.response` (`m.selections`); latest response per voter wins; clearing removes you from the tally. Multi-choice enforces `max_selections` ("Select up to N").
+- **Disclosed vs undisclosed** — undisclosed polls hide counts/percentages/bars (and the vote total) until the poll ends; disclosed polls show live results.
+- **See who voted** — a "Show who voted" toggle (shown only when results are visible, i.e. disclosed live or undisclosed-after-end) reveals the voter names under each answer. The voter list rides the same tally as the counts (`voters: Map<answerId, senderId[]>` populated in `tallyResponses`'s latest-response-per-sender loop), so it can never disagree with the numbers; a re-vote moves the voter, and a cleared vote drops them. Names via `getMemberName`; undisclosed polls stay secret until close.
+- **End a poll** — the poll's creator or a moderator (redact power) can end it via an inline confirm; sends stable `m.poll.end`. Ended polls lock voting, show "Poll closed · Final results", reveal results, and highlight the winner(s) (ties supported). Only responses cast on/before the end event count.
+- **Cross-client** — reads **both** the stable (`m.poll`/`m.id`/`m.selections`) and unstable (`org.matrix.msc3381.poll.*`) wire formats by hand (matrix-js-sdk 41.7.0's poll parsers only speak unstable), and uses the SDK `Poll` model for end-event validation (creator / redact-PL) + before-end response filtering. Polls authored in Element render/vote/end correctly and vice-versa.
+- **Accessibility** — `radiogroup`/`radio` (single, with arrow-key roving) or `group`/`checkbox` (multi) semantics, `aria-checked`/`aria-disabled`, winner announced to AT.
+- Pure tally/visibility/winner/voters + wire-format parsing live in `utils/poll.ts` (+ `poll.test.ts`, 18 tests incl. the stable/unstable round-trip and voter attribution).

-`AudioContent.tsx` adds a playback speed cycle button to voice message players. Available speeds: `[0.75, 1, 1.5, 2]×`. A `useEffect` sets `audioElement.playbackRate` whenever the speed selection changes.
+### Voice Message Playback (waveform + speed)
+
+`AudioContent.tsx` is the shared audio player (timeline + Media Gallery Audio tab):
+
+- **Waveform scrubbing** — voice messages carry an MSC1767 waveform (`org.matrix.msc1767.audio.waveform`, sent by the recorder). Playback renders it as bars that fill with the accent as the clip plays (TDS green under Lotus Terminal), and the waveform **is** the seek control — click, drag, or keyboard (arrows ±5s, Home/End) to scrub (`role="slider"`, ARIA value text). Threaded through `MAudio` (`MsgTypeRenderers.tsx`) + passed directly by the gallery. Regular audio with no waveform keeps the plain seek bar.
+- **Playback speed** — a cycle button (`[0.75, 1, 1.5, 2]×`); a `useEffect` sets `audioElement.playbackRate` and re-applies it on (re)load (the browser resets it).
+- **Recording pause / resume** — `VoiceMessageRecorder.tsx` supports a `paused` state via `MediaRecorder.pause()/resume()`, so you can pause mid-recording and continue without a gap. The duration timer accumulates only active-recording time (paused time is excluded), the waveform/meters freeze while paused and the record dot stops pulsing, and the finish button (which advances to the preview/review step) is a checkmark distinct from the Pause control.

 ---

@@ -792,13 +935,21 @@ Full threaded-conversation support (`m.thread`, matrix-js-sdk `threadSupport`),

 A right-side drawer (mirrors the members drawer; fullscreen on mobile) with the thread's root message emphasized at top, an "N replies" divider, the full reply timeline (virtualized, back-paginates via `/relations`, decrypts E2EE threads), reactions/edits/redactions, and its own composer. Open it from **Reply in Thread** in the message menu, a reply's thread indicator, or a summary chip; close with **×** or Escape. Reading the panel sends threaded read receipts so per-thread unread counts clear.

+### Threads List Panel
+
+A room-level overview of **all** threads, opened from a **Threads** button (🧵) in the room header (mirrors the gallery/widgets toggles). Each row shows the root sender + message snippet, an unread dot, a meta line ("N replies · last reply 5m ago") and a **participant avatar pile**. A segmented **filter** (All / Unread / Participating — the latter via `thread.hasCurrentUserParticipated`) and **sort** (Recent / Oldest, by last-reply time) sit in the toolbar; both persist in localStorage (`cinny_threads_filter_v1` / `cinny_threads_sort_v1`). Clicking a row opens the existing single-thread `ThreadPanel` (reuses `setActiveThreadId`), and reading it clears the row's unread badge live. The list stays live via `ThreadEvent.New/NewReply/Update/Delete` + `RoomEvent.UnreadNotifications` and is virtualized for busy rooms.
+
+- Files: `features/room/thread/ThreadsListPanel.tsx`, `hooks/useRoomThreads.ts` (populates via `room.fetchRoomThreads()` + `room.getThreads()`; last-activity + reply-count + root-edit signature so rows refresh live), `state/threadsList.ts`, pure filter/sort in `utils/threadList.ts` (`filterThreads`/`sortThreads`, unit-tested). Unread mirrors `useThreadSummary`'s logic (`getThreadUnreadNotificationCount`, muted threads zeroed) and renders the app-wide `UnreadBadge` (red for mentions via the Highlight count). Reuses `StackedAvatar`/`useMemberAvatar` for the participant pile and the Bookmarks-panel segmented-control pattern.
+
 ### Summary Chips

 Root messages in the main timeline show a **"N replies · time"** chip (server-aggregated `m.thread` bundle, or the live Thread once loaded) with an unread badge — threaded replies no longer render inline in the main timeline, so the chip is how conversations stay discoverable.

 ### 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).

 ### Notifications (Slack-style, P4-1)

@@ -834,9 +985,11 @@ 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
+- **Status presets**: a "Quick statuses" row of 11 built-in presets spanning gaming/social/life/work — 🎮 Gaming, 🎧 In a party, 🏆 Ranked grind, 😴 AFK, 🍿 Watching, 🍽️ Lunch, 🗓️ In a meeting, 🏠 Working remotely, 🎯 Focusing, 🌴 On vacation, 🤒 Out sick (see `BUILT_IN_STATUS_PRESETS`). Clicking a preset applies its message + suggested auto-clear in one click. Users can also save the current status as a reusable custom preset (stored in `io.lotus.status_presets` account data, synced across devices, de-duped by label, capped at 20; a saved preset matching a built-in is hidden to avoid a duplicate chip) and delete presets inline. Built-in list + pure `upsertPreset` de-dupe/cap logic live in `src/app/utils/statusPresets.ts` (unit-tested); persistence in `src/app/hooks/useStatusPresets.ts`.

 ### Presence Badges

@@ -866,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}`:
@@ -909,6 +1064,10 @@ 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).
+- **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)

 `BookmarksPanel` resolves each saved message's **live event** (`useRoomEvent`) so previews reflect **edits** and show a **deleted** indicator for redactions, instead of the save-time snapshot. The stored snapshot (`previewText`) remains the fallback while loading, on fetch failure, or when you've **left the room**.
@@ -937,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

@@ -1003,7 +1161,8 @@ Persists via the `homeRoomSort` setting.

 `RoomShareInvite.tsx` provides a shareable invite UI:

- 160×160px QR code generated via `api.qrserver.com`
+- 160×160px QR code generated locally via `qrcode.react` (`QRCodeSVG`) — no third-party service, works offline and under strict CSP, on a white quiet-zone so it scans on any theme
+- **Download QR**: exports the code as a PNG via an offscreen high-resolution (1024px, spec 4-module margin) `QRCodeCanvas` + `canvas.toBlob`, saved through `useSaveFile` (filename derived from the room name) with the standard download toast
 - "Copy Link" button to copy the `matrix.to` URI
 - Also accessible via a toggle button (⊞) in the Invite modal

@@ -1015,10 +1174,13 @@ A toggle in **Settings → Privacy** switches between sending `m.read` (public r

 `MediaGallery.tsx` — a right-side drawer for browsing room media.

- Three tabs: **Images**, **Videos**, **Files**
- Reads already-decrypted events from the room timeline
- Encrypted images show a lock placeholder rather than an error
- "Load More" button triggers `mx.paginateEventTimeline()` to fetch older media
+- Four tabs: **Images**, **Videos**, **Audio**, **Files** (each with a live count)
+- **Images/Videos** — a month-grouped grid; tiles decrypt on demand (lazy, near-viewport), open a keyboard-navigable **lightbox** (←/→/Esc, prev/next). Each grid tile has a hover/focus **download** button, and the lightbox header has a **Download** action — both reuse the shared `FileDownloadButton` (full-resolution source, decrypts E2EE media client-side, spinner/✓/retry states), so images and videos can be saved without jumping to the message. On touch (no-hover) devices the tile download button stays visible. In the lightbox, **images support zoom & pan** (scroll wheel or −/+ header buttons, `+`/`-`/`0` keys, double-click or the % chip to toggle 1×↔2×; drag to pan when zoomed) via the shared `useZoom`/`usePan` hooks; zoom resets when navigating to another item.
+- **Audio** — voice messages + audio files (`m.audio`) with an inline player (reuses `AudioContent`: **waveform scrubbing** for voice messages, play/seek/**speed control**; decrypts on play)
+- **Files** — name/size/sender rows with download
+- **Jump to message** — a "Go to message" action on file rows, audio rows, and in the lightbox navigates the timeline to the source event (`useRoomNavigate`) and closes the drawer
+- Encrypted media is decrypted client-side on demand (no lock placeholder); download works for all types
+- **Auto-pagination** — an `IntersectionObserver` sentinel calls `mx.paginateEventTimeline()` to pull older media as you scroll (manual retry on error)

 ### Knock-to-Join

@@ -1127,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

 ---

@@ -1149,6 +1311,13 @@ Accessible via **Room/Space Settings → Policy Lists** (admin only).
 - Gates both `notify()` (visual/OS notifications) and `playSound()` (audio alerts)
 - When active, notifications are silently dropped rather than queued

+### Pause Notifications (snooze)
+
+- A **cross-platform** "Pause Notifications" control in **Settings → Notifications** (the desktop-tray Do Not Disturb only worked on the desktop app; web/mobile had no manual pause).
+- Quick presets: 30 minutes / 1 hour / 4 hours / Until 8 AM / **Until I resume** (indefinite), plus a **Resume** button; the tile shows the live "Paused until …" status (via `formatFriendlyDateTime`) and flips back to "on" the moment the snooze lapses.
+- Persisted (`cinny_notification_snooze_until_v1`) as the epoch-ms instant to pause until (`0` = off), so a snooze survives a reload. Feeds the same notification gate as Focus Assist / Quiet Hours (`ClientNonUIFeatures`), suppressing both `notify()` and `playSound()`.
+- Pure, unit-tested helpers `isSnoozeActive` / `nextTimeAtHour` / `SNOOZE_INDEFINITE` in `src/app/utils/snooze.ts` (`snooze.test.ts`); persisted atom in `src/app/state/notificationSnooze.ts`.
+
 ### Full Push Rule Editor

 A complete UI for managing Matrix push notification rules:
@@ -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
@@ -662,6 +686,77 @@ Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view,

 ---

+## Q. Inline Media Embeds — video / audio / post players (needs the web deploy live)
+
+The whole feature is behind **Settings → General → "Inline Media Players"** (default **on**). Everything loads from the homeserver's cached thumbnail first; the third-party player only mounts on **Play**. Test on the **web** build first, then re-check the video ones on **desktop (Tauri)** since the CSP differs. On any failure, grab the **browser console** (F12) — a blocked embed shows as a CSP `frame-src` violation naming the host.
+
+### Q1. Facade + one of each kind plays in place
+
+Paste each of these into a room and confirm a media tile (not a plain link) with a thumbnail + play button, and that clicking Play mounts the player **inline**:
+
+- **16:9 video:** a YouTube `watch` link, a Vimeo link, a Dailymotion link, a Streamable link, a Twitch VOD/clip, a Loom `share` link.
+- **9:16 portrait:** a YouTube **Shorts** link (renders tall, not letterboxed).
+- **Audio player:** a Spotify track, a SoundCloud track, an Apple Music album, a Tidal album/track.
+- **Post embed:** an X/Twitter post, an Instagram post, a Reddit post.
+
+**Expected:** ✅ tile shows the thumbnail; **no** request to the third party until you press Play (check DevTools → Network); the player then plays inline. ❌ tell me any that stay a plain link, show a blank frame, or hit the network before you click.
+
+### Q2. TikTok (the tricky one) + portrait fill
+
+1. Paste a **full** TikTok URL and a **short** copy-link (`vm.tiktok.com/…` or `tiktok.com/t/…`).
+2. Press Play on each.
+
+**Expected:** both resolve to a clean **9:16** player that **fills the box** (no big empty band on the right). The short link shows a brief spinner while it resolves via oEmbed, then plays. ❌ tell me if a short link shows only the TikTok logo/♫ and never a play button, or if the player has dead space beside it.
+
+### Q3. Post self-resize + Close / Fullscreen controls
+
+1. Play a **Reddit**, **Instagram**, and **X/Twitter** post embed.
+2. Watch the card height as the embed loads.
+
+**Expected:** the card **grows to fit** the post (no clipped/scrollbarless content, no giant empty box). A **Close** button (✕) collapses the player back to the thumbnail; video players also show a **⛶ Fullscreen** control that works. Keyboard: Tab to the play button → it shows a visible **focus ring**.
+
+### Q4. New providers (unverified) + the toggle + the cap
+
+- **Bluesky / Loom / Kick** — these are freshly added and unverified live. Paste a `bsky.app/profile/…/post/…`, a `loom.com/share/…`, and a live `kick.com/{channel}` link. ✅ good if each plays/renders inline; ❌ if any is a broken frame (for **Bluesky** especially, note whether a **handle** URL resolves or only a DID one does — grab the console).
+- **Toggle off:** Settings → General → **Inline Media Players** off → every media link reverts to a plain link tile (no player).
+- **Cap:** paste a message with **8+** media links → at most **6** preview cards render (the rest are suppressed), and the page stays responsive.
+
+---
+
+## R. Discovery-pass fixes (DP1–DP18, 2026-07)
+
+Agent-surveyed + TPVR-verified low/med issues, now fixed (commits `8eb961b6` `db864326` `6cf18c3b` `165714e1` `8c0e2b42` `e545706c` `b1ee3ada` `4fc3f7a3` `101e4116` `4fa4327a` `c2598d21`). Behavioral items have concrete checks; the refactors just need a "still works" regression pass.
+
+### Correctness
+
+- [ ] **DP1 — slash-command errors are visible.** Run a slash command that must fail — e.g. `/kick @nobody:server` in a room where you lack permission, or `/join` a bad alias. **Expected:** an error toast appears (not a silent no-op); a successful command still clears the composer normally.
+- [ ] **DP2 — no invite re-notify on reload.** With ≥1 pending invite, hard-reload (Ctrl+F5). **Expected:** NO "you have N new invitation" toast/sound on load. Then have someone invite you while the app is open → you DO get one notification for the new invite. (👥 2 accounts)
+- [ ] **DP3 — status clear syncs across devices.** Set a status message on device A, confirm it shows on B; clear it on A. **Expected:** B clears too and does NOT re-publish the old status on its next presence heartbeat. Toggling Invisible must not wipe a real saved status. (👥 2 sessions)
+- [ ] **DP4 — tag-toggle failure surfaced once.** With the network offline, toggle a room's Favourite/Low-priority. **Expected:** a single error toast (not two) on failure; on success the tag updates as before.
+- [ ] **DP5 — soundboard packs update on room switch.** Open a soundboard in room A, then switch to room B (different pack) in the same mounted view. **Expected:** B's packs show without needing an unrelated event.
+- [ ] **DP6 — declining a call still dismisses.** Decline an incoming call. **Expected:** the ringing UI dismisses even if the decline send fails (best-effort). (👥 2 accounts)
+
+### a11y / UX (needs a screen reader + a narrow viewport)
+
+- [ ] **DP7 / DP8 — call-control buttons announce correctly.** In a call with a screen reader: the deafen button announces "Deafen" when sound is on (not "Undeafen"); Sound / Video / Screenshare announce a consistent pressed/unpressed state like Mic.
+- [ ] **DP9 — GIF picker focus + width.** Open the GIF picker, close it (Esc / click-out) → focus returns to the GIF button. On a ~320px viewport the picker doesn't overflow the page.
+- [ ] **DP10 — search-filter clears by keyboard.** In message search, toggle a filter chip (Has link / msg-type / pinned) off with Enter; the date-range clears via its menu's Clear. No mouse-only clear needed.
+- [ ] **DP11 — voice recorder fits + announces.** On a ~360px viewport, start a voice message → the recorder row doesn't overflow the composer; a screen reader can query the duration (role="timer") without being spammed.
+- [ ] **DP12 — live-call count announced.** With a screen reader, when someone joins/leaves an active call, the "{n} Live" change is announced (polite status region).
+
+### TDS colors (Lotus Terminal theme)
+
+- [ ] **DP14 — send-status + receipt colors follow the theme.** In **TDS light** mode: the message send-status "failed" icon and the read-receipt pill use the theme's darker red/blue (from `--lt-*` tokens), NOT bright dark-mode cyan/red. TDS dark still looks right; non-TDS themes unchanged.
+
+### Refactor regression pass (no behavior change intended)
+
+- [ ] **DP13 — bookmarks / reminders / notes still work** (they now share one store engine). Add/remove a bookmark, set/clear a reminder, write/clear a user note; each persists across reload; rapid consecutive writes don't clobber each other.
+- [ ] **DP15 / DP16 — state-event + account-data writes still work.** Edit room name/topic/avatar, join-rules, power levels, an emoji/soundboard pack (state events); toggle a setting stored in account data. All save + reflect correctly.
+- [ ] **DP17 — link previews render.** Open a TikTok / Spotify / Steam / Reddit link preview; provider icons render (folds icons, not raw glyphs) and brand colors look right.
+- [ ] **DP18 — member avatars/names live-update.** Read receipts + the "seen by" reader list show correct avatars/names and update live when a member changes their avatar or display name (no reload).
+
+---
+
 ## Priority if you're short on time

 1. **O1 + O2** (threads + per-thread notifications) — the largest new surface; the main-timeline change is user-visible.
@@ -675,6 +770,14 @@ Run the axe DevTools extension (or Lighthouse → Accessibility) on a room view,

 ## Outstanding verification backlog

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

 **Invite QR is now generated LOCALLY (2026-07):** Room settings → Share Room → the QR code renders (a black-on-white SVG in a white box) with **no network request** to `api.qrserver.com` (check DevTools Network — there should be no external QR fetch, and it should work offline / behind strict CSP). **Scan it** with a phone camera / Matrix app → it opens the correct `matrix.to` room-invite link. (`api.qrserver.com` was removed from the prod CSP img-src, so a regression would make the QR blank rather than silently phone home.)
@@ -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,11 +67,13 @@ 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
 - Code blocks highlight syntax for JS/TS, Python, and Rust
 - Rich link preview cards for YouTube, GitHub, Twitter/X, Reddit, Spotify, Twitch, Steam, Wikipedia, Discord, npm, Stack Overflow, and IMDb
+- Inline media embeds — play videos and posts in place instead of opening a browser tab: YouTube/Shorts, Vimeo, Dailymotion, Streamable, Twitch, Loom, and Kick as video players; TikTok, X/Twitter, Instagram, Reddit, and Bluesky as inline posts; Spotify, SoundCloud, Apple Music, and Tidal as a built-in audio player. A privacy-friendly facade shows the homeserver's cached thumbnail and only loads the third-party player when you press play. Toggle at Settings → General → "Inline Media Players" (on by default)

 ### Calls & Voice

@@ -165,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**
@@ -19,10 +19,11 @@
 *
 * Any failure falls back to the unprocessed mic so calls never break.
 */
+// TODO: MAKE THIS A TS FILE
 (function () {
  'use strict';

-  var params;
+  let params;
  try {
    params = new URLSearchParams(window.location.search);
    if (params.get('lotusDenoise') !== 'ml') return;
@@ -33,31 +34,31 @@
  // Derive the parent origin for postMessage targetOrigin from the parentUrl
  // widget param (a full URL) so denoise-status messages aren't broadcast with
  // '*'. Fall back to this frame's own origin if parentUrl is missing/malformed.
-  var targetOrigin;
+  let targetOrigin;
  try {
-    var parentUrl = params.get('parentUrl');
+    let parentUrl = params.get('parentUrl');
    targetOrigin = parentUrl ? new URL(parentUrl).origin : window.location.origin;
  } catch (e) {
    targetOrigin = window.location.origin;
  }

-  var md = navigator.mediaDevices;
+  let md = navigator.mediaDevices;
  if (!md || typeof md.getUserMedia !== 'function') return;
  if (typeof AudioWorkletNode === 'undefined' || typeof AudioContext === 'undefined') return;

-  var ASSET_BASE = './denoise/';
+  let ASSET_BASE = './denoise/';

-  var MODEL = params.get('lotusModel') || 'rnnoise';
+  let MODEL = params.get('lotusModel') || 'rnnoise';
  // DTLN (@workadventure) targets 16 kHz and does not resample internally, so
  // its whole graph runs in a 16 kHz context; RNNoise/Speex (sapphi) and
  // DeepFilterNet 3 are 48 kHz fullband. The processed MediaStreamTrack is
  // published to LiveKit either way (WebRTC/Opus resamples as needed).
-  var SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
-  var USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
-  var USE_GATE = params.get('lotusGate') === 'true';
-  var GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');
+  let SAMPLE_RATE = MODEL === 'dtln' ? 16000 : 48000;
+  let USE_NATIVE_NS = params.get('lotusNativeNS') === 'true';
+  let USE_GATE = params.get('lotusGate') === 'true';
+  let GATE_THRESHOLD = parseFloat(params.get('lotusGateThreshold') || '-45');

-  var PROCESSORS = {
+  let PROCESSORS = {
    rnnoise: {
      name: '@sapphi-red/web-noise-suppressor/rnnoise',
      script: 'rnnoiseWorklet.js',
@@ -91,9 +92,9 @@
    },
  };

-  var origGetUserMedia = md.getUserMedia.bind(md);
-  var wasmPromises = {};
-  var ctxPromise = null;
+  let origGetUserMedia = md.getUserMedia.bind(md);
+  let wasmPromises = {};
+  let ctxPromise = null;

  function checkSimd() {
    try {
@@ -112,12 +113,12 @@

  function loadWasm(modelId) {
    if (wasmPromises[modelId]) return wasmPromises[modelId];
-    var p = PROCESSORS[modelId];
+    let p = PROCESSORS[modelId];
    if (!p || !p.wasm) return Promise.resolve(null);

    wasmPromises[modelId] = (modelId === 'rnnoise' ? checkSimd() : Promise.resolve(false)).then(
      function (simd) {
-        var file = simd && p.simdWasm ? p.simdWasm : p.wasm;
+        let file = simd && p.simdWasm ? p.simdWasm : p.wasm;
        return fetch(ASSET_BASE + file).then(function (r) {
          if (!r.ok) {
            if (simd && p.simdWasm)
@@ -137,7 +138,7 @@
  function getContext() {
    if (!ctxPromise) {
      ctxPromise = (function () {
-        var ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+        let ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
        if (ctx.sampleRate !== SAMPLE_RATE) {
          try {
            ctx.close();
@@ -146,7 +147,7 @@
        }
        // Load worklet modules. DTLN registers its own processor via the
        // dynamic-imported helper (see buildMlNode), so it needs nothing here.
-        var scripts = [];
+        let scripts = [];
        if (MODEL === 'rnnoise' || MODEL === 'speex') scripts.push(PROCESSORS[MODEL].script);
        if (USE_GATE) scripts.push(PROCESSORS.gate.script);

@@ -169,7 +170,7 @@
    return ctxPromise;
  }

-  var hasNotifiedActive = false;
+  let hasNotifiedActive = false;

  // Build the ML denoise AudioWorkletNode. RNNoise/Speex are flat sapphi
  // worklets we instantiate directly with the fetched WASM binary. DTLN comes
@@ -187,9 +188,9 @@
    if (MODEL === 'deepfilternet') {
      // Resolve an absolute self-hosted base so the package's cdnUrl override
      // fetches our vendored df_bg.wasm + ONNX model (never the upstream CDN).
-      var dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
+      let dfnBase = new URL(ASSET_BASE + 'deepfilternet', window.location.href).href;
      return import(ASSET_BASE + PROCESSORS.deepfilternet.esm).then(function (mod) {
-        var core = new mod.DeepFilterNet3Core({
+        let core = new mod.DeepFilterNet3Core({
          sampleRate: SAMPLE_RATE,
          noiseReductionLevel: 80,
          assetConfig: { cdnUrl: dfnBase },
@@ -212,7 +213,8 @@
        });
      });
    }
-    var node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
+
+    let node = new AudioWorkletNode(ctx, PROCESSORS[MODEL].name, {
      channelCount: 1,
      numberOfInputs: 1,
      numberOfOutputs: 1,
@@ -230,21 +232,21 @@
  }

  function processStream(stream) {
-    var audioTracks = stream.getAudioTracks();
+    let audioTracks = stream.getAudioTracks();
    if (audioTracks.length === 0) return Promise.resolve(stream);

    return Promise.all([loadWasm(MODEL), getContext()])
      .then(function (res) {
-        var wasmBinary = res[0];
-        var ctx = res[1];
+        let wasmBinary = res[0];
+        let ctx = res[1];

-        var source = ctx.createMediaStreamSource(stream);
-        var dest = ctx.createMediaStreamDestination();
-        var head = source;
+        let source = ctx.createMediaStreamSource(stream);
+        let dest = ctx.createMediaStreamDestination();
+        let head = source;

        // 1. Optional Noise Gate
        if (USE_GATE) {
-          var gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
+          let gateNode = new AudioWorkletNode(ctx, PROCESSORS.gate.name, {
            processorOptions: {
              openThreshold: GATE_THRESHOLD,
              closeThreshold: GATE_THRESHOLD - 5,
@@ -258,7 +260,7 @@

        // 2. ML Processor
        return buildMlNode(ctx, wasmBinary).then(function (ml) {
-          var mlNode = ml.node;
+          let mlNode = ml.node;
          head.connect(mlNode);
          mlNode.connect(dest);

@@ -266,15 +268,15 @@
          // the track handoff — audio flows via bypassUntilReady meanwhile.
          if (ml.ready && typeof ml.ready.then === 'function') {
            ml.ready.catch(function (err) {
-              var m = err instanceof Error ? err.message : String(err);
+              let m = err instanceof Error ? err.message : String(err);
              console.error('[lotus-denoise] ' + MODEL + ' init failed:', m);
            });
          }

-          var origTrack = audioTracks[0];
-          var processedTrack = dest.stream.getAudioTracks()[0];
+          let origTrack = audioTracks[0];
+          let processedTrack = dest.stream.getAudioTracks()[0];

-          var torndown = false;
+          let torndown = false;
          function cleanup() {
            if (torndown) return;
            torndown = true;
@@ -293,7 +295,7 @@
            } catch (e) {}
          }

-          var rawStop = processedTrack.stop.bind(processedTrack);
+          let rawStop = processedTrack.stop.bind(processedTrack);
          processedTrack.stop = function () {
            cleanup();
            rawStop();
@@ -319,7 +321,7 @@
            );
          }

-          var out = new MediaStream();
+          let out = new MediaStream();
          out.addTrack(processedTrack);
          stream.getVideoTracks().forEach(function (t) {
            out.addTrack(t);
@@ -328,7 +330,7 @@
        });
      })
      .catch(function (e) {
-        var msg = e instanceof Error ? e.message : String(e);
+        let msg = e instanceof Error ? e.message : String(e);
        console.error('[lotus-denoise] Setup failed:', msg);
        window.parent.postMessage(
          { type: 'lotus-denoise-status', active: false, error: msg },
@@ -339,10 +341,10 @@
  }

  navigator.mediaDevices.getUserMedia = function (constraints) {
-    var wantsAudio = !!(constraints && constraints.audio);
-    var effective = constraints;
+    let wantsAudio = !!(constraints && constraints.audio);
+    let effective = constraints;
    if (wantsAudio) {
-      var audioC =
+      let audioC =
        typeof constraints.audio === 'object' ? Object.assign({}, constraints.audio) : {};
      audioC.noiseSuppression = USE_NATIVE_NS;
      audioC.channelCount = 1;
@@ -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',
@@ -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",
@@ -41,24 +35,22 @@
    "@eslint/eslintrc": "3.3.5",
    "@eslint/js": "10.0.1",
    "@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",
    "@tanstack/react-query-devtools": "5.100.13",
    "@tanstack/react-virtual": "3.13.25",
-    "@workadventure/noise-suppression": "0.0.4",
+    "@workadventure/noise-suppression": "0.1.1",
    "await-to-js": "3.0.0",
    "badwords-list": "2.0.1-4",
    "blurhash": "2.0.5",
    "browser-encrypt-attachment": "0.3.0",
    "chroma-js": "3.2.0",
    "classnames": "2.5.1",
-    "dateformat": "5.0.3",
    "dayjs": "1.11.20",
-    "deepfilternet3-noise-filter": "1.2.1",
+    "deepfilternet3-noise-filter": "1.3.0",
    "domhandler": "6.0.1",
    "emojibase": "17.0.0",
    "emojibase-data": "17.0.0",
@@ -74,14 +66,17 @@
    "immer": "11.1.8",
    "is-hotkey": "0.2.0",
    "jotai": "2.20.0",
-    "katex": "0.16.11",
+    "jsqr": "1.4.0",
+    "katex": "0.16.47",
    "linkify-react": "4.3.3",
    "linkifyjs": "4.3.3",
    "matrix-js-sdk": "41.7.0",
    "matrix-widget-api": "1.17.0",
    "millify": "6.1.0",
+    "oidc-client-ts": "3.5.0",
    "pdfjs-dist": "5.7.284",
    "prismjs": "1.30.0",
+    "qrcode": "1.5.4",
    "qrcode.react": "4.2.0",
    "react": "19.2.6",
    "react-aria": "3.48.0",
@@ -92,8 +87,8 @@
    "react-google-recaptcha": "3.1.0",
    "react-i18next": "17.0.8",
    "react-range": "1.10.0",
-    "react-router-dom": "7.15.1",
-    "sanitize-html": "2.17.4",
+    "react-router": "8.3.0",
+    "sanitize-html": "2.17.6",
    "slate": "0.124.1",
    "slate-dom": "0.124.1",
    "slate-history": "0.113.1",
@@ -109,35 +104,31 @@
    "@types/chroma-js": "3.1.2",
    "@types/file-saver": "2.0.7",
    "@types/is-hotkey": "0.1.10",
-    "@types/katex": "0.16.8",
    "@types/node": "25.9.1",
    "@types/prismjs": "1.26.6",
+    "@types/qrcode": "1.5.6",
    "@types/react": "19.2.15",
    "@types/react-dom": "19.2.3",
    "@types/react-google-recaptcha": "2.1.9",
    "@types/sanitize-html": "2.16.1",
-    "@types/ua-parser-js": "0.7.39",
    "@typescript-eslint/eslint-plugin": "8.59.4",
    "@typescript-eslint/parser": "8.59.4",
    "@vanilla-extract/css": "1.20.1",
    "@vanilla-extract/recipes": "0.5.7",
    "@vanilla-extract/vite-plugin": "5.2.2",
    "@vitejs/plugin-react": "6.0.2",
-    "buffer": "6.0.3",
-    "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",
    "eslint-plugin-react": "7.37.5",
    "eslint-plugin-react-hooks": "7.1.1",
    "husky": "9.1.7",
-    "lint-staged": "17.0.5",
    "prettier": "3.8.3",
    "tsx": "4.22.4",
    "typescript": "6.0.3",
-    "vite": "8.0.14",
+    "vite": "8.2.0",
    "vite-plugin-pwa": "1.3.0",
    "vite-plugin-static-copy": "4.1.0"
  },
@@ -146,5 +137,9 @@
      "dompurify": ">=3.3.4"
    },
    "js-cookie": ">=3.0.6"
+  },
+  "allowScripts": {
+    "protobufjs": true,
+    "esbuild": true
  }
 }
@@ -11,58 +11,58 @@
  "theme_color": "#980000",
  "icons": [
    {
-      "src": "./res/android/android-chrome-36x36.png",
+      "src": "./public/res/android/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-48x48.png",
+      "src": "./public/res/android/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-72x72.png",
+      "src": "./public/res/android/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-96x96.png",
+      "src": "./public/res/android/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-144x144.png",
+      "src": "./public/res/android/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-192x192.png",
+      "src": "./public/res/android/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-256x256.png",
+      "src": "./public/res/android/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-384x384.png",
+      "src": "./public/res/android/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-512x512.png",
+      "src": "./public/res/android/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
-      "src": "./res/android/maskable-192x192.png",
+      "src": "./public/res/android/maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
-      "src": "./res/android/maskable-512x512.png",
+      "src": "./public/res/android/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
@@ -77,7 +77,7 @@
      "url": "/",
      "icons": [
        {
-          "src": "res/android/android-chrome-96x96.png",
+          "src": "public/res/android/android-chrome-96x96.png",
          "sizes": "96x96"
        }
      ]
@@ -1,5 +1,5 @@
 import { ReactNode, useCallback } from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { matchPath, useLocation, useNavigate } from 'react-router';
 import {
  getDirectPath,
  getExplorePath,
@@ -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';
@@ -59,7 +59,7 @@ import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getStateEvents, getMemberDisplayName } from '../utils/room';
+import { getStateEvent, getStateEvents, getMemberName } from '../utils/room';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -161,9 +161,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
          <Dialog style={{ maxWidth: toRem(324) }}>
            <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
              <Text size="T200" align="Center">
-                {getMemberDisplayName(info.room, info.sender) ??
-                  getMxIdLocalPart(info.sender) ??
-                  info.sender}
+                {getMemberName(info.room, info.sender)}
              </Text>
              <Box direction="Column" gap="500" alignItems="Center">
                <Box shrink="No">
@@ -316,8 +314,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
    return () => clearTimeout(id);
  }, [info.senderTs, info.lifetime, onIgnore]);

-  const callerName =
-    getMemberDisplayName(info.room, info.sender) ?? getMxIdLocalPart(info.sender) ?? info.sender;
+  const callerName = getMemberName(info.room, info.sender);

  return (
    <Box
@@ -453,8 +450,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
          decliner !== mx.getSafeUserId() &&
          callEmbed?.roomId === room.roomId
        ) {
-          const declinerName =
-            getMemberDisplayName(room, decliner) ?? getMxIdLocalPart(decliner) ?? decliner;
+          const declinerName = getMemberName(room, decliner);
          setToast({
            id: `rtc-decline-${event.getId() ?? decliner}`,
            displayName: declinerName,
@@ -477,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 =
@@ -544,11 +548,16 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)

  const handleReject = useCallback(
    (room: Room, eventId: string) => {
+      // Best-effort: the local UI dismisses regardless (below), but a failed
+      // decline used to reject uncaught. Log it instead of surfacing — the caller
+      // will time the call out on their side even if our decline never lands.
      mx.sendEvent(room.roomId, EventType.RTCDecline, {
        'm.relates_to': {
          rel_type: RelationType.Reference,
          event_id: eventId,
        },
+      }).catch((err) => {
+        console.error('Failed to send call decline:', err);
      });
      setCallInfo(undefined);
    },
@@ -694,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;
@@ -705,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;
@@ -1,12 +1,14 @@
 import {
+  ShowQrCodeCallbacks,
  ShowSasCallbacks,
  VerificationPhase,
  VerificationRequest,
  Verifier,
 } from 'matrix-js-sdk/lib/crypto-api';
-import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
+import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
+import QRCode from 'qrcode';
 import {
  Box,
  Button,
@@ -27,11 +29,13 @@ import {
  useVerificationRequestPhase,
  useVerificationRequestReceived,
  useVerifierCancel,
+  useVerifierShowReciprocateQr,
  useVerifierShowSas,
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { useModalStyle } from '../hooks/useModalStyle';
+import { QrScanner } from './QrScanner';

 const DialogHeaderStyles: CSSProperties = {
  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -97,32 +101,6 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
  );
 }

-function VerificationWaitStart() {
-  const { t } = useTranslation();
-  return (
-    <Box direction="Column" gap="400">
-      <Text>{t('Organisms.DeviceVerification.request_accepted')}</Text>
-      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_response')} />
-    </Box>
-  );
-}
-
-type VerificationStartProps = {
-  onStart: () => Promise<void>;
-};
-function AutoVerificationStart({ onStart }: VerificationStartProps) {
-  const { t } = useTranslation();
-  useEffect(() => {
-    onStart();
-  }, [onStart]);
-
-  return (
-    <Box direction="Column" gap="400">
-      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
-    </Box>
-  );
-}
-
 function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
  const { t } = useTranslation();
  const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
@@ -237,6 +215,120 @@ function VerificationCanceled({ onClose }: VerificationCanceledProps) {
  );
 }

+function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    // Byte-mode so the raw verification bytes round-trip (a string value would
+    // mangle high bytes via UTF-8).
+    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
+      width: 220,
+      margin: 2,
+      color: { dark: '#000000', light: '#ffffff' },
+    }).catch(() => undefined);
+  }, [data]);
+  return (
+    <Box justifyContent="Center">
+      <canvas ref={canvasRef} style={{ borderRadius: config.radii.R300 }} />
+    </Box>
+  );
+}
+
+type VerificationReadyProps = {
+  request: VerificationRequest;
+  onStartSas: () => void;
+  onScanned: (bytes: Uint8ClampedArray) => void;
+};
+function VerificationReady({ request, onStartSas, onScanned }: VerificationReadyProps) {
+  const [myQr, setMyQr] = useState<Uint8ClampedArray>();
+  const [scanning, setScanning] = useState(false);
+  const canShowMine = request.otherPartySupportsMethod(VerificationMethod.ScanQrCode);
+  const canScanTheirs = request.otherPartySupportsMethod(VerificationMethod.ShowQrCode);
+
+  useEffect(() => {
+    if (!canShowMine) return;
+    request
+      .generateQRCode()
+      .then((bytes) => {
+        if (bytes) setMyQr(bytes);
+      })
+      .catch(() => undefined);
+  }, [request, canShowMine]);
+
+  if (scanning) {
+    return <QrScanner onScan={onScanned} onCancel={() => setScanning(false)} />;
+  }
+
+  return (
+    <Box direction="Column" gap="400">
+      {myQr && (
+        <Box direction="Column" gap="200">
+          <Text size="T300">Scan this code with your other device to verify.</Text>
+          <QrCodeImage data={myQr} />
+        </Box>
+      )}
+      <Box direction="Column" gap="200">
+        {canScanTheirs && (
+          <Button variant="Primary" fill="Solid" onClick={() => setScanning(true)}>
+            <Text size="B400">Scan their QR code</Text>
+          </Button>
+        )}
+        <Button variant="Secondary" fill="Soft" onClick={onStartSas}>
+          <Text size="B400">Verify with emoji instead</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
+type ReciprocateVerificationProps = {
+  verifier: Verifier;
+  onCancel: () => void;
+};
+function ReciprocateVerification({ verifier, onCancel }: ReciprocateVerificationProps) {
+  const [qrCallbacks, setQrCallbacks] = useState<ShowQrCodeCallbacks>();
+  const [confirmState, confirm] = useAsyncCallback(
+    useCallback(async () => qrCallbacks?.confirm(), [qrCallbacks]),
+  );
+
+  useVerifierShowReciprocateQr(verifier, setQrCallbacks);
+  useVerifierCancel(verifier, onCancel);
+
+  const confirming =
+    confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
+
+  // The showing side gets ShowReciprocateQr callbacks after the other device
+  // scans; the scanning side never does (it already called verify()) and just
+  // waits for completion.
+  if (!qrCallbacks) {
+    return (
+      <Box direction="Column" gap="400">
+        <WaitingMessage message="Verifying…" />
+      </Box>
+    );
+  }
+
+  return (
+    <Box direction="Column" gap="400">
+      <Text>The other device scanned this code. Confirm it now shows as verified.</Text>
+      <Box direction="Column" gap="200">
+        <Button variant="Primary" fill="Soft" onClick={confirm} disabled={confirming}>
+          <Text size="B400">Confirm</Text>
+        </Button>
+        <Button
+          variant="Primary"
+          fill="Soft"
+          onClick={() => qrCallbacks.cancel()}
+          disabled={confirming}
+        >
+          <Text size="B400">Cancel</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
 type DeviceVerificationProps = {
  request: VerificationRequest;
  onExit: () => void;
@@ -256,6 +348,17 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
  const handleStart = useCallback(async () => {
    await request.startVerification(VerificationMethod.Sas);
  }, [request]);
+  const handleScanned = useCallback(
+    async (bytes: Uint8ClampedArray) => {
+      try {
+        const verifier = await request.scanQRCode(bytes);
+        await verifier.verify();
+      } catch {
+        // A bad/mismatched scan cancels the request; the Cancelled phase renders.
+      }
+    },
+    [request],
+  );

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
@@ -290,15 +393,20 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
                ) : (
                  <VerificationAccept onAccept={handleAccept} />
                ))}
-              {phase === VerificationPhase.Ready &&
-                (request.initiatedByMe ? (
-                  <AutoVerificationStart onStart={handleStart} />
-                ) : (
-                  <VerificationWaitStart />
-                ))}
+              {phase === VerificationPhase.Ready && (
+                <VerificationReady
+                  request={request}
+                  onStartSas={handleStart}
+                  onScanned={handleScanned}
+                />
+              )}
              {phase === VerificationPhase.Started &&
                (request.verifier ? (
-                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
+                  request.chosenMethod === VerificationMethod.Reciprocate ? (
+                    <ReciprocateVerification verifier={request.verifier} onCancel={handleCancel} />
+                  ) : (
+                    <SasVerification verifier={request.verifier} onCancel={handleCancel} />
+                  )
                ) : (
                  <VerificationUnexpected
                    message="Unexpected Error! Verification is started but verifier is missing."
@@ -13,9 +13,9 @@ import {
  color,
  Spinner,
 } from 'folds';
-import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { useSaveFile } from '../hooks/useSaveFile';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
@@ -230,6 +230,7 @@ type RecoveryKeyDisplayProps = {
 };
 function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
  const [show, setShow] = useState(false);
+  const saveFile = useSaveFile();

  const handleCopy = () => {
    copyToClipboard(recoveryKey);
@@ -239,7 +240,7 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
    const blob = new Blob([recoveryKey], {
      type: 'text/plain;charset=us-ascii',
    });
-    FileSaver.saveAs(blob, 'recovery-key.txt');
+    saveFile(blob, 'recovery-key.txt');
  };

  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
@@ -1,12 +1,16 @@
-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';

 const PICKER_WIDTH = 312;
+const PICKER_WIDTH_CSS = `min(${PICKER_WIDTH}px, calc(100vw - 16px))`;

 type GifPickerInnerProps = {
  onSelect: (url: string, width: number, height: number) => void;
@@ -14,24 +18,147 @@ type GifPickerInnerProps = {
  lotusTerminal: boolean;
 };

+// Small monospace section header matching the picker's `// GIF_SEARCH` treatment
+// (lotusTerminal) / a muted label otherwise.
+const RECENT_LABEL_ID = 'gif-picker-recent-label';
+
+function SectionLabel({
+  text,
+  lotusTerminal,
+  id,
+}: {
+  text: string;
+  lotusTerminal: boolean;
+  id?: string;
+}) {
+  if (lotusTerminal) {
+    return (
+      <div
+        id={id}
+        style={{
+          padding: '4px 2px',
+          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
+          fontSize: '10px',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          color: 'var(--lt-accent-orange)',
+          userSelect: 'none',
+        }}
+      >
+        {`// ${text.toUpperCase()}`}
+      </div>
+    );
+  }
+  return (
+    <div
+      id={id}
+      style={{
+        padding: '2px 2px 4px',
+        fontSize: '11px',
+        fontWeight: 600,
+        color: color.Surface.OnContainer,
+        opacity: 0.6,
+        userSelect: 'none',
+      }}
+    >
+      {text}
+    </div>
+  );
+}
+
+function RecentGifs({
+  recents,
+  lotusTerminal,
+  onPick,
+}: {
+  recents: RecentGif[];
+  lotusTerminal: boolean;
+  onPick: (gif: RecentGif) => void;
+}) {
+  return (
+    <div style={{ marginBottom: 8 }}>
+      <SectionLabel text="Recent" lotusTerminal={lotusTerminal} id={RECENT_LABEL_ID} />
+      <div
+        role="group"
+        aria-labelledby={RECENT_LABEL_ID}
+        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}
+      >
+        {recents.map((g, i) => (
+          <button
+            key={g.url}
+            type="button"
+            aria-label={`Send recent GIF ${i + 1} of ${recents.length}`}
+            onClick={() => onPick(g)}
+            style={{
+              padding: 0,
+              border: 'none',
+              background: 'transparent',
+              cursor: 'pointer',
+              height: 72,
+              borderRadius: lotusTerminal ? '4px' : '8px',
+              overflow: 'hidden',
+            }}
+          >
+            {/* A still preview (falls back to the animated url for pre-existing
+                recents) so the Recent row doesn't autoplay many GIFs at once. */}
+            <img
+              src={g.previewUrl ?? g.url}
+              alt=""
+              loading="lazy"
+              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+            />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
-  const { fetchGifs, searchKey } = React.useContext(SearchContext);
+  const { fetchGifs, searchKey, term } = React.useContext(SearchContext);
+  const [recents, setRecents] = useAtom(recentGifsAtom);
+
+  const sendGif = useCallback(
+    (gif: RecentGif) => {
+      setRecents((prev) => addRecentGif(prev, gif));
+      onSelect(gif.url, gif.width, gif.height);
+      requestClose();
+    },
+    [onSelect, requestClose, setRecents],
+  );

  const handleClick = useCallback(
    (gif: IGif, e: React.SyntheticEvent) => {
      e.preventDefault();
      const r = gif.images.downsized ?? gif.images.original;
-      const { url } = r;
-      const width = Number(r.width) || 200;
-      const height = Number(r.height) || 200;
-      onSelect(url, width, height);
-      requestClose();
+      const previewUrl =
+        gif.images.fixed_width_small_still?.url ??
+        gif.images.downsized_still?.url ??
+        gif.images.original_still?.url;
+      sendGif({
+        url: r.url,
+        width: Number(r.width) || 200,
+        height: Number(r.height) || 200,
+        previewUrl,
+      });
    },
-    [onSelect, requestClose],
+    [sendGif],
+  );
+
+  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}px` }}>
+    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }} ref={containerRef}>
      {lotusTerminal && (
        <div
          style={{
@@ -56,10 +183,13 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
      <div
        style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}
      >
+        {showRecents && (
+          <RecentGifs recents={recents} lotusTerminal={lotusTerminal} onPick={sendGif} />
+        )}
        <Grid
          key={searchKey}
          fetchGifs={fetchGifs}
-          width={PICKER_WIDTH - 16}
+          width={gridWidth}
          columns={2}
          gutter={4}
          onGifClick={handleClick}
@@ -88,7 +218,7 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
        overflow: 'hidden',
        boxShadow:
          '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
-        width: `${PICKER_WIDTH}px`,
+        width: PICKER_WIDTH_CSS,
      }
    : {
        background: color.Surface.Container,
@@ -96,14 +226,14 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
        borderRadius: config.radii.R400,
        overflow: 'hidden',
        boxShadow: color.Other.Shadow,
-        width: `${PICKER_WIDTH}px`,
+        width: PICKER_WIDTH_CSS,
      };

  return (
    <FocusTrap
      focusTrapOptions={{
        initialFocus: false,
-        returnFocusOnDeactivate: false,
+        returnFocusOnDeactivate: true,
        onDeactivate: requestClose,
        clickOutsideDeactivates: true,
        allowOutsideClick: true,
@@ -19,7 +19,7 @@ import {
  config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import FileSaver from 'file-saver';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './PdfViewer.css';
 import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
@@ -36,6 +36,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
  ({ className, name, src, requestClose, ...props }, ref) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const scrollRef = useRef<HTMLDivElement>(null);
+    const saveFile = useSaveFile();
    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);

    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
@@ -76,7 +77,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
    }, [docState, pageNo, zoom]);

    const handleDownload = () => {
-      FileSaver.saveAs(src, name);
+      saveFile(src, name);
    };

    const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Button, color, config, Text } from 'folds';
+import jsQR from 'jsqr';
+
+type QrScannerProps = {
+  onScan: (bytes: Uint8ClampedArray) => void;
+  onCancel: () => void;
+};
+
+// Camera QR scanner. Decodes frames with jsQR and hands back the raw byte
+// segment (`result.binaryData`) — Matrix QR verification needs the raw bytes,
+// not a decoded string, so the string-only `BarcodeDetector` can't be used.
+export function QrScanner({ onScan, onCancel }: QrScannerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [error, setError] = useState<string>();
+  const doneRef = useRef(false);
+
+  useEffect(() => {
+    let stream: MediaStream | undefined;
+    let raf = 0;
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+    const tick = () => {
+      const video = videoRef.current;
+      if (!doneRef.current && video && ctx && video.readyState === video.HAVE_ENOUGH_DATA) {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const result = jsQR(image.data, image.width, image.height);
+        if (result && result.binaryData.length > 0) {
+          doneRef.current = true;
+          onScan(new Uint8ClampedArray(result.binaryData));
+          return;
+        }
+      }
+      raf = requestAnimationFrame(tick);
+    };
+
+    (async () => {
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'environment' },
+        });
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        }
+        raf = requestAnimationFrame(tick);
+      } catch {
+        setError(
+          'Could not access the camera. Grant camera permission, or verify with emojis instead.',
+        );
+      }
+    })();
+
+    return () => {
+      doneRef.current = true;
+      cancelAnimationFrame(raf);
+      stream?.getTracks().forEach((track) => track.stop());
+    };
+  }, [onScan]);
+
+  if (error) {
+    return (
+      <Box direction="Column" gap="400">
+        <Text style={{ color: color.Critical.Main }} size="T300">
+          {error}
+        </Text>
+        <Button variant="Secondary" fill="Soft" onClick={onCancel}>
+          <Text size="B400">Back</Text>
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box direction="Column" gap="400" alignItems="Center">
+      <Text size="T300" align="Center">
+        Point your camera at the QR code shown on your other device.
+      </Text>
+      <video
+        ref={videoRef}
+        muted
+        playsInline
+        style={{
+          width: '100%',
+          maxWidth: 280,
+          borderRadius: config.radii.R400,
+          background: '#000',
+        }}
+      >
+        <track kind="captions" />
+      </video>
+      <Button variant="Secondary" fill="Soft" onClick={onCancel}>
+        <Text size="B400">Cancel</Text>
+      </Button>
+    </Box>
+  );
+}
@@ -2,7 +2,7 @@ import React from 'react';
 import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
-import { config } from 'folds';
+import { config, Text } from 'folds';
 import {
  AudioContent,
  DownloadFile,
@@ -11,6 +11,7 @@ import {
  MAudio,
  MBadEncrypted,
  MEmote,
+  MessageEditedContent,
  MFile,
  MImage,
  MLocation,
@@ -31,7 +32,29 @@ import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
-import { IImageContent } from '../../types/matrix/common';
+import { IAudioContent, IFileContent, IImageContent } from '../../types/matrix/common';
+
+// Audio is frequently sent as m.file (bridges/other clients, or when the browser
+// reported a non-audio/* mime on upload). Detect that so we can play it inline
+// like m.audio instead of showing only a download button.
+const AUDIO_EXT_MIME: Record<string, string> = {
+  mp3: 'audio/mpeg',
+  m4a: 'audio/mp4',
+  aac: 'audio/aac',
+  oga: 'audio/ogg',
+  ogg: 'audio/ogg',
+  opus: 'audio/ogg',
+  wav: 'audio/wav',
+  flac: 'audio/flac',
+  weba: 'audio/webm',
+};
+const resolveInlineAudioMime = (content: IFileContent): string | undefined => {
+  const mime = content.info?.mimetype;
+  if (typeof mime === 'string' && mime.startsWith('audio')) return mime;
+  const name = content.filename ?? content.body ?? '';
+  const ext = name.split('.').pop()?.toLowerCase();
+  return ext ? AUDIO_EXT_MIME[ext] : undefined;
+};

 type RenderMessageContentProps = {
  displayName: string;
@@ -64,7 +87,10 @@ export function RenderMessageContent({
  eventId,
 }: RenderMessageContentProps) {
  const renderUrlsPreview = (urls: string[]) => {
-    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
+    // Cap previews per message so a link-dump doesn't spawn dozens of preview
+    // 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>
@@ -95,6 +121,15 @@ export function RenderMessageContent({
        />
      );
    }
+    // No caption, but the media was edited (e.g. a caption was removed): keep the
+    // "(edited)" affordance so Edit History stays reachable.
+    if (edited) {
+      return (
+        <Text style={{ marginTop: config.space.S200 }} size="T200">
+          <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />
+        </Text>
+      );
+    }
    return null;
  };

@@ -276,6 +311,29 @@ export function RenderMessageContent({
  }

  if (msgType === MsgType.File) {
+    // If an m.file is actually audio, play it inline (like m.audio) instead of
+    // only offering a download. MAudio falls back to renderFile if playback fails.
+    const audioMime = resolveInlineAudioMime(getContent<IFileContent>());
+    if (audioMime) {
+      const fileContent = getContent<IFileContent>();
+      const audioContent = {
+        ...fileContent,
+        info: { ...(fileContent.info ?? {}), mimetype: audioMime },
+      } as unknown as IAudioContent;
+      return (
+        <>
+          <MAudio
+            content={audioContent}
+            renderAsFile={renderFile}
+            renderAudioContent={(props) => (
+              <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
+            )}
+            outlined={outlineAttachment}
+          />
+          {renderCaption()}
+        </>
+      );
+    }
    return renderFile();
  }

@@ -6,24 +6,42 @@ import { useMatrixClient } from '../hooks/useMatrixClient';
 import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
 import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';

-export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
+// MSC3266 returns canonical_alias at runtime, but the SDK's RoomSummary type
+// Omit<>s it — add it back so callers can use it.
+export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>> & {
+  canonical_alias?: string;
+};
+
+export type RoomSummaryState = { loading: boolean; error: unknown };

 type RoomSummaryLoaderProps = {
  roomIdOrAlias: string;
-  children: (roomSummary?: IRoomSummary) => ReactNode;
+  /**
+   * Resident servers to route the summary request through. REQUIRED for a room
+   * the local homeserver isn't already in (the exact case a preview exists for) —
+   * without it the summary comes back sparse or 404s.
+   */
+  via?: string[];
+  children: (roomSummary: IRoomSummary | undefined, state: RoomSummaryState) => ReactNode;
 };

-export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
+export function RoomSummaryLoader({ roomIdOrAlias, via, children }: RoomSummaryLoaderProps) {
  const mx = useMatrixClient();

-  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
+  const fetchSummary = useCallback(
+    () => mx.getRoomSummary(roomIdOrAlias, via),
+    [mx, roomIdOrAlias, via],
+  );

-  const { data } = useQuery({
-    queryKey: [roomIdOrAlias, `summary`],
+  const { data, isLoading, error } = useQuery({
+    // `via` is part of the key so a no-via failure isn't reused once we have servers.
+    queryKey: [roomIdOrAlias, 'summary', via ?? []],
    queryFn: fetchSummary,
+    retry: 1,
+    staleTime: 5 * 60 * 1000,
  });

-  return children(data);
+  return children(data, { loading: isLoading, error });
 }

 export function LocalRoomSummaryLoader({
@@ -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>
      }
    />
@@ -2,8 +2,9 @@ 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' | 'preview';
+type RecorderState = 'idle' | 'recording' | 'paused' | 'preview';

 interface VoiceRecorderProps {
  onSend: (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => void;
@@ -41,11 +42,15 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);

  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const audioCtxRef = useRef<AudioContext | null>(null);
  const rawSamplesRef = useRef<number[]>([]);
-  const startTimeRef = useRef<number>(0);
+  // Active-recording duration excluding paused time: accumulated ms from prior
+  // segments + (now - segmentStart) for the current segment.
+  const accumulatedMsRef = useRef<number>(0);
+  const segmentStartRef = useRef<number>(0);
  const animFrameRef = useRef<number>(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

@@ -54,18 +59,67 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  const previewAudioRef = useRef<HTMLAudioElement | null>(null);
  const [previewPlaying, setPreviewPlaying] = useState(false);

-  const stopAll = useCallback(() => {
+  // Start the waveform (rAF) + duration (interval) meters against the live
+  // analyser. Reused by startRecording and resumeRecording.
+  const startMeters = useCallback(() => {
+    const analyser = analyserRef.current;
+    if (!analyser) return;
+    // Guard against ever running two loops.
    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
    if (timerRef.current) clearInterval(timerRef.current);
+    const buf = new Uint8Array(analyser.frequencyBinCount);
+    const tick = () => {
+      if (!analyserRef.current) return;
+      analyserRef.current.getByteFrequencyData(buf);
+      const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
+      rawSamplesRef.current.push(avg);
+      setWaveformBars((prev) => [...prev.slice(1), Math.round((avg / 255) * 100)]);
+      animFrameRef.current = requestAnimationFrame(tick);
+    };
+    animFrameRef.current = requestAnimationFrame(tick);
+    timerRef.current = setInterval(() => {
+      setDurationMs(accumulatedMsRef.current + (Date.now() - segmentStartRef.current));
+    }, 100);
+  }, []);
+
+  // Stop the meters (rAF + interval) without tearing down the audio graph, so a
+  // paused recording can resume.
+  const stopMeters = useCallback(() => {
+    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  // Release the microphone. The mic tracks are independent of the MediaRecorder
+  // and the AudioContext — neither mr.stop() nor audioCtx.close() releases them —
+  // so they must be stopped explicitly (else the OS mic indicator stays on).
+  const stopStream = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+  }, []);
+
+  const stopAll = useCallback(() => {
+    stopMeters();
    if (audioCtxRef.current) {
      audioCtxRef.current.close();
      audioCtxRef.current = null;
    }
    analyserRef.current = null;
-  }, []);
+  }, [stopMeters]);

  useEffect(
    () => () => {
+      // Unmounting mid-recording/pause must release the mic — stopAll() only
+      // closes the AudioContext and cancels the meters, not the mic tracks.
+      const mr = mediaRecorderRef.current;
+      if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
+        mr.ondataavailable = null;
+        mr.onstop = null;
+        mr.stop();
+      }
+      stopStream();
      stopAll();
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    },
@@ -83,9 +137,11 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {

      const mr = new MediaRecorder(stream, { mimeType });
      mediaRecorderRef.current = mr;
+      streamRef.current = stream;
      chunksRef.current = [];
      rawSamplesRef.current = [];
-      startTimeRef.current = Date.now();
+      accumulatedMsRef.current = 0;
+      segmentStartRef.current = Date.now();

      const audioCtx = new AudioContext();
      audioCtxRef.current = audioCtx;
@@ -95,24 +151,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
      source.connect(analyser);
      analyserRef.current = analyser;

-      const buf = new Uint8Array(analyser.frequencyBinCount);
-      const tick = () => {
-        if (!analyserRef.current) return;
-        analyserRef.current.getByteFrequencyData(buf);
-        const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
-        rawSamplesRef.current.push(avg);
-
-        setWaveformBars((prev) => {
-          const next = [...prev.slice(1), Math.round((avg / 255) * 100)];
-          return next;
-        });
-        animFrameRef.current = requestAnimationFrame(tick);
-      };
-      animFrameRef.current = requestAnimationFrame(tick);
-
-      timerRef.current = setInterval(() => {
-        setDurationMs(Date.now() - startTimeRef.current);
-      }, 100);
+      startMeters();

      mr.ondataavailable = (e) => {
        if (e.data.size > 0) chunksRef.current.push(e.data);
@@ -120,8 +159,8 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {

      mr.onstop = () => {
        stream.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
        const blob = new Blob(chunksRef.current, { type: mimeType });
-        previewDurationRef.current = Date.now() - startTimeRef.current;
        setPreviewBlob(blob);
        setPreviewUrl((prev) => {
          if (prev) URL.revokeObjectURL(prev);
@@ -135,33 +174,59 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
    } catch {
      onError?.('Microphone access denied');
    }
-  }, [onError]);
+  }, [onError, startMeters]);
+
+  const pauseRecording = useCallback(() => {
+    const mr = mediaRecorderRef.current;
+    if (mr?.state !== 'recording') return;
+    accumulatedMsRef.current += Date.now() - segmentStartRef.current;
+    setDurationMs(accumulatedMsRef.current);
+    stopMeters();
+    mr.pause();
+    setState('paused');
+  }, [stopMeters]);
+
+  const resumeRecording = useCallback(() => {
+    const mr = mediaRecorderRef.current;
+    if (mr?.state !== 'paused') return;
+    segmentStartRef.current = Date.now();
+    mr.resume();
+    startMeters();
+    setState('recording');
+  }, [startMeters]);

  const stopRecording = useCallback(() => {
+    const mr = mediaRecorderRef.current;
+    const activeMs = mr?.state === 'recording' ? Date.now() - segmentStartRef.current : 0;
+    previewDurationRef.current = accumulatedMsRef.current + activeMs;
    stopAll();
-    if (mediaRecorderRef.current?.state === 'recording') {
-      mediaRecorderRef.current.stop();
+    if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
+      mr.stop();
    }
  }, [stopAll]);

  const cancelRecording = useCallback(() => {
    stopAll();
    const mr = mediaRecorderRef.current;
-    if (mr?.state === 'recording') {
+    if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
      mr.ondataavailable = null;
+      // onstop (which would release the mic) is cleared, so release it here.
      mr.onstop = null;
      mr.stop();
    }
+    stopStream();
    setPreviewBlob(null);
    setPreviewUrl((prev) => {
      if (prev) URL.revokeObjectURL(prev);
      return null;
    });
    rawSamplesRef.current = [];
+    accumulatedMsRef.current = 0;
+    segmentStartRef.current = 0;
    setWaveformBars(Array(WAVEFORM_BARS).fill(0));
    setDurationMs(0);
    setState('idle');
-  }, [stopAll]);
+  }, [stopAll, stopStream]);

  const sendVoice = useCallback(() => {
    if (!previewBlob) return;
@@ -175,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"
@@ -187,16 +253,19 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
    );
  }

-  if (state === 'recording') {
+  if (state === 'recording' || state === 'paused') {
+    const paused = state === 'paused';
    return (
      <Box
-        data-voice-recorder="recording"
+        data-voice-recorder={paused ? 'paused' : 'recording'}
        alignItems="Center"
        gap="200"
        style={{
          background: color.SurfaceVariant.Container,
          borderRadius: config.radii.R300,
          padding: `${toRem(4)} ${toRem(8)}`,
+          maxWidth: '100%',
+          minWidth: 0,
        }}
      >
        <Box
@@ -207,11 +276,15 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
            borderRadius: '50%',
            background: lotusTerminal ? 'var(--lt-accent-orange)' : color.Critical.Main,
            flexShrink: 0,
-            animation: 'pttLivePulse 900ms ease-in-out infinite',
+            // Pulse only while actively recording; hold steady (dimmed) when paused.
+            animation: paused ? 'none' : 'pttLivePulse 900ms ease-in-out infinite',
+            opacity: paused ? 0.5 : 1,
          }}
        />
        <Text
          size="T200"
+          role="timer"
+          aria-label={`${paused ? 'Paused' : 'Recording'}, duration ${formatDuration(durationMs)}`}
          style={{
            minWidth: toRem(32),
            fontVariantNumeric: 'tabular-nums',
@@ -230,7 +303,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
          data-voice-waveform
          alignItems="Center"
          gap="100"
-          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 0 }}
+          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 1, minWidth: 0 }}
        >
          {waveformBars.map((h, i) => (
            <div
@@ -245,16 +318,29 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
            />
          ))}
        </Box>
+        <IconButton
+          onClick={paused ? resumeRecording : pauseRecording}
+          aria-label={paused ? 'Resume recording' : 'Pause recording'}
+          variant="SurfaceVariant"
+          fill="Soft"
+          size="300"
+          radii="300"
+          title={paused ? 'Resume' : 'Pause'}
+          style={{ flexShrink: 0 }}
+        >
+          <Icon src={paused ? Icons.Play : Icons.Pause} size="100" />
+        </IconButton>
        <IconButton
          onClick={stopRecording}
-          aria-label="Stop recording"
+          aria-label="Finish recording"
          variant="Primary"
          fill="Soft"
          size="300"
          radii="300"
-          title="Stop recording"
+          title="Finish"
+          style={{ flexShrink: 0 }}
        >
-          <Icon src={Icons.Pause} size="100" />
+          <Icon src={Icons.Check} size="100" />
        </IconButton>
        <IconButton
          onClick={cancelRecording}
@@ -263,6 +349,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
          size="300"
          radii="300"
          title="Cancel"
+          style={{ flexShrink: 0 }}
        >
          <Icon src={Icons.Cross} size="100" />
        </IconButton>
@@ -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}</>;
  }

@@ -8,6 +8,7 @@ import {
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
+import { sendStateEvent } from '../../utils/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { getMxIdServer } from '../../utils/matrix';
 import { CreateRoomAccess } from './types';
@@ -150,9 +151,10 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
  const result = await mx.createRoom(options);

  if (data.parent) {
-    await mx.sendStateEvent(
+    await sendStateEvent(
+      mx,
      data.parent.roomId,
-      StateEvent.SpaceChild as any,
+      StateEvent.SpaceChild,
      {
        auto_join: false,
        suggested: false,
@@ -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([
@@ -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}
@@ -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,
@@ -16,7 +16,7 @@ import { onTabPress } from '../../../utils/keyboard';
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
-import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
+import { getMemberName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Membership } from '../../../../types/matrix/room';
@@ -140,8 +140,7 @@ export function UserMentionAutocomplete({
    });
  });

-  const getName = (member: RoomMember) =>
-    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+  const getName = (member: RoomMember) => getMemberName(room, member.userId);

  return (
    <AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
@@ -0,0 +1,67 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { Descendant } from 'slate';
+import { toMatrixCustomHTML } from './output';
+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 OPTS = {
+  allowTextFormatting: true,
+  allowInlineMarkdown: false,
+  allowBlockMarkdown: false,
+  allowMath: true,
+};
+
+test('inline $…$ → data-mx-maths span, surrounding prose preserved', () => {
+  assert.equal(
+    toMatrixCustomHTML(txt('a $x^2$ b'), OPTS),
+    'a <span data-mx-maths="x^2"><code>x^2</code></span> b',
+  );
+});
+
+test('single-line block $$…$$ → data-mx-maths div', () => {
+  assert.equal(
+    toMatrixCustomHTML(txt('$$E=mc^2$$'), OPTS),
+    '<div data-mx-maths="E=mc^2"><code>E=mc^2</code></div>',
+  );
+});
+
+test('LaTeX special chars are escaped in attribute + fallback', () => {
+  assert.equal(
+    toMatrixCustomHTML(txt('$a<b$'), OPTS),
+    '<span data-mx-maths="a&lt;b"><code>a&lt;b</code></span>',
+  );
+});
+
+test('math bypasses markdown — underscores are not italicised', () => {
+  // Without pre-markdown extraction, `_` would become <em>.
+  assert.equal(
+    toMatrixCustomHTML(txt('$a_b$'), { ...OPTS, allowInlineMarkdown: true }),
+    '<span data-mx-maths="a_b"><code>a_b</code></span>',
+  );
+});
+
+test('currency ($5 and $10) stays literal', () => {
+  assert.equal(toMatrixCustomHTML(txt('$5 and $10'), OPTS), '$5 and $10');
+});
+
+test('no math conversion inside an inline code mark', () => {
+  const out = toMatrixCustomHTML(txt('$x$', { code: true }), OPTS);
+  assert.ok(!out.includes('data-mx-maths'));
+  assert.ok(out.includes('<code>$x$</code>'));
+});
+
+test('no math conversion inside a code block', () => {
+  const block = el(BlockType.CodeBlock, [el(BlockType.CodeLine, [txt('$x$')])]);
+  const out = toMatrixCustomHTML(block, OPTS);
+  assert.ok(!out.includes('data-mx-maths'));
+  assert.ok(out.includes('$x$'));
+});
+
+test('a message with no math is unchanged', () => {
+  assert.equal(toMatrixCustomHTML(txt('just hello'), OPTS), 'just hello');
+});
@@ -12,14 +12,42 @@ import {
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
 import { isUserId } from '../../utils/matrix';
+import { splitMathSegments } from '../../utils/mathParse';

 export type OutputOptions = {
  allowTextFormatting?: boolean;
  allowInlineMarkdown?: boolean;
  allowBlockMarkdown?: boolean;
+  allowMath?: boolean;
+};
+
+// Spec `data-mx-maths` markup (CS-API §11.5): the attribute holds the LaTeX; the
+// <code> child is the fallback for clients that don't render math. sanitizeText
+// escapes & < > " ' — correct for both the attribute value and the <code> text.
+const mathToCustomHtml = (latex: string, block: boolean): string => {
+  const esc = sanitizeText(latex);
+  const tag = block ? 'div' : 'span';
+  return `<${tag} data-mx-maths="${esc}"><code>${esc}</code></${tag}>`;
 };

 const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
+  // Convert `$…$`/`$$…$$` to `data-mx-maths` so math renders on other clients.
+  // Extracted BEFORE markdown so LaTeX (`_`, `*`, `\`, `{}`) isn't mangled; never
+  // applied inside inline code. Non-math text recurses with allowMath off so it
+  // still gets the normal marks + inline-markdown treatment.
+  if (opts.allowMath && !node.code) {
+    const segments = splitMathSegments(node.text);
+    if (segments.some((seg) => seg.type !== 'text')) {
+      return segments
+        .map((seg) =>
+          seg.type === 'text'
+            ? textToCustomHtml({ ...node, text: seg.value }, { ...opts, allowMath: false })
+            : mathToCustomHtml(seg.value, seg.type === 'block'),
+        )
+        .join('');
+    }
+  }
+
  let string = sanitizeText(node.text);
  if (opts.allowTextFormatting) {
    if (node.bold) string = `<strong>${string}</strong>`;
@@ -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);
 };

@@ -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();
  };
@@ -15,12 +15,10 @@ import {
 } from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UserAvatar } from '../user-avatar';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useMemberAvatar } from '../../hooks/useMemberAvatar';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
@@ -38,6 +36,64 @@ function formatReadTs(ts: number, hour24Clock: boolean): string {
    : `${timeMon(ts)} ${timeDay(ts)} ${timeYear(ts)} at ${timeStr}`;
 }

+type EventReaderItemProps = {
+  room: Room;
+  readerId: string;
+  hour24Clock: boolean;
+  lotusTerminal: boolean;
+  onSelect: React.MouseEventHandler<HTMLButtonElement>;
+};
+function EventReaderItem({
+  room,
+  readerId,
+  hour24Clock,
+  lotusTerminal,
+  onSelect,
+}: EventReaderItemProps) {
+  const { name, avatarUrl } = useMemberAvatar(room, readerId, 100, 100);
+  const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;
+
+  return (
+    <MenuItem
+      style={{ padding: `0 ${config.space.S200}` }}
+      radii="400"
+      onClick={onSelect}
+      before={
+        <Avatar size="200">
+          <UserAvatar
+            userId={readerId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+      }
+    >
+      <Box direction="Column" grow="Yes">
+        <Text size="T400" truncate>
+          {name}
+        </Text>
+        {receiptTs !== undefined && (
+          <Text
+            size="T200"
+            priority="300"
+            style={
+              lotusTerminal
+                ? {
+                    color: 'var(--lt-accent-amber)',
+                    textShadow: 'var(--lt-glow-amber)',
+                  }
+                : undefined
+            }
+          >
+            {formatReadTs(receiptTs, hour24Clock)}
+          </Text>
+        )}
+      </Box>
+    </MenuItem>
+  );
+}
+
 export type EventReadersProps = {
  room: Room;
  eventId: string;
@@ -46,7 +102,6 @@ export type EventReadersProps = {
 export const EventReaders = as<'div', EventReadersProps>(
  ({ className, room, eventId, requestClose, ...props }, ref) => {
    const mx = useMatrixClient();
-    const useAuthentication = useMediaAuthentication();
    const myUserId = mx.getUserId();
    const latestEventReaders = useRoomEventReaders(room, eventId).filter((id) => id !== myUserId);
    const openProfile = useOpenUserRoomProfile();
@@ -54,9 +109,6 @@ export const EventReaders = as<'div', EventReadersProps>(
    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
    const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

-    const getName = (userId: string) =>
-      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-
    return (
      <Box
        className={classNames(css.EventReaders, className)}
@@ -100,64 +152,24 @@ export const EventReaders = as<'div', EventReadersProps>(
        <Box grow="Yes">
          <Scroll visibility="Hover" hideTrack size="300">
            <Box className={css.Content} direction="Column">
-              {latestEventReaders.map((readerId) => {
-                const name = getName(readerId);
-                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
-                const avatarUrl = avatarMxcUrl
-                  ? (mxcUrlToHttp(mx, avatarMxcUrl, useAuthentication, 100, 100, 'crop') ??
-                    undefined)
-                  : undefined;
-                const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;
-
-                return (
-                  <MenuItem
-                    key={readerId}
-                    style={{ padding: `0 ${config.space.S200}` }}
-                    radii="400"
-                    onClick={(event) => {
-                      openProfile(
-                        room.roomId,
-                        space?.roomId,
-                        readerId,
-                        getMouseEventCords(event.nativeEvent),
-                        'Bottom',
-                      );
-                    }}
-                    before={
-                      <Avatar size="200">
-                        <UserAvatar
-                          userId={readerId}
-                          src={avatarUrl}
-                          alt={name}
-                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                        />
-                      </Avatar>
-                    }
-                  >
-                    <Box direction="Column" grow="Yes">
-                      <Text size="T400" truncate>
-                        {name}
-                      </Text>
-                      {receiptTs !== undefined && (
-                        <Text
-                          size="T200"
-                          priority="300"
-                          style={
-                            lotusTerminal
-                              ? {
-                                  color: 'var(--lt-accent-amber)',
-                                  textShadow: 'var(--lt-glow-amber)',
-                                }
-                              : undefined
-                          }
-                        >
-                          {formatReadTs(receiptTs, hour24Clock)}
-                        </Text>
-                      )}
-                    </Box>
-                  </MenuItem>
-                );
-              })}
+              {latestEventReaders.map((readerId) => (
+                <EventReaderItem
+                  key={readerId}
+                  room={room}
+                  readerId={readerId}
+                  hour24Clock={hour24Clock}
+                  lotusTerminal={lotusTerminal}
+                  onSelect={(event) => {
+                    openProfile(
+                      room.roomId,
+                      space?.roomId,
+                      readerId,
+                      getMouseEventCords(event.nativeEvent),
+                      'Bottom',
+                    );
+                  }}
+                />
+              ))}
            </Box>
          </Scroll>
        </Box>
@@ -5,6 +5,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
 import { StateEvent } from '../../../types/matrix/room';
+import { sendStateEvent } from '../../utils/room';
 import { useRoomImagePack } from '../../hooks/useImagePacks';
 import { randomStr } from '../../utils/common';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
@@ -45,10 +46,11 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
      const { address } = imagePack;
      if (!address) return;

-      await mx.sendStateEvent(
+      await sendStateEvent(
+        mx,
        address.roomId,
-        StateEvent.PoniesRoomEmotes as unknown as keyof import('matrix-js-sdk').StateEvents,
-        packContent as any,
+        StateEvent.PoniesRoomEmotes,
+        packContent,
        address.stateKey,
      );
    },
@@ -1,12 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import FileSaver from 'file-saver';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
 import { downloadMedia } from '../../utils/matrix';
+import { MobileTouchTarget } from '../../styles/mobile.css';

 export type ImageViewerProps = {
  alt: string;
@@ -17,12 +18,13 @@ export type ImageViewerProps = {
 export const ImageViewer = as<'div', ImageViewerProps>(
  ({ className, alt, src, requestClose, ...props }, ref) => {
    const { t } = useTranslation();
+    const saveFile = useSaveFile();
    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
-    const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
+    const { pan, cursor, onMouseDown, onTouchStart } = usePan(zoom !== 1);

    const handleDownload = async () => {
      const fileContent = await downloadMedia(src);
-      FileSaver.saveAs(fileContent, alt);
+      saveFile(fileContent, alt);
    };

    return (
@@ -34,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>
@@ -47,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
@@ -60,6 +74,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
              outlined={zoom > 1}
              size="300"
              radii="Pill"
+              className={MobileTouchTarget}
              onClick={zoomIn}
              aria-label="Zoom In"
            >
@@ -69,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>
@@ -80,16 +96,26 @@ export const ImageViewer = as<'div', ImageViewerProps>(
          className={css.ImageViewerContent}
          justifyContent="Center"
          alignItems="Center"
+          onWheel={(evt) => {
+            if (evt.deltaY < 0) zoomIn();
+            else if (evt.deltaY > 0) zoomOut();
+          }}
        >
          <img
            className={css.ImageViewerImg}
            style={{
              cursor,
-              transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
+              // translate runs inside scale(), so divide by zoom to make a dragged
+              // pixel move the image one screen pixel (1:1 with the cursor) rather
+              // than `zoom` pixels.
+              transform: `scale(${zoom}) translate(${pan.translateX / zoom}px, ${
+                pan.translateY / zoom
+              }px)`,
            }}
            src={src}
            alt={alt}
            onMouseDown={onMouseDown}
+            onTouchStart={onTouchStart}
          />
        </Box>
      </Box>
@@ -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 }}
    />
  );
@@ -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>
@@ -1,13 +1,12 @@
 import React, { ReactNode } from 'react';
 import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { getMemberDisplayName } from '../../utils/room';
+import { getMemberName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { UserAvatar } from '../user-avatar';
 import * as css from './style.css';

-const getName = (room: Room, member: RoomMember) =>
-  getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+const getName = (room: Room, member: RoomMember) => getMemberName(room, member.userId);

 type MemberTileProps = {
  mx: MatrixClient;
@@ -1,8 +1,8 @@
 import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import FileSaver from 'file-saver';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@@ -24,6 +24,7 @@ type FileDownloadButtonProps = {
 export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
+  const saveFile = useSaveFile();

  const [downloadState, download] = useAsyncCallback(
    useCallback(async () => {
@@ -34,18 +35,19 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
        : await downloadMedia(mediaUrl);

      const fileURL = URL.createObjectURL(fileContent);
-      FileSaver.saveAs(fileURL, filename);
+      saveFile(fileURL, filename);
      return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename]),
+    }, [mx, url, useAuthentication, mimeType, encInfo, filename, saveFile]),
  );

  const downloading = downloadState.status === AsyncStatus.Loading;
  const hasError = downloadState.status === AsyncStatus.Error;
+  const succeeded = downloadState.status === AsyncStatus.Success;
  return (
    <IconButton
      disabled={downloading}
      onClick={download}
-      variant={hasError ? 'Critical' : 'SurfaceVariant'}
+      variant={hasError ? 'Critical' : succeeded ? 'Success' : 'SurfaceVariant'}
      size="300"
      radii="300"
      aria-label={
@@ -53,13 +55,15 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
          ? 'Downloading...'
          : hasError
            ? 'Download failed, click to retry'
-            : 'Download file'
+            : succeeded
+              ? 'Downloaded — click to download again'
+              : 'Download file'
      }
    >
      {downloading ? (
        <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
      ) : (
-        <Icon size="100" src={Icons.Download} />
+        <Icon size="100" src={succeeded ? Icons.Check : Icons.Download} />
      )}
    </IconButton>
  );
@@ -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,
@@ -411,6 +530,7 @@ type RenderAudioContentProps = {
  mimeType: string;
  url: string;
  encInfo?: IEncryptedFile;
+  waveform?: number[];
 };
 type MAudioProps = {
  content: IAudioContent;
@@ -431,6 +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;
  return (
    <Attachment outlined={outlined}>
      <AttachmentHeader>
@@ -454,6 +577,7 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
            mimeType: safeMimeType,
            url: mxcUrl,
            encInfo: content.file,
+            waveform,
          })}
        </AttachmentContent>
      </AttachmentBox>
@@ -509,7 +633,19 @@ type MLocationProps = {
 };
 export function MLocation({ content }: MLocationProps) {
  const { t } = useTranslation();
-  const geoUri = content.geo_uri;
+  // Prefer the legacy top-level geo_uri, but fall back to the MSC3488 extensible
+  // location block so events from clients that only send the new shape (uri under
+  // org.matrix.msc3488.location / m.location) still render instead of appearing
+  // broken.
+  const msc3488 = (content['org.matrix.msc3488.location'] ?? content['m.location']) as
+    | { uri?: string; description?: string }
+    | undefined;
+  const geoUri =
+    typeof content.geo_uri === 'string'
+      ? content.geo_uri
+      : typeof msc3488?.uri === 'string'
+        ? msc3488.uri
+        : undefined;
  if (typeof geoUri !== 'string') return <BrokenContent />;
  const location = parseGeoUri(geoUri);
  if (!location) return <BrokenContent />;
@@ -517,6 +653,7 @@ export function MLocation({ content }: MLocationProps) {
  const lat = parseFloat(location.latitude);
  const lon = parseFloat(location.longitude);
  if (!isFinite(lat) || !isFinite(lon)) return <BrokenContent />;
+  const description = typeof msc3488?.description === 'string' ? msc3488.description : undefined;
  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${
    lat - 0.004
  },${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
@@ -537,13 +674,18 @@ export function MLocation({ content }: MLocationProps) {
        loading="lazy"
        sandbox="allow-scripts"
      />
+      {description && (
+        <Text size="T300" style={{ wordBreak: 'break-word', maxWidth: '280px' }}>
+          {description}
+        </Text>
+      )}
      <Text size="T300" priority="300">
        {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
      </Text>
      <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"
@@ -1,8 +1,21 @@
-import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Badge,
+  Chip,
+  color,
+  Icon,
+  IconButton,
+  Icons,
+  ProgressBar,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { IAudioInfo } from '../../../../types/matrix/common';
 import {
@@ -28,6 +41,127 @@ const PLAY_TIME_THROTTLE_OPS = {
  immediate: true,
 };

+const WAVEFORM_DISPLAY_BARS = 48;
+
+/** Reduce a stored MSC1767 waveform (up to ~100 samples) to a fixed display count. */
+export function downsampleWaveform(waveform: number[], count: number): number[] {
+  if (waveform.length <= count) return waveform;
+  const out: number[] = [];
+  const step = waveform.length / count;
+  for (let i = 0; i < count; i += 1) {
+    out.push(waveform[Math.floor(i * step)] ?? 0);
+  }
+  return out;
+}
+
+// Voice-message waveform that doubles as a seek control: bars fill with the accent
+// as the clip plays; click/drag/keyboard scrubs. Mirrors the recorder's bar styling
+// (VoiceMessageRecorder). Falls back to the plain seek Range when there's no waveform.
+function WaveformSeek({
+  waveform,
+  currentTime,
+  duration,
+  onSeek,
+  getCurrentTime,
+}: {
+  waveform: number[];
+  currentTime: number;
+  duration: number;
+  onSeek: (time: number) => void;
+  /** Reads the live media time (the `currentTime` prop is throttled ~500ms). */
+  getCurrentTime: () => number;
+}) {
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const bars = useMemo(() => downsampleWaveform(waveform, WAVEFORM_DISPLAY_BARS), [waveform]);
+  const barMax = useMemo(() => Math.max(...bars, 1), [bars]);
+  const progress = duration > 0 ? Math.min(1, Math.max(0, currentTime / duration)) : 0;
+  const accent = lotusTerminal ? 'var(--lt-accent-green)' : color.Primary.Main;
+  const unplayedColor = `color-mix(in srgb, ${accent} 32%, transparent)`;
+
+  const seekFromClientX = useCallback(
+    (clientX: number) => {
+      const el = containerRef.current;
+      if (!el || duration <= 0) return;
+      const rect = el.getBoundingClientRect();
+      const ratio = rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+      onSeek(Math.min(duration, Math.max(0, ratio * duration)));
+    },
+    [duration, onSeek],
+  );
+
+  const handlePointerDown = (evt: React.PointerEvent<HTMLDivElement>) => {
+    evt.currentTarget.setPointerCapture(evt.pointerId);
+    seekFromClientX(evt.clientX);
+  };
+  const handlePointerMove = (evt: React.PointerEvent<HTMLDivElement>) => {
+    if (evt.currentTarget.hasPointerCapture(evt.pointerId)) seekFromClientX(evt.clientX);
+  };
+  const handleKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {
+    if (duration <= 0) return;
+    // Base off the LIVE time so rapid presses accumulate (the prop is throttled).
+    const base = getCurrentTime();
+    if (evt.key === 'ArrowRight' || evt.key === 'ArrowUp') {
+      evt.preventDefault();
+      onSeek(Math.min(duration, base + 5));
+    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowDown') {
+      evt.preventDefault();
+      onSeek(Math.max(0, base - 5));
+    } else if (evt.key === 'Home') {
+      evt.preventDefault();
+      onSeek(0);
+    } else if (evt.key === 'End') {
+      evt.preventDefault();
+      onSeek(duration);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      role="slider"
+      tabIndex={0}
+      aria-label="Seek"
+      aria-valuemin={0}
+      aria-valuemax={Math.round(duration)}
+      aria-valuenow={Math.round(currentTime)}
+      aria-valuetext={`${secondsToMinutesAndSeconds(currentTime)} of ${secondsToMinutesAndSeconds(
+        duration,
+      )}`}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onKeyDown={handleKeyDown}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: toRem(2),
+        width: '100%',
+        height: toRem(24),
+        cursor: 'pointer',
+        touchAction: 'none',
+        overflow: 'hidden',
+      }}
+    >
+      {bars.map((v, i) => {
+        const played = bars.length > 0 && (i + 1) / bars.length <= progress;
+        return (
+          <div
+            key={i}
+            style={{
+              flex: 1,
+              minWidth: toRem(2),
+              height: toRem(2 + (v / barMax) * 16),
+              borderRadius: toRem(1),
+              background: played ? accent : unplayedColor,
+              transition: 'background 0.1s',
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
 type RenderMediaControlProps = {
  after: ReactNode;
  leftControl: ReactNode;
@@ -39,6 +173,8 @@ export type AudioContentProps = {
  url: string;
  info: IAudioInfo;
  encInfo?: EncryptedAttachmentInfo;
+  /** MSC1767 voice waveform (0–1024 ints); when present, the seek bar renders it. */
+  waveform?: number[];
  renderMediaControl: (props: RenderMediaControlProps) => ReactNode;
 };
 export function AudioContent({
@@ -46,6 +182,7 @@ export function AudioContent({
  url,
  info,
  encInfo,
+  waveform,
  renderMediaControl,
 }: AudioContentProps) {
  const mx = useMatrixClient();
@@ -63,6 +200,8 @@ export function AudioContent({
  );

  const audioRef = useRef<HTMLAudioElement | null>(null);
+  // A seek requested before the media has loaded; applied once metadata arrives.
+  const pendingSeekRef = useRef<number | null>(null);

  useEffect(
    () => () => {
@@ -103,6 +242,11 @@ export function AudioContent({
    if (!audio) return undefined;
    const applyRate = () => {
      audio.playbackRate = playbackSpeed;
+      // Apply a seek that was requested before the source loaded.
+      if (pendingSeekRef.current != null && audio.readyState >= 1) {
+        audio.currentTime = pendingSeekRef.current;
+        pendingSeekRef.current = null;
+      }
    };
    // Apply immediately, and re-apply whenever the media element (re)loads a new
    // source — e.g. after async decrypt swaps in the blob URL — since the browser
@@ -132,14 +276,38 @@ export function AudioContent({
    }
  };

+  // Seeking before the media has loaded (e.g. clicking the waveform first) loads it
+  // and applies the position once metadata arrives (the <audio> autoPlays).
+  const handleSeek = useCallback(
+    (time: number) => {
+      if (srcState.status === AsyncStatus.Success) {
+        seek(time);
+      } else if (srcState.status !== AsyncStatus.Loading) {
+        pendingSeekRef.current = time;
+        loadSrc();
+      }
+    },
+    [srcState.status, seek, loadSrc],
+  );
+
+  const hasWaveform = !!waveform && waveform.length > 0 && duration > 0;
+
  return renderMediaControl({
-    after: (
+    after: hasWaveform ? (
+      <WaveformSeek
+        waveform={waveform ?? []}
+        currentTime={currentTime}
+        duration={duration}
+        onSeek={handleSeek}
+        getCurrentTime={() => audioRef.current?.currentTime ?? currentTime}
+      />
+    ) : (
      <Range
        step={1}
        min={0}
        max={duration || 1}
        values={[currentTime]}
-        onChange={(values) => seek(values[0])}
+        onChange={(values) => handleSeek(values[0])}
        renderTrack={(params) => (
          <div {...params.props}>
            {params.children}
@@ -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>
+));
@@ -14,10 +14,10 @@ import {
  TooltipProvider,
  as,
 } from 'folds';
-import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FocusTrap from 'focus-trap-react';
 import { IFileInfo } from '../../../../types/matrix/common';
+import { useSaveFile } from '../../../hooks/useSaveFile';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { bytesToSize } from '../../../utils/common';
@@ -252,6 +252,7 @@ export type DownloadFileProps = {
 export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
+  const saveFile = useSaveFile();

  const [downloadState, download] = useAsyncCallback(
    useCallback(async () => {
@@ -262,9 +263,9 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
        : await downloadMedia(mediaUrl);

      const fileURL = URL.createObjectURL(fileContent);
-      FileSaver.saveAs(fileURL, body);
+      saveFile(fileURL, body);
      return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, body]),
+    }, [mx, url, useAuthentication, mimeType, encInfo, body, saveFile]),
  );

  return downloadState.status === AsyncStatus.Error ? (
@@ -277,7 +278,7 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
      size="400"
      onClick={() =>
        downloadState.status === AsyncStatus.Success
-          ? FileSaver.saveAs(downloadState.data, body)
+          ? saveFile(downloadState.data, body)
          : download()
      }
      disabled={downloadState.status === AsyncStatus.Loading}
@@ -1,179 +1,193 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useEffect, useState } from 'react';
-import { Box, color, config, Icon, Icons, Text, toRem } from 'folds';
+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';
-import { RoomEvent } from 'matrix-js-sdk';
+import { MatrixEvent, Room, RoomEvent, PollEvent } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { getMemberName } from '../../../utils/room';
+import {
+  ParsedPoll,
+  PollResponse,
+  PollTally,
+  parsePollStart,
+  parseResponseAnswerIds,
+  resultsVisible,
+  tallyResponses,
+  validateSelections,
+  winningAnswerIds,
+} from '../../../utils/poll';

-type PollTextValue = Array<{ body: string }> | string;
+const EMPTY_TALLY: PollTally = {
+  counts: new Map(),
+  voters: new Map(),
+  myVotes: new Set(),
+  total: 0,
+};

-function extractText(val: PollTextValue | undefined): string {
-  if (!val) return '';
-  if (typeof val === 'string') return val;
-  return val[0]?.body ?? '';
+type PollState = { tally: PollTally; isEnded: boolean };
+
+function setsEqual(a: Set<string>, b: Set<string>): boolean {
+  if (a.size !== b.size) return false;
+  for (const x of a) if (!b.has(x)) return false;
+  return true;
 }

-type PollAnswer = {
-  'm.id'?: string;
-  id?: string;
-  'm.text'?: PollTextValue;
-  'org.matrix.msc3381.poll.answer'?: { body: string };
-};
-
-type PollData = {
-  question?: { body?: string; 'm.text'?: PollTextValue };
-  answers?: PollAnswer[];
-  max_selections?: number;
-};
-
-type VoteState = {
-  counts: Map<string, number>;
-  myVotes: Set<string>;
-  total: number;
-};
-
-function computeVotes(
+function computePollState(
  mx: ReturnType<typeof useMatrixClient>,
-  roomId: string,
+  room: Room,
  eventId: string,
-  _isStable: boolean,
-): VoteState {
-  const empty: VoteState = { counts: new Map(), myVotes: new Set(), total: 0 };
-  const room = mx.getRoom(roomId);
-  if (!room) return empty;
-
-  const timelineSet = room.getUnfilteredTimelineSet();
-  const stableRels = timelineSet.relations.getChildEventsForEvent(
-    eventId,
-    'm.reference',
-    'm.poll.response',
-  );
-  const unstableRels = timelineSet.relations.getChildEventsForEvent(
-    eventId,
-    'org.matrix.msc3381.poll.response' as any,
-    'org.matrix.msc3381.poll.response',
-  );
-
-  // Per-sender keep only the latest response (which may include multiple selections)
-  const latestBySender = new Map<string, { ts: number; answerIds: string[] }>();
+  parsed: ParsedPoll,
+): PollState {
+  const relations = room.getUnfilteredTimelineSet().relations;
  const myUserId = mx.getSafeUserId();
+  const validIds = new Set(parsed.answers.map((a) => a.id));

-  const processRelations = (rels: typeof stableRels, stable: boolean) => {
-    const events = rels?.getRelations() ?? [];
-    for (const ev of events) {
+  const getRels = (type: string): MatrixEvent[] =>
+    relations.getChildEventsForEvent(eventId, 'm.reference', type as any)?.getRelations() ?? [];
+
+  const endEvents = [...getRels('m.poll.end'), ...getRels('org.matrix.msc3381.poll.end')];
+  const respEvents = [
+    ...getRels('m.poll.response'),
+    ...getRels('org.matrix.msc3381.poll.response'),
+  ];
+
+  // End state: prefer the SDK Poll model (validates ender = creator or redact PL,
+  // refilters responses). Fall back to an end from the poll's own creator, which is
+  // always valid, in case the model hasn't processed it yet.
+  const poll = room.polls.get(eventId);
+  let isEnded = poll?.isEnded ?? false;
+  let endTs = poll?.endEventId ? room.findEventById(poll.endEventId)?.getTs() : undefined;
+  if (!isEnded) {
+    const creator = room.findEventById(eventId)?.getSender();
+    for (const ev of endEvents) {
      if (ev.isRedacted()) continue;
-      const sender = ev.getSender();
-      if (!sender) continue;
-      const content = ev.getContent();
-      let answerIds: string[] = [];
-      if (stable) {
-        answerIds = (content['m.selections'] as string[] | undefined) ?? [];
-      } else {
-        answerIds =
-          ((content['org.matrix.msc3381.poll.response'] as any)?.answers as string[] | undefined) ??
-          [];
+      if (creator && ev.getSender() === creator) {
+        isEnded = true;
+        const t = ev.getTs();
+        if (endTs === undefined || t < endTs) endTs = t;
      }
-      if (answerIds.length === 0) continue;
-      const ts = ev.getTs();
-      const existing = latestBySender.get(sender);
-      if (!existing || ts > existing.ts) {
-        latestBySender.set(sender, { ts, answerIds });
-      }
-    }
-  };
-
-  processRelations(stableRels, true);
-  processRelations(unstableRels, false);
-
-  const counts = new Map<string, number>();
-  const myVotes = new Set<string>();
-  for (const [sender, { answerIds }] of latestBySender) {
-    for (const id of answerIds) {
-      counts.set(id, (counts.get(id) ?? 0) + 1);
-      if (sender === myUserId) myVotes.add(id);
    }
  }

-  return { counts, myVotes, total: latestBySender.size };
+  const responses: PollResponse[] = [];
+  for (const ev of respEvents) {
+    if (ev.isRedacted()) continue;
+    const sender = ev.getSender();
+    if (!sender) continue;
+    const ts = ev.getTs();
+    // Only responses cast on or before the end event are valid.
+    if (isEnded && endTs !== undefined && ts > endTs) continue;
+    const answerIds = validateSelections(
+      parseResponseAnswerIds(ev.getContent()),
+      validIds,
+      parsed.maxSelections,
+    );
+    responses.push({ sender, ts, answerIds });
+  }
+
+  return { tally: tallyResponses(responses, myUserId), isEnded };
 }

 export function PollContent({
-  content,
-  roomId,
-  eventId,
+  mEvent,
+  room,
+  canRedact,
 }: {
-  content: Record<string, unknown>;
-  roomId?: string;
-  eventId?: string;
+  mEvent: MatrixEvent;
+  room: Room;
+  /** Whether the current user may redact in this room (gates the End-poll action). */
+  canRedact: boolean;
 }) {
  const mx = useMatrixClient();
-  const _isStable = !!content['m.poll'];
+  const roomId = room.roomId;
+  const eventId = mEvent.getId();
+  const senderId = mEvent.getSender();

-  const poll = (content['m.poll'] ?? content['org.matrix.msc3381.poll.start']) as
-    | PollData
-    | undefined;
+  const parsed = useMemo(() => parsePollStart(mEvent.getContent()), [mEvent]);

-  const [votes, setVotes] = useState<VoteState>(() => {
-    if (!roomId || !eventId) return { counts: new Map(), myVotes: new Set(), total: 0 };
-    return computeVotes(mx, roomId, eventId, _isStable);
+  const [state, setState] = useState<PollState>(() => {
+    if (!eventId || !parsed) return { tally: EMPTY_TALLY, isEnded: false };
+    return computePollState(mx, room, eventId, parsed);
  });
+  const [pending, setPending] = useState<Set<string> | null>(null);
+  const [confirmEnd, setConfirmEnd] = useState(false);
+  const [ending, setEnding] = useState(false);
+  const [showVoters, setShowVoters] = useState(false);

-  // Refresh votes whenever Relations events fire
  const refresh = useCallback(() => {
-    if (!roomId || !eventId) return;
-    setVotes(computeVotes(mx, roomId, eventId, _isStable));
-  }, [mx, roomId, eventId, _isStable]);
+    if (!eventId || !parsed) return;
+    const next = computePollState(mx, room, eventId, parsed);
+    setState(next);
+    // Drop the optimistic selection only once our own vote is actually reflected,
+    // so an unrelated refresh (another user voting) can't revert our pending click.
+    setPending((prev) => (prev !== null && setsEqual(prev, next.tally.myVotes) ? null : prev));
+  }, [mx, room, eventId, parsed]);

  useEffect(() => {
-    if (!roomId || !eventId) return;
-    const room = mx.getRoom(roomId);
-    if (!room) return;
-    const timelineSet = room.getUnfilteredTimelineSet();
+    if (!eventId || !parsed) return undefined;
+    const relations = room.getUnfilteredTimelineSet().relations;
+    const relObjs = [
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.response' as any),
+      relations.getChildEventsForEvent(
+        eventId,
+        'm.reference',
+        '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,
+      ),
+    ];
+    relObjs.forEach((r) => {
+      r?.on(RelationsEvent.Add, refresh);
+      r?.on(RelationsEvent.Remove, refresh);
+      r?.on(RelationsEvent.Redaction, refresh);
+    });

-    const stableRels = timelineSet.relations.getChildEventsForEvent(
-      eventId,
-      'm.reference',
-      'm.poll.response',
-    );
-    const unstableRels = timelineSet.relations.getChildEventsForEvent(
-      eventId,
-      'org.matrix.msc3381.poll.response' as any,
-      'org.matrix.msc3381.poll.response',
-    );
-
-    stableRels?.on(RelationsEvent.Add, refresh);
-    stableRels?.on(RelationsEvent.Remove, refresh);
-    stableRels?.on(RelationsEvent.Redaction, refresh);
-    unstableRels?.on(RelationsEvent.Add, refresh);
-    unstableRels?.on(RelationsEvent.Remove, refresh);
-    unstableRels?.on(RelationsEvent.Redaction, refresh);
-    // Also listen at room level: if no votes exist yet, the Relations object is null
-    // and the listeners above are no-ops. The room timeline event catches the first vote.
-    const onTimeline = (ev: any) => {
-      const type = ev.getType?.();
-      const relatesTo = ev.getContent?.()?.['m.relates_to'];
+    // The relations object for the first response/end may not exist yet at mount, and
+    // redactions (m.room.redaction) don't flow through the relations listeners for a
+    // post-mount response — the room timeline catches those.
+    const onTimeline = (ev: MatrixEvent) => {
+      const type = ev.getType();
+      if (type === 'm.room.redaction') {
+        refresh();
+        return;
+      }
+      const relatesTo = ev.getContent()['m.relates_to'] as { event_id?: string } | undefined;
      if (
-        (type === 'm.poll.response' || type === 'org.matrix.msc3381.poll.response') &&
+        (type === 'm.poll.response' ||
+          type === 'org.matrix.msc3381.poll.response' ||
+          type === 'm.poll.end' ||
+          type === 'org.matrix.msc3381.poll.end') &&
        relatesTo?.event_id === eventId
      ) {
        refresh();
      }
    };
-    const room2 = mx.getRoom(roomId);
-    room2?.on(RoomEvent.Timeline, onTimeline);
+    room.on(RoomEvent.Timeline, onTimeline);
+
+    const poll = room.polls.get(eventId);
+    poll?.on(PollEvent.Update, refresh);
+    poll?.on(PollEvent.Responses, refresh);
+    poll?.on(PollEvent.End, refresh);
+    room.on(PollEvent.New, refresh);

    return () => {
-      stableRels?.off(RelationsEvent.Add, refresh);
-      stableRels?.off(RelationsEvent.Remove, refresh);
-      stableRels?.off(RelationsEvent.Redaction, refresh);
-      unstableRels?.off(RelationsEvent.Add, refresh);
-      unstableRels?.off(RelationsEvent.Remove, refresh);
-      unstableRels?.off(RelationsEvent.Redaction, refresh);
-      room2?.off(RoomEvent.Timeline, onTimeline);
+      relObjs.forEach((r) => {
+        r?.off(RelationsEvent.Add, refresh);
+        r?.off(RelationsEvent.Remove, refresh);
+        r?.off(RelationsEvent.Redaction, refresh);
+      });
+      room.off(RoomEvent.Timeline, onTimeline);
+      poll?.off(PollEvent.Update, refresh);
+      poll?.off(PollEvent.Responses, refresh);
+      poll?.off(PollEvent.End, refresh);
+      room.off(PollEvent.New, refresh);
    };
-  }, [mx, roomId, eventId, refresh]);
+  }, [room, eventId, parsed, refresh]);

-  if (!poll) {
+  if (!parsed) {
    return (
      <Text priority="300">
        <i>Poll (unreadable format)</i>
@@ -181,61 +195,96 @@ export function PollContent({
    );
  }

-  const questionText =
-    extractText((poll.question as any)?.['m.text']) ||
-    (poll.question as any)?.body ||
-    'Untitled poll';
-
-  const canVote = !!roomId && !!eventId;
-  const maxSelections = (poll as any).max_selections ?? 1;
+  const { tally, isEnded } = state;
+  const { isUndisclosed, maxSelections, question, answers } = parsed;
  const isMultiple = maxSelections > 1;
-  const { counts, myVotes, total } = votes;
+
+  const showResults = resultsVisible(isUndisclosed, isEnded);
+  const canVote = !!roomId && !!eventId && !isEnded;
+  const canEnd = !!eventId && !isEnded && (senderId === mx.getUserId() || canRedact);
+
+  const myVotes = pending ?? tally.myVotes;
+  const { counts, total, voters } = tally;
+  const winners = isEnded && showResults ? new Set(winningAnswerIds(counts)) : new Set<string>();
+  // Voter identities are shown under the same rule as the counts: disclosed polls
+  // reveal them live, undisclosed polls only once ended.
+  const canShowVoters = showResults && total > 0;

  const handleVote = (answerId: string) => {
-    if (!roomId || !eventId) return;
+    if (!roomId || !eventId || !canVote) return;

-    const newVotes = new Set(myVotes);
-    if (newVotes.has(answerId)) {
-      newVotes.delete(answerId);
+    const next = new Set(myVotes);
+    if (next.has(answerId)) {
+      next.delete(answerId);
+    } else if (isMultiple) {
+      if (next.size >= maxSelections) return; // enforce max_selections
+      next.add(answerId);
    } else {
-      if (!isMultiple) newVotes.clear();
-      newVotes.add(answerId);
+      next.clear();
+      next.add(answerId);
    }

-    // Optimistic local update
-    setVotes((prev) => {
-      const next = new Map(prev.counts);
-      // Remove all old vote counts for this user
-      for (const id of prev.myVotes) {
-        const c = next.get(id) ?? 1;
-        if (c <= 1) next.delete(id);
-        else next.set(id, c - 1);
-      }
-      // Add new vote counts
-      for (const id of newVotes) {
-        next.set(id, (next.get(id) ?? 0) + 1);
-      }
-      const hadVotes = prev.myVotes.size > 0;
-      const hasVotes = newVotes.size > 0;
-      const newTotal = prev.total + (hasVotes && !hadVotes ? 1 : !hasVotes && hadVotes ? -1 : 0);
-      return { counts: next, myVotes: newVotes, total: newTotal };
-    });
-
-    const selectionsArr = Array.from(newVotes);
-    if (_isStable) {
-      mx.sendEvent(roomId, 'm.poll.response' as any, {
-        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
-        'm.selections': selectionsArr,
-      }).catch(() => undefined);
-    } else {
-      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
-        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
-        'org.matrix.msc3381.poll.response': { answers: selectionsArr },
-      }).catch(() => undefined);
-    }
+    setPending(next);
+    // Send the STABLE m.poll.response (matches Lotus's stable m.poll.start; the reader
+    // accepts both namespaces).
+    mx.sendEvent(roomId, 'm.poll.response' as any, {
+      'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+      'm.selections': Array.from(next),
+    }).catch(() => setPending(null));
  };

-  const answers = poll.answers ?? [];
+  const handleEndPoll = () => {
+    if (!roomId || !eventId || ending) return;
+    setEnding(true);
+    mx.sendEvent(roomId, 'm.poll.end' as any, {
+      'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+      'm.poll.end': {},
+      'm.text': 'The poll has ended.',
+    })
+      .then(() => {
+        setConfirmEnd(false);
+        setEnding(false);
+      })
+      .catch(() => setEnding(false));
+  };
+
+  // Radiogroup keyboard model (single-choice only): arrows move focus + selection.
+  const handleRadioKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {
+    if (isMultiple || !canVote) return;
+    const nav = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];
+    if (!nav.includes(evt.key)) return;
+    evt.preventDefault();
+    const buttons = Array.from(
+      evt.currentTarget.querySelectorAll<HTMLButtonElement>('[data-poll-answer]'),
+    );
+    if (buttons.length === 0) return;
+    const current = buttons.findIndex((b) => b === document.activeElement);
+    let idx = current < 0 ? 0 : current;
+    if (evt.key === 'ArrowDown' || evt.key === 'ArrowRight') idx = (idx + 1) % buttons.length;
+    else if (evt.key === 'ArrowUp' || evt.key === 'ArrowLeft')
+      idx = (idx - 1 + buttons.length) % buttons.length;
+    else if (evt.key === 'Home') idx = 0;
+    else if (evt.key === 'End') idx = buttons.length - 1;
+    buttons[idx]?.focus();
+    handleVote(answers[idx].id);
+  };
+
+  const headerLabel = isEnded
+    ? 'Poll closed · Final results'
+    : `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
+
+  const footerNote = (() => {
+    if (isUndisclosed && !isEnded) {
+      return canVote
+        ? 'Voting open · Results hidden until the poll ends'
+        : 'Results hidden until the poll ends';
+    }
+    const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
+    if (isEnded) return `${votesPart} · Poll closed`;
+    if (!canVote) return votesPart;
+    if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
+    return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
+  })();

  return (
    <Box
@@ -256,116 +305,188 @@ export function PollContent({
          marginBottom: config.space.S100,
        }}
      >
-        {`◉ Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`}
+        <span aria-hidden>◉ </span>
+        {headerLabel}
      </Text>
      <Text size="T400" style={{ fontWeight: 600 }}>
-        {questionText}
+        {question}
      </Text>
-      <Box direction="Column" gap="100" style={{ marginTop: '2px' }}>
+      <Box
+        direction="Column"
+        gap="100"
+        style={{ marginTop: '2px' }}
+        role={isMultiple ? 'group' : 'radiogroup'}
+        aria-label={question}
+        onKeyDown={handleRadioKeyDown}
+      >
        {answers.map((answer, i) => {
-          const text =
-            extractText((answer as any)['m.text']) ||
-            (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
-            `Option ${i + 1}`;
-          const id = answer['m.id'] ?? answer.id ?? String(i);
+          const id = answer.id;
+          const text = answer.text;
          const selected = myVotes.has(id);
          const voteCount = counts.get(id) ?? 0;
-          const pct = total > 0 ? Math.round((voteCount / total) * 100) : 0;
+          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;
          return (
-            <button
-              key={id}
-              type="button"
-              data-poll-answer
-              data-selected={selected}
-              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 ${
-                  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',
-              }}
-            >
-              {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
+            <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',
-                  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',
                }}
              >
+                {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
                  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',
+                    gap: config.space.S200,
+                    position: 'relative',
                  }}
                >
-                  {selected && isMultiple ? <Icon size="50" src={Icons.Check} /> : null}
-                </span>
-                <Text as="span" size="T300" style={{ flexGrow: 1 }}>
-                  {text}
-                </Text>
-                {total > 0 && (
-                  <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
-                    {pct}%
+                  <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>
+                  {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>
          );
        })}
      </Box>
-      <Text size="T200" priority="300" style={{ marginTop: '2px' }}>
-        <i>
-          {total > 0 ? `${total} vote${total === 1 ? '' : 's'} · ` : ''}
-          {canVote
-            ? isMultiple
-              ? 'Select all that apply'
-              : myVotes.size > 0
-                ? 'Click to change'
-                : 'Click to vote'
-            : 'Voting not available'}
-        </i>
-      </Text>
+      {canShowVoters && (
+        <Box>
+          <Chip
+            variant={showVoters ? 'Primary' : 'SurfaceVariant'}
+            radii="Pill"
+            aria-pressed={showVoters}
+            onClick={() => setShowVoters((v) => !v)}
+            before={<Icon size="50" src={Icons.User} />}
+          >
+            <Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
+          </Chip>
+        </Box>
+      )}
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
+        <Text size="T200" priority="300" style={{ minWidth: 0 }}>
+          <i>{footerNote}</i>
+        </Text>
+        {canEnd &&
+          (confirmEnd ? (
+            <Box gap="100" shrink="No" alignItems="Center">
+              <Chip
+                variant="Critical"
+                radii="Pill"
+                aria-disabled={ending}
+                onClick={ending ? undefined : handleEndPoll}
+              >
+                <Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
+              </Chip>
+              <Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
+                <Text size="T200">Cancel</Text>
+              </Chip>
+            </Box>
+          ) : (
+            <Chip
+              variant="SurfaceVariant"
+              radii="Pill"
+              onClick={() => setConfirmEnd(true)}
+              before={<Icon size="50" src={Icons.Cross} />}
+            >
+              <Text size="T200">End poll</Text>
+            </Chip>
+          ))}
+      </Box>
    </Box>
  );
 }
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { ComponentProps, forwardRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { as } from 'folds';
 import * as css from './styles.css';

@@ -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': {
@@ -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"
        />
@@ -12,21 +12,35 @@ 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 { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberName } from '../../utils/room';
 import { UserAvatar } from '../user-avatar';
 import { StackedAvatar } from '../stacked-avatar';
 import { EventReaders } from '../event-readers';
 import { stopPropagation } from '../../utils/keyboard';
 import { useModalStyle } from '../../hooks/useModalStyle';
+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;

+function ReceiptStackedAvatar({ room, userId }: { room: Room; userId: string }) {
+  const { name, avatarUrl } = useMemberAvatar(room, userId);
+  return (
+    <StackedAvatar title={name} variant="SurfaceVariant" size="200" radii="Pill">
+      <UserAvatar
+        userId={userId}
+        src={avatarUrl}
+        alt={name}
+        renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+      />
+    </StackedAvatar>
+  );
+}
+
 export function ReadReceiptAvatars({
  room,
  eventId,
@@ -36,12 +50,16 @@ export function ReadReceiptAvatars({
  eventId: string;
  userIds: string[];
 }) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
  const [open, setOpen] = useState(false);
  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const modalStyle = useModalStyle(360);

+  // 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;

  const displayed = userIds.slice(0, MAX_DISPLAY);
@@ -49,7 +67,7 @@ export function ReadReceiptAvatars({
  const tooltipNames =
    userIds
      .slice(0, 5)
-      .map((id) => getMemberDisplayName(room, id) ?? getMxIdLocalPart(id) ?? id)
+      .map((id) => getMemberName(room, id))
      .join(', ') + (extra > 0 ? ` +${extra} more` : '');

  return (
@@ -75,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
@@ -83,40 +101,20 @@ export function ReadReceiptAvatars({
            display: 'flex',
            alignItems: 'center',
            backgroundColor: lotusTerminal
-              ? 'rgba(0,212,255,0.07)'
+              ? 'color-mix(in srgb, var(--lt-accent-cyan) 7%, transparent)'
              : color.SurfaceVariant.Container,
            border: lotusTerminal
-              ? `${config.borderWidth.B300} solid rgba(0,212,255,0.30)`
+              ? `${config.borderWidth.B300} solid color-mix(in srgb, var(--lt-accent-cyan) 30%, transparent)`
              : `${config.borderWidth.B300} solid transparent`,
-            boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none',
+            boxShadow: lotusTerminal ? 'var(--lt-box-glow-cyan)' : 'none',
            borderRadius: config.radii.Pill,
            padding: `${config.space.S100} ${config.space.S200}`,
            gap: '0px',
          }}
        >
-          {displayed.map((userId) => {
-            const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-            const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();
-            const avatarUrl = avatarMxc
-              ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined)
-              : undefined;
-            return (
-              <StackedAvatar
-                key={userId}
-                title={name}
-                variant="SurfaceVariant"
-                size="200"
-                radii="Pill"
-              >
-                <UserAvatar
-                  userId={userId}
-                  src={avatarUrl}
-                  alt={name}
-                  renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                />
-              </StackedAvatar>
-            );
-          })}
+          {displayed.map((userId) => (
+            <ReceiptStackedAvatar key={userId} room={room} userId={userId} />
+          ))}
          {extra > 0 && (
            <Text
              size="T200"
@@ -1,5 +1,5 @@
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
+import { JoinRule, MatrixError, Room } from 'matrix-js-sdk';
 import {
  Avatar,
  Badge,
@@ -139,11 +139,29 @@ type RoomCardProps = {
  topic?: string;
  memberCount?: number;
  roomType?: string;
+  joinRule?: string;
+  encrypted?: boolean;
+  canonicalAlias?: string;
+  worldReadable?: boolean;
+  /** The viewer's own membership over federation (leave/invite/knock/ban). */
+  membership?: string;
+  /** Larger, centered treatment for the single-room preview page. */
+  hero?: boolean;
  viaServers?: string[];
  onView?: (roomId: string) => void;
  renderTopicViewer: (name: string, topic: string, requestClose: () => void) => ReactNode;
 };

+// Map a room's join rule to a short preview chip. Public is the common case and
+// gets no chip (avoids noise); the rest tell the user how entry works.
+const joinRuleLabel = (joinRule?: string): string | undefined => {
+  if (joinRule === JoinRule.Restricted || joinRule === 'knock_restricted') return 'Restricted';
+  if (joinRule === JoinRule.Knock) return 'Ask to join';
+  if (joinRule === JoinRule.Invite) return 'Invite only';
+  if (joinRule === JoinRule.Private) return 'Private';
+  return undefined;
+};
+
 export const RoomCard = as<'div', RoomCardProps>(
  (
    {
@@ -154,6 +172,12 @@ export const RoomCard = as<'div', RoomCardProps>(
      topic,
      memberCount,
      roomType,
+      joinRule,
+      encrypted,
+      canonicalAlias,
+      worldReadable,
+      membership,
+      hero,
      viaServers,
      onView,
      renderTopicViewer,
@@ -169,16 +193,19 @@ export const RoomCard = as<'div', RoomCardProps>(
      joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined,
    );

-    const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
-    const fallbackTopic = roomIdOrAlias;
+    // Name falls back to the alias (readable), then the alias localpart, then the
+    // raw id — never the raw `!id` when a nicer form exists.
+    const fallbackName = canonicalAlias || getMxIdLocalPart(roomIdOrAlias) || roomIdOrAlias;

    const avatar = joinedRoom
      ? getRoomAvatarUrl(mx, joinedRoom, 96, useAuthentication)
      : avatarUrl && mxcUrlToHttp(mx, avatarUrl, useAuthentication, 96, 96, 'crop');

    const roomName = joinedRoom?.name || name || fallbackName;
-    const roomTopic =
-      (topicEvent?.getContent().topic as string) || undefined || topic || fallbackTopic;
+    // No topic → render a muted placeholder, NOT the raw room id.
+    const roomTopic = (topicEvent?.getContent().topic as string) || topic || undefined;
+    // Only show an alias line when it adds info beyond the displayed name.
+    const aliasLine = canonicalAlias && canonicalAlias !== roomName ? canonicalAlias : undefined;
    const joinedMemberCount = joinedRoom?.getJoinedMemberCount() ?? memberCount;

    useStateEventCallback(
@@ -203,8 +230,31 @@ export const RoomCard = as<'div', RoomCardProps>(
        [mx, roomIdOrAlias, viaServers],
      ),
    );
-    const joining =
-      joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
+    const [knockState, knock] = useAsyncCallback<{ room_id: string }, MatrixError, []>(
+      useCallback(
+        () => mx.knockRoom(roomIdOrAlias, { viaServers }),
+        [mx, roomIdOrAlias, viaServers],
+      ),
+    );
+    // A knock-rule room can't be joined directly — request to join instead.
+    const isKnock = joinRule === JoinRule.Knock;
+    // Membership known from the summary survives reloads (unlike local knockState).
+    const invited = membership === 'invite';
+    const alreadyKnocked = membership === 'knock';
+    const banned = membership === 'ban';
+    const action = isKnock ? knock : join;
+    const actionState = isKnock ? knockState : joinState;
+    const acting =
+      actionState.status === AsyncStatus.Loading || actionState.status === AsyncStatus.Success;
+    const requested = alreadyKnocked || knockState.status === AsyncStatus.Success;
+    let actionLabel: string;
+    if (banned) actionLabel = 'Banned';
+    else if (invited) actionLabel = acting ? 'Joining' : 'Accept invite';
+    else if (isKnock)
+      actionLabel = requested ? 'Requested' : acting ? 'Requesting' : 'Request to join';
+    else actionLabel = acting ? 'Joining' : 'Join';
+    const actionDisabled = banned || requested || acting;
+    const chip = joinRuleLabel(joinRule);

    const [viewTopic, setViewTopic] = useState(false);
    const closeTopic = () => setViewTopic(false);
@@ -233,9 +283,25 @@ export const RoomCard = as<'div', RoomCardProps>(
        </Box>
        <Box grow="Yes" direction="Column" gap="100">
          <RoomCardName>{roomName}</RoomCardName>
-          <RoomCardTopic onClick={openTopic} onKeyDown={onEnterOrSpace(openTopic)} tabIndex={0}>
-            {roomTopic}
-          </RoomCardTopic>
+          {aliasLine && (
+            <Text size="T200" priority="300" truncate>
+              {aliasLine}
+            </Text>
+          )}
+          {roomTopic ? (
+            <RoomCardTopic
+              onClick={openTopic}
+              onKeyDown={onEnterOrSpace(openTopic)}
+              tabIndex={0}
+              style={hero ? { WebkitLineClamp: 10 } : undefined}
+            >
+              {roomTopic}
+            </RoomCardTopic>
+          ) : (
+            <Text size="T200" priority="300" style={{ opacity: 0.6 }}>
+              No description
+            </Text>
+          )}

          <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
            <OverlayCenter>
@@ -247,7 +313,7 @@ export const RoomCard = as<'div', RoomCardProps>(
                  escapeDeactivates: stopPropagation,
                }}
              >
-                {renderTopicViewer(roomName, roomTopic, closeTopic)}
+                {renderTopicViewer(roomName, roomTopic ?? '', closeTopic)}
              </FocusTrap>
            </OverlayCenter>
          </Overlay>
@@ -258,6 +324,25 @@ export const RoomCard = as<'div', RoomCardProps>(
            <Text size="T200">{`${millify(joinedMemberCount)} Members`}</Text>
          </Box>
        )}
+        {!joinedRoom && (chip || encrypted || worldReadable) && (
+          <Box gap="100" wrap="Wrap">
+            {chip && (
+              <Badge variant="Secondary" fill="Soft" outlined>
+                <Text size="L400">{chip}</Text>
+              </Badge>
+            )}
+            {encrypted && (
+              <Badge variant="Success" fill="Soft" outlined>
+                <Text size="L400">Encrypted</Text>
+              </Badge>
+            )}
+            {worldReadable && (
+              <Badge variant="Secondary" fill="Soft" outlined>
+                <Text size="L400">Readable</Text>
+              </Badge>
+            )}
+          </Box>
+        )}
        {typeof joinedRoomId === 'string' && (
          <Button
            onClick={onView ? () => onView(joinedRoomId) : undefined}
@@ -270,23 +355,24 @@ export const RoomCard = as<'div', RoomCardProps>(
            </Text>
          </Button>
        )}
-        {typeof joinedRoomId !== 'string' && joinState.status !== AsyncStatus.Error && (
+        {typeof joinedRoomId !== 'string' && actionState.status !== AsyncStatus.Error && (
          <Button
-            onClick={join}
-            variant="Secondary"
+            onClick={action}
+            variant={hero ? 'Primary' : 'Secondary'}
+            fill={hero ? 'Solid' : undefined}
            size="300"
-            disabled={joining}
-            before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+            disabled={actionDisabled}
+            before={acting && <Spinner size="50" variant="Secondary" fill="Soft" />}
          >
            <Text size="B300" truncate>
-              {joining ? 'Joining' : 'Join'}
+              {actionLabel}
            </Text>
          </Button>
        )}
-        {typeof joinedRoomId !== 'string' && joinState.status === AsyncStatus.Error && (
+        {typeof joinedRoomId !== 'string' && actionState.status === AsyncStatus.Error && (
          <Box gap="200">
            <Button
-              onClick={join}
+              onClick={action}
              className={css.ActionButton}
              variant="Critical"
              fill="Solid"
@@ -297,8 +383,8 @@ export const RoomCard = as<'div', RoomCardProps>(
              </Text>
            </Button>
            <ErrorDialog
-              title="Join Error"
-              message={joinState.error.message || 'Failed to join. Unknown Error.'}
+              title={isKnock ? 'Request Error' : 'Join Error'}
+              message={actionState.error.message || 'Failed to join. Unknown Error.'}
            >
              {(openError) => (
                <Button
@@ -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([
@@ -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
@@ -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);
@@ -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;
+}
@@ -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': {
@@ -5,6 +5,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SoundboardPackEditor } from './SoundboardPackEditor';
 import { SoundboardContent, SoundboardPack } from '../../plugins/soundboard';
 import { StateEvent } from '../../../types/matrix/room';
+import { sendStateEvent } from '../../utils/room';
 import { useRoomSoundboardPack } from '../../hooks/useSoundboardPacks';
 import { PackAddress } from '../../plugins/custom-emoji/PackAddress';
 import { randomStr } from '../../utils/common';
@@ -35,12 +36,7 @@ export function RoomSoundboardPack({ room, stateKey }: RoomSoundboardPackProps)

  const handleUpdate = useCallback(
    async (content: SoundboardContent) => {
-      await mx.sendStateEvent(
-        room.roomId,
-        StateEvent.LotusSoundboardRoom as unknown as keyof import('matrix-js-sdk').StateEvents,
-        content as never,
-        stateKey,
-      );
+      await sendStateEvent(mx, room.roomId, StateEvent.LotusSoundboardRoom, content, stateKey);
    },
    [mx, room.roomId, stateKey],
  );
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
  Box,
  Button,
@@ -21,6 +21,7 @@ import { uniqueShortcode } from '../../plugins/soundboard/utils';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import {
+  getAudioDurationMs,
  playClipLocally,
  resolveClipObjectUrl,
  SOUNDBOARD_ACCEPT,
@@ -29,6 +30,49 @@ import {
 } from '../../utils/soundboardClips';
 import { stopPropagation } from '../../utils/keyboard';

+// Injected once: the little "now playing" equalizer bars animation.
+const EQ_STYLE_ID = 'lotus-soundboard-eq-keyframes';
+function ensureEqKeyframes() {
+  if (typeof document === 'undefined' || document.getElementById(EQ_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = EQ_STYLE_ID;
+  style.textContent = `
+    @keyframes lotusSbEq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
+    @media (prefers-reduced-motion: reduce) { @keyframes lotusSbEq { 0%,100% { transform: scaleY(0.6); } } }
+  `;
+  document.head.appendChild(style);
+}
+
+function PlayingBars() {
+  return (
+    <Box alignItems="Center" gap="100" style={{ height: toRem(14) }} aria-hidden>
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          style={{
+            display: 'inline-block',
+            width: toRem(3),
+            height: toRem(14),
+            borderRadius: toRem(2),
+            background: color.Primary.Main,
+            transformOrigin: 'center bottom',
+            animation: `lotusSbEq 0.7s ease-in-out ${i * 0.15}s infinite`,
+          }}
+        />
+      ))}
+    </Box>
+  );
+}
+
+// Short clip length shown while adjusting a sound: "3.2s", or "1:04" if ≥ 60s.
+const formatClipSeconds = (seconds: number): string => {
+  if (!Number.isFinite(seconds) || seconds < 0) return '';
+  if (seconds < 60) return `${seconds.toFixed(1)}s`;
+  const m = Math.floor(seconds / 60);
+  const s = Math.round(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
 type ClipDraft = {
  url: string;
  body: string;
@@ -59,9 +103,20 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
  const [error, setError] = useState<string>();
  const [emojiFor, setEmojiFor] = useState<string>(); // shortcode currently picking an emoji
  const [busyPreview, setBusyPreview] = useState<string>();
+  const [playingKey, setPlayingKey] = useState<string>();
+  const [durations, setDurations] = useState<Map<string, number>>(new Map()); // shortcode -> seconds
+  const audioElRef = useRef<HTMLAudioElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const emojiAnchorRef = useRef<HTMLElement | null>(null);

+  useEffect(() => {
+    ensureEqKeyframes();
+    return () => {
+      audioElRef.current?.pause();
+      audioElRef.current = null;
+    };
+  }, []);
+
  const existing = useMemo(() => pack.getClips(), [pack]);
  const clipCount = existing.filter((c) => !deleted.has(c.shortcode)).length + uploads.length;

@@ -78,19 +133,47 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
    });
  };

+  const stopPlayback = useCallback(() => {
+    audioElRef.current?.pause();
+    audioElRef.current = null;
+    setPlayingKey(undefined);
+  }, []);
+
  const preview = useCallback(
    async (id: string, mxc: string, volume: number) => {
+      // Clicking the clip that's already playing stops it (toggle).
+      if (audioElRef.current && playingKey === id) {
+        stopPlayback();
+        return;
+      }
+      stopPlayback(); // stop any other clip first
      setBusyPreview(id);
      try {
        const url = await resolveClipObjectUrl(mx, mxc);
-        playClipLocally(url, volume / 100);
+        const audio = playClipLocally(url, volume / 100);
+        if (audio) {
+          audioElRef.current = audio;
+          setPlayingKey(id);
+          audio.addEventListener('loadedmetadata', () => {
+            if (Number.isFinite(audio.duration)) {
+              setDurations((prev) => new Map(prev).set(id, audio.duration));
+            }
+          });
+          const clear = () => {
+            if (audioElRef.current === audio) audioElRef.current = null;
+            setPlayingKey((k) => (k === id ? undefined : k));
+          };
+          audio.addEventListener('ended', clear);
+          audio.addEventListener('pause', clear);
+          audio.addEventListener('error', clear);
+        }
      } catch {
        /* ignore preview errors */
      } finally {
        setBusyPreview(undefined);
      }
    },
-    [mx],
+    [mx, playingKey, stopPlayback],
  );

  const handleFiles = useCallback(
@@ -112,6 +195,8 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
            throw new Error(`"${file.name}" is too large (max 1 MB).`);
          }
          // eslint-disable-next-line no-await-in-loop
+          const durationMs = await getAudioDurationMs(file);
+          // eslint-disable-next-line no-await-in-loop
          const res = await mx.uploadContent(file, { type: file.type || 'audio/mpeg' });
          const mxc = res.content_uri;
          if (!mxc) throw new Error('Upload failed.');
@@ -126,7 +211,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
              body: name,
              emoji: '',
              volume: 100,
-              info: { mimetype: file.type || undefined, size: file.size },
+              info: { mimetype: file.type || undefined, size: file.size, duration: durationMs },
            },
          ]);
        }
@@ -182,11 +267,15 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
        setDraft(key, patch, base);
      }
    };
+    const isPlaying = playingKey === key;
+    const clipSeconds =
+      durations.get(key) ?? (base.info?.duration != null ? base.info.duration / 1000 : undefined);
    return (
      <Box
        key={key}
        alignItems="Center"
        gap="200"
+        wrap="Wrap"
        style={{
          padding: config.space.S200,
          borderRadius: config.radii.R400,
@@ -197,12 +286,16 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
        <IconButton
          size="300"
          radii="300"
-          variant="Secondary"
+          variant={isPlaying ? 'Primary' : 'Secondary'}
          disabled={busyPreview === key}
          onClick={() => preview(key, base.url, rowVolume)}
-          aria-label={`Preview ${rowBody}`}
+          aria-label={isPlaying ? `Stop ${rowBody}` : `Preview ${rowBody}`}
        >
-          {busyPreview === key ? <Spinner size="100" /> : <Icon size="100" src={Icons.Play} />}
+          {busyPreview === key ? (
+            <Spinner size="100" />
+          ) : (
+            <Icon size="100" src={isPlaying ? Icons.Pause : Icons.Play} filled={isPlaying} />
+          )}
        </IconButton>
        <IconButton
          size="300"
@@ -225,9 +318,27 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
            readOnly={!canEdit || markedDeleted}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => commit({ body: e.target.value })}
            aria-label="Clip name"
+            style={{ width: '100%' }}
          />
        </Box>
-        <Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(120) }}>
+        <Box
+          alignItems="Center"
+          justifyContent="End"
+          gap="100"
+          shrink="No"
+          style={{ width: toRem(52) }}
+        >
+          {isPlaying ? (
+            <PlayingBars />
+          ) : (
+            clipSeconds !== undefined && (
+              <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap' }}>
+                {formatClipSeconds(clipSeconds)}
+              </Text>
+            )
+          )}
+        </Box>
+        <Box alignItems="Center" gap="100" shrink="No" style={{ width: toRem(148) }}>
          <Icon size="50" src={Icons.VolumeHigh} />
          <input
            type="range"
@@ -237,9 +348,12 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
            defaultValue={rowVolume}
            disabled={!canEdit || markedDeleted}
            onChange={(e) => commit({ volume: parseInt(e.target.value, 10) })}
-            style={{ flexGrow: 1 }}
+            style={{ flexGrow: 1, minWidth: 0 }}
            aria-label="Clip volume"
          />
+          <Text size="T200" priority="300" style={{ width: toRem(30), textAlign: 'right' }}>
+            {rowVolume}%
+          </Text>
        </Box>
        {canEdit && !isUpload && (
          <IconButton
@@ -308,7 +422,13 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
        {existing.map((c) =>
          renderRow(
            c.shortcode,
-            { url: c.url, body: c.body ?? c.shortcode, emoji: c.emoji ?? '', volume: c.volume },
+            {
+              url: c.url,
+              body: c.body ?? c.shortcode,
+              emoji: c.emoji ?? '',
+              volume: c.volume,
+              info: c.info,
+            },
            false,
            deleted.has(c.shortcode),
          ),
@@ -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,
@@ -14,6 +16,26 @@ export const UrlPreview = style([
  },
 ]);

+// Wider, responsive card for interactive embeds (video players, tweets, posts)
+// so the player chrome / tweet content isn't cramped or clipped. Defined after
+// UrlPreview so its width wins the cascade.
+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,
  {
@@ -197,6 +219,123 @@ export const MediaPlayButton = style([
  },
 ]);

+// ---------------------------------------------------------------------------
+// Inline video embed (YouTube / Vimeo) — media-forward click-to-play facade
+// ---------------------------------------------------------------------------
+
+export const EmbedMediaLandscape = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    // 16:9 via the padding-top hack (56.25%), NOT `aspect-ratio`. An absolutely-
+    // positioned *replaced* element (the player <iframe>) collapses to its ~200px
+    // intrinsic size inside an `aspect-ratio` box; padding derives a definite height
+    // from the definite width so the iframe (inset:0) reliably fills it.
+    height: 0,
+    paddingTop: '56.25%',
+    overflow: 'hidden',
+    backgroundColor: color.Surface.Container,
+    selectors: {
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0 },
+    },
+  },
+]);
+
+export const EmbedMediaPortrait = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: toRem(300),
+    maxWidth: '100%',
+    // 9:16 via the padding-top hack (177.78%) — see EmbedMediaLandscape.
+    height: 0,
+    paddingTop: '177.78%',
+    margin: '0 auto',
+    overflow: 'hidden',
+    backgroundColor: color.Surface.Container,
+    selectors: {
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0, margin: 0 },
+    },
+  },
+]);
+
+// Fills the aspect box; used for both the <button> facade and the <a> fallback.
+export const EmbedFacade = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    padding: 0,
+    border: 'none',
+    background: 'none',
+    cursor: 'pointer',
+
+    ':hover': {
+      filter: 'brightness(0.85)',
+    },
+    selectors: {
+      '&:focus-visible': {
+        outline: `2px solid ${color.Primary.Main}`,
+        outlineOffset: '-2px',
+      },
+    },
+  },
+]);
+
+export const EmbedIframe = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    border: 0,
+    display: 'block',
+  },
+]);
+
+// Variable-height iframe that sizes itself (X/Twitter, Instagram, Reddit posts —
+// height set inline). Capped ~550px (X/IG native max) + centered in the wide card.
+export const EmbedIframeStatic = style([
+  DefaultReset,
+  {
+    width: '100%',
+    maxWidth: toRem(550),
+    margin: '0 auto',
+    border: 0,
+    display: 'block',
+  },
+]);
+
+export const EmbedPlaceholder = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#111111',
+    color: '#ffffff',
+    fontSize: toRem(28),
+  },
+]);
+
+// Audio embeds (Spotify / SoundCloud) — full-width, short fixed height (set inline).
+export const EmbedMediaAudio = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    backgroundColor: color.Surface.Container,
+  },
+]);
+
 // ---------------------------------------------------------------------------
 // Shared square artwork thumbnail (Spotify, IMDb poster, Discord icon)
 // ---------------------------------------------------------------------------
@@ -280,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,
@@ -315,6 +504,61 @@ export const BadgeTikTok = style({
  color: '#ffffff',
 });

+export const BadgeSoundCloud = style({
+  backgroundColor: '#ff5500',
+  color: '#ffffff',
+});
+
+export const BadgeDailymotion = style({
+  backgroundColor: '#0066dc',
+  color: '#ffffff',
+});
+
+export const BadgeStreamable = style({
+  backgroundColor: '#0f90fa',
+  color: '#ffffff',
+});
+
+export const BadgeAppleMusic = style({
+  backgroundColor: '#fa243c',
+  color: '#ffffff',
+});
+
+export const BadgeInstagram = style({
+  backgroundColor: '#e1306c',
+  color: '#ffffff',
+});
+
+export const BadgeBluesky = style({
+  backgroundColor: '#0085ff',
+  color: '#ffffff',
+});
+
+export const BadgeLoom = style({
+  backgroundColor: '#625df5',
+  color: '#ffffff',
+});
+
+export const BadgeKick = style({
+  backgroundColor: '#53fc18',
+  color: '#000000',
+});
+
+export const BadgeTidal = style({
+  backgroundColor: '#000000',
+  color: '#ffffff',
+});
+
+export const BadgeMixcloud = style({
+  backgroundColor: '#52aad8',
+  color: '#ffffff',
+});
+
+export const BadgeDeezer = style({
+  backgroundColor: '#a238ff',
+  color: '#ffffff',
+});
+
 // ---------------------------------------------------------------------------
 // Twitch LIVE badge
 // ---------------------------------------------------------------------------
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';
@@ -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();
                }}
              >
@@ -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}
@@ -1,6 +1,6 @@
 import { Box, Button, color, config, Icon, IconButton, Icons, Spinner, Text, toRem } from 'folds';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
 import { AsyncState, AsyncStatus, useAsync } from '../../hooks/useAsyncCallback';
 import { VerificationStatus } from '../../hooks/useDeviceVerificationStatus';
@@ -38,7 +38,7 @@ import { mDirectAtom } from '../../state/mDirectList';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { VirtualTile } from '../../components/virtualizer';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl, sendStateEvent } from '../../utils/room';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -136,9 +136,10 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
        await rateLimitedActions(selectedRooms, async (room) => {
          const via = getViaServers(room);

-          await mx.sendStateEvent(
+          await sendStateEvent(
+            mx,
            parentId,
-            StateEvent.SpaceChild as any,
+            StateEvent.SpaceChild,
            {
              auto_join: false,
              suggested: false,
@@ -1,5 +1,7 @@
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, 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';
 import {
  Avatar,
  Box,
@@ -16,13 +18,19 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import { useBookmarks, Bookmark } from '../../hooks/useBookmarks';
+import {
+  BookmarkSort,
+  isBookmarkSort,
+  sortBookmarks,
+  groupBookmarksByRoom,
+} from '../../utils/bookmarks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
 import { MessageDeletedContent } from '../../components/message/content/FallbackContent';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { RoomAvatar } from '../../components/room-avatar';
-import { getRoomAvatarUrl } from '../../utils/room';
+import { getRoomAvatarUrl, getMemberName } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { stopPropagation } from '../../utils/keyboard';
@@ -41,15 +49,57 @@ function formatTimeAgo(ts: number): string {
  return new Date(ts).toLocaleDateString();
 }

+// Remember the last-chosen sort across panel opens (the panel unmounts on close).
+// getOnInit reads localStorage synchronously at init so the persisted sort is
+// applied on the very first render (no flash from the 'newest' default).
+const bookmarkSortAtom = atomWithStorage<BookmarkSort>(
+  'cinny_bookmarks_sort_v1',
+  'newest',
+  createJSONStorage(() => localStorage),
+  { getOnInit: true },
+);
+
+const SORT_OPTIONS: { value: BookmarkSort; label: string }[] = [
+  { value: 'newest', label: 'Newest' },
+  { value: 'oldest', label: 'Oldest' },
+  { value: 'room', label: 'By room' },
+];
+
+// Segmented sort button — mirrors MediaGallery's tab styling for house consistency.
+function SortButton({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      size="300"
+      variant={active ? 'Primary' : 'Secondary'}
+      fill={active ? 'Solid' : 'Soft'}
+      radii="300"
+      aria-pressed={active}
+      onClick={onClick}
+    >
+      <Text size="B300">{label}</Text>
+    </Button>
+  );
+}
+
 type BookmarkItemProps = {
  bookmark: Bookmark;
  onJump: (roomId: string, eventId: string) => void;
  onRemove: (eventId: string) => void;
  // Optional live-rendered preview node; falls back to the stored snapshot when absent.
  preview?: ReactNode;
+  // Live-resolved author name; falls back to the stored snapshot when absent.
+  senderName?: string;
 };

-function BookmarkItem({ bookmark, onJump, onRemove, preview }: BookmarkItemProps) {
+function BookmarkItem({ bookmark, onJump, onRemove, preview, senderName }: BookmarkItemProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const room = mx.getRoom(bookmark.roomId) ?? undefined;
@@ -57,6 +107,9 @@ function BookmarkItem({ bookmark, onJump, onRemove, preview }: BookmarkItemProps
  const avatarUrl = room
    ? (getRoomAvatarUrl(mx, room, 96, useAuthentication) ?? undefined)
    : undefined;
+  // Prefer a live-resolved author name, then the stored snapshot.
+  const author = senderName ?? bookmark.senderName;
+  const timeAgo = formatTimeAgo(bookmark.savedAt);

  return (
    <Box
@@ -82,8 +135,8 @@ function BookmarkItem({ bookmark, onJump, onRemove, preview }: BookmarkItemProps
          <Text size="T200" truncate style={{ fontWeight: config.fontWeight.W600 }}>
            {displayRoomName}
          </Text>
-          <Text size="T200" priority="300">
-            {formatTimeAgo(bookmark.savedAt)}
+          <Text size="T200" priority="300" truncate>
+            {author ? `${author} · ${timeAgo}` : timeAgo}
          </Text>
        </Box>
        <IconButton
@@ -144,7 +197,81 @@ function LiveBookmarkItem({ room, bookmark, onJump, onRemove }: LiveBookmarkItem
    }
  }

-  return <BookmarkItem bookmark={bookmark} onJump={onJump} onRemove={onRemove} preview={preview} />;
+  // Resolve the author's current display name from the live event when available.
+  const liveSender = liveEvent?.getSender();
+  const senderName = liveSender ? getMemberName(room, liveSender) : undefined;
+
+  return (
+    <BookmarkItem
+      bookmark={bookmark}
+      onJump={onJump}
+      onRemove={onRemove}
+      preview={preview}
+      senderName={senderName}
+    />
+  );
+}
+
+type RoomGroupHeaderProps = {
+  roomId: string;
+  roomName: string;
+  count: number;
+  collapsed: boolean;
+  contentId: string;
+  onToggle: () => void;
+};
+
+// Collapsible section header for the "By room" grouping. Uses the live room name
+// / avatar when the room is joined, falling back to the stored snapshot name.
+function RoomGroupHeader({
+  roomId,
+  roomName,
+  count,
+  collapsed,
+  contentId,
+  onToggle,
+}: RoomGroupHeaderProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const room = mx.getRoom(roomId) ?? undefined;
+  const displayRoomName = room?.name ?? roomName;
+  const avatarUrl = room
+    ? (getRoomAvatarUrl(mx, room, 96, useAuthentication) ?? undefined)
+    : undefined;
+
+  return (
+    <Button
+      variant="Secondary"
+      fill="None"
+      size="300"
+      radii="300"
+      onClick={onToggle}
+      aria-expanded={!collapsed}
+      aria-controls={contentId}
+      // Explicit name avoids the avatar alt + visible name being announced twice,
+      // and gives the bare count meaning for screen readers.
+      aria-label={`${displayRoomName}, ${count} saved message${count !== 1 ? 's' : ''}`}
+      style={{ justifyContent: 'flex-start', padding: config.space.S200 }}
+    >
+      <Box grow="Yes" alignItems="Center" gap="200" style={{ minWidth: 0 }}>
+        <Icon size="100" src={collapsed ? Icons.ChevronRight : Icons.ChevronBottom} />
+        <Avatar size="200" radii="300">
+          <RoomAvatar
+            roomId={roomId}
+            src={avatarUrl}
+            alt=""
+            renderFallback={() => <Text size="H6">{nameInitials(displayRoomName)}</Text>}
+          />
+        </Avatar>
+        <Text size="T200" truncate style={{ flexGrow: 1, fontWeight: config.fontWeight.W600 }}>
+          {displayRoomName}
+        </Text>
+        <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
+          {count}
+        </Text>
+      </Box>
+    </Button>
+  );
 }

 type BookmarksPanelProps = {
@@ -156,6 +283,20 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
  const { bookmarks, removeBookmark } = useBookmarks();
  const { navigateRoom } = useRoomNavigate();
  const [filter, setFilter] = useState('');
+  const [storedSort, setSort] = useAtom(bookmarkSortAtom);
+  // Normalize a stale/corrupt persisted value so exactly one sort is always active.
+  const sort: BookmarkSort = isBookmarkSort(storedSort) ? storedSort : 'newest';
+  // roomIds whose group section is collapsed (only relevant in "By room" mode).
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+
+  const toggleGroup = useCallback((roomId: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(roomId)) next.delete(roomId);
+      else next.add(roomId);
+      return next;
+    });
+  }, []);

  // Escape closes the panel (parity with the app's other overlays/drawers).
  useEffect(() => {
@@ -182,14 +323,69 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
  };

  const query = filter.trim().toLowerCase();
-  const filtered: Bookmark[] =
-    query.length === 0
-      ? bookmarks
-      : bookmarks.filter(
-          (bk) =>
-            bk.previewText.toLowerCase().includes(query) ||
-            bk.roomName.toLowerCase().includes(query),
-        );
+  const filtered: Bookmark[] = useMemo(
+    () =>
+      query.length === 0
+        ? bookmarks
+        : bookmarks.filter(
+            (bk) =>
+              bk.previewText.toLowerCase().includes(query) ||
+              bk.roomName.toLowerCase().includes(query) ||
+              (bk.senderName?.toLowerCase().includes(query) ?? false),
+          ),
+    [bookmarks, query],
+  );
+
+  // Prune collapsed roomIds that no longer have any bookmark, so a room re-saved
+  // later doesn't reappear pre-collapsed and the Set can't grow unbounded.
+  useEffect(() => {
+    setCollapsed((prev) => {
+      if (prev.size === 0) return prev;
+      const live = new Set(bookmarks.map((bk) => bk.roomId));
+      let changed = false;
+      const next = new Set<string>();
+      prev.forEach((roomId) => {
+        if (live.has(roomId)) next.add(roomId);
+        else changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [bookmarks]);
+
+  // Live render when the room is joined (useRoomEvent needs a non-null Room);
+  // otherwise fall back to the stored snapshot for rooms we've left. Shared by
+  // both the flat (newest/oldest) and grouped (by room) render paths.
+  const renderItem = useCallback(
+    (bk: Bookmark) => {
+      const room = mx.getRoom(bk.roomId);
+      return room ? (
+        <LiveBookmarkItem
+          key={bk.eventId}
+          room={room}
+          bookmark={bk}
+          onJump={handleJump}
+          onRemove={removeBookmark}
+        />
+      ) : (
+        <BookmarkItem
+          key={bk.eventId}
+          bookmark={bk}
+          onJump={handleJump}
+          onRemove={removeBookmark}
+        />
+      );
+    },
+    [mx, handleJump, removeBookmark],
+  );
+
+  const sortedItems = useMemo(
+    () => (sort === 'room' ? filtered : sortBookmarks(filtered, sort)),
+    [filtered, sort],
+  );
+  const groups = useMemo(
+    () => (sort === 'room' ? groupBookmarksByRoom(filtered) : []),
+    [filtered, sort],
+  );

  return (
    <Box
@@ -237,11 +433,23 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
          }
        />
        {bookmarks.length > 0 && (
-          <Text size="T200" priority="300">
-            {filtered.length === bookmarks.length
-              ? `${bookmarks.length} saved message${bookmarks.length !== 1 ? 's' : ''}`
-              : `${filtered.length} of ${bookmarks.length} messages`}
-          </Text>
+          <>
+            <Text size="T200" priority="300" truncate>
+              {filtered.length === bookmarks.length
+                ? `${bookmarks.length} saved message${bookmarks.length !== 1 ? 's' : ''}`
+                : `${filtered.length} of ${bookmarks.length} messages`}
+            </Text>
+            <Box as="div" role="group" aria-label="Sort saved messages" gap="100">
+              {SORT_OPTIONS.map((opt) => (
+                <SortButton
+                  key={opt.value}
+                  label={opt.label}
+                  active={sort === opt.value}
+                  onClick={() => setSort(opt.value)}
+                />
+              ))}
+            </Box>
+          </>
        )}
      </Box>

@@ -265,27 +473,29 @@ export function BookmarksPanel({ onClose }: BookmarksPanelProps) {
            </Box>
          ) : (
            <Box className={css.BookmarksContent} direction="Column" gap="200">
-              {filtered.map((bk) => {
-                // Live render when the room is joined (useRoomEvent needs a non-null Room);
-                // otherwise fall back to the stored snapshot for rooms we've left.
-                const room = mx.getRoom(bk.roomId);
-                return room ? (
-                  <LiveBookmarkItem
-                    key={bk.eventId}
-                    room={room}
-                    bookmark={bk}
-                    onJump={handleJump}
-                    onRemove={removeBookmark}
-                  />
-                ) : (
-                  <BookmarkItem
-                    key={bk.eventId}
-                    bookmark={bk}
-                    onJump={handleJump}
-                    onRemove={removeBookmark}
-                  />
-                );
-              })}
+              {sort === 'room'
+                ? groups.map((group) => {
+                    const isCollapsed = collapsed.has(group.roomId);
+                    const contentId = `bookmark-group-${group.roomId}`;
+                    return (
+                      <Box key={group.roomId} direction="Column" gap="200">
+                        <RoomGroupHeader
+                          roomId={group.roomId}
+                          roomName={group.roomName}
+                          count={group.items.length}
+                          collapsed={isCollapsed}
+                          contentId={contentId}
+                          onToggle={() => toggleGroup(group.roomId)}
+                        />
+                        {!isCollapsed && (
+                          <Box id={contentId} direction="Column" gap="200">
+                            {group.items.map((bk) => renderItem(bk))}
+                          </Box>
+                        )}
+                      </Box>
+                    );
+                  })
+                : sortedItems.map((bk) => renderItem(bk))}
            </Box>
          )}
        </Scroll>
@@ -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,11 +32,12 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
          fill="Soft"
          radii="300"
          size="300"
+          className={MobileTouchTarget}
          onClick={toggleMic}
          outlined
          disabled={disabled || loading}
          aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
-          aria-pressed={!enabled}
+          aria-pressed={enabled}
        >
          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
        </IconButton>
@@ -66,8 +68,10 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
          fill="Soft"
          radii="300"
          size="300"
+          className={MobileTouchTarget}
          onClick={() => onToggle()}
-          aria-label={enabled ? 'Undeafen' : 'Deafen'}
+          aria-label={enabled ? 'Deafen' : 'Undeafen'}
+          aria-pressed={enabled}
          outlined
          disabled={disabled}
        >
@@ -107,8 +111,10 @@ 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}
          outlined
          disabled={disabled || loading}
        >
@@ -145,8 +151,10 @@ 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}
          outlined
          disabled={disabled}
        >
@@ -20,8 +20,8 @@ import FocusTrap from 'focus-trap-react';
 import { Room } from 'matrix-js-sdk';
 import * as css from './styles.css';
 import { stopPropagation } from '../../utils/keyboard';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberAvatarMxc, getMemberName } from '../../utils/room';
+import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { UserAvatar } from '../../components/user-avatar';
@@ -45,93 +45,97 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
  };

  return (
-    <PopOut
-      anchor={cords}
-      position="Top"
-      align="Start"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => setCords(undefined),
-            clickOutsideDeactivates: true,
-            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu
-            style={{
-              maxHeight: '75vh',
-              maxWidth: toRem(300),
-              display: 'flex',
+    <>
+      <span className={css.SrOnly} role="status" aria-live="polite" aria-atomic="true">
+        {`${count} in call`}
+      </span>
+      <PopOut
+        anchor={cords}
+        position="Top"
+        align="Start"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
            }}
          >
-            <Box grow="Yes">
-              <Scroll size="0" hideTrack visibility="Hover">
-                <Box direction="Column" style={{ padding: config.space.S100 }}>
-                  {members.map((callMember) => {
-                    const userId = callMember.sender;
-                    if (!userId) return null;
-                    const name =
-                      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-                    const avatarMxc = getMemberAvatarMxc(room, userId);
-                    const avatarUrl = avatarMxc
-                      ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
-                      : undefined;
+            <Menu
+              style={{
+                maxHeight: '75vh',
+                maxWidth: toRem(300),
+                display: 'flex',
+              }}
+            >
+              <Box grow="Yes">
+                <Scroll size="0" hideTrack visibility="Hover">
+                  <Box direction="Column" style={{ padding: config.space.S100 }}>
+                    {members.map((callMember) => {
+                      const userId = callMember.sender;
+                      if (!userId) return null;
+                      const name = getMemberName(room, userId);
+                      const avatarMxc = getMemberAvatarMxc(room, userId);
+                      const avatarUrl = avatarMxc
+                        ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
+                        : undefined;

-                    return (
-                      <MenuItem
-                        key={callMember.memberId}
-                        size="400"
-                        variant="Surface"
-                        radii="300"
-                        style={{ paddingLeft: config.space.S200 }}
-                        onClick={(evt) =>
-                          openUserProfile(
-                            room.roomId,
-                            undefined,
-                            userId,
-                            getMouseEventCords(evt.nativeEvent),
-                            'Right',
-                          )
-                        }
-                        before={
-                          <Avatar size="200" radii="400">
-                            <UserAvatar
-                              userId={userId}
-                              src={avatarUrl}
-                              alt={name}
-                              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                            />
-                          </Avatar>
-                        }
-                      >
-                        <Text size="T300" truncate>
-                          {name}
-                        </Text>
-                      </MenuItem>
-                    );
-                  })}
-                </Box>
-              </Scroll>
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Chip
-        variant="Surface"
-        fill="Soft"
-        before={<Badge variant="Critical" fill="Solid" size="200" />}
-        after={<Icon size="50" src={cords ? Icons.ChevronBottom : Icons.ChevronTop} />}
-        radii="Pill"
-        onClick={handleOpenMenu}
+                      return (
+                        <MenuItem
+                          key={callMember.memberId}
+                          size="400"
+                          variant="Surface"
+                          radii="300"
+                          style={{ paddingLeft: config.space.S200 }}
+                          onClick={(evt) =>
+                            openUserProfile(
+                              room.roomId,
+                              undefined,
+                              userId,
+                              getMouseEventCords(evt.nativeEvent),
+                              'Right',
+                            )
+                          }
+                          before={
+                            <Avatar size="200" radii="400">
+                              <UserAvatar
+                                userId={userId}
+                                src={avatarUrl}
+                                alt={name}
+                                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                              />
+                            </Avatar>
+                          }
+                        >
+                          <Text size="T300" truncate>
+                            {name}
+                          </Text>
+                        </MenuItem>
+                      );
+                    })}
+                  </Box>
+                </Scroll>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
      >
-        <Text className={css.LiveChipText} as="span" size="L400" truncate>
-          {count} Live
-        </Text>
-      </Chip>
-    </PopOut>
+        <Chip
+          variant="Surface"
+          fill="Soft"
+          before={<Badge variant="Critical" fill="Solid" size="200" />}
+          after={<Icon size="50" src={cords ? Icons.ChevronBottom : Icons.ChevronTop} />}
+          radii="Pill"
+          onClick={handleOpenMenu}
+        >
+          <Text className={css.LiveChipText} as="span" size="L400" truncate>
+            {count} Live
+          </Text>
+        </Chip>
+      </PopOut>
+    </>
  );
 }
@@ -4,8 +4,8 @@ import React, { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Room } from 'matrix-js-sdk';
 import { UserAvatar } from '../../components/user-avatar';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { getMemberAvatarMxc, getMemberName } from '../../utils/room';
+import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { StackedAvatar } from '../../components/stacked-avatar';
@@ -128,7 +128,7 @@ export function MemberGlance({ room, members, speakers, callEmbed, max = 6 }: Me
        {visibleMembers.map((callMember) => {
          const { userId } = callMember;
          if (!userId) return null;
-          const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+          const name = getMemberName(room, userId);
          const avatarMxc = getMemberAvatarMxc(room, userId);
          const avatarUrl = avatarMxc
            ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
@@ -1,17 +1,14 @@
 import { Room } from 'matrix-js-sdk';
 import React from 'react';
 import { Box, Icon, Icons, Text } from 'folds';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMemberName } from '../../utils/room';

 type MemberSpeakingProps = {
  room: Room;
  speakers: Set<string>;
 };
 export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
-  const speakingNames = Array.from(speakers).map(
-    (userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId,
-  );
+  const speakingNames = Array.from(speakers).map((userId) => getMemberName(room, userId));
  return (
    <Box alignItems="Center" gap="100">
      <Icon size="100" src={Icons.Mic} filled />
@@ -5,6 +5,18 @@ export const LiveChipText = style({
  color: color.Critical.Main,
 });

+export const SrOnly = style({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});
+
 export const CallStatus = style([
  {
    padding: `${toRem(6)} ${config.space.S200}`,
@@ -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">
@@ -5,9 +5,9 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { SequenceCard } from '../../components/sequence-card';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
+import { getMemberAvatarMxc, getMemberName } from '../../utils/room';
 import { useRoom } from '../../hooks/useRoom';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { mxcUrlToHttp } from '../../utils/matrix';
 import { UserAvatar } from '../../components/user-avatar';
 import { AvatarDecoration } from '../../components/avatar-decoration/AvatarDecoration';
 import { getMouseEventCords } from '../../utils/dom';
@@ -26,7 +26,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
  const { userId } = member;
  if (!userId) return null;

-  const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const name = getMemberName(room, userId);
  const avatarMxc = getMemberAvatarMxc(room, userId);
  const avatarUrl = avatarMxc
    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined)
@@ -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"
@@ -196,7 +214,8 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
                                  aria-label={`Play ${clip.name}`}
                                  style={{
                                    width: toRem(76),
-                                    height: toRem(76),
+                                    minHeight: toRem(76),
+                                    height: 'auto',
                                    padding: config.space.S100,
                                    borderRadius: config.radii.R400,
                                    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
@@ -215,7 +234,19 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
                                      clip.emoji || '🔊'
                                    )}
                                  </Text>
-                                  <Text size="T200" truncate style={{ maxWidth: '100%' }}>
+                                  <Text
+                                    size="T200"
+                                    style={{
+                                      maxWidth: '100%',
+                                      textAlign: 'center',
+                                      wordBreak: 'break-word',
+                                      lineHeight: 1.15,
+                                      display: '-webkit-box',
+                                      WebkitLineClamp: 3,
+                                      WebkitBoxOrient: 'vertical',
+                                      overflow: 'hidden',
+                                    }}
+                                  >
                                    {clip.name}
                                  </Text>
                                </Box>
@@ -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}
@@ -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;
@@ -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],
@@ -35,6 +35,7 @@ import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { suffixRename } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
@@ -57,7 +58,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
            display_name: name,
          },
        };
-        await mx.sendStateEvent(roomId, StateEvent.PoniesRoomEmotes as any, content, stateKey);
+        await sendStateEvent(mx, roomId, StateEvent.PoniesRoomEmotes, content, stateKey);
      },
      [mx, roomId],
    ),
@@ -164,7 +165,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
      for (let i = 0; i < removedPacks.length; i += 1) {
        const addr = removedPacks[i];
        // eslint-disable-next-line no-await-in-loop
-        await mx.sendStateEvent(room.roomId, StateEvent.PoniesRoomEmotes as any, {}, addr.stateKey);
+        await sendStateEvent(mx, room.roomId, StateEvent.PoniesRoomEmotes, {}, addr.stateKey);
      }
    }, [mx, room, removedPacks]),
  );
@@ -23,6 +23,7 @@ import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoom } from '../../../hooks/useRoom';
 import { useStateEvent } from '../../../hooks/useStateEvent';
@@ -48,7 +49,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {

  const [enableState, enable] = useAsyncCallback(
    useCallback(async () => {
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomEncryption as any, {
+      await sendStateEvent(mx, room.roomId, StateEvent.RoomEncryption, {
        algorithm: ROOM_ENC_ALGO,
      });
    }, [mx, room.roomId]),
@@ -21,6 +21,7 @@ import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
@@ -76,7 +77,7 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
        const content: RoomHistoryVisibilityEventContent = {
          history_visibility: visibility,
        };
-        await mx.sendStateEvent(room.roomId, StateEvent.RoomHistoryVisibility as any, content);
+        await sendStateEvent(mx, room.roomId, StateEvent.RoomHistoryVisibility, content);
      },
      [mx, room.roomId],
    ),
@@ -18,7 +18,7 @@ import { StateEvent } from '../../../../types/matrix/room';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getStateEvents } from '../../../utils/room';
+import { getStateEvents, sendStateEvent } from '../../../utils/room';
 import {
  useRecursiveChildSpaceScopeFactory,
  useSpaceChildren,
@@ -111,7 +111,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
          join_rule: joinRule as JoinRule,
        };
        if (allow.length > 0) c.allow = allow;
-        await mx.sendStateEvent(room.roomId, StateEvent.RoomJoinRules as any, c);
+        await sendStateEvent(mx, room.roomId, StateEvent.RoomJoinRules, c);
      },
      [mx, room, space, subspaces, roomIdToParents],
    ),
@@ -39,6 +39,7 @@ import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useObjectURL } from '../../../hooks/useObjectURL';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
@@ -122,7 +123,9 @@ export function RoomProfileEdit({
  const [emojiAnchor, setEmojiAnchor] = useState<RectCords>();

  const handleEmojiSelect = useCallback((unicode: string) => {
-    setNameValue((prev) => unicode + prev);
+    // Clamp to the same cap as the input's maxLength — programmatic setState isn't
+    // constrained by the DOM maxLength, so the picker could otherwise exceed it.
+    setNameValue((prev) => (unicode + prev).slice(0, 255));
    setEmojiAnchor(undefined);
  }, []);

@@ -150,16 +153,16 @@ export function RoomProfileEdit({
    useCallback(
      async (roomAvatarMxc?: string | null, roomName?: string, roomTopic?: string) => {
        if (roomAvatarMxc !== undefined) {
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomAvatar as any, {
+          await sendStateEvent(mx, room.roomId, StateEvent.RoomAvatar, {
            url: roomAvatarMxc,
          });
        }
        if (roomName !== undefined) {
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomName as any, { name: roomName });
+          await sendStateEvent(mx, room.roomId, StateEvent.RoomName, { name: roomName });
        }
        if (roomTopic !== undefined) {
          const topicContent = buildTopicContent(roomTopic);
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomTopic as any, topicContent);
+          await sendStateEvent(mx, room.roomId, StateEvent.RoomTopic, topicContent);
        }
      },
      [mx, room.roomId],
@@ -309,6 +312,7 @@ export function RoomProfileEdit({
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNameValue(e.target.value)}
              variant="Secondary"
              radii="300"
+              maxLength={255}
              readOnly={!canEditName || submitting}
              style={{ width: '100%' }}
            />
@@ -7,6 +7,7 @@ import { SettingsSelect } from '../../../components/settings-select/SettingsSele
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -54,8 +55,7 @@ export function RoomQuality({ permissions }: RoomQualityProps) {
  const [submitState, submit] = useAsyncCallback(
    useCallback(
      async (next: RoomQualityContent) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        await mx.sendStateEvent(room.roomId, StateEvent.LotusRoomQuality as any, next);
+        await sendStateEvent(mx, room.roomId, StateEvent.LotusRoomQuality, next);
      },
      [mx, room.roomId],
    ),
@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import { Box, Button, color, Spinner, Text } from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { RetentionContent, RETENTION_PRESETS } from '../../../utils/retention';
+
+type RoomRetentionProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomRetention({ permissions }: RoomRetentionProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEdit = permissions.stateEvent(StateEvent.RoomRetention, mx.getSafeUserId());
+
+  const event = useStateEvent(room, StateEvent.RoomRetention);
+  const currentMs = event?.getContent<RetentionContent>().max_lifetime ?? 0;
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (ms: number) => {
+        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).
+        await sendStateEvent(mx, room.roomId, StateEvent.RoomRetention, content);
+      },
+      [mx, room.roomId],
+    ),
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Message Retention"
+        description="Messages older than this window disappear from the timeline. Each member can opt in to permanently delete their own expired messages in Settings → General; full server-side deletion also requires homeserver retention to be configured."
+      >
+        <Box gap="200" alignItems="Center" style={{ flexWrap: 'wrap' }}>
+          {RETENTION_PRESETS.map((preset) => {
+            const active = currentMs === preset.ms;
+            return (
+              <Button
+                key={preset.label}
+                type="button"
+                size="300"
+                variant={active ? 'Primary' : 'Secondary'}
+                fill={active ? 'Solid' : 'Soft'}
+                radii="300"
+                disabled={!canEdit || submitting}
+                onClick={() => submit(preset.ms)}
+              >
+                <Text size="B300">{preset.label}</Text>
+              </Button>
+            );
+          })}
+          {submitting && <Spinner size="100" variant="Secondary" />}
+        </Box>
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}
@@ -7,6 +7,7 @@ import { SettingTile } from '../../../components/setting-tile';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
@@ -31,7 +32,7 @@ export function RoomVoiceLimit({ permissions }: RoomVoiceLimitProps) {
    useCallback(
      async (value: number) => {
        const content: VoiceLimitContent = value > 0 ? { max_users: value } : {};
-        await mx.sendStateEvent(room.roomId, StateEvent.LotusVoiceLimit as any, content);
+        await sendStateEvent(mx, room.roomId, StateEvent.LotusVoiceLimit, content);
      },
      [mx, room.roomId],
    ),
@@ -5,6 +5,7 @@ export * from './RoomJoinRules';
 export * from './RoomProfile';
 export * from './RoomPublish';
 export * from './RoomQuality';
+export * from './RoomRetention';
 export * from './RoomShareInvite';
 export * from './RoomUpgrade';
 export * from './RoomVoiceLimit';
@@ -15,6 +15,7 @@ import { getPowerLevelTag, getPowers, usePowerLevelTags } from '../../../hooks/u
 import { useRoom } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { PowerSwitcher } from '../../../components/power';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
@@ -84,7 +85,7 @@ export function PermissionGroups({

        return draftPowerLevels;
      });
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
+      await sendStateEvent(mx, room.roomId, StateEvent.RoomPowerLevels, editedPowerLevels);
    }, [mx, room, powerLevels, permissionUpdate, permissionGroups]),
  );

@@ -45,6 +45,7 @@ import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { MemberPowerTag, MemberPowerTagIcon, StateEvent } from '../../../../types/matrix/room';
+import { sendStateEvent } from '../../../utils/room';
 import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
@@ -118,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">
@@ -335,7 +336,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
      deleted.forEach((power) => {
        delete content[power];
      });
-      await mx.sendStateEvent(room.roomId, StateEvent.PowerLevelTags as any, content);
+      await sendStateEvent(mx, room.roomId, StateEvent.PowerLevelTags, content);
    }, [mx, room, powerLevelTags, editedPowerTags, deleted]),
  );

@@ -1,7 +1,7 @@
 import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds';
 import React, { FormEventHandler, useCallback, useState } from 'react';
 import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from 'matrix-js-sdk';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import { addRoomIdToMDirect, isUserId } from '../../utils/matrix';
@@ -102,7 +102,9 @@ export function CreateRoomForm({
  const [emojiAnchor, setEmojiAnchor] = useState<RectCords>();

  const handleEmojiSelect = useCallback((unicode: string) => {
-    setNameValue((prev) => unicode + prev);
+    // Clamp to the same cap as the input's maxLength — programmatic setState isn't
+    // constrained by the DOM maxLength, so the picker could otherwise exceed it.
+    setNameValue((prev) => (unicode + prev).slice(0, 255));
    setEmojiAnchor(undefined);
  }, []);

@@ -240,6 +242,7 @@ export function CreateRoomForm({
              disabled={disabled}
              value={nameValue}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNameValue(e.target.value)}
+              maxLength={255}
              style={{ width: '100%' }}
            />
          </Box>
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
+import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import { RoomCard } from '../../components/room-card';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
@@ -32,51 +32,68 @@ export function JoinBeforeNavigate({

  return (
    <Page>
-      <PageHeader balance>
-        <Box grow="Yes" gap="200">
-          <Box shrink="No">
-            {screenSize === ScreenSize.Mobile && (
-              <BackRouteHandler>
-                {(onBack) => (
-                  <IconButton onClick={onBack} aria-label="Back">
-                    <Icon src={Icons.ArrowLeft} />
-                  </IconButton>
-                )}
-              </BackRouteHandler>
-            )}
-          </Box>
-          <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
-            <Text size="H3" truncate>
-              {roomIdOrAlias}
-            </Text>
-          </Box>
-        </Box>
-      </PageHeader>
-      <Box grow="Yes">
-        <Scroll hideTrack visibility="Hover" size="0">
-          <Box style={{ height: '100%' }} grow="Yes" alignItems="Center" justifyContent="Center">
-            <RoomSummaryLoader roomIdOrAlias={roomIdOrAlias}>
-              {(summary) => (
-                <RoomCard
-                  style={{ maxWidth: toRem(364), width: '100%' }}
-                  roomIdOrAlias={roomIdOrAlias}
-                  allRooms={allRooms}
-                  avatarUrl={summary?.avatar_url}
-                  name={summary?.name}
-                  topic={summary?.topic}
-                  memberCount={summary?.num_joined_members}
-                  roomType={summary?.room_type}
-                  viaServers={viaServers}
-                  renderTopicViewer={(name, topic, requestClose) => (
-                    <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
+      <RoomSummaryLoader roomIdOrAlias={roomIdOrAlias} via={viaServers}>
+        {(summary, state) => (
+          <>
+            <PageHeader balance>
+              <Box grow="Yes" gap="200">
+                <Box shrink="No">
+                  {screenSize === ScreenSize.Mobile && (
+                    <BackRouteHandler>
+                      {(onBack) => (
+                        <IconButton onClick={onBack} aria-label="Back">
+                          <Icon src={Icons.ArrowLeft} />
+                        </IconButton>
+                      )}
+                    </BackRouteHandler>
                  )}
-                  onView={handleView}
-                />
-              )}
-            </RoomSummaryLoader>
-          </Box>
-        </Scroll>
-      </Box>
+                </Box>
+                <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+                  <Text size="H3" truncate>
+                    {summary?.name || summary?.canonical_alias || roomIdOrAlias}
+                  </Text>
+                </Box>
+              </Box>
+            </PageHeader>
+            <Box grow="Yes">
+              <Scroll hideTrack visibility="Hover" size="0">
+                <Box
+                  style={{ height: '100%' }}
+                  grow="Yes"
+                  alignItems="Center"
+                  justifyContent="Center"
+                >
+                  {state.loading && !summary ? (
+                    <Spinner size="600" variant="Secondary" />
+                  ) : (
+                    <RoomCard
+                      hero
+                      style={{ maxWidth: toRem(420), width: '100%' }}
+                      roomIdOrAlias={roomIdOrAlias}
+                      allRooms={allRooms}
+                      avatarUrl={summary?.avatar_url}
+                      name={summary?.name}
+                      canonicalAlias={summary?.canonical_alias}
+                      topic={summary?.topic}
+                      memberCount={summary?.num_joined_members}
+                      roomType={summary?.room_type}
+                      joinRule={summary?.join_rule}
+                      encrypted={!!summary?.['im.nheko.summary.encryption']}
+                      worldReadable={summary?.world_readable}
+                      membership={summary?.membership}
+                      viaServers={viaServers}
+                      renderTopicViewer={(name, topic, requestClose) => (
+                        <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
+                      )}
+                      onView={handleView}
+                    />
+                  )}
+                </Box>
+              </Scroll>
+            </Box>
+          </>
+        )}
+      </RoomSummaryLoader>
    </Page>
  );
 }
@@ -18,6 +18,7 @@ import {
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
+import { sendStateEvent } from '../../utils/room';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -48,7 +49,7 @@ function SuggestMenuItem({
  const [toggleState, handleToggleSuggested] = useAsyncCallback(
    useCallback(() => {
      const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
-      return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
+      return sendStateEvent(mx, parentId, StateEvent.SpaceChild, newContent, roomId);
    }, [mx, parentId, roomId, content]),
  );

@@ -85,7 +86,7 @@ function RemoveMenuItem({

  const [removeState, handleRemove] = useAsyncCallback(
    useCallback(
-      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, {}, roomId),
+      () => sendStateEvent(mx, parentId, StateEvent.SpaceChild, {}, roomId),
      [mx, parentId, roomId],
    ),
  );
@@ -2,7 +2,7 @@ import React, { MouseEventHandler, useCallback, useMemo, useRef, useState } from
 import { Box, Chip, Icon, IconButton, Icons, Line, Scroll, Spinner, Text, config } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
@@ -36,11 +36,12 @@ import { useCategoryHandler } from '../../hooks/useCategoryHandler';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { getCanonicalAliasOrRoomId, rateLimitedActions } from '../../utils/matrix';
-import { getSpaceRoomPath } from '../../pages/pathUtils';
+import { getSpaceRoomPath, withSearchParam } from '../../pages/pathUtils';
 import { StateEvent } from '../../../types/matrix/room';
 import { CanDropCallback, useDnDMonitor } from './DnD';
 import { ASCIILexicalTable, orderKeys } from '../../utils/ASCIILexicalTable';
-import { getStateEvent } from '../../utils/room';
+import { getStateEvent, sendStateEvent } from '../../utils/room';
+import { setAccountData } from '../../utils/accountData';
 import { useClosedLobbyCategoriesAtom } from '../../state/hooks/closedLobbyCategories';
 import {
  makeCinnySpacesContent,
@@ -271,9 +272,10 @@ export function Lobby() {
        if (reorders) {
          await rateLimitedActions(reorders, async (reorder) => {
            if (!reorder.item.parentId) return;
-            await mx.sendStateEvent(
+            await sendStateEvent(
+              mx,
              reorder.item.parentId,
-              StateEvent.SpaceChild as any,
+              StateEvent.SpaceChild,
              { ...reorder.item.content, order: reorder.orderKey },
              reorder.item.roomId,
            );
@@ -298,7 +300,7 @@ export function Lobby() {

        // remove from current space
        if (item.parentId !== containerParentId) {
-          mx.sendStateEvent(item.parentId, StateEvent.SpaceChild as any, {}, item.roomId);
+          sendStateEvent(mx, item.parentId, StateEvent.SpaceChild, {}, item.roomId);
        }

        if (
@@ -318,7 +320,7 @@ export function Lobby() {
              joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ??
              [];
            allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
-            mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules as any, {
+            sendStateEvent(mx, itemRoom.roomId, StateEvent.RoomJoinRules, {
              ...joinRuleContent,
              allow,
            });
@@ -358,9 +360,10 @@ export function Lobby() {

        if (reorders) {
          await rateLimitedActions(reorders, async (reorder) => {
-            await mx.sendStateEvent(
+            await sendStateEvent(
+              mx,
              containerParentId,
-              StateEvent.SpaceChild as any,
+              StateEvent.SpaceChild,
              { ...reorder.item.content, order: reorder.orderKey },
              reorder.item.roomId,
            );
@@ -411,8 +414,13 @@ export function Lobby() {
  const handleOpenRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
    const rId = evt.currentTarget.getAttribute('data-room-id');
    if (!rId) return;
+    // Preview chips carry the room's resident servers so getRoomSummary can
+    // resolve a room the homeserver isn't already in (else the preview is sparse).
+    const via = evt.currentTarget.getAttribute('data-via');
    const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
-    navigate(getSpaceRoomPath(pSpaceIdOrAlias, getCanonicalAliasOrRoomId(mx, rId)));
+    let path = getSpaceRoomPath(pSpaceIdOrAlias, getCanonicalAliasOrRoomId(mx, rId));
+    if (via) path = withSearchParam(path, { viaServers: via });
+    navigate(path);
  };

  const togglePinToSidebar = useCallback(
@@ -422,7 +430,7 @@ export function Lobby() {
        newItems.push(rId);
      }
      const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      mx.setAccountData(AccountDataEvent.CinnySpaces as any, newSpacesContent as any);
+      setAccountData(mx, AccountDataEvent.CinnySpaces, newSpacesContent);
    },
    [mx, sidebarItems, sidebarSpaces],
  );
@@ -97,6 +97,34 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
  );
 }

+// Open the full preview page (JoinBeforeNavigate) for an un-joined room. onOpen
+// reads data-room-id and navigates to the space→room path, which — because the
+// room isn't joined — renders the preview card instead of the timeline.
+function RoomPreviewChip({
+  roomId,
+  via,
+  onOpen,
+}: {
+  roomId: string;
+  via?: string[];
+  onOpen: MouseEventHandler<HTMLButtonElement>;
+}) {
+  return (
+    <Chip
+      data-room-id={roomId}
+      data-via={via && via.length > 0 ? via.join(',') : undefined}
+      onClick={onOpen}
+      variant="Secondary"
+      fill="None"
+      size="400"
+      radii="Pill"
+      aria-label="Preview room"
+    >
+      <Icon size="50" src={Icons.Eye} />
+    </Chip>
+  );
+}
+
 function RoomProfileLoading() {
  return (
    <Box grow="Yes" gap="300">
@@ -365,7 +393,10 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                        </Chip>
                      </Box>
                    ) : (
-                      <RoomJoinButton roomId={roomId} via={content.via} />
+                      <Box shrink="No" gap="100" alignItems="Center">
+                        <RoomPreviewChip roomId={roomId} via={content.via} onOpen={onOpen} />
+                        <RoomJoinButton roomId={roomId} via={content.via} />
+                      </Box>
                    )
                  }
                />
@@ -409,7 +440,12 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                  memberCount={summary.num_joined_members}
                  suggested={content.suggested}
                  joinRule={summary.join_rule}
-                  options={<RoomJoinButton roomId={roomId} via={content.via} />}
+                  options={
+                    <Box shrink="No" gap="100" alignItems="Center">
+                      <RoomPreviewChip roomId={roomId} via={content.via} onOpen={onOpen} />
+                      <RoomJoinButton roomId={roomId} via={content.via} />
+                    </Box>
+                  }
                />
              )}
            </>
@@ -17,7 +17,7 @@ import {
 import { useAtom, useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { EventTimeline, EventType, Room, SearchOrderBy } from 'matrix-js-sdk';
 import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
@@ -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,
@@ -643,18 +646,7 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
        variant={hasRange ? 'Primary' : 'SurfaceVariant'}
        radii="Pill"
        before={<Icon size="100" src={Icons.RecentClock} />}
-        after={
-          hasRange ? (
-            <Icon
-              size="50"
-              src={Icons.Cross}
-              onClick={(e) => {
-                e.stopPropagation();
-                onChange(undefined, undefined);
-              }}
-            />
-          ) : undefined
-        }
+        after={hasRange ? <Icon size="50" src={Icons.Cross} /> : undefined}
        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
          setMenuAnchor(e.currentTarget.getBoundingClientRect())
        }
@@ -795,18 +787,7 @@ export function SearchFilters({
          radii="Pill"
          aria-pressed={!!containsUrl}
          before={<Icon size="100" src={Icons.Link} />}
-          after={
-            containsUrl ? (
-              <Icon
-                size="50"
-                src={Icons.Cross}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onContainsUrlChange(undefined);
-                }}
-              />
-            ) : undefined
-          }
+          after={containsUrl ? <Icon size="50" src={Icons.Cross} /> : undefined}
          onClick={() => onContainsUrlChange(containsUrl ? undefined : true)}
        >
          <Text size="T200">Has link</Text>
@@ -821,18 +802,7 @@ export function SearchFilters({
              radii="Pill"
              aria-pressed={active}
              before={<Icon size="100" src={icon} />}
-              after={
-                active ? (
-                  <Icon
-                    size="50"
-                    src={Icons.Cross}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onToggleMsgTypeFilter(msgType);
-                    }}
-                  />
-                ) : undefined
-              }
+              after={active ? <Icon size="50" src={Icons.Cross} /> : undefined}
              onClick={() => onToggleMsgTypeFilter(msgType)}
            >
              <Text size="T200">{label}</Text>
@@ -845,18 +815,7 @@ export function SearchFilters({
          radii="Pill"
          aria-pressed={pinnedOnly}
          before={<Icon size="100" src={Icons.Pin} />}
-          after={
-            pinnedOnly ? (
-              <Icon
-                size="50"
-                src={Icons.Cross}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTogglePinnedOnly();
-                }}
-              />
-            ) : undefined
-          }
+          after={pinnedOnly ? <Icon size="50" src={Icons.Cross} /> : undefined}
          onClick={onTogglePinnedOnly}
        >
          <Text size="T200">Pinned</Text>
@@ -12,7 +12,7 @@ import {
  makeMentionCustomProps,
  renderMatrixMention,
 } from '../../plugins/react-custom-html-parser';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
 import {
@@ -31,7 +31,7 @@ import { Image } from '../../components/media';
 import { ImageViewer } from '../../components/image-viewer';
 import * as customHtmlCss from '../../styles/CustomHtml.css';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
+import { getMemberAvatarMxc, getMemberName, getRoomAvatarUrl } from '../../utils/room';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 import { UserAvatar } from '../../components/user-avatar';
@@ -220,10 +220,7 @@ export function SearchResultGroup({
        {items.map((item) => {
          const { event } = item;

-          const displayName =
-            getMemberDisplayName(room, event.sender) ??
-            getMxIdLocalPart(event.sender) ??
-            event.sender;
+          const displayName = getMemberName(room, event.sender);
          const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);

          const relation = event.content['m.relates_to'];
@@ -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: {} },
          });
--- a/Show More
+++ b/Show More