call: lint/format cleanup for lotus EC wiring

Resolve the eslint/prettier failures from the previous commit (non-blocking
in CI, but real): drop the banned `void` operator on fire-and-forget
transport.send().catch() calls, prefix the now-unused _denoiseNativeNS
param, and run prettier on the touched files.

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

.env.production

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

.gitea/workflows/ci.yml

@@ -21,14 +21,30 @@ jobs:
           cache: npm
 
       - name: Install dependencies
-        run: npm ci
+        # Harden against transient registry network failures (ECONNRESET etc.):
+        # raise npm's built-in fetch retries/timeouts and retry `npm ci` up to
+        # 3 times with backoff before failing the build.
+        run: |
+          npm config set fetch-retries 5
+          npm config set fetch-retry-mintimeout 20000
+          npm config set fetch-retry-maxtimeout 120000
+          npm config set fetch-timeout 600000
+          for attempt in 1 2 3; do
+            echo "npm ci attempt $attempt…"
+            npm ci && break
+            if [ "$attempt" = "3" ]; then
+              echo "npm ci failed after 3 attempts" >&2
+              exit 1
+            fi
+            echo "npm ci failed; retrying in $((attempt * 15))s…" >&2
+            sleep $((attempt * 15))
+          done
 
       # ── Critical gate — if this fails, nothing deploys ──────────────────
       - name: Build
         run: npm run build
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           VITE_APP_VERSION: ${{ github.sha }}
 
       # ── Quality checks (informational — pre-existing issues exist) ───────

.npmrc

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

HANDOFF_ELEMENT_CALL_FORK.md

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

LOTUS_BUGS.md

@@ -1,490 +1,114 @@
-# Lotus Chat — Bug Report & Technical Audit
+# Lotus Chat — Open Bugs & Technical Debt
 
-**Date:** June 2026
+**Only OPEN and awaiting-verification items live here.** Resolved findings
+(fixed-and-verified, false-positives, won't-fix) have been removed to keep this
+actionable — the full history is in git. Items fixed in code but not yet
+verified in a real environment are in **Needs Verification** below and have
+step-by-step checks in [`LOTUS_TESTING.md`](./LOTUS_TESTING.md).
 
-This document tracks identified bugs, edge cases, and architectural discrepancies found during the audit of the Lotus Chat codebase. Recommended fixes are provided for each item.
+> Design rules for any fix here: follow the **Native-Cinny Law** and **TDS
+> Design Law** in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
 
 ---
 
-## 🚩 Critical & UI Bugs
+## ⚠️ Needs Verification — fixed in code, awaiting live testing
 
-### 12. PiP Mute Icon Misidentifies Whose Mic Is Muted
+Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
 
-- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with at least one other participant who mutes/unmutes
-- **Issue:** The muted-mic badge in the Picture-in-Picture window used `useRemoteAllMuted` (fires when ANY remote participant is muted) and rendered in the bottom-left corner — the conventional position for "YOUR" mic status. Users read it as their own mic being muted.
-- **Root Cause:** `PipMuteOverlay` was triggering on remote-mute events while displaying in a position that implies local-user status.
-- **Fix Applied:**
-  - **Bottom-left badge** now shows only when the LOCAL user's mic is muted (checked via `!controlState.microphone` from `useCallControlState`). Includes "You" label to make it unambiguous. Uses `color.Critical.Main`.
-  - **Top-right badge** (new) shows "All muted" in `color.Warning.Main` when all remote participants are muted — positioned and labeled so it's clearly about other people, not the local user.
-  - Both badges use `aria-label` / `title` for accessibility.
+| ID   | Item                                                                    | File / area                                          | Test     |
+| :--- | :---------------------------------------------------------------------- | :--------------------------------------------------- | :------- |
+| #2   | Chat-background animation flicker (`contain:paint`)                     | `lotus/chatBackground.ts`                            | F1       |
+| #4   | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live) | `CallEmbedProvider.tsx`, `ringtones.ts`              | A1,A3,A4 |
+| #6   | Background vs. seasonal theme mutual exclusion                          | `state/settings.ts`, `General.tsx`                   | F2       |
+| #7   | Composer toolbar touch targets (≥44px)                                  | `room/RoomInput.tsx`                                 | E1       |
+| #8   | Room Settings horizontal overflow (mobile)                              | `components/page/style.css.ts`                       | E2       |
+| #9   | Modal fullscreen on mobile (`useModalStyle`)                            | 22+ modal files                                      | E3       |
+| #10  | Composer not hidden by keyboard (`100dvh`)                              | `src/index.css`                                      | E4       |
+| #12  | PiP "All muted" badge re-fixed (was firing on any single mute)          | `hooks/useCallSpeakers.ts`                           | G1       |
+| N96  | Call-recovery overlay single "Back" button                              | `call/CallView.tsx`                                  | A7       |
+| N95  | AFK-monitor mic released on mute (OS indicator clears)                  | `hooks/useAfkAutoMute.ts`                            | L1       |
+| N108 | Maskable PWA icons (Android adaptive)                                   | `public/manifest.json` + `res/android/maskable-*`    | L2       |
+| EC   | EC iframe load watchdog + self-heal + recovery UI                       | `plugins/call/CallEmbed.ts`, `CallView.tsx`          | A7       |
+| Gal  | MediaGallery lazy-decrypt (true virtualization deferred)                | `room/MediaGallery.tsx`                              | H1       |
+| a11y | aria-labels: edit-history / reaction / thread / reply                   | `message/*` (`FallbackContent`, `Reaction`, `Reply`) | I        |
+
+**Verified working in live testing (2026-06):** A2, B1–B4, C1, C3, D (mic/camera/deafen/screenshare/fullscreen/more-menu/PiP). Denoise quality in D is still poor — tracked under the denoise project, not a regression.
 
 ---
 
-### 1. No Camera Focus During Screenshare
+## 🧩 Element Call source-level items — now actionable via the fork
 
-- **File:** `cinny/src/app/plugins/call/CallControl.ts`, `cinny/src/app/features/call-status/MemberGlance.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with an active screenshare + a participant on camera
-- **Issue:** Automatic screenshare spotlighting forces primary display override, preventing users from manually focusing on camera feeds.
-- **Root Cause:** Before this feature there was no UI path to manually pick a camera to focus, so EC's auto-spotlight (which prioritizes an active screenshare) always won.
-- **Fix Applied:** `CallControl.focusCameraParticipant(userId)` switches EC to spotlight mode and clicks that participant's `[data-testid="videoTile"]` inside the EC iframe — in Element Call, clicking a tile in spotlight **pins** it, so the user's explicit selection takes precedence over the auto-pinned screenshare. Exposed via a "Focus camera" item in the `MemberGlance` participant menu (avatar → menu). Falls back to a plain spotlight toggle if the tile isn't rendered (e.g. camera off).
-- **Architectural note:** EC owns the grid/spotlight renderer inside its iframe; our control is DOM-level tile clicks. The pin persists until changed, so a one-shot focus is sufficient. A continuously-enforced "sticky" focus that re-pins on every EC spotlight change was deliberately **not** built — it would require fighting EC's internal state on each mutation and risks flicker.
+> 🔱 **[EC-FORK]** **UPDATE 2026-06-29: the fork is live.** We now own and
+> self-build Element Call (`LotusGuild/element-call` →
+> `@lotusguild/element-call-embedded`, Phase 1 done & cinny wired). A5/A6/A7
+> below are **no longer "won't fix"** — they are ordinary source changes. See
+> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md) §10 + the Phase
+> 2 work list. (The iframe is **same-origin** / self-hosted; the old blocker was
+> that we didn't own EC's compiled source — which we now do.)
 
-### 2. Chat Background Animation Flickering
+The in-call participant grid is rendered **inside EC's app**. Previously a
+pre-built npm bundle we could only style/place around; now editable source.
+Items from testing, with their fork-level fix path:
 
-- **File:** `cinny/src/app/features/lotus/chatBackground.ts`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on a real device with an animated background active
-- **Issue:** Animated background properties cause visible flickering on message text and the composer area, particularly on browsers/GPUs susceptible to repaint-induced artifacts.
-- **Root Cause:** Animation triggers excessive repaints or layout recalculations on descendant elements, likely due to animating non-GPU accelerated properties on parent containers without proper rendering context isolation.
-- **Fix Applied:** `getChatBg()` now injects `willChange: 'background-position'` and `contain: 'paint'` for any animated variant. This promotes the element to its own compositor layer and isolates repaints from descendants. Background-position animation is already GPU-hinted on modern browsers; `contain: paint` prevents descendant elements from being invalidated during each frame.
-
-### 3. Avatar Decorations in Element Call
-
-- **File:** `cinny/src/app/features/call/CallMemberCard.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification in a live call with a participant who has a decoration set
-- **Issue:** Avatar decorations are failing to render within the call/room interface member lists.
-- **Root Cause:** Member lists and the people drawer already wrapped avatars in `<AvatarDecoration userId={...}>`, but the call participant tile (`CallMemberCard`) rendered a bare `<UserAvatar>` with no decoration wrapper — so decorations were absent specifically on call tiles. (Note: avatars rendered _inside_ the Element Call iframe are EC-rendered and out of our control; this fix covers our own participant roster / prescreen.)
-- **Fix Applied:** Wrapped the call-tile avatar in `<AvatarDecoration userId={userId}>` (commit `0394fce9`), matching the member-list pattern.
-
-### 4. DM and Group Message Calls
-
-- **File:** `cinny/src/app/components/CallEmbedProvider.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs live-call verification: (a) ring/preview per selected ringtone & volume; (b) the corner banner appearing (with a single ping, not a loop) when a second call arrives while already in a call.
-- **Issue:** Incoming call ringtone is hardcoded, lacks volume control, and is suppressed if the user is already in an active call.
-- **Root Cause:** Ringing logic is tightly coupled to `RTCNotification` events in `CallEmbedProvider.tsx`, using a hardcoded audio file path. It lacks an abstraction for sound management or user-configurable settings for ringtones/volumes.
-- **Fix Applied:**
-  - `ringtoneVolume` setting (0–100, default 70); applied to the ring. Slider in Settings → General → Calls.
-  - **(a) Ringtone selection** (`4a875884`): `ringtoneId` setting (`classic | chime | soft | retro | none`). New `utils/ringtones.ts` synthesizes the three styles in-browser (WebAudio, mirroring `callSounds.ts`) — no new binary assets; `classic` keeps `call.ogg`; `none` is silent/visual-only. `startRingtone()` loops until stopped; `previewRingtone()` powers the on-select preview in Settings. Persisted id is whitelisted in `getSettings`.
-  - **(b) Active-call notification** (`c67aed01`): when already joined to a _different_ call, a compact, non-intrusive `IncomingCallBanner` (caller avatar + name + Answer/Reject, top-right) replaces the full-screen `IncomingCall` overlay and plays a **single soft ping** (one-shot ringtone) instead of the looping ring — so it never takes over the screen or talks over the active call. Full overlay still shows when in no call; being in the ringing room's own call still shows nothing.
-
-### 5. Seasonal Themes and Chat Backgrounds Design
-
-- **File:** `cinny/src/app/hooks/useTheme.ts`, `cinny/src/app/features/lotus/chatBackground.ts`
-- **Status:** **OPEN**
-- **Issue:** Basic CSS or random moving lines are insufficient for high-fidelity wallpaper/theming. They lack professional design theory, coherence, and aesthetic depth.
-- **Root Cause:** Current implementation relies on basic CSS, lacks advanced design theory, and does not leverage modern, performant CSS wallpaper techniques.
-- **Proposed Fix (Extreme Depth Redesign):**
-  - **Research-Backed Implementation:** Implement advanced design techniques (layered `oklch` gradients, `backdrop-filter` for refractive "liquid glass" effects, GPU-accelerated `transform` animations) to create living, breathing backgrounds.
-  - **Performance Optimization:** Ensure all animations strictly use compositor-thread properties (`transform`, `opacity`) and apply `contain: paint` / `will-change: transform` to prevent layout thrashing/flickering.
-  - **Design Resources (Examples/Inspiration):**
-    - [Uiverse.io Patterns](https://uiverse.io/patterns)
-    - [MagicPattern CSS Backgrounds](https://www.magicpattern.design/tools/css-backgrounds)
-    - [Prismic Blog: CSS Background Effects](https://prismic.io/blog/css-background-effects)
-    - [CSS-Pattern.com](https://css-pattern.com) (Pure CSS pattern library)
-    - [BGJar](https://bgjar.com) (Performance-focused generators)
-  - **Goal:** Treat each theme/background as a week-long development sprint to ensure professional polish, WCAG AA contrast compliance for overlaying UI, and seamless integration with the Lotus TDS.
-
-### 6. Exclusive Background vs. Seasonal Choice
-
-- **File:** `cinny/src/app/state/settings.ts`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification: (a) pick a background, confirm seasonal theme auto-clears; (b) pick a seasonal theme, confirm background auto-clears; (c) set both via old localStorage data and reload, confirm SeasonalEffect guard suppresses the overlay
-- **Issue:** Concurrent application of both Chat Backgrounds and Seasonal Themes causes visual clutter and high GPU usage.
-- **Root Cause:** These are currently handled as independent settings in the `settingsAtom` and applied simultaneously without mutual exclusion.
-- **Fix Applied:** Mutual exclusion enforced at two layers: (1) `General.tsx` — ChatBgGrid clears seasonalThemeOverride→'off' when any non-'none' background is picked; SeasonalBgGrid clears chatBackground→'none' when any real seasonal theme is selected. (2) `SeasonalEffect.tsx` — runtime guard returns null if `chatBackground !== 'none'`, protecting against legacy persisted state.
-
-### 7. Tiny Touch Targets in Composer Toolbar
-
-- **File:** `cinny/src/app/features/room/RoomInput.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on a real mobile device: open composer, confirm all toolbar buttons are tappable without mis-taps
-- **Issue:** Toolbar buttons have hit areas smaller than the WCAG-recommended 44x44px for touch, hindering mobile accessibility.
-- **Fix Applied:** Added `touchTarget = { minWidth: '44px', minHeight: '44px' }` computed from `mobileOrTablet()` and applied as `style={touchTarget}` to all 8 composer toolbar `IconButton` elements (attach, format, sticker, emoji, GIF, location, poll, schedule, send).
-
-### 8. Horizontal Overflow in Room Settings
-
-- **File:** `cinny/src/app/components/page/style.css.ts`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification: open Room Settings on a narrow mobile screen, confirm nav panel fills full width and no horizontal scrollbar appears
-- **Issue:** Wide tables and input elements in room settings cause horizontal overflow on mobile viewports.
-- **Fix Applied:** Added `@media (max-width: 750px) { width: '100%' }` to both `'400'` and `'300'` size variants of the `PageNav` vanilla-extract recipe in `style.css.ts`.
-
-### 9. Modal Float-Style Responsiveness
-
-- **File:** Multiple modal files
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification by opening each modal on a real mobile device
-- **Issue:** Modals appear as floating boxes on mobile, creating navigation and readability challenges.
-- **Fix Applied:** Created `useModalStyle(desktopMaxWidth)` hook (`src/app/hooks/useModalStyle.ts`) that returns fullscreen styles on mobile (no border-radius, no max-width, `height: 100%`) and desktop box styles otherwise. Applied to all 22+ modal files: `LeaveRoomPrompt`, `LeaveSpacePrompt`, `ReportRoomModal`, `ReportUserModal`, `DeviceVerification`, `InviteUserPrompt`, `LogoutDialog`, `DeviceVerificationSetup`, `DeviceVerificationReset`, `JoinAddressPrompt`, `JumpToTime`, `EditHistoryModal`, `ForwardMessageDialog`, `RemindMeDialog`, `CreateRoomModal`, `CreateSpaceModal`, `ScheduleMessageModal`, `PollCreator`, `AddExistingModal`, `RoomEncryption`, `RoomUpgrade`, `Modal500`, `ReadReceiptAvatars`, `RoomTopicViewer`.
-- **Note:** `UIAFlowOverlay` already fullscreen via `<Overlay>` — no change needed. `JoinRulesSwitcher`/`RoomNotificationSwitcher` are dropdowns, not modals.
-
-### 10. Composer Keyboard Obscurity
-
-- **File:** `src/index.css`
-- **Status:** **FIXED ⚠️ UNTESTED** — needs verification on iOS Safari specifically (the worst offender); on Android Chrome `100dvh` has been standard since Chrome 108
-- **Issue:** The chat composer is often partially or fully obscured by the virtual keyboard on mobile.
-- **Fix Applied:** Added `height: 100dvh` (dynamic viewport height) to `html` alongside the existing `height: 100%` fallback. `dvh` updates when the software keyboard appears, ensuring the layout shrinks correctly and the composer stays visible.
-
-### 11. Inline Jotai atom creation
-
-- **File:** `cinny/src/app/hooks/useSpaceHierarchy.ts`
-- **Status:** **FALSE POSITIVE — CLOSED**
-- **Issue:** Inline Jotai atom creation in a hook risks re-rendering components unnecessarily.
-- **Resolution:** `useState(() => atom(...))` IS the correct Jotai pattern for local stable atom references. The factory function form of `useState` ensures the atom is created only once per component mount. No change warranted.
+- **A5 — "Focus camera":** EC supports native tile-pinning. Our bottom-bar "Focus
+  camera" is a programmatic wrapper that **`.click()`s the tile** today
+  (`CallControl.ts` `focusCameraParticipant`), and during a screenshare EC
+  spotlights the shared screen so a camera pin may not override it. **Fork fix:**
+  add an `io.lotus.focus_participant` widget action that pins a participant in
+  EC's layout (coexisting with / overriding the screenshare spotlight); cinny
+  sends it via the widget API and the DOM-click hack is deleted. _Status: Open —
+  Actionable (Phase 2)._
+- **A6 — avatar decorations in-call:** decorations render on **our** pre-join
+  lobby roster (`CallMemberCard`) but not on EC's in-call video tiles. **Fork
+  fix:** render the decoration APNG inside EC's participant-tile component, fed
+  decoration slugs via widget member data. _Status: Open — Actionable (Phase 2)._
+- **A7 — mic dead after EC's "Reconnect":** the mid-call "Connection lost /
+  Reconnect" screen is **EC's own** (our load watchdog only covers an initial
+  hung load). After EC reconnects, the mic isn't re-published through our denoise
+  `getUserMedia` shim until a clean End+rejoin. **Fork fix:** move denoise into
+  EC's mic-capture/publish pipeline as a first-class audio stage — EC re-runs it
+  on every (re)publish, so reconnects keep denoise alive natively, and the
+  build-time `index.html` injection is removed. _Status: Open — Actionable
+  (Phase 2); root cause is the `getUserMedia` monkeypatch, not EC itself._
 
 ---
 
-## 📦 Barrel File Audit
+## 🔴 Open — Actionable
 
-| File Path                                   | Note                       | Status |
-| :------------------------------------------ | :------------------------- | :----- |
-| `cinny/src/app/plugins/call/index.ts`       | Extensive `export *` usage | OPEN   |
-| `cinny/src/app/plugins/text-area/index.ts`  | Extensive `export *` usage | OPEN   |
-| `cinny/src/app/components/message/index.ts` | Extensive `export *` usage | OPEN   |
+### Calls / Audio
 
----
+- **N127 — ML denoise shim is never injected in `vite dev`.** The `lotusDenoise` plugin injects only on `closeBundle` (build), so ML noise suppression is silently inactive during local dev. Add a dev-mode injection (`configureServer` / `transformIndexHtml`). Dev-only impact. _Note: this **dissolves entirely** once denoise moves in-source in the fork (A7 fix) — there is then no build-time injection to be missing in dev._
 
-## 🔍 Technical & Performance Refinements
+### Security & Privacy
 
-| Category                | Issue Description                                                                                                                                        | File Path                                       | Status                                                                                                                                                                                                                                                                                                                |
-| :---------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| State Sync              | Fire-and-forget network call to set offline presence during `pagehide` event may not complete reliably, potentially causing UI drift in presence status. | `cinny/src/app/hooks/usePresenceUpdater.ts`     | FIXED (`d2946c00`) — unload path now uses `fetch({ keepalive: true })` so the request survives page teardown (`sendBeacon` was unusable here: it can't set the auth header).                                                                                                                                          |
-| State Sync              | Fire-and-forget network call `setPresence().catch(...)` suppresses errors, meaning the app may falsely assume presence update success.                   | `cinny/src/app/hooks/usePresenceUpdater.ts`     | FIXED (`d2946c00`) — errors are now surfaced via `warnPresenceFailure` (redacted logging) instead of being silently swallowed.                                                                                                                                                                                        |
-| Memory Leak             | Decrypted Media Memory Leak (Gallery & Lightbox) due to missing virtualization and blob revocation.                                                      | `cinny/src/app/features/room/MediaGallery.tsx`  | PARTIALLY FIXED ⚠️ UNTESTED — Blob revocation was already correct; added `enabled` param to `useDecryptedMediaUrl` and `useNearViewport(300px)` to each `GalleryTile` to gate decryption until near-viewport, reducing burst on pagination. True virtualization (windowing) deferred — requires significant refactor. |
-| Data Persistence        | Scheduled Messages are ephemeral (lost on refresh) due to fragile `localStorage` parsing.                                                                | `cinny/src/app/state/scheduledMessages.ts`      | FIXED — now uses `atomWithStorage` + `createJSONStorage` (Jotai's built-in persistence with error-safe JSON parsing)                                                                                                                                                                                                  |
-| Memory Leak             | Potential memory leak due to uncleaned `handleMouseMove` listener in `usePan`.                                                                           | `cinny/src/app/hooks/usePan.ts`                 | FALSE POSITIVE — `usePan` already uses `attachedRef` to track listeners and cleans them up in an unmount `useEffect`. No change needed.                                                                                                                                                                               |
-| Asset Optimization      | Large unoptimized media asset (213KB) found in `public/res`.                                                                                             | `public/res/Lotus.png`                          | OPEN                                                                                                                                                                                                                                                                                                                  |
-| Data Persistence        | Non-atomic `localStorage` updates in session management can lead to inconsistent state.                                                                  | `cinny/src/app/state/sessions.ts`               | OPEN                                                                                                                                                                                                                                                                                                                  |
-| Data Persistence        | Lack of cross-tab synchronization for `localStorage` updates in session management risks race conditions.                                                | `cinny/src/app/state/sessions.ts`               | OPEN                                                                                                                                                                                                                                                                                                                  |
-| Network Resilience      | `uploadContent` lacks retry logic, failing immediately upon network error.                                                                               | `cinny/src/app/utils/matrix.ts`                 | FIXED (`d2946c00`) — bounded retry (`UPLOAD_MAX_RETRY_COUNT=3`) gated by `isRetryableUploadError` (transient/network/5xx/429 only, not 4xx), reusing the `rateLimitedActions` capped-exponential backoff.                                                                                                             |
-| Network Resilience      | `rateLimitedActions` uses basic retry logic without exponential backoff, which may exacerbate 429 issues.                                                | `cinny/src/app/utils/matrix.ts`                 | FIXED — fallback delay now uses capped exponential backoff (`min(1000 * 2^retryCount, 30_000)ms`) when server doesn't send `Retry-After`; server header still takes precedence via `getRetryAfterMs()`.                                                                                                               |
-| Matrix Event Robustness | `useMatrixEventRenderer` handles unknown events gracefully by returning `null`, which may hide potentially important unrendered data.                    | `cinny/src/app/hooks/useMatrixEventRenderer.ts` | FALSE POSITIVE — returning `null` for unrendered types is the intended contract. Callers opt into rendering unknowns via the `renderStateEvent` / `renderEvent` fallback params; `null` only results when the caller deliberately supplies no fallback. No change warranted.                                          |
-| Data Contract           | `MatrixError` instantiation with `UploadResponse` might be brittle.                                                                                      | `cinny/src/app/utils/matrix.ts`                 | FIXED (`d2946c00`) — replaced the brittle direct construction with `matrixErrorFromUploadResponse` / `matrixErrorFromUnknown` guards that validate shape before building a `MatrixError`.                                                                                                                             |
-| Type Safety             | `addRoomIdToMDirect` uses `as any` cast for `AccountDataEvent.Direct`, bypassing type contract validation.                                               | `cinny/src/app/utils/matrix.ts`                 | FIXED (`d2946c00`) — `addRoomIdToMDirect` / `removeRoomIdFromMDirect` now use `EventType.Direct` + a typed `MDirectContent`, dropping the `as any` cast.                                                                                                                                                              |
-| Robustness              | `rateLimitedActions` relies on `MatrixError.httpStatus` which might not exist on all error variants.                                                     | `cinny/src/app/utils/matrix.ts`                 | FALSE POSITIVE — `MatrixError.httpStatus` is defined as `readonly httpStatus?: number` in `matrix-js-sdk/lib/http-api/errors.d.ts`. It is optional (not on all instances) but the `?.` optional chain already guards against undefined. No change needed.                                                             |
-| Type Contract           | Custom types in `cinny/src/types/matrix` mirror SDK types instead of using them, risking drift and contract mismatches.                                  | `cinny/src/types/matrix/`                       | OPEN                                                                                                                                                                                                                                                                                                                  |
+- **N97 — Access token stored in plaintext `localStorage`** (`state/sessions.ts`), vulnerable to XSS; device ID likewise. Architectural — needs a token-protection / session-storage redesign.
+- **Session writes are non-atomic and not cross-tab synced** (`state/sessions.ts`) — risks inconsistent state / races across tabs.
+- **Persisted PII without encryption:** user status message + expiry (`settings/account/Profile.tsx`), unsent composer drafts (`room/RoomInput.tsx`). Leak risk on shared devices.
 
-## 🏗️ Architectural & Hygiene Audit
+### PWA / Offline / Notifications
 
-| Category | Issue Description                                                | File Path | Status |
-| :------- | :--------------------------------------------------------------- | :-------- | :----- |
-| Hygiene  | No stale development notes or TypeScript strictness issues found | N/A       | OPEN   |
+- **N105 — Service worker has no `notificationclick` handler** — notification clicks are broken when the tab is closed. Needs `showNotification()` via the SW + a `notificationclick` listener.
+- **N107 — SW has no `push` handler** — Web Push delivery is entirely non-functional. Needs a `push` listener + a Matrix push-gateway integration.
+- **No app-asset caching strategy** (`src/sw.ts`) — no offline capability.
+- **`manifest: false`** in `vite.config.js` — may block correct PWA install if not handled externally.
 
----
+### Dependencies & Build
 
-## 🏗️ TDS Compliance & Styling Issues
+- **`matrix-js-sdk` pinned to a Release Candidate** (`41.6.0-rc.0`); `@atlaskit` and build tools (`vite`, `typescript`, `eslint`) on unstable/experimental pins — review for stable versions; RC SDK is a tree-shaking/bundle-size risk.
+- **Build-time overhead:** `lotusDenoise` does heavy sequential `fs` work in `closeBundle`; `viteStaticCopy` config is complex with redundant renames — could be streamlined.
 
-| Issue Description                                                                            | File Path                                                                                                                                                                                                                                                                                                                                    |
-| :------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Hardcoded inline style `cursor: 'pointer'`                                                   | `cinny/src/app/plugins/react-custom-html-parser.tsx`                                                                                                                                                                                                                                                                                         |
-| Hardcoded color `#00D4FF`, `#FFB300` ✅ **VERIFIED COMPLIANT**                               | `cinny/src/app/components/event-readers/EventReaders.tsx`                                                                                                                                                                                                                                                                                    |
-| Hardcoded color `#EE1D52`, `#9146ff`, `#ff4500`, `#cb3837`, `#f48024` ⚠️ **BRAND EXCEPTION** | `cinny/src/app/components/url-preview/UrlPreviewCard.tsx` + `UrlPreview.css.tsx` — official third-party brand colors in SVG logos and site badge backgrounds; cannot convert to CSS variables without inventing new tokens (violates TDS rule 3)                                                                                             |
-| Massive number of hardcoded `backgroundColor` values ⚠️ **PATTERN CONTENT EXCEPTION**        | `cinny/src/app/features/lotus/chatBackground.ts` — each background's base color is aesthetic content that defines the pattern identity; converting requires inventing 40+ CSS variables (violates TDS rule 3) or using CSS4 `relative-color-syntax` in inline styles (insufficient browser support); these are visual content, not UI chrome |
-| Hardcoded colors `#00FF88`, `#FF6B00` ✅ **VERIFIED COMPLIANT**                              | `cinny/src/app/features/call/CallControls.tsx`                                                                                                                                                                                                                                                                                               |
-| Hardcoded fallback hexes in toast colors ✅ **FIXED**                                        | `cinny/src/app/features/toast/LotusToastContainer.tsx`                                                                                                                                                                                                                                                                                       |
+### Code Hygiene / DevEx
 
----
+- **No automated test suite** (`src/`) — no unit/integration tests configured.
+- **Extensive `as any` casts** across `src/` — gradual typing cleanup.
+- **`types/matrix/` mirrors SDK types** instead of importing them — drift risk.
+- **Hardcoded CDN URL** should move to an env var (the decoration CDN is now single-sourced in `avatarDecorations.ts`, but the literal is still in-repo).
+- **`patch-folds.mjs` edits `node_modules` directly** — consider `patch-package`.
+- **Infra docs:** `contrib/nginx` lacks security headers (HSTS/CSP) + uses rewrites over `try_files`; `contrib/caddy` has a placeholder path. CI/CD (`prod-deploy.yml`): sequential deploy, aggressive 1-min Netlify timeout, `package-manager-cache: false`.
+- **README:** keep the fork-sync version + logo path current. (`CONTRIBUTING.md` is intentionally left as upstream Cinny's — not a Lotus concern.)
+- **Architecture notes (low priority):** deep `features/` + `hooks/` nesting, many small coupled hooks, possible dead CSS/components, `SpacingVariant` / `DropTarget` recipe simplification.
+- **Git workflow (forward-looking):** keep commits scoped — past monolithic "fix all bugs" commits and inconsistent prefixes hurt `git bisect`.
 
-## 🌐 Localization, Accessibility & Performance
+### Big Projects
 
-| Category      | Issue Description                                                                                                                                                   | File Path                                                      | Status                                                                                                                                                                                                                                                      |
-| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Localization  | Hardcoded UI string: "Chat Room"                                                                                                                                    | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Messages, photos, and videos."                                                                                                                | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Voice Room"                                                                                                                                   | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Live audio and video conversations."                                                                                                          | `src/app/components/create-room/CreateRoomTypeSelector.tsx`    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Download"                                                                                                                                     | `src/app/components/image-viewer/ImageViewer.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Open Location"                                                                                                                                | `src/app/components/message/MsgTypeRenderers.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Thread"                                                                                                                                       | `src/app/components/message/Reply.tsx`                         | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "View"                                                                                                                                         | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Spoiler"                                                                                                                                      | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Retry"                                                                                                                                        | `src/app/components/message/content/ImageContent.tsx`          | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Close"                                                                                                                                        | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Accept"                                                                                                                                       | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "They Match"                                                                                                                                   | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Okay"                                                                                                                                         | `src/app/components/DeviceVerification.tsx`                    | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Join Server"                                                                                                                                  | `src/app/components/url-preview/UrlPreviewCard.tsx`            | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Invite"                                                                                                                                       | `src/app/components/invite-user-prompt/InviteUserPrompt.tsx`   | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Files"                                                                                                                                        | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Send"                                                                                                                                         | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Upload Failed"                                                                                                                                | `src/app/components/upload-board/UploadBoard.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Localization  | Hardcoded UI string: "Password"                                                                                                                                     | `src/app/components/uia-stages/PasswordStage.tsx`              | OPEN                                                                                                                                                                                                                                                        |
-| Bundle Size   | Large unoptimized media asset (213KB)                                                                                                                               | `public/res/Lotus.png`                                         | OPEN                                                                                                                                                                                                                                                        |
-| Matrix Logic  | Inefficient repeated `mx.getRoom()` calls in component render loops                                                                                                 | `src/app/features/lobby/Lobby.tsx`                             | FALSE POSITIVE — `Lobby` already routes its render loop through the memoized `useGetRoom(allJoinedRooms)`. The two remaining `mx.getRoom()` calls are inside drag/drop event handlers (not render loops) and are O(1) SDK map lookups. No change warranted. |
-| Matrix Logic  | Inefficient repeated `mx.getRoom()` calls in component render loops                                                                                                 | `src/app/components/emoji-board/EmojiBoard.tsx`                | FIXED (`b7e1f89c`) — pack-label `mx.getRoom()` lookups in `EmojiSidebar`/`StickerSidebar` hoisted into a `useMemo`'d `Map` built once per pack list.                                                                                                        |
-| Performance   | Numerous event handlers (e.g., handleUserClick, handleReplyClick) lack `useCallback`, leading to unnecessary re-renders of message components.                      | `cinny/src/app/features/room/RoomTimeline.tsx`                 | FIXED (`b7e1f89c`) — `handleJumpToLatest`/`handleJumpToUnread`/`handleMarkAsRead` wrapped in `useCallback`.                                                                                                                                                 |
-| Performance   | The `submit` function and file handling callbacks (e.g., handleSendUpload) are re-created on every render, causing re-renders of the editor and toolbar components. | `cinny/src/app/features/room/RoomInput.tsx`                    | FIXED (`b7e1f89c`) — `handleCancelUpload`/`handleSendUpload`/`handleShareLocation`/`handleEmoticonSelect`/`handleStickerSelect` wrapped in `useCallback`.                                                                                                   |
-| Accessibility | `button` for edit history lacks `aria-label`                                                                                                                        | `cinny/src/app/components/message/content/FallbackContent.tsx` | FIXED ⚠️ UNTESTED — added `aria-label="View edit history"`                                                                                                                                                                                                  |
-| Accessibility | `button` for reaction lacks `aria-label`                                                                                                                            | `cinny/src/app/components/message/Reaction.tsx`                | **FIXED ⚠️ UNTESTED** — `Reaction` component now computes `aria-label="{shortcode} reaction, N people"` internally using `getShortcodeFor`; custom (mxc://) emoji falls back to "custom emoji reaction".                                                    |
-| Accessibility | `button` for ThreadIndicator lacks `aria-label`                                                                                                                     | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="View thread"`                                                                                                                                                                                                        |
-| Accessibility | `button` for ReplyLayout lacks `aria-label`                                                                                                                         | `cinny/src/app/components/message/Reply.tsx`                   | FIXED ⚠️ UNTESTED — added `aria-label="Jump to original message"`                                                                                                                                                                                           |
-
----
-
-## 🔧 Infrastructure, DevEx & Type Safety
-
-| Category       | Issue Description                                                                                            | File Path                                            | Status                                                                                                                                                                |
-| :------------- | :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Dependencies   | `lodash` pinned to non-existent version `4.18.1`                                                             | `cinny/package.json`                                 | OPEN                                                                                                                                                                  |
-| Dependencies   | Various pinned versions of `@atlaskit`, `matrix-js-sdk`                                                      | `cinny/package.json`                                 | OPEN                                                                                                                                                                  |
-| Dependencies   | `matrix-js-sdk` pinned to Release Candidate (`41.6.0-rc.0`)                                                  | `cinny/package.json`                                 | OPEN                                                                                                                                                                  |
-| Dependencies   | Unstable/experimental versions for build tools (`vite` 8.0.14, `typescript` 6.0.3, `eslint` 9.39.4)          | `cinny/package.json`                                 | OPEN                                                                                                                                                                  |
-| CI/CD          | `package-manager-cache` set to `false`                                                                       | `cinny/.github/workflows/build-pull-request.yml`     | OPEN                                                                                                                                                                  |
-| CI/CD          | Inefficient sequential execution in deployment                                                               | `cinny/.github/workflows/prod-deploy.yml`            | OPEN                                                                                                                                                                  |
-| CI/CD          | Aggressive 1-minute timeout for Netlify deploy                                                               | `cinny/.github/workflows/prod-deploy.yml`            | OPEN                                                                                                                                                                  |
-| DevEx          | Stale upstream bug tracker link/donations/CLA                                                                | `cinny/CONTRIBUTING.md`                              | OPEN                                                                                                                                                                  |
-| DevEx          | Alignment issue between README and CONTRIBUTING                                                              | `cinny/README.md`                                    | OPEN                                                                                                                                                                  |
-| Testing        | No evident automated testing configuration/files                                                             | `cinny/src/`                                         | OPEN                                                                                                                                                                  |
-| Type Safety    | Extensive use of `as any` type assertions                                                                    | `cinny/src/`                                         | OPEN                                                                                                                                                                  |
-| Security       | Hardcoded public CDN URL; consider moving to environment variable                                            | /root/code/cinny/scripts/syncDecorations.mjs         | OPEN                                                                                                                                                                  |
-| Architecture   | Modifying node_modules directly is brittle; use patch-package instead                                        | /root/code/cinny/scripts/patch-folds.mjs             | OPEN                                                                                                                                                                  |
-| Robustness     | Missing security headers (HSTS, CSP, etc.) and inefficient asset serving using rewrites instead of try_files | /root/code/cinny/contrib/nginx/cinny.domain.tld.conf | OPEN                                                                                                                                                                  |
-| Robustness     | Incomplete documentation/placeholder path in Caddyfile                                                       | /root/code/cinny/contrib/caddy/caddyfile             | OPEN                                                                                                                                                                  |
-| Matrix SDK     | Inefficient listener management (`setMaxListeners: 150`) and incomplete SDK state transition handling.       | `src/client/initMatrix.ts`                           | OPEN                                                                                                                                                                  |
-| PWA Robustness | Service worker lacks caching strategy for application assets, resulting in no offline capability.            | `cinny/src/sw.ts`                                    | OPEN                                                                                                                                                                  |
-| PWA Integrity  | `manifest: false` in `vite.config.js` might prevent correct PWA installation if not handled externally.      | `cinny/vite.config.js`                               | OPEN                                                                                                                                                                  |
-| PII Leakage    | Potential PII exposure via console.error (parameter e likely contains event data).                           | `cinny/src/app/plugins/call/CallEmbed.ts`            | VERIFIED COMPLIANT — reviewed during the logging pass (`203568c9`); the existing log path already records only `e.message`, not raw event payloads. No change needed. |
-| PII Leakage    | Potential PII exposure via console.warn (parameter imgError/videoError/thumbError object).                   | `cinny/src/app/features/room/msgContent.ts`          | FIXED (`203568c9`) — media-error warnings now log only `error.name` + `error.message`, never the raw error/event object.                                              |
-| PII Leakage    | Potential PII exposure via console.error (parameter e likely contains event data).                           | `cinny/src/app/features/room/RoomInput.tsx`          | VERIFIED COMPLIANT — reviewed during the logging pass (`203568c9`); the existing log path already records only `e.message`. No change needed.                         |
-
-## 🏗️ Architectural & Resilience Audit
-
-| Category                 | Issue Description                                                                                                                                                                                            | File Path                                               | Status                                                                                                                                                                                                                                                                                                                                 |
-| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Element Call Integration | Lacks robust iframe failure monitoring beyond initial 'preparing' event; can result in a permanently hung 'Loading...' state with no user-visible error or recovery path.                                    | `src/app/plugins/call/CallEmbed.ts`                     | FIXED (`0394fce9`) — added a `CALL_LOAD_WATCHDOG_MS` (25s) timeout that settles on ready/capabilities/joined and fails on iframe error/timeout, exposing a `loadFailed` getter + `onLoadError(cb)`. `CallView` renders a `CallLoadErrorMessage` overlay (Retry/Leave) instead of a permanent spinner. ⚠️ UNTESTED — needs a live call. |
-| Component Resilience     | `RoomTimeline` has no `ErrorBoundary` wrapper — a single malformed event crashing the renderer takes down the entire timeline with no fallback UI.                                                           | `src/app/features/room/RoomTimeline.tsx`                | FALSE POSITIVE — `RoomView.tsx` (lines 113–137) already wraps `<RoomTimeline>` in a react-error-boundary `ErrorBoundary` with a "Timeline unavailable" fallback. A wave-1 agent's redundant nested boundary was reverted. No change needed.                                                                                            |
-| Component Resilience     | `RoomInput` has no `ErrorBoundary` wrapper — a crash in the composer leaves users unable to send messages.                                                                                                   | `src/app/features/room/RoomInput.tsx`                   | FALSE POSITIVE — `RoomView.tsx` (lines 151–171) already wraps `<RoomInput>` in an `ErrorBoundary` with a "Message composer encountered an error" `RoomInputPlaceholder` fallback. No change needed.                                                                                                                                    |
-| Fallback Logic           | No explicit empty/error fallback for Matrix SDK data calls in `RoomTimeline`; relies purely on SDK internal error propagation, meaning silent failures show a blank timeline.                                | `src/app/features/room/RoomTimeline.tsx`                | ADDRESSED — the `RoomView` `ErrorBoundary` (above) provides the explicit render-error fallback; a thrown SDK/render error now surfaces "Timeline unavailable" rather than a blank timeline.                                                                                                                                            |
-| Dependency               | Potential for complex dependency chains due to deep nesting in `src/app/features/` and `src/app/hooks/`.                                                                                                     | `src/app/`                                              | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Hydration/Race Condition | The SyncState listener registered by useSyncState may miss the initial 'PREPARED' event if the client initializes synchronously from IndexedDB before the effect runs, leading to an infinite loading state. | `cinny/src/app/pages/client/ClientRoot.tsx`             | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Structure                | High number of small, highly coupled utility hooks (`src/app/hooks/`) may obscure dependency graphs.                                                                                                         | `src/app/hooks/`                                        | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Dead Code                | Potential for unused CSS modules or UI components in `src/app/features/`.                                                                                                                                    | `src/app/`                                              | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Security                 | Sensitive session data (access tokens, device ID) stored in `localStorage` is vulnerable to XSS.                                                                                                             | `src/app/state/sessions.ts`                             | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Privacy                  | Sensitive user status messages and expiry timestamps are persisted in `localStorage`.                                                                                                                        | `src/app/features/settings/account/Profile.tsx`         | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Privacy                  | Unsent composer drafts stored in `localStorage` without encryption could leak info on shared devices.                                                                                                        | `src/app/features/room/RoomInput.tsx`                   | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Persistence              | Scheduled messages relying on fragile `localStorage` parsing are prone to data loss on session expiry or error.                                                                                              | `src/app/state/scheduledMessages.ts`                    | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Bundle Bloat             | Inefficient `lodash` import; risks including entire library instead of necessary utilities.                                                                                                                  | `cinny/package.json`                                    | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Bundle Bloat             | Large `matrix-js-sdk` (RC version) dependency; high potential for tree-shaking overhead.                                                                                                                     | `cinny/package.json`                                    | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Build-Time Overhead      | `lotusDenoise` plugin performs heavy, sequential `fs` operations during `closeBundle`, significantly slowing build times.                                                                                    | `cinny/vite.config.js`                                  | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Build-Time Overhead      | Complex manual `viteStaticCopy` configuration requiring multiple renames and path manipulations; risks redundant processing.                                                                                 | `cinny/vite.config.js`                                  | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Architectural Debt       | Redundant style variant logic in `SpacingVariant` could be simplified.                                                                                                                                       | `cinny/src/app/components/message/layout/layout.css.ts` | OPEN                                                                                                                                                                                                                                                                                                                                   |
-| Overhead Analysis        | Potential CSS bloat from `DropTarget` composition across multiple recipes (`SidebarItem`, `SidebarFolder`).                                                                                                  | `cinny/src/app/components/sidebar/Sidebar.css.ts`       | OPEN                                                                                                                                                                                                                                                                                                                                   |
-
-## 🏗️ Git Workflow & History Audit
-
-| Category | Issue Description                                                                                       | File Path   | Status |
-| :------- | :------------------------------------------------------------------------------------------------------ | :---------- | :----- |
-| Workflow | Monolithic "Fix all bugs" commits (e.g., `10f6544e`, `aa48c9ef`) make `git bisect` difficult.           | Git History | OPEN   |
-| Workflow | Inconsistent commit message prefixes (e.g., `fix`, `feat`, `docs`, `assets`).                           | Git History | OPEN   |
-| Workflow | Use of `fix` or `feat` for large-scale changes affecting multiple disparate systems (e.g., `938ead79`). | Git History | OPEN   |
-
----
-
-## 🎨 Native UI/UX Consistency — Lotus vs. Cinny Baseline
-
-> Audit of every Lotus-custom UI feature against Cinny's native folds design-system conventions. "Native pattern" means the `folds` component library, vanilla-extract tokens (`color.*`, `config.radii.*`, `config.space.*`), and established Cinny component patterns. 52 findings, organized by severity.
-
----
-
-### 🔴 Major — Broken Styling / Functional Regressions
-
-#### N1. `ProfileDecoration` Save Button — Undefined `--accent-cyan` Variable (border invisible on all non-TDS themes)
-
-- **File:** `src/app/features/settings/account/ProfileDecoration.tsx`, lines 191–213
-- **Status:** **FIXED** — replaced raw `<button>` with `<Button size="400" variant="Success" fill="Solid" radii="300">`, removed undefined `--accent-cyan` reference
-- **Issue:** The save button is a raw `<button>` with `border: '1px solid var(--accent-cyan)'` and `color: 'var(--accent-cyan)'`. The variable `--accent-cyan` (without the `--lt-` prefix) is never defined in any theme file — the correct prefixed form is `--lt-accent-cyan`. On all non-TDS themes the border is **invisible** and the text has no color.
-- **Root Cause:** Missing `--lt-` prefix. Additionally, the raw `<button>` should be a folds `<Button>` to match every other save button in the same `Profile.tsx` settings panel (e.g., `ProfileDisplayName` save at `Profile.tsx:303`).
-- **Fix:** Replace raw `<button>` with `<Button size="400" variant="Success" fill="Solid" radii="300">`. Remove the `--accent-cyan` reference.
-
-#### N2. `UserPrivateNotes` Textarea — Undefined `--border-interactive` Variable (border invisible on all themes)
-
-- **File:** `src/app/components/user-profile/UserRoomProfile.tsx`, lines 246–265
-- **Status:** **FIXED** — replaced undefined CSS vars with `color.SurfaceVariant.ContainerLine`, `config.radii.R300`, `config.space.S200/S300`
-- **Issue:** The notes textarea sets `border: '1px solid var(--border-interactive)'`. This variable is never defined anywhere in the codebase — the correct equivalents are `--bg-surface-border` (`src/index.css`) or `color.SurfaceVariant.ContainerLine` (folds token). The border is **invisible on all themes**.
-- **Root Cause:** Invented CSS variable name. Also uses raw pixel sizing (`borderRadius: '6px'`, `padding: '8px 10px'`, `fontSize: '14px'`) instead of folds tokens.
-- **Fix:** Replace inline style with `border: \`1px solid ${color.SurfaceVariant.ContainerLine}\``, `borderRadius: config.radii.R300`, `padding: config.space.S200`.
-
-#### N3. `LotusToastContainer` — Z-Index Places Toasts Below Night Light Overlay and All Modals
-
-- **File:** `src/app/features/toast/LotusToastContainer.tsx`, lines 184–211; `src/app/pages/App.tsx`
-- **Status:** **FIXED** — raised toast `zIndex` from `9997` to `10001` (above Night Light at 9998 and modals at 9999)
-- **Issue:** The toast container uses hardcoded `zIndex: 9997`. The Night Light overlay is at `z-index: 9998`. The folds `Overlay`/`Dialog` components used for all modals resolve to `z-index: 9999`. Result: (a) toasts render **under** the Night Light tint and take on the warm orange filter; (b) any open modal covers toasts entirely, making notifications invisible.
-- **Root Cause:** The toast container does not use the `folds` `OverlayContainerProvider` portal that manages z-index correctly — it is a plain `position: fixed` div injected directly in `App.tsx`.
-- **Fix:** Either route the toast portal through `OverlayContainerProvider` (matching how all other floating UI works), or raise `zIndex` above all overlay layers (10001+). Also audit Night Light's z-index (9998) relative to toasts.
-
-#### N4. `PollContent` Vote Buttons — Entirely Outside the Folds Design System
-
-- **File:** `src/app/components/message/content/PollContent.tsx`
-- **Status:** **FIXED ⚠️ UNTESTED** (`caf6318a`) — needs verification: create a poll, then view/vote on it under a **non-TDS theme** (e.g. default Cinny dark/light) and confirm borders, selected state, and progress fill are all visible.
-- **Issue:** Each poll answer is a native `<button>` with ~15 hardcoded inline style properties using undefined CSS variables (`--accent-cyan`, `--accent-cyan-dim`, `--accent-cyan-border`, `--border-color`). Checkbox/radio indicators, percentage spans, and the poll label used raw pixel/rem font sizes (`0.68rem`, `0.78rem`, `0.88rem`) and hardcoded `rgba()`/`#fff`. None of those vars exist outside TDS mode — the component rendered unstyled (invisible borders / no selected/progress state) on every non-TDS theme.
-- **Root Cause:** Custom implementation that bypassed folds tokens entirely.
-- **Fix Applied:** Kept the `<button>` structure (the progress-bar-behind-text affordance has no folds `Button` equivalent) but made every value theme-reactive: `color.Primary.*` for selected/indicator state, `color.SurfaceVariant.*` for the resting surface + progress fill, `config.*` for radii/spacing/border-width, and folds `<Text>` for the option label, percentage, and section label (dropping the raw rem sizes and `opacity` hacks). The duplicate checkbox/radio indicator spans were merged into one.
-
----
-
-### 🟠 Moderate — Interaction Pattern or Visual Deviations
-
-| #   | Area                       | File                                      | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Native Pattern                                                                                                                                                                                                 |
-| :-- | :------------------------- | :---------------------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| N5  | Read Receipts              | `ReadReceiptAvatars.tsx`                  | 62–137            | Trigger button is raw `<button>` with `onMouseEnter`/`onMouseLeave` JS style mutation for hover state — **FIXED**: hover/focus emphasis moved to co-located `ReadReceiptAvatars.css.ts` (`:hover`/`:focus-visible`), no JS `.style` mutation                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | All interactive elements use `useHover` from `react-aria` and folds variant system for hover; direct `.style` mutation used nowhere else on buttons                                                            |
-| N6  | Read Receipts              | `ReadReceiptAvatars.tsx` & `Message.tsx`  | 32–56 / 268–283   | Two code paths open `EventReaders`: avatar-pill path uses `useModalStyle(360)` for mobile fullscreen; context-menu path (`MessageReadReceiptItem`) does not — on mobile the context menu path opens a fixed-size non-fullscreen modal for the same content                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | All modals that share a layout variant use `useModalStyle` consistently; `MessageReadReceiptItem` was not updated when `useModalStyle` was added                                                               |
-| N7  | Delivery Status            | `Message.tsx`                             | 89–148            | `DeliveryStatus` renders Unicode glyphs (`⟳ ✓ ✕`) in a `<span>` with `fontSize: '10px'` instead of folds `<Icon>` components — **FIXED**: replaced with `Icons.Check/Cross/Send` via `<Icon size="100">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `Icons.Check`, `Icons.Cross`, etc. are used for all other status glyphs; folds `Text` size tokens for all supplementary text                                                                                   |
-| N8  | GIF Picker                 | `GifPicker.tsx`                           | 83–124            | GIF picker container uses fully bespoke inline styles (`borderRadius: '12px'`, `boxShadow: '0 8px 32px rgba(0,0,0,0.4)'`, raw `rgba` border) — two separate style sets for TDS and non-TDS paths — **FIXED**: non-TDS path now uses folds tokens (`color.Surface.Container`, `config.radii.R400`, `color.Surface.ContainerLine`, `color.Other.Shadow`), dropping the undefined `var(--bg-surface)`; the TDS branch keeps its `--lt-*` glow chrome (valid TDS styling)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `EmojiBoard` has no caller-applied container styling; folds components handle their own surface internally via design tokens                                                                                   |
-| N9  | GIF Button                 | `RoomInput.tsx`                           | 1076–1087         | GIF toolbar button renders `<Text size="T200">` with hand-rolled `fontWeight`/`fontSize`/`letterSpacing` instead of `<Icon>` — **WON'T FIX (deliberate)**: folds has no GIF icon, and "GIF" is a widely-recognized text affordance (Slack/Discord/Element all use a text label). Converting to an arbitrary icon would be less clear, not more.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | All 8 other toolbar buttons (`Smile`, `Sticker`, `Location`, `Poll`, etc.) use `<Icon src={...} />` exclusively                                                                                                |
-| N10 | Send Animation             | `Message.tsx` + `Animations.css.ts`       | 979–998 / 60–71   | `MsgAppearClass` and `MentionHighlightPulse` both animate `transform: scale` on the same `MessageBase` DOM node — on self-sent mention messages both classes apply simultaneously and fight over the `transform` property — **FIXED**: `mentionPulseKeyframes` now animates only `box-shadow` (dropped the imperceptible `scale(1.003)`), so the appear-scale and the mention glow no longer contend for `transform`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Pre-existing `highlightAnime` only animates `backgroundColor`; no prior `transform` animation on `MessageBase`                                                                                                 |
-| N11 | AvatarDecoration           | `AvatarDecoration.tsx`                    | 5 / 38–41         | Fixed 8px inset on all sides regardless of avatar size — at folds size `"200"` (~32px) the decoration bleeds 50% of the avatar diameter, clipping against `overflow: hidden` parent containers in member lists. **Inset issue still OPEN.** _Related regression fixed in `useAvatarDecoration.ts`_: the decoration fetch cached **all** failures (including transient 429/5xx) as "no decoration" permanently for the session, so a single rate-limited burst (member list / timeline mount many avatars at once) would make decorations vanish until a full reload. Now only a genuine 404 is cached; transient errors retry on the next mount.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Folds `Avatar` and `PresenceRingAvatar` do not emit overflow outside their bounding box                                                                                                                        |
-| N12 | MediaGallery Drawer        | `MediaGallery.tsx`                        | 651–661           | Drawer uses `position: 'fixed'` with hardcoded `width: '320px'` as inline styles on a `<Box>` — **FIXED**: moved positioning/width into co-located `MediaGallery.css.ts` using `toRem(320)` + a `max-width: 750px` full-screen media query (mirrors `MembersDrawer`); border/header now use `config.borderWidth`/`config.space` tokens. Added Escape-to-close on the panel (previously only the lightbox handled Escape). **Full chrome redesign (round 2)** to match native conventions: panel + header switched from `Surface` to `Background` variant (matching `MembersDrawer`/Saved Messages); header now `Text size="H4"` + plain close `IconButton` (dropped the bespoke tooltip-wrapped button); tabs moved to a bordered toolbar strip with the `variant={active?'Primary':'Secondary'} fill={active?'Solid':'Soft'}` pattern from `PolicyListViewer` and now show per-tab counts; the centered "lines + label" month divider replaced with a left-aligned group label (Cinny group-label pattern); thumbnail tiles moved hover/focus styling to CSS `:hover`/`:focus-visible` (no JS hover state) and into `MediaGallery.css.ts`; file rows + grid tokenized. **Docking fix (round 3)** — the core of the finding: the gallery was a `position: fixed` overlay floating over the timeline, mounted from `RoomViewHeader`. It is now a **docked flex sibling** in the room layout row, exactly like `MembersDrawer`: open state lifted to a `mediaGalleryAtom` (mirrors `bookmarksPanelAtom`), rendered in `Room.tsx` with a vertical `Line` separator on desktop and `key={room.roomId}` to reset per room; the CSS is static-width on desktop and only `position: fixed; inset: 0` full-screen on mobile (identical strategy to `MembersDrawer.css`). It now shares the row with the timeline instead of overlapping it. | `MembersDrawer` uses a vanilla-extract class with `width: toRem(266)` and is placed by the layout system, not `position: fixed`. 54px width discrepancy also breaks visual rhythm if both panels could be open |
-| N13 | ScheduledMessagesTray      | `ScheduledMessagesTray.tsx`               | 108–126           | Collapsible tray header is `<Box as="button">` with `cursor: 'pointer'` inline style and no folds variant — no hover state, no focus ring — **FIXED**: replaced with folds `<Button variant="Secondary" fill="None" radii="0">` using `before`/`after` icon props (gains design-system hover/focus)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | All clickable header/toggle elements in the room view use folds `<Button>` or `<IconButton>` with explicit variants for hover/focus; `<Box as="button">` with no variant is used nowhere else                  |
-| N14 | ForwardMessageDialog       | `ForwardMessageDialog.tsx`                | 137–154           | Dialog uses `<Modal>` but has no `<Header>` component and no close `<IconButton>` — only way to close is clicking outside — **FIXED**: added a folds `<Header variant="Surface" size="500">` with the title + close `<IconButton radii="300">`, matching every other modal                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Every other modal using `<Modal>` or `<Box role="dialog">` includes a `<Header>` with a close `<IconButton>` in the top-right (EditHistoryModal, LeaveRoomPrompt, ScheduleMessageModal, RemindMeDialog, etc.)  |
-| N15 | ScheduleMessageModal       | `ScheduleMessageModal.tsx`                | 180–193           | Modal root is `<Box as="form" role="dialog">` with manually assembled `borderRadius: config.radii.R400`/`boxShadow` — **FIXED**: shell is now `<Dialog as="form" variant="Surface">`; removed inline surface styles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `ForwardMessageDialog` uses folds `<Modal size="400">` with `R500` radius; the R400 vs R500 mismatch is visible when both dialogs appear in the same session                                                   |
-| N16 | Presence Picker            | `SettingsTab.tsx`                         | 118–144           | Presence trigger dot is raw `<button>` with `position: absolute; bottom: 2; right: 2` inline and no folds focus ring; no tooltip — **FIXED**: wrapped the trigger in a folds `TooltipProvider` (shows "Status: …"); replaced the undefined `var(--bg-surface)` with `color.Background.Container`. Kept the absolute-positioned `<button>` (it overlays the avatar corner; a full `IconButton` would be too large for the dot).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Every other sidebar icon button uses folds `IconButton` with `SidebarItemTooltip` and `TooltipProvider`                                                                                                        |
-| N17 | Presence Picker            | `SettingsTab.tsx`                         | 80–86             | `PresencePicker` `FocusTrap` missing `escapeDeactivates: stopPropagation` and `isKeyForward`/`isKeyBackward` — **FIXED**: added all three options, matching the theme selector / sort menus                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Every other `PopOut`+`FocusTrap`+`Menu` combo supplies both (theme selector `General.tsx:143–160`, `SettingsSelect`, sort menus) — without it Escape bubbles past the trap and arrow-key navigation is absent  |
-| N18 | Profile Selects            | `Profile.tsx`                             | 547–575 / 816–848 | `ProfileStatus` auto-clear and `ProfileTimezone` selectors are native `<select>` elements with hardcoded `colorScheme: 'dark'` — will render in dark mode on light themes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | General.tsx uses folds `SettingsSelect<T>` (`Button`+`PopOut`+`Menu`) for all dropdowns; `colorScheme: 'dark'` breaks light/custom theme appearance                                                            |
-| N19 | Presence Labels            | `useUserPresence.ts` vs `SettingsTab.tsx` | 55–62 / 36–42     | `PresenceBadge` tooltip shows "Active / Busy / Away"; `PresencePicker` options read "Online / Idle / Do Not Disturb / Invisible" — a DND user shows tooltip "Busy", not "Do Not Disturb" — **FIXED**: aligned `usePresenceLabel` reader vocabulary to the setter (online→"Online", unavailable→"Idle", offline→"Offline")                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Within the same Lotus feature set the user-facing vocabulary is inconsistent between the setter UI and the reader tooltip                                                                                      |
-| N20 | Notification Presets       | `Notifications.tsx`                       | 57–107            | Gaming/Work/Sleep preset buttons are bare `<button>` elements with Lotus-specific CSS vars (`--border-interactive-normal`, `--bg-surface-low`) not defined in all themes — **FIXED**: converted to folds `<Button variant="Secondary" fill="Soft" radii="300">` (auto height) wrapping the emoji/label/description column; undefined vars removed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Grouped preset/action buttons elsewhere use folds `Chip variant="Primary/Secondary" outlined radii="Pill"` (e.g., Composer Toolbar toggles in `General.tsx:1100–1113`)                                         |
-| N21 | Notification Sound Selects | `SystemNotification.tsx`                  | 111–305           | Message sound, invite sound, and quiet-hours time pickers are bare `<select>`/`<input type="time">` with `colorScheme: 'dark'` workaround                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | All other dropdowns in settings use the `Button`+`PopOut`+`Menu`+`MenuItem` folds pattern; the native select renders OS-styled on all platforms                                                                |
-| N22 | DM Preview Virtualizer     | `RoomNavItem.tsx` / `Direct.tsx`          | 608–627 / 232     | DM preview adds a second text row to each DM item, making it taller than 38px, but `useVirtualizer` in `Direct.tsx` still uses `estimateSize: () => 38` — causes layout jump/overlap on initial render — **FIXED**: bumped `estimateSize` to 52 (the two-line DM-row height) so the initial estimate matches the common case; `measureElement` still corrects each row exactly                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Non-DM rooms in Home.tsx also estimate 38px; DM items with a preview are now a different height, creating two visual densities in the same nav column                                                          |
-| N23 | RoomServerACL              | `RoomServerACL.tsx`                       | 100–115 / 298–309 | Server-name text input is a raw `<input type="text">` with inline style object; "Allow IP literal addresses" is a raw `<input type="checkbox">` with `style={{ width: 16, height: 16 }}` — **FIXED**: text input → folds `<Input variant={error?'Critical':'Secondary'}>`; checkbox → folds `<Checkbox variant="Primary">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | All other text/boolean controls in room settings use folds `Input` and `Checkbox` components (`RoomAddress.tsx:163`, `RoomAddress.tsx:330`)                                                                    |
-| N24 | PolicyListViewer           | `PolicyListViewer.tsx`                    | 245–264           | Room-ID add input is a raw `<input type="text">` with manually replicated folds token values — **FIXED**: replaced with folds `<Input variant={error?'Critical':'Secondary'} size="400" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Native pattern: folds `<Input variant="Secondary" size="300" radii="300">` — no inline style needed                                                                                                            |
-| N25 | ExportRoomHistory Inputs   | `ExportRoomHistory.tsx`                   | 258–292           | Both date range pickers are raw `<input type="date">` with inline styles — **FIXED**: replaced with folds `<Input type="date" variant="Secondary" size="400" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Native pattern: folds `Input` component; `<input type="date">` renders OS-native date picker, unstyled relative to the rest of the settings panel                                                              |
-| N26 | RoomShareInvite QR         | `RoomShareInvite.tsx`                     | 66–73             | QR code `<img>` has no `onError` handler and no loading state — broken-image placeholder shown when the external API is unreachable — **FIXED**: added `loading="lazy"` + `onError` that swaps to a folds "QR code unavailable" placeholder card                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Cinny avatar components and MediaGallery use `onError` handlers; this is the only settings element making a request to a third-party server with no graceful degradation                                       |
-
----
-
-### 🟡 Minor — Cosmetic / Token Discipline
-
-| #       | Area                               | File                                   | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Native Pattern                                                                                                                                                                     |
-| :------ | :--------------------------------- | :------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| N27     | GIF Picker                         | `GifPicker.tsx`                        | 103–110           | `FocusTrap` omits `returnFocusOnDeactivate: false` — focus returns to GIF button on dismiss instead of staying in the editor — **FIXED**: added `returnFocusOnDeactivate: false` (matches EmojiBoard)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `EmojiBoard` in `RoomInput.tsx:978` explicitly sets `returnFocusOnDeactivate={false}`; GIF picker dismiss behaviour is inconsistent with emoji picker                              |
-| N28     | Character Counter                  | `RoomInput.tsx`                        | 1159–1174         | Composer character counter rendered with `color: 'var(--tc-surface-low)'` and raw pixel padding — a CSS variable not used anywhere else in the codebase — **FIXED**: removed undefined var and raw opacity; now `<Text priority="300">` with `config.space.S100` padding                                                                                                                                                                                                                                                                                                                                                                                                                    | Use `color.*` folds tokens or `priority="300"` on a `Text` component                                                                                                               |
-| N29     | PollCreator Modal                  | `PollCreator.tsx`                      | 103–116           | Modal root is `<Box as="form" role="dialog" aria-modal="true">` with manually assembled surface styles instead of folds `<Dialog variant="Surface">` — **FIXED**: shell is now `<Dialog as="form" variant="Surface">`; removed inline surface styles                                                                                                                                                                                                                                                                                                                                                                                                                                        | `MessageDeleteItem` and `MessageReportItem` in `Message.tsx:506,635` use `<Dialog variant="Surface">` inside `OverlayCenter > FocusTrap`                                           |
-| N30     | Playback Speed Chip                | `AudioContent.tsx`                     | 163–189           | Speed chip uses `variant="SurfaceVariant" radii="Pill"` while adjacent Play/Pause chip uses `variant="Secondary" radii="300"` — mismatched shape and variant within the same `leftControl` row — **FIXED**: changed speed chip to `variant="Secondary" radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                         | Controls grouped in the same row should share variant and radii                                                                                                                    |
-| N31     | Collapsible Message Toggle         | `MsgTypeRenderers.tsx`                 | 97–105            | "Read more ↓" / "Show less ↑" uses `<Button size="300" variant="Secondary" fill="None">` — visually a padded form button — **FIXED**: replaced with the native flush inline-button pattern (`background:none;border:none;padding:0`) + `<Text size="T200">` tinted `color.Primary.Main`, matching `(edited)` in FallbackContent                                                                                                                                                                                                                                                                                                                                                             | Inline text toggles in message content (e.g. `(edited)` in `FallbackContent.tsx:74`) use bare `<button>` with `background: none; border: none; padding: 0` to stay flush with text |
-| N32     | ReadReceiptAvatars Pill            | `ReadReceiptAvatars.tsx`               | 95–103            | Pill border is `'1px solid rgba(0,212,255,0.30)'` hardcoded raw rgba string; `borderRadius: '999px'` not a folds radii token; padding in raw pixels — **FIXED**: replaced with `config.borderWidth.B300`, `config.radii.Pill`, `config.space.S100/S200`                                                                                                                                                                                                                                                                                                                                                                                                                                     | Use `color.*` folds tokens and `config.radii.Pill` / `config.space.S*`                                                                                                             |
-| ~~N33~~ | ~~ReadReceiptAvatars Class~~       | ~~`ReadReceiptAvatars.tsx`~~           | ~~67~~            | ~~`className="receipt-pill-btn"` references a class never defined~~ — **FIXED**: removed dead className                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | All custom CSS goes through co-located vanilla-extract `*.css.ts` files                                                                                                            |
-| N34     | EventReaders Header Size           | `EventReaders.tsx`                     | 70                | `Header size="600"` (56px tall) while all peer message-action modals use `size="500"` (48px) — **FIXED**: changed to `size="500"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `EditHistoryModal`, `LeaveRoomPrompt`, `MessageDeleteItem`, `MessageReportItem` all use `size="500"`; `size="600"` is reserved for full-page panel headers                         |
-| N35     | EventReaders Close Button          | `EventReaders.tsx`                     | 96                | Close `IconButton` missing explicit `radii="300"` prop — **FIXED**: added `radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Every peer modal close button explicitly sets `radii="300"` (EditHistoryModal:184, LeaveRoomPrompt:75, MessageDeleteItem:517)                                                      |
-| N36     | EventReaders Header Border         | `EventReaders.tsx`                     | 72–77             | Lotus-mode header sets `borderBottom: '1px solid var(--lt-border-color)'` as a CSS shorthand string — **FIXED**: changed to `borderBottomWidth: config.borderWidth.B300`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Native modals use `borderBottomWidth: config.borderWidth.B300` to avoid overriding the border-color set by the folds variant system                                                |
-| N37     | EventReaders Timestamp             | `EventReaders.tsx`                     | 143–151           | Lotus path sets `fontSize: '0.72rem'` inline — a raw relative unit between folds `T200` and `T100` scale steps — **FIXED**: removed raw `fontSize`, added `priority="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Use folds `Text size="T200" priority="300"` for subdued secondary text                                                                                                             |
-| N38     | BookmarksPanel Header              | `BookmarksPanel.tsx`                   | 155–196           | Header uses `variant="Surface"` and close button uses `size="300" radii="300"`; also has a SurfaceVariant search bar strip with no equivalent in any native drawer — **FIXED (full redesign)**: rebuilt the whole "Saved Messages" panel to match the canonical `MembersDrawer` — co-located `BookmarksPanel.css.ts` (`toRem(266)` + `max-width:750px` full-screen media query, replacing the old `position:absolute; zIndex:100` mobile "modal" that had no backdrop/escape), `variant="Background"` header, room **avatars** on each item (was a generic hash icon), `priority` tokens replacing all raw `opacity` hacks, the `borderLeft:3px` accent removed, and Escape-to-close added. | `MembersDrawer` header uses `variant="Background"` and default-size close button; the extra search+count strip creates a structurally different component family                   |
-| N39     | Forward Menu Icon                  | `Message.tsx`                          | 1150              | Forward context menu item's `after` icon has no `size="100"` prop — **FIXED**: added `size="100"` to the `ArrowRight` icon                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Every other after-icon in the same menu block explicitly uses `size="100"` (Reply, Reaction, Edit, Remind Me, Bookmark); missing size causes the Forward icon to render larger     |
-| N40     | ProfileDecoration Remove Button    | `ProfileDecoration.tsx`                | 185               | "Remove" link is a raw `<button>` with `background: 'none'; color: 'var(--tc-surface-low-contrast)'` — an undefined CSS variable — **FIXED**: replaced with `<Button variant="Critical" fill="None" size="300" radii="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Use folds `<Button variant="Critical" fill="None">` or a `Text`-styled inline link                                                                                                 |
-| N41     | PresenceBadge / UserNotes Saving   | `UserRoomProfile.tsx`                  | 240–244           | "Saving…" indicator is `<Text opacity={0.5}>` without a spinner — **FIXED**: now shows a folds `<Spinner variant="Success" fill="Solid" size="100">` beside the "Saving…" text                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Every other save operation in `Profile.tsx` shows a folds `<Spinner variant="Success" fill="Solid" size="300">` alongside the save button                                          |
-| N42     | Character Counter Convention       | `UserRoomProfile.tsx` vs `Profile.tsx` | 243 / 479–490     | `UserPrivateNotes` shows remaining count `"N left"`, appears only under 100; `ProfileStatus` shows `"current / 64"` always with color progression                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Two Lotus features in the same settings flow use different counter conventions; neither matches a pre-existing Cinny pattern                                                       |
-| N43     | Night Light Slider                 | `General.tsx`                          | 554–565           | Night Light intensity slider is a raw `<input type="range">` with no `accentColor` token — renders in browser-default blue on all themes — **FIXED**: added `accentColor: color.Primary.Main`; the intensity label `opacity` hack also replaced with `priority="300"`                                                                                                                                                                                                                                                                                                                                                                                                                       | The Gate Threshold slider at `General.tsx:1456` at minimum sets `accentColor: 'var(--accent-orange)'`; the Night Light slider does neither                                         |
-| N44     | Mention Highlight & Boot Button    | `General.tsx`                          | 597–677           | `<input type="color">` for mention highlight uses raw pixel dimensions (`width: '36px'`, `height: '28px'`, `borderRadius: '4px'`); Reset and Boot buttons are bare `<button>` with Lotus CSS vars — **PARTIALLY FIXED**: the mention-highlight Reset button (renders on all themes) is now a folds `<Button variant="Secondary" fill="Soft">`, removing the undefined `--border-interactive-normal` var. The Boot button is **deliberately kept** as-is: it only renders when `lotusTerminal` is active, i.e. exactly when the `--accent-orange*` TDS vars are defined. The `<input type="color">` itself is tracked separately as N69.                                                     | Adjacent settings controls use folds `IconButton`/`Button`; there is no other `<input type="color">` in the Cinny settings UI                                                      |
-| N45     | SettingsSelect vs SelectTheme      | `General.tsx`                          | 126 vs 197        | `SettingsSelect` trigger uses `variant="Secondary"` while `SelectTheme` uses `variant="Primary" outlined fill="Soft"` for the same `Button`+`PopOut` dropdown pattern — adjacent rows in the same Appearance section have different visual weight — **FIXED**: `SelectTheme` trigger changed to `variant="Secondary"` to match `SettingsSelect`                                                                                                                                                                                                                                                                                                                                             | Dropdown triggers should share the same variant within the same settings section                                                                                                   |
-| N46     | RoomInsights SectionHeader         | `RoomInsights.tsx`                     | 24–37             | `SectionHeader` adds `textTransform: 'uppercase'`, `letterSpacing: '0.06em'`, `opacity: 0.6` to `Text size="L400"` — **FIXED**: simplified to `<Text size="L400" priority="300">`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Every other settings panel uses bare `<Text size="L400">Label</Text>` with no transforms (`General.tsx:52–72`, `ExportRoomHistory.tsx:220,246`)                                    |
-| N47     | RoomInsights Chart Radii           | `RoomInsights.tsx`                     | 350–356 / 415–436 | Bar chart uses `borderRadius: 3` and histogram bars use `borderRadius: '2px 2px 0 0'` as raw pixel integers — **FIXED**: replaced with `config.radii.R300`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | All other rounded corners use `config.radii.*` tokens                                                                                                                              |
-| N48     | RoomInsights Font Size             | `RoomInsights.tsx`                     | 448               | Hour-axis labels set `style={{ fontSize: 9 }}` as a raw pixel integer — overrides the folds `Text size="T200"` applied on the same element — **FIXED**: removed raw `style={{ fontSize: 9 }}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Use only folds `Text` size props; never override with raw `fontSize`                                                                                                               |
-| N49     | RoomInsights Emoji Icons           | `RoomInsights.tsx`                     | 41–65 / 292–295   | `StatTile` uses literal Unicode emoji (`🖼️ 🎬 🎵 📎`) in `<Text size="H4">` as icons — **FIXED**: `StatTile` now takes an `icon: IconSrc` and renders `<Icon>` using `Icons.Photo/VideoCamera/Headphone/File`                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | All other iconographic elements use `<Icon src={Icons.*} />` from folds — emoji rendering varies between Windows/macOS/Linux and cannot be tinted by the theme                     |
-| N50     | RoomInsights Warning Banner        | `RoomInsights.tsx`                     | 168–192           | Disclaimer banner uses raw `<Box style={{ border: color.Warning.Main, background: color.Warning.Container }}>` — **FIXED**: replaced with `<SequenceCard variant="SurfaceVariant">` with `<Icon>` colored via `color.Warning.Main`                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Settings panel informational cards use `<SequenceCard variant="SurfaceVariant">` throughout RoomServerACL, ExportRoomHistory, PolicyListViewer                                     |
-| N51     | ExportRoomHistory Progress         | `ExportRoomHistory.tsx`                | 311–314           | Export progress shows as a plain `Text` string ("Exporting… N messages") — **WON'T FIX (deliberate)**: unlike `BackupRestore` (which has a known total to drive a determinate `ProgressBar`), export has no known total — it counts messages as they stream. The operation already shows a folds `Spinner` in the button plus a live count, which is the correct affordance for an indeterminate task.                                                                                                                                                                                                                                                                                      | `BackupRestore.tsx:72,90` uses a folds `<ProgressBar variant="Secondary" size="300">` for the same kind of long async operation                                                    |
-| N52     | MessageQuickReactions Empty Return | `Message.tsx`                          | 160               | `if (recentEmojis.length === 0) return <span />;` — injects an invisible DOM node into the hover action bar flex container — **FIXED**: changed to `return null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Universal convention for empty renders in Cinny is `return null`; 144+ instances across the codebase; the empty `<span>` can affect flex spacing                                   |
-
----
-
-### Round 2 — Additional Feature Areas
-
-#### 🔴 Additional Major Findings
-
-**N53 — PTT Badge (Lotus Terminal path): Raw `<div>` tree with `--lt-*` CSS vars instead of folds `<Chip>`**
-
-- **File:** `src/app/features/call/CallControls.tsx`
-- **Status:** **FIXED** (`50076962`) — removed the `lotusTerminal` branch entirely; the PTT badge is now the single folds `<Chip variant={pttActive ? 'Success' : 'Warning'} fill="Soft" radii="400" outlined>` path for all themes (TDS styling still flows through the CSS-variable layer over the Chip). Dropped the now-unused `lotusTerminal` read. Build-verified; visual parity to confirm only if you specifically used the terminal-mode PTT look.
-- **Issue:** When `lotusTerminal` is true the PTT badge renders as a bare `<Box>` with inline styles referencing `--lt-accent-green-dim`, `--lt-accent-green-border`, `--lt-accent-green` — variables absent outside TDS mode — hardcoded rem padding, `borderRadius: '99px'` (non-token), a raw monospace `fontFamily` string, non-token `letterSpacing`, and a raw `animation:` CSS string for the live-pulse dot. The live `●` dot is a raw `<span>` with inline style.
-- **Root Cause:** Two entirely separate component trees for the same badge depending on a theme boolean. The non-terminal path (lines 284–301) uses the correct `<Chip variant="Success"|"Warning" fill="Soft" radii="400" outlined>`.
-- **Fix:** Remove the terminal branch. The standard `<Chip>` path already exists and TDS theming can be applied via the CSS variable layer without a separate component tree.
-
-**N54 — PiP Mute Overlay Badges: Raw `<div>` instead of folds `<Badge>`/`<Chip>`**
-
-- **File:** `src/app/components/CallEmbedProvider.tsx`, lines 438–477
-- **Status:** **FIXED** — replaced hardcoded `borderRadius`/`padding`/`fontSize` with `config.radii.R300`, `config.space.S100/S200` tokens; replaced raw `<span>` text with folds `<Text size="T200">`; color now applied to the `Icon`/`Text` via `color.Critical/Warning.Main`. The dark translucent scrim (`rgba(0,0,0,0.65)`) is **deliberately retained**: these badges overlay arbitrary video, where a theme `Chip`/`Badge` surface token would not guarantee legibility. They are also non-interactive (`pointerEvents: 'none'`), so an interactive `Chip` (a `<button>`) is semantically wrong.
-- **Issue:** Both the "You muted" (bottom-left) and "All muted" (top-right) PiP badges are raw `<div>` elements with hardcoded `background: 'rgba(0,0,0,0.65)'`, `backdropFilter: 'blur(4px)'`, `borderRadius: '6px'`, `padding: '3px 7px'`, `fontSize: '12px'`. Color is set as `color: color.Critical.Main` directly on the wrapper `<div>`, not via a folds `variant` prop. Text is `<span style={{ fontSize: '11px', fontWeight: 600 }}>`.
-- **Root Cause:** `CallView.tsx` line 127 uses `<Badge variant="Critical" fill="Solid" size="400">` in the same file for the "N Live" indicator — the native pattern exists and is unused here.
-
-**N55 — Chat Background / Seasonal Theme Selected State Uses `color.Critical.Main` (Error Red)**
-
-- **File:** `src/app/features/settings/general/General.tsx`, lines 1660–1661 and 1726–1728
-- **Status:** **FIXED** — replaced all 4 instances of `color.Critical.Main` with `color.Primary.Main` in `General.tsx`
-- **Issue:** The selected-state border for both `ChatBgGrid` and `SeasonalBgGrid` is `border: \`2px solid ${color.Critical.Main}\``and the label color is also`color.Critical.Main`. `color.Critical.Main` is the semantic token for **destructive/error states** — it is used for "Leave Room", "Delete Message", "Report Room" in the same file. A normal selection indicator rendered in error red is semantically wrong and visually alarming.
-- **Root Cause:** Wrong semantic token for an active/selected state.
-- **Fix:** Replace `color.Critical.Main` with `color.Primary.Main` (or `color.Success.Main` to match how other settings selections are styled) for both the border and label color.
-
-**N56 — Report Modal Category Dropdown: Native `<select>` Instead of folds `Chip`+`PopOut`+`Menu`**
-
-- **File:** `src/app/features/room/ReportRoomModal.tsx` lines 138–163; `src/app/features/room/ReportUserModal.tsx` lines 144–169
-- **Status:** **FIXED** — extracted a shared `ReportCategorySelect` component (`src/app/features/room/ReportCategorySelect.tsx`) using the folds `Button` trigger + `PopOut` + `FocusTrap` + `Menu` + `MenuItem` pattern (with `escapeDeactivates`/arrow-key nav, matching `OrderButton`); both modals now use it instead of the native `<select>`.
-- **Issue:** Both report modals render the "Category" field as `<Box as="select">` with hand-rolled inline styles (padding, border, background, color, fontSize, fontFamily). No other selector in the message-action modal context uses `<select>` — the established pattern for all dropdowns in both message modals and search filters is `Chip onClick → setMenuAnchor → PopOut → FocusTrap → Menu → MenuItem` (reference: `OrderButton` in `SearchFilters.tsx` lines 63–114).
-
----
-
-#### 🟠 Additional Moderate Findings
-
-| #   | Area                                                                         | File                                          | Lines                 | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Native Pattern                                                                                                                                                                                                      |
-| :-- | :--------------------------------------------------------------------------- | :-------------------------------------------- | :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| N57 | PiP Fullscreen Button                                                        | `CallEmbedProvider.tsx`                       | 929–951               | PiP fullscreen toggle is a raw `<button>` with `background: 'rgba(0,0,0,0.65)'`, `color: '#fff'`, `fontSize: '13px'`, Unicode ⛶/⊡ glyph — no focus ring, no tooltip — **FIXED (token discipline)**: `borderRadius`/`padding`/gap replaced with `config.radii.R300` + `config.space.*` tokens (also on the "Return to call" label). The dark scrim and `#fff` text are **deliberately kept** for legibility over arbitrary video; the glyph stays because folds has no fullscreen icon. `aria-label`/`title` tooltip already present.                                                             | `Controls.tsx` fullscreen button uses `<IconButton variant="Surface" fill="Soft" radii="400" size="400" outlined>` with `<TooltipProvider>`; hardcoded `#fff` fails on light themes                                 |
-| N58 | Screenshare Confirm Popup                                                    | `CallControls.tsx`                            | 303–360               | "Share your screen?" popup is a raw `<Box>` with `--bg-surface`/`--bg-surface-border` vars (undefined outside TDS), `borderRadius: '0.75rem'`, `boxShadow: '0 8px 32px rgba(...)'`, no `FocusTrap`                                                                                                                                                                                                                                                                                                                                                                                               | Cinny's confirmation dialogs use folds `<Menu>` + `<FocusTrap>` + `<PopOut>`; the non-FocusTrap popup is not keyboard-accessible                                                                                    |
-| N59 | ML Noise Suppression Panel                                                   | `General.tsx`                                 | 1303–1487             | Sub-panel uses `var(--border-color)`, `var(--bg-card)`, `var(--bg-input)` (undefined in folds default theme), raw `<details>`/`<summary>` (UA-styled), `accentColor: 'var(--accent-orange)'` (TDS-only)                                                                                                                                                                                                                                                                                                                                                                                          | All other settings sub-sections use `<SettingTile>` rows inside `<SequenceCard>`; no other settings component uses `<details>`                                                                                      |
-| N60 | Knock Badge on Members Button                                                | `RoomViewHeader.tsx`                          | 744–782               | Knock count badge wrapped in extra `<div style={{ position: 'relative' }}>` with hardcoded `fontSize: '9px'`, `minWidth: '14px'`, `height: '14px'`, `padding: '0 3px'` overriding folds `size="200"` — **FIXED**: removed wrapper div, put `position: 'relative'` directly on the `IconButton`, `<Badge size="400">` with `toRem(3)` insets and `<Text size="L400">` — now matches the Pinned Messages badge pattern exactly                                                                                                                                                                     | Pinned Messages badge (same header, lines 651–677) uses `position: 'relative'` directly on `<IconButton>` + `toRem()` for inset; no extra wrapper div                                                               |
-| N61 | Knock Member Rows                                                            | `MembersDrawer.tsx`                           | 441–487               | Knock requester rows use raw `<Box>` with manually duplicated padding; no `<MenuItem>` wrapper → no hover/focus/active states — **WON'T FIX (deliberate)**: unlike a `MemberItem` (a clickable navigation row), a knock row contains two action buttons (Approve / Deny) and is **not itself clickable**. Wrapping it in `<MenuItem>` (a `<button>`) would nest interactive controls inside a button — invalid HTML/ARIA. The row has no interactive state to express.                                                                                                                           | Every joined/invited member uses `<MemberItem>` which wraps `<MenuItem variant="Background" radii="400">` with baked-in spacing and all interactive states                                                          |
-| N62 | Unverified Device Banner                                                     | `RoomInput.tsx`                               | 860–883               | Warning callout above composer uses inline `background: color.Warning.Container`, `borderLeft: '3px solid color.Warning.Main'` — a custom left-border accent pattern not present anywhere else in the folds system — **FIXED**: replaced the `borderLeft: '3px'` accent with a standard full `border` using `color.Warning.ContainerLine` + `config.borderWidth.B300`; removed the `opacity` hacks (folds `OnContainer` already meets contrast)                                                                                                                                                  | Warning indicators in the same codebase use `<Chip variant="Warning">` or `<Badge variant="Warning">`; the 3px left-border card pattern has no folds equivalent                                                     |
-| N63 | Report Modals — Box Instead of Dialog                                        | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 97–110 / 103–116      | Both modals render as `<Box as="form" role="dialog">` with inline `background`/`borderRadius`/`boxShadow`; use `config.radii.R400` (rounder) vs native `Dialog` which uses `R300` — **FIXED**: both shells are now `<Dialog as="form" variant="Surface">`; removed inline surface styles (Dialog provides background/radius/shadow)                                                                                                                                                                                                                                                              | Native `MessageReportItem` at `Message.tsx:634` and all other Cinny message-action modals use `<Dialog variant="Surface">`                                                                                          |
-| N64 | EditHistoryModal — `<Modal>` vs `<Dialog>`                                   | `EditHistoryModal.tsx`                        | 166                   | Uses `<Modal variant="Surface" size="500">` while sibling message-action modals (`DeleteMessageItem:505`, `MessageReportItem:634`) all use `<Dialog variant="Surface">` — different widths and internal padding                                                                                                                                                                                                                                                                                                                                                                                  | `<Dialog variant="Surface">` is the established modal shell for all message-triggered dialogs                                                                                                                       |
-| N65 | EditHistoryModal — No "Load More"                                            | `EditHistoryModal.tsx`                        | 253–259               | When `hasMore` is true the modal shows passive `<Text>"Showing the 50 most recent edits"</Text>` with no action; older edits are inaccessible — **FIXED**: implemented real pagination — edits accumulate across `next_batch` fetches (de-duped by event id, re-sorted by ts), with a folds `<Button>Load more</Button>` (spinner while loading) replacing the passive text                                                                                                                                                                                                                      | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `<Button size="300" variant="Secondary">Load more</Button>` to fetch the next page                                                        |
-| N66 | DateRangeButton — Native `<input type="date">`                               | `SearchFilters.tsx`                           | 558–589               | "From" and "To" date fields are raw `<input type="date">` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds `<Input type="date" variant="SurfaceVariant" size="300" radii="300">`; removed now-unused `color` import                                                                                                                                                                                                                                                                                                                             | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds `<Input size="300" radii="300">`; the date inputs are the only native browser inputs in the search filter row           |
-| N67 | SeasonalEffect / NightLight Z-Index Order                                    | `SeasonalEffect.tsx` / `App.tsx`              | 759 / 62–77           | `SeasonalEffect` mounts at `zIndex: 9999`; `NightLightOverlay` at `zIndex: 9998`. Seasonal particles render **above** Night Light so they are never tinted. `SeasonalEffect` also shares `z-index: 9999` with the skip-to-content link in `ClientLayout.tsx` — **FIXED**: lowered `SeasonalEffect` overlay to `zIndex: 9997` (below Night Light at 9998 and modals at 9999), so Night Light now tints the particles and dialogs are never obscured                                                                                                                                               | Expected UX: Night Light tints all visible content including effects; requires either a higher Night Light z-index or a lower SeasonalEffect z-index                                                                |
-| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes                 | `syntaxHighlight.ts`                          | 313–323               | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` — **FIXED**: `tokenStyle()` now maps to the `--prism-*` family (keyword/selector/boolean/atrule/comment) which has proper light/dark/TDS palettes; comment uses `--prism-comment` instead of an opacity hack                                                                                              | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family                                    |
-| N69 | Mention Highlight — `<input type="color">` Instead of `HexColorPickerPopOut` | `General.tsx`                                 | 644–675               | Raw `<input type="color">` with hardcoded pixel dimensions; OS-native color picker chrome renders completely differently from the rest of settings UI — **FIXED**: replaced with `<HexColorPickerPopOut>` + `<HexColorPicker>` (react-colorful) behind a folds `<Button>` trigger showing a color swatch; the picker's built-in `onRemove` replaces the separate Reset button                                                                                                                                                                                                                    | `PowersEditor.tsx:125–143` establishes `<HexColorPickerPopOut picker={<HexColorPicker ...>}>` as the codebase's color-picking pattern; Reset button should be `<Button size="300" variant="Secondary" radii="300">` |
-| N70 | ChatBgGrid / SeasonalBgGrid — Raw `<button>` Elements                        | `General.tsx`                                 | 1648–1689 / 1711–1742 | Both pickers use raw HTML `<button>` elements with hardcoded `width: toRem(76)`, `height: toRem(50/56)`, `borderRadius: toRem(8)`, `border: 2px solid rgba(...)` — no focus ring via folds, no `variant` prop, no hover state from the design system — **FIXED**: chrome (radius, border, hover, **keyboard `:focus-visible` ring**, selected state via `data-selected`) moved to a shared `BgSwatch.css.ts` using `config`/`color` tokens; only the per-swatch size + live preview background remain inline (these are inherently custom preview tiles, not folds `MenuItem`/`Chip` candidates) | Native Cinny theme pickers use folds `<MenuItem>` or `<Chip>` which respond to theme and provide focus/hover states automatically                                                                                   |
-
----
-
-#### 🟡 Additional Minor Findings
-
-| #   | Area                                          | File                                          | Lines             | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Native Pattern                                                                                                                                                                                         |
-| :-- | :-------------------------------------------- | :-------------------------------------------- | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| N71 | Call Prescreen Text                           | `CallView.tsx`                                | 63–85             | `ChannelFullMessage` and `AlreadyInCallMessage` use `<Text style={{ color: color.Critical/Warning.Main }}>` inline instead of folds `<Badge variant="Critical/Warning">` — **WON'T FIX (deliberate)**: these are full, centered explanatory **sentences** ("Channel Full (N/M) — Wait for someone to leave…"), not short labels. A `Badge` is for compact chips like "N Live"; wrapping a sentence in one is visually wrong. They already use folds `color.*` tokens. The sibling `LivekitServerMissingMessage`/`NoPermissionMessage` use the same (un-flagged) pattern. | The "N Live" badge directly above (line 127) correctly uses `<Badge variant="Critical" fill="Solid" size="400">`                                                                                       |
-| N72 | Mute MenuItem Icon                            | `RoomNavItem.tsx`                             | 454–466           | "Mute" `<MenuItem>` places bell-mute icon as a raw child node instead of using the `before` prop — **FIXED**: moved `Icons.BellMute` to `before` prop                                                                                                                                                                                                                                                                                                                                                                                                                    | Every other `<MenuItem>` in both `RoomNavItemMenu` and `RoomMenu` places its leading icon in the `before` prop                                                                                         |
-| N73 | Pending Requests Header                       | `MembersDrawer.tsx`                           | 415–422           | "Pending Requests" section header is bare `<Text>` with inline padding instead of `className={css.MembersGroupLabel}` — **FIXED**: now uses `className={css.MembersGroupLabel}` like every other section header                                                                                                                                                                                                                                                                                                                                                          | Power-level group labels at lines 506–519 use `className={css.MembersGroupLabel}` for all other section headers in the same virtualizer list                                                           |
-| N74 | Emoji Prefix Span                             | `RoomNavItem.tsx`                             | 730–736           | Emoji prefix rendered as raw `<span style={{ fontSize: '1.15em', lineHeight: 1 }}>` inside a `<Text>` node — **FIXED**: removed the emoji-splitting span; the room name (including any leading emoji) now renders directly inside `<Text>`                                                                                                                                                                                                                                                                                                                               | All other nav item text uses folds `<Text size="Inherit">` or similar — no raw `<span>` with em-based font-size override exists elsewhere in the sidebar                                               |
-| N75 | Room Name Override / Star Indicators          | `RoomNavItem.tsx`                             | 741–757           | Pencil and star indicator icons are embedded inside the name `<Box as="span">`, giving them the same visual baseline as the room name text — **WON'T FIX (deliberate)**: an inline favorite-star / local-name marker adjacent to the name is a deliberate, common design (cf. Element/Slack pinned-name markers). Moving them to the far right would collide with the unread/notification indicators already there and risks layout regressions. Low value, real regression risk.                                                                                        | Native sidebar status indicators (unread count, notification mode icon) are placed to the far right of the item, never inside the name text span group                                                 |
-| N76 | Report Modals — Extra Cancel Button           | `ReportRoomModal.tsx` / `ReportUserModal.tsx` | 189–191 / 195–197 | Both custom report modals include a "Cancel" `<Button>` in the footer row — **FIXED**: removed the Cancel button; dismissal is via the header `×` / click-outside, matching `MessageReportItem`                                                                                                                                                                                                                                                                                                                                                                          | Native `MessageReportItem` (`Message.tsx:675–691`) has no Cancel button — dismissal is via `×` header button or click-outside only                                                                     |
-| N77 | Search Filter Inline Lambdas                  | `SearchFilters.tsx`                           | 480, 625          | `SelectSenderButton` and `DateRangeButton` trigger chips use inline `onClick` arrow functions — **WON'T FIX (deliberate)**: purely a code-style nit with zero user-facing or behavioural impact. Inline arrow handlers are idiomatic React and used throughout this very file; extracting them yields no functional benefit.                                                                                                                                                                                                                                             | `OrderButton` (line 58) and `SelectRoomButton` (line 195) both extract a named `const handleOpenMenu: MouseEventHandler<HTMLButtonElement>` handler — bypassing the type annotation in the inline form |
-| N78 | HasLink Chip Active Color                     | `SearchFilters.tsx`                           | 755               | `HasLink` active state uses `variant="Primary"` (blue); all boolean scope-toggle chips in the same bar use `variant="Success"` (green) with `outlined` — **FIXED**: changed to `variant={containsUrl ? 'Success' : 'SurfaceVariant'} outlined={!!containsUrl}`                                                                                                                                                                                                                                                                                                           | `variant="Success" outlined` is the established active-state pattern for boolean toggles in the filter bar                                                                                             |
-| N79 | Server Notice Chip Radii                      | `RoomViewHeader.tsx`                          | 570               | `<Chip size="400" radii="Pill">` — `Pill` radii on a room-type label — **FIXED**: changed to `radii="300"`                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Room/space type labels in lobby (`RoomItem.tsx:83`, `SpaceItem.tsx:63`) use `radii="300"`; `radii="Pill"` is for filter/tag chips only                                                                 |
-| N80 | Server Support Contact Layout                 | `About.tsx`                                   | 172–239           | Homeserver support contacts rendered as raw `<Box direction="Column">` with `<Text as="a">` pairs — custom label/link layout — **WON'T FIX (deliberate)**: a contact is `role → {matrix_id?, email?, …}` (one-to-many links per role), which doesn't map onto `SettingTile`'s single `title`/`description`/`after` slots without contortion. The current layout already uses folds `Box`/`Text`/`SequenceCard` + tokens and `Text as="a"` (a valid folds pattern); no undefined vars or raw HTML chrome.                                                                 | All other `<SequenceCard>` content in `About.tsx` and `General.tsx` uses `<SettingTile title="..." description="..." after={...}>` as the content unit                                                 |
-| N81 | Background Picker Grid — No Responsive Layout | `General.tsx`                                 | 1707–1742         | Fixed `width: toRem(76)` flex-wrap cells with no `minWidth` floor or CSS grid `auto-fill` — SeasonalBgGrid's 13 items produce a visually lopsided orphan last row at any viewport width — **FIXED** (`50076962`): both `ChatBgGrid` and `SeasonalBgGrid` containers switched to `display: grid; grid-template-columns: repeat(auto-fill, minmax(toRem(76), 1fr))`, so swatches fill each row evenly                                                                                                                                                                      | Cinny's native grids use `grid-template-columns: repeat(auto-fill, minmax(N, 1fr))` or equivalent for responsive fill                                                                                  |
-| N82 | Join/Leave Sounds Auto-Preview                | `General.tsx`                                 | 1592–1609         | Selecting a sound in the dropdown immediately plays a preview, but no UI affordance communicates this to the user — **FIXED**: the tile description now reads "…Selecting an option plays a preview." (the same affordance was applied to the new Ringtone selector)                                                                                                                                                                                                                                                                                                     | Settings tiles with side effects on selection (theme picker, chat background) show a live visual preview or a dedicated control explaining the side effect                                             |
-
----
-
-### Round 3 — Rich Topic Editor, RemindMe Dialog, Composer Toolbar, Voice Recorder, Uploads, Location, Mention Highlight
-
-#### 🔴 Additional Major Findings
-
-**N83 — Rich Topic Formatting Toolbar: Raw `<button>` Elements with Fully Inline Styles**
-
-- **File:** `src/app/features/common-settings/general/RoomProfile.tsx`, lines 335–358
-- **Status:** **FIXED** — replaced raw `<button>` elements with `<Button size="300" radii="300" variant="Secondary" fill="Soft">` with styled `<Text>` children for B/I/S/code labels
-- **Issue:** The four formatting buttons (B, I, S, `` ` ``) in the room topic editor are plain HTML `<button>` elements with entirely inline styles: manual `border`, `borderRadius`, `background`, `color`, `cursor`, `fontSize`, `fontWeight`, `fontStyle`, `fontFamily`, `lineHeight`. They bypass the folds design token system completely — no `variant`, `size`, or `radii` props, no theme-reactive hover/focus states.
-- **Root Cause:** Custom addition without referencing folds primitives.
-- **Fix:** Replace with `<IconButton type="button" size="300" radii="300" variant="Surface" fill="Soft">` matching the emoji-picker trigger immediately above them at line 285, which already uses the correct pattern.
-
-**N84 — Topic Preview in Room Settings Renders Plain Text Instead of `formatted_body`**
-
-- **File:** `src/app/features/common-settings/general/RoomProfile.tsx`, lines 457–461
-- **Status:** **FIXED** — read-mode topic now checks `topic.format === 'org.matrix.custom.html'` and renders `parse(sanitizeCustomHtml(topic.formatted_body))`, matching `RoomTopicViewer` and all other display sites
-- **Issue:** The read-mode topic display wraps `topic.topic` (the plain-text field) in `<Linkify>` and never reads `formatted_body`. However `buildTopicContent()` (lines 82–89) intentionally stores both `topic` and `formatted_body` under `org.matrix.custom.html`. After the user saves a formatted topic, the preview panel immediately shows the stripped plain-text version — the formatting appears to disappear within the same settings panel.
-- **Root Cause:** The existing `RoomTopicViewer` component (`src/app/components/room-topic-viewer/RoomTopicViewer.tsx:24–51`) already checks `topic.format === 'org.matrix.custom.html'` and pipes `formatted_body` through `sanitizeCustomHtml`. This component is used everywhere else (`RoomIntro`, `LobbyHero`, `RoomItem`, `Invites`, etc.) but not in Room Settings.
-- **Fix:** Replace the inline plain-text render with `<RoomTopicViewer topic={roomTopic}>` to match all other display sites.
-
----
-
-#### 🟠 Additional Moderate Findings
-
-| #   | Area                               | File                       | Lines              | Issue                                                                                                                                                                                                                                                                                                                                                                                                                                                | Native Pattern                                                                                                                                                                                                                     |
-| :-- | :--------------------------------- | :------------------------- | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| N85 | RemindMe Dialog Shell              | `RemindMeDialog.tsx`       | 69–81              | Dialog shell is `<Box role="dialog">` with `background`, `borderRadius`, `boxShadow`, `overflow` all set as inline styles using token lookups. Corner radius is `config.radii.R400` which differs from the `R300` embedded in `<Dialog variant="Surface">` — **FIXED**: shell replaced with `<Dialog variant="Surface" style={modalStyle}>`; removed the inline `background`/`borderRadius`/`boxShadow`/`overflow` and the now-unused `color` import | All small message-action dialogs (`LeaveRoomPrompt`, `LogoutDialog`, `JoinAddressPrompt`, `PowerChip`, `DeleteMessageItem`) use `<Dialog variant="Surface" style={modalStyle}>` as the shell                                       |
-| N86 | RemindMe Preset Buttons            | `RemindMeDialog.tsx`       | 111–117            | The four preset time choices (20 min, 1 hr, 3 hr, tomorrow) use `<MenuItem size="300" radii="300">` — `MenuItem` is a navigation primitive tied to `menu`/`menubar` ARIA roles; placing it inside `role="dialog"` is an invalid ARIA combination — **FIXED**: each preset is now a folds `<Button variant="Secondary" fill="Soft" radii="300">`, resolving the invalid `menuitem`-in-`dialog` ARIA                                                   | Dialog action choices use `<Button>` (delete/leave/logout dialogs) or `<Chip>` (selection choices). No other dialog in the codebase uses `MenuItem` for action items                                                               |
-| N87 | Composer Toolbar Toggle Pattern    | `General.tsx`              | 1100–1114          | Per-button toolbar toggles (Format, Emoji, Sticker, GIF, Location, Poll, Voice, Schedule) use `<Chip variant="Primary"/"Secondary" radii="Pill">` in a wrap grid — a compact chip-toggle grid inside a `SettingTile`, different from every adjacent row                                                                                                                                                                                              | The three sibling tiles in the same `Editor()` function (ENTER for Newline, Markdown, Formatting Toolbar) all use `<SettingTile after={<Switch variant="Primary">}>`. 15+ other binary settings in the file use the Switch pattern |
-| N88 | Voice Recorder Recording State     | `VoiceMessageRecorder.tsx` | 195, 206, 240, 276 | Recording container background is `var(--bg-surface-variant)`, the live pulse dot is `var(--tc-danger-normal)`, waveform bars are `var(--tc-primary-normal)` — custom Lotus CSS vars that may not exist in folds themes, falling back to transparent/black — **FIXED**: replaced with `color.SurfaceVariant.Container`, `color.Critical.Main`, `color.Primary.Main`                                                                                  | Native message components use JS-accessible `color.*` tokens that are always populated regardless of theme class                                                                                                                   |
-| N89 | Voice Recorder Preview Audio       | `VoiceMessageRecorder.tsx` | 282–283            | Preview state renders bare `<audio src={previewUrl} controls>` — native browser element with inconsistent cross-browser chrome — **FIXED**: replaced with `<audio ref>` + folds `<IconButton>` play/pause toggle; `onEnded` resets playing state                                                                                                                                                                                                     | Native audio messages use folds `Attachment`/`AttachmentContent` layout wrappers; pre-send preview should use `<IconButton>` play/pause controls                                                                                   |
-| N90 | Mention Highlight Contrast Formula | `App.tsx`                  | 36–40              | Auto-computed text color (black/white) uses simplified luma `(0.299r + 0.587g + 0.114b)/255 > 0.5` — not WCAG 2.1 relative luminance (which requires gamma linearization) — **FIXED**: replaced with WCAG 2.1 relative luminance formula using `((c+0.055)/1.055)^2.4` gamma linearization; threshold moved from 0.5 to 0.179                                                                                                                        | Folds `color.*.OnContainer` tokens are manually curated to pass WCAG AA 4.5:1 contrast ratios; custom computation must match this guarantee                                                                                        |
-
----
-
-#### 🟡 Additional Minor Findings
-
-| #   | Area                               | File                     | Lines   | Issue                                                                                                                                                                                                                | Native Pattern                                                                                                                                                   |
-| :-- | :--------------------------------- | :----------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| N91 | Upload Card Caption Input          | `UploadCardRenderer.tsx` | 356–376 | Caption input is raw `<input type="text">` with hardcoded inline CSS using Lotus-specific vars not in folds — **FIXED**: replaced with folds `<Input variant="Secondary" size="300" radii="300">`                    | Other text inputs in the UI use folds `<Input size="300" radii="300">` with folds-token props for all sizing and color                                           |
-| N92 | Location "Open Location" Button    | `MsgTypeRenderers.tsx`   | 534–547 | "Open Location" action link uses `<Chip as="a">` — compact badge-sized element — **FIXED**: replaced with `<Button as="a" variant="Secondary" fill="Solid" radii="300" size="400">` matching FileContent pattern     | `FileContent.tsx` uses `<Button variant="Secondary" fill="Solid" radii="300" size="400">` for "Open File"/"Open PDF"                                             |
-| N93 | Location Coordinates Text          | `MsgTypeRenderers.tsx`   | 532     | `<Text size="T300" style={{ opacity: 0.65 }}>` — hardcoded non-standard opacity — **FIXED**: replaced with `<Text size="T300" priority="300">`                                                                       | Secondary text uses folds `priority` prop; `0.65` is outside the token scale                                                                                     |
-| N94 | Mention Highlight Border Invisible | `App.tsx`                | 41      | `--mention-highlight-border` is set to the same value as `--mention-highlight-bg` — the border is invisible — **FIXED**: border is now `rgba(r,g,b,0.5)` — same hue as the background at 50% opacity, always visible | In folds, `color.*.ContainerLine` is always a lighter/muted sibling of `color.*.Container`, providing the 1px outline that gives mention chips visual definition |
+- **#5 — Seasonal themes & chat-background redesign.** Current backgrounds are basic CSS; goal is high-fidelity, research-backed, GPU-accelerated designs (layered `oklch`, `backdrop-filter`, `contain:paint`) with WCAG-AA overlay contrast. Treat each as its own design sprint.

LOTUS_FEATURES.md

@@ -322,6 +322,11 @@ Users can set a custom background color for `@mention` chips that highlight thei
 
 ## Voice / Video Call Improvements
 
+> 🔱 **[EC-FORK]** Element Call is embedded as a **pre-built npm bundle** today.
+> The plan to fork & self-build it from source for true ownership — and which of
+> the items below would move into our EC source — is in
+> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md).
+
 ### Element Call Upgrade
 
 Upgraded embedded Element Call widget from **0.16.3** to **0.19.4**.

LOTUS_TESTING.md

@@ -106,18 +106,19 @@
 
 **Expected:** the decoration ring/overlay renders around that participant's avatar on the call tile, the same way it does in member lists.
 
-### A7. EC iframe load watchdog + recovery UI (#EC)
+### A7. EC iframe load watchdog + recovery UI (#EC, N96)
 
-This guards against a permanently-stuck "Loading…" call.
+This guards against a permanently-stuck "Loading…" call. Also covers the N96 button-label fix (the old "Retry" and "Leave" buttons were identical — now there is a single **"Back"** button).
 
 1. Normal case: **join a call** → it should connect within a few seconds as usual (the watchdog stays invisible).
 2. Failure case (best-effort to reproduce): throttle your network hard (devtools → Network → Offline) **right as** you click join, or block the Element Call origin, so the iframe can't finish loading.
 
 **Expected**
 
-- On a genuine failure/timeout (~25s), instead of an endless spinner you get a **visible error overlay with Retry / Leave** buttons.
-- **Retry** attempts to reload the call; **Leave** exits cleanly.
+- On a genuine failure/timeout (~25s), instead of an endless spinner you get a **visible error overlay with a single "Back" button** (the old "Retry" + "Leave" pair is gone — they did the same thing and "Retry" was misleading).
+- Clicking **Back** returns you to the call prescreen, where you can manually click Join to try again.
 - Normal joins must **not** trigger the error overlay (no false positives) — this is the important part to confirm.
+- **Self-heal:** if the error overlay appears on a slow network but EC then finishes loading anyway, the overlay should **dismiss itself** and drop you into the live call. Worth confirming on a deliberately throttled-but-not-blocked connection.
 
 ---
 
@@ -125,7 +126,7 @@ This guards against a permanently-stuck "Loading…" call.
 
 This was the actual bug: poll buttons used undefined CSS variables, so on the **default (non-Lotus-Terminal) themes** they rendered with invisible borders / no selected state.
 
-### B1. Poll renders on a default theme
+### B1. Poll renders on a default theme — ✅ PASS
 
 1. Switch to a **default Cinny theme** (Settings → Appearance — **not** Lotus Terminal / TDS). Test both a **dark** and a **light** theme.
 2. In any room, create a poll (composer → poll button): a **single-choice** poll with 3 options.
@@ -153,7 +154,7 @@ This was the actual bug: poll buttons used undefined CSS variables, so on the **
 - Indicators are **square checkboxes** (not circles); selected ones show a **✓** that's legible against the filled box.
 - You can select **several** options; each shows its own progress fill.
 
-### B4. Lotus Terminal theme regression
+### B4. Lotus Terminal theme regression — ✅ PASS
 
 1. Switch to **Lotus Terminal / TDS** theme and re-open a poll.
    **Expected:** still looks correct (the fix uses theme tokens, so the TDS accent should now drive it) — no worse than before.
@@ -341,6 +342,74 @@ Trigger a desktop/browser notification for a new message.
 
 ---
 
+## L. Fixed — verify
+
+### L1. AFK auto-mute releases the OS microphone indicator on mute (N95) — 👥 live call
+
+**Context (now FIXED):** `useAfkAutoMute.ts` opened its own `getUserMedia` level-monitor capture for the whole call, so the OS recording indicator (green dot on macOS, mic icon on Windows/Linux) stayed lit even when muted. The capture is now gated on the reactive mic-on state — it runs only while unmuted, so muting releases the stream.
+
+**To verify:**
+
+1. Enable **AFK auto-mute** in Settings → Calls and **join a call**.
+2. Manually **mute your mic** using the call controls → the **OS recording indicator should clear** within ~a second.
+3. **Unmute** → the indicator should re-appear (capture re-acquired).
+4. Also confirm AFK still works end-to-end: stay unmuted and silent past the configured timeout → mic auto-mutes with the "muted after inactivity" toast, and the indicator clears.
+
+### L2. Maskable PWA icon (N108) — Android install
+
+1. On **Android Chrome**, install Lotus Chat as a PWA (Add to Home Screen).
+2. Look at the **home-screen icon**.
+
+**Expected:** the icon fills the adaptive-icon shape cleanly (the logo centered with safe-zone padding on the dark background), **not** clipped at the corners or floating in an odd box. Also worth a quick check in Chrome DevTools → Application → Manifest that the two `purpose: maskable` icons load without a 404 (this also validates the manifest's icon paths resolve in production — a pre-existing path convention I couldn't verify statically).
+
+---
+
+## M. New features (this round)
+
+### M1. Search: `has:image` / `has:file` / `has:video` filters
+
+1. Open message search (in a room with shared images/files/videos in history).
+2. Run a broad search, then toggle the **Images**, **Files**, **Video** chips (in the filter bar, next to "Has link").
+
+**Expected:**
+
+- Each chip narrows the visible results to that message type; multiple active chips = union (any of them).
+- Toggling them off restores the full results. The existing room/sender/date/has-link filters still work alongside.
+- **Known limitation (by design):** filtering is client-side over already-fetched results, so the visible count can be lower than the server's total for that query — paginating/loading more pulls in more to filter. Confirm this reads acceptably.
+
+### M2. Search: recent searches
+
+1. Run a few different searches, then **clear the search box** and focus it.
+
+**Expected:** your last (up to 10) distinct searches appear as clickable chips; clicking one re-runs it. A **Clear** affordance wipes the list. The list **persists across a page refresh** (localStorage).
+
+### M3. Custom accent color (non-TDS themes) — ⚠️ needs your visual judgment
+
+1. Make sure **Lotus Terminal (TDS)** is **off**. Settings → Appearance → **Custom Accent Color** → pick a color.
+
+**Expected:**
+
+- The app's accent (buttons, selected/active states, links, primary chips) recolors to your choice **live**.
+- **Look critically at quality** (this is the part I can't verify): button **text legibility** (OnMain contrast) on the accent buttons; **hover/active** shades; and **selected-row / chip** backgrounds (the translucent "Container" tints). Try a **light** color and a **dark** color and a **saturated** one.
+  - If a dark accent makes selected-row text (OnContainer) hard to read, tell me — that's the one spot in the auto-derived palette most likely to need tuning.
+- **Reset** clears it back to the theme default.
+- Turn **Lotus Terminal ON** → the custom accent should be **ignored** (TDS fixed palette wins) and the picker shows a "non-TDS only" note; turn it back off → custom accent returns.
+- Reload → the chosen accent **persists**.
+
+---
+
+### M4. Search: "Pinned only" filter
+
+In message search, toggle the **Pinned** chip.
+**Expected:** results narrow to messages currently pinned in their room; composes with the Images/Files/Video chips and room/sender/date filters; toggling off restores results. It also narrows the **encrypted/local-cache** results section (not just server results). Needs a room with actually pinned messages.
+
+### M5. New theme presets (Cyberpunk / Ocean / Blood Red / Classic Matrix / Midnight) — ⚠️ visual judgment
+
+Settings → Appearance → theme picker → try each of the 5 new themes.
+**Expected:** each applies a complete, legible dark palette. Code review computed WCAG contrast and all pass AA, but **eyeball these specifically**: **Midnight** (lowest-contrast accent `#6b7ca8` — selected/focus states), **Classic Matrix** (green accents, light-green body text on near-black), **Blood Red** (white-ish text on bright-red buttons). Confirm Success/Warning/Critical (save/leave/delete) still look correctly green/amber/red, not recolored. Switching back to a stock theme should fully revert.
+
+---
+
 ## Priority if you're short on time
 
 1. **A4** (in-call banner) + **A3** (ringtone) — newest, most logic, hardest to reproduce.

LOTUS_TODO.md

@@ -5,28 +5,6 @@
 
 ---
 
-## 🏗️ Infrastructure & Maintenance
-
-- [x] **Upgrade Synapse to v1.155.0** ✅ Done 2026-06-18
-  - **Context:** 1.155.0 is the last version supporting Debian 12 Bookworm. LXC 151 is already on Debian 13 Trixie — OS migration was completed prior to this upgrade.
-  - **What changed (1.154→1.155):** No breaking changes, no config changes, no DB migrations. Bugfixes: to-device EDU size limiting, restricted room joins, sliding sync subscription response timing. Rust port of more internal classes (perf only).
-  - **MSC4452** (Preview URL capabilities) shipped in 1.154 — opt-in via `msc4452_enabled`, not enabled.
-
----
-
-## 📱 Quick Feature Additions
-
-- [x] **Full-Screen Camera Broadcasts** ⚠️ UNTESTED — verify in a real call
-  - **Context:** Element Call currently supports full-screening screenshares. We need to parity this functionality for camera broadcasts.
-  - **Goal:** Users should be able to toggle any camera feed to full-screen mode, similar to the existing screenshare full-screen implementation.
-  - **Implemented 2026-06-18:**
-    1. **Fullscreen button always shows** — removed `screenshare &&` gate in `CallControls.tsx`. The fullscreen button is now available in camera-only calls, not just during screenshares.
-    2. **Per-participant camera focus** — `CallControl.focusCameraParticipant(userId)` added. Finds the participant's video tile via `[data-testid="videoTile"]` / `[data-video-fit]` + `[aria-label="${userId}"]`, enables spotlight mode, then clicks the tile to focus them.
-    3. **MemberGlance "Focus camera" action** — clicking a participant avatar in the call status bar now opens a mini popup with "Focus camera" (triggers focusCameraParticipant) and "View profile" options, rather than immediately opening the profile.
-    4. **PiP fullscreen button** — a small fullscreen toggle button (⛶/⊡) is shown in the PiP overlay top-right, allowing users to go fullscreen directly from PiP mode without navigating back to the call room.
-
----
-
 ## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
 
 > **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
@@ -37,10 +15,42 @@
 
 ---
 
+## 🧩 NATIVE-CINNY LAW — EVERY FEATURE MUST FEEL LIKE STOCK CINNY
+
+> **Every feature we implement must feel native to the upstream Cinny app — indistinguishable from something the Cinny team would have shipped.** Reference: <https://github.com/cinnyapp/cinny>.
+>
+> Concretely this means:
+>
+> - **Use the `folds` design system, not bespoke UI.** Build with folds primitives (`Button`, `Chip`, `IconButton`, `Menu`, `MenuItem`, `Dialog`, `Modal`, `Input`, `Switch`, `Badge`, `SettingTile`, `SequenceCard`, etc.) and folds tokens (`color.*`, `config.space.*`, `config.radii.*`, `config.borderWidth.*`). No hardcoded hex/`rgba()` for UI chrome, no invented/undefined CSS variables.
+> - **Match Cinny's existing patterns.** Before adding UI, find the closest existing Cinny component/flow and mirror it (e.g. a new dropdown uses `Button`+`PopOut`+`Menu`+`MenuItem` like the rest; a new modal has a `Header` with a close `IconButton`; a new setting is a `SettingTile` inside a `SequenceCard`). Consistency with stock Cinny beats personal style.
+> - **Lotus-custom additions should be unobtrusive** and fit Cinny's visual language, spacing, and interaction conventions — a stranger using Cinny should not be able to tell which features are ours.
+>
+> **The ONE exception:** explicit **Lotus Terminal Design System (TDS)** features, which intentionally have their own distinct look and follow the **TDS Design Law** above. TDS styling is opt-in (only active in Lotus Terminal mode); everything else must look and feel like native Cinny.
+
+---
+
 Completed features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md).
 
 ---
 
+## ✅ Done — Awaiting Verification
+
+Built and gate-green; verify per [LOTUS_TESTING.md](./LOTUS_TESTING.md), then they graduate to LOTUS_FEATURES.md. (Bug-side fixes awaiting verification live in LOTUS_BUGS.md.)
+
+| Feature                                                                           | Test guide        |
+| :-------------------------------------------------------------------------------- | :---------------- |
+| Full-Screen Camera Broadcasts (per-participant focus)                             | A5 / G2           |
+| Advanced search filters (sender/date/has-link/has:image·file·video/pinned/recent) | K2 / M1 / M2 / M4 |
+| Custom Accent Color Picker (non-TDS themes)                                       | M3                |
+| 5 Color Theme Presets (Cyberpunk/Ocean/Blood Red/Matrix/Midnight)                 | M5                |
+| Intersection-based lazy media loading                                             | H1                |
+| Context-aware thumbnail previews                                                  | H2                |
+| Desktop — proactive update notifications (Tauri)                                  | J1                |
+| Remind Me Later                                                                   | K1                |
+| Mobile Bookmarks access                                                           | E5                |
+
+---
+
 Legend:
 
 - `[AUDIT REQUIRED]` — at least one assumption needs code/server verification before implementing
@@ -193,24 +203,6 @@ Features:
 **What:** Implement a persistent local cache for search results, optimized for encrypted rooms.  
 **Approach:** Use `IndexedDB` to store search metadata (event IDs, timestamps) to prevent redundant server-side decryption/fetching.
 
-### [x] P4-9 · Advanced Search Filter UI — PARTIALLY DONE (UNTESTED)
-
-**What:** Improve search filter UX in `SearchFilters.tsx`.  
-**Completed 2026-06-18:**
-
-- ✅ `SelectSenderButton` — picker UI for sender filter (previously required typing `from:@user` by hand)
-- ✅ `DateRangeButton` — quick-pick presets: Today / Last week / Last month / Last year
-- ✅ `Has link` chip — `contains_url: true` filter, wired to Matrix API and URL param
-  **UNTESTED** — needs verification at chat.lotusguild.org.
-
-**Remaining for parity with Discord/Slack:**
-
-- [ ] `has:image` / `has:file` / `has:video` — msgtype filters (require client-side post-filtering, no server API)
-- [ ] Pinned messages filter
-- [ ] Saved searches / search history
-
----
-
 ### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
 
 **Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).  
@@ -262,55 +254,17 @@ Features:
 
 ## Priority 5 — Gamer / Aesthetic / Customization
 
-### [ ] P5-1 · Custom Accent Color Picker (non-TDS mode only)
-
-**What:** A hex/HSL color picker in Settings → Appearance. Chosen color replaces the primary accent throughout the UI: buttons, badges, active states, highlights, presence dot, links. Applied via a CSS custom property override injected into `<head>`.  
-**IMPORTANT:** This feature is completely inactive when TDS is enabled — TDS has its own fixed palette. Add this setting under a "Non-TDS Themes" section that is hidden when TDS is active.  
-**[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names. (Confirmed: folds uses vanilla-extract, NOT CSS custom properties — must create a new vanilla-extract theme variant dynamically.)  
-**Complexity:** Medium.
-
----
-
-### [ ] P5-2 · Additional Color Theme Presets
-
-**What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.
-
-Themes:
-
-1. **Cyberpunk** — deep navy bg (`#0a0015`), electric purple (`#bf5fff`) + hot pink (`#ff2d9b`) accents, neon glow
-2. **Ocean** — deep sea blue bg (`#020b18`), teal (`#00c9b1`) + aqua (`#0096d6`) accents, soft feel
-3. **Blood Red** — near-black bg (`#0d0203`), deep crimson (`#7a0010`) + bright red (`#ff2233`) accents
-4. **Classic Matrix** — pure black bg (`#000000`), phosphor green (`#00ff41`) text + accents
-5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal
-
-**[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered (~50 CSS custom properties each).  
-**Complexity:** Medium (design effort is the main cost).
-
----
-
 ### [MOVED] P5-9 · LFG (Looking for Group) Command → LotusBot
 
 **Decision:** Implemented as `!lfg` in LotusBot rather than a client slash command. Bot-side rendering works consistently across all Matrix clients; client-side enhanced cards would only be visible to Lotus Chat users and require sanitizer auditing. The bot can also support richer flows (list active LFGs, DM interested players, auto-expire posts).
 
 ---
 
-### [x] P5-5 · Intersection-Based Lazy Loading ⚠️ UNTESTED — needs verification in timeline with many images
-
-**What:** Use `IntersectionObserver` to trigger media decryption and loading only when components approach the viewport.  
-**Approach:** Reduce initial memory footprint and improve timeline load times by deferring decryption of images/videos until they are visible.
-
-### [x] P5-6 · Context-Aware Thumbnail Previews ⚠️ UNTESTED
-
-**What:** Enhance thumbnail rendering in the timeline for consistent, polished aesthetics.  
-**Approach:** Use CSS `object-fit: cover` with improved focal-point centering within `ThumbnailContent` to prevent media stretching or awkward aspect-ratio cropping.  
-**Fix Applied:** Added `objectPosition: 'center top'` to: (1) `media.css.ts` → `Image` component (timeline images), (2) video thumbnail inline style in `RenderMessageContent.tsx`, (3) `GalleryTile` `<img>` in `MediaGallery.tsx`. Full-size viewers retain `objectFit: 'contain'` — no change. `objectPosition: 'center top'` prevents face/subject cropping on tall portrait images capped at 600px by `AttachmentBox`.
-
----
-
 ### [ ] P5-15 · In-Call Soundboard
 
 **What:** Grid of short audio clips playable into the call audio stream via Web Audio API (AudioBufferSourceNode → MediaStreamDestinationNode → mixed with mic). Built-in clips + user-uploadable custom clips (stored as mxc://). Accessible from call controls bar.  
 **[AUDIT REQUIRED]** Verify the Element Call integration exposes the mic MediaStream for mixing. This is the highest-risk part of this feature.  
+**🔱 [EC-FORK]** Owning the EC source (see [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md)) would unblock real audio-injection — a proper soundboard mixed into the call — which is impossible against the prebuilt bundle today.  
 **Complexity:** High.
 
 ---
@@ -328,6 +282,7 @@ Themes:
 
 **What:** High-end background noise cancellation using a pre-trained ML model (RNNoise) running in the browser. Removes dogs, fans, and keyboard clicks from the mic stream.  
 **Shipped:** 3-tier setting (Off / Browser-native / ML) in Settings → General → Calls. ML tier injects a same-origin pre-init shim into the vendored Element Call `index.html` that monkeypatches `getUserMedia` and routes the captured mic through an RNNoise `AudioWorklet` before LiveKit publishes — no EC fork required. See LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".  
+**🔱 [EC-FORK]** Once we own the EC source (see [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md)), denoise should become a first-class audio stage **inside** EC instead of an `index.html` getUserMedia monkeypatch — more robust, survives reconnects (fixes the A7 mic-after-reconnect bug), and removes the build-time injection hack.  
 **Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. The shim is the same post-capture pipeline #3892 uses, executed from the realm we control, so it survives EC version bumps.  
 **AEC note (resolved-as-accepted):** WebAudio capture routing can weaken browser AEC — same tradeoff as EC's upstream feature; mitigated by keeping `echoCancellation`/`autoGainControl` on the raw capture and labeling the tier "beta".
 
@@ -367,15 +322,6 @@ Themes:
 
 ---
 
-### [x] P5-40 · Desktop — Proactive Update Notifications (Tauri) ⚠️ UNTESTED (requires Tauri build)
-
-**What:** Automatically check for app updates on launch and periodically during long sessions. If an update is available, show an in-app toast or badge (e.g., on the Settings icon) to alert the user without requiring a manual check in settings.  
-**Mechanism:** Use the `useTauriUpdater` hook in a global component like `ClientNonUIFeatures.tsx`.  
-**Note:** Ensure the check is throttled (e.g., once every 12 hours) to avoid redundant Tauri commands.  
-**Complexity:** Low-Medium.
-
----
-
 ### [ ] P5-41 · Desktop — Native WinRT Toast Notifications
 
 **What:** Replace emulated notifications with native WinRT Toast notifications.  
@@ -454,13 +400,6 @@ Themes:
 ## 🚀 Features to Add
 
 - [ ] **Mobile Audit:** Comprehensive audit of all features in LOTUS_FEATURES.md for mobile PWA usability and layout responsiveness.
-- [x] **Remind Me Later:** Slack-style reminders for messages — fully implemented ⚠️ UNTESTED end-to-end
-  - **Storage:** `useReminders.ts` — persists to `io.lotus.reminders` account data with `addReminder` / `removeReminder` / `getReminders`
-  - **UI:** `RemindMeDialog.tsx` — 4 presets (20 min, 1 hr, 3 hr, tomorrow 9am); wired into `Message.tsx` context menu via `remindOpen` state; `useModalStyle(320)` for mobile fullscreen
-  - **Monitor:** `ReminderMonitor` in `ClientNonUIFeatures.tsx` — polls every 30s + on tab visibility; fires Lotus toast when due and calls `removeReminder`
-- [x] **Mobile Bookmarks:** Fixed ⚠️ UNTESTED — bookmarks now accessible from within any room on mobile
-  - **Root Cause:** `BookmarksPanel` renders correctly on mobile but `BookmarksTab` lives in `SidebarNav`, which is hidden when inside a room on mobile (`MobileFriendlyClientNav` returns `null`). No trigger existed.
-  - **Fix:** Added "Saved Messages" `MenuItem` to the `RoomMenu` (···More Options) in `RoomViewHeader.tsx`. Toggles `bookmarksPanelAtom` and closes the menu. Works on all screen sizes — desktop users see it as a duplicate of the sidebar star, mobile users now have their only in-room access point.
 
 ---
 
@@ -543,6 +482,7 @@ Exhaustive, low-level implementation details for backlog items. Follow these pat
 **Mechanism:** KaTeX injection into the HTML parser.
 
 - **Sanitizer (`src/app/utils/sanitize.ts`):** Allow KaTeX-specific tags and classes (e.g., `span`, `annotation`, `math`). Use a specialized allowed list for math blocks.
+  > [Gemini_Found] `sanitize.ts` uses **`sanitize-html`** (not DOMPurify) with an explicit allowlist (`allowedTags`) and `disallowedTagsMode: 'discard'`. All MathML tags are currently absent from the allowlist and are silently stripped. Update `permittedHtmlTags` to include: `<math>`, `<mi>`, `<mo>`, `<mn>`, `<ms>`, `<mtext>`, `<mspace>`, `<mrow>`, `<mfrac>`, `<msqrt>`, `<mroot>`, `<mstyle>`, `<merror>`, `<mpadded>`, `<mphantom>`, `<mfenced>`, `<menclose>`, `<msub>`, `<msup>`, `<msubsup>`, `<munder>`, `<mover>`, `<munderover>`, `<mmultiscripts>`, `<mtable>`, `<mtr>`, `<mtd>`, `<maligngroup>`, `<malignmark>`, and `annotation`. Also add the required MathML attributes (e.g. `xmlns`, `display`, `mathvariant`) to `permittedTagToAttributes`.
 - **Parser (`src/app/plugins/react-custom-html-parser.tsx`):** Detect `$ ... $` and `$$ ... $$` patterns in text nodes:
   ```tsx
   if (node.type === 'text') {
@@ -592,12 +532,18 @@ Exhaustive, low-level implementation details for backlog items. Follow these pat
 - Route the mic `MediaStream` and the clip source to the destination node.
 - Pass the destination's `.stream` to the call bridge.
 
+> ⚠️ **[Gemini_Found — CORRECTED]** Gemini originally suggested using LiveKit's `LocalAudioTrack.replaceTrack()` to mix audio into the call stream. This is **not possible** from Lotus Chat's realm: Element Call runs in a **cross-origin iframe** controlled via `matrix-widget-api` (postMessage). LiveKit's JS SDK and its `LocalAudioTrack` live inside EC's sandboxed context — inaccessible from our code. This directly contradicts the confirmed constraint already listed in the Server Capabilities table: _"Cindy CANNOT inject audio into EC call stream — In-call soundboard must be redesigned as local-only."_ The soundboard must be a local-playback-only feature (output through the user's speakers, not mixed into the call audio stream).
+>
+> 🔱 **[EC-FORK — partial correction]** The "cross-origin" claim above is **outdated**: EC is now **same-origin** / self-hosted (`iframe.sandbox` has `allow-same-origin`; we read `contentDocument`). The _practical_ blocker still holds — LiveKit's `LocalAudioTrack` lives in EC's **module scope** (not on `window`), so it's unreachable from cinny even same-origin. **Owning the EC source** (see [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md)) is the path to a real call-audio-inject API, which would unblock a true in-call soundboard.
+
 ---
 
 ### P5-20 · Quick Reply from Browser Notification
 
 **Mechanism:** Service Worker `notificationclick` Action.
 
+> [Gemini_Found] Implementation detail: `serviceWorkerRegistration.showNotification()` should be used instead of `new Notification()` so that the service worker can listen to the `notificationclick` event. `new Notification()` creates notifications that are bound to the client page, not the SW.
+
 ```typescript
 // src/sw.ts
 self.addEventListener('notificationclick', (event) => {

README.md

@@ -2,7 +2,7 @@
 
 A Matrix chat client built for Lotus Guild — fast, private, and packed with the features you actually want.
 
-**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)**  |  Forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1
+**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)**  |  Forked from [Cinny](https://github.com/cinnyapp/cinny), synced through v4.12.3
 
 ---
 
@@ -10,7 +10,7 @@ A Matrix chat client built for Lotus Guild — fast, private, and packed with th
 
 The source code is licensed under [AGPLv3](LICENSE), the same license as the upstream Cinny project. The source for this fork is public at [code.lotusguild.org/LotusGuild/cinny](https://code.lotusguild.org/LotusGuild/cinny).
 
-The Lotus Chat logo (`lotus_chat.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.
+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.
 
 ---
 
@@ -144,6 +144,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.
 
+### 🔱 Planned: Element Call fork ("Lotus Call")
+
+Voice/video channels embed **Element Call**. Today it's a **pre-built npm bundle**
+(`@element-hq/element-call-embedded` 0.20.1) copied to `public/element-call/` and
+served same-origin; we steer it via the `matrix-widget-api` plus fragile DOM
+hacks. Because we don't own its compiled source, several in-call issues (avatar
+decorations on tiles, camera focus/fullscreen during screenshare, mic recovery
+after reconnect, native theming, real call-audio injection) are unfixable from
+outside.
+
+**The plan is to fork `element-hq/element-call` into a new `LotusGuild/element-call`
+repo, build it from source, and host our own build** for true ownership. The full
+self-contained plan and integration map — written for a fresh session with no
+prior context — is in **[`HANDOFF_ELEMENT_CALL_FORK.md`](HANDOFF_ELEMENT_CALL_FORK.md)**.
+Infra/hosting notes also live in the `LotusGuild/matrix` repo README. Search the
+docs for the **`[EC-FORK]`** tag to find every related note.
+
 ### Build
 
 ```bash

build/lotus-denoise.js

@@ -30,6 +30,17 @@
     return;
   }
 
+  // Derive the parent origin for postMessage targetOrigin from the parentUrl
+  // widget param (a full URL) so denoise-status messages aren't broadcast with
+  // '*'. Fall back to this frame's own origin if parentUrl is missing/malformed.
+  var targetOrigin;
+  try {
+    var parentUrl = params.get('parentUrl');
+    targetOrigin = parentUrl ? new URL(parentUrl).origin : window.location.origin;
+  } catch (e) {
+    targetOrigin = window.location.origin;
+  }
+
   var md = navigator.mediaDevices;
   if (!md || typeof md.getUserMedia !== 'function') return;
   if (typeof AudioWorkletNode === 'undefined' || typeof AudioContext === 'undefined') return;
@@ -274,6 +285,9 @@
               source.disconnect();
               mlNode.disconnect();
             } catch (e) {}
+            try {
+              if (gateNode) gateNode.disconnect();
+            } catch (e) {}
             try {
               origTrack.stop();
             } catch (e) {}
@@ -301,7 +315,7 @@
                 nativeNS: USE_NATIVE_NS,
                 gate: USE_GATE,
               },
-              '*',
+              targetOrigin,
             );
           }
 
@@ -316,7 +330,10 @@
       .catch(function (e) {
         var msg = e instanceof Error ? e.message : String(e);
         console.error('[lotus-denoise] Setup failed:', msg);
-        window.parent.postMessage({ type: 'lotus-denoise-status', active: false, error: msg }, '*');
+        window.parent.postMessage(
+          { type: 'lotus-denoise-status', active: false, error: msg },
+          targetOrigin,
+        );
         return stream;
       });
   }

package-lock.json

@@ -21,7 +21,6 @@
         "@giphy/js-util": "5.2.0",
         "@giphy/react-components": "10.1.2",
         "@sapphi-red/web-noise-suppressor": "0.3.5",
-        "@sentry/react": "10.53.1",
         "@tanstack/react-query": "5.100.13",
         "@tanstack/react-query-devtools": "5.100.13",
         "@tanstack/react-virtual": "3.13.25",
@@ -54,7 +53,6 @@
         "jotai": "2.20.0",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
-        "lodash": "4.18.1",
         "matrix-js-sdk": "41.6.0-rc.0",
         "matrix-widget-api": "1.17.0",
         "millify": "6.1.0",
@@ -79,10 +77,9 @@
         "ua-parser-js": "2.0.10"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.20.1",
+        "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
-        "@sentry/vite-plugin": "5.3.0",
         "@types/chroma-js": "3.1.2",
         "@types/file-saver": "2.0.7",
         "@types/is-hotkey": "0.1.10",
@@ -1791,12 +1788,6 @@
         "node": ">=v18"
       }
     },
-    "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.20.1.tgz",
-      "integrity": "sha512-ODg2r7UmR8UjRpapLKbn6v1PS8fu/r58zdbvXMYaAlUEAC2f6L/9Moc9S4noG1+ARgWxY+m2vLmNDK9G9uFZYQ==",
-      "dev": true
-    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -2696,6 +2687,12 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "node_modules/@lotusguild/element-call-embedded": {
+      "version": "0.20.1-lotus.1",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.20.1-lotus.1/element-call-embedded-0.20.1-lotus.1.tgz",
+      "integrity": "sha512-hy1KEnFw4MuwvlactUFPPvvtPZh1y56JMK/ehnficUmJNwdJsOhSwThaYp35RZ/ar6RCuiW86yQqlQBOSpZJVQ==",
+      "dev": true
+    },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.0.tgz",
@@ -3783,403 +3780,6 @@
       "integrity": "sha512-jh3+V9yM+zxLriQexoGm0GatoPaJWjs6ypFIbFYwQp+AoUb55eUXrjKtKQyuC5zShzzeAQUl0M5JzqB7SSrsRA==",
       "license": "MIT"
     },
-    "node_modules/@sentry-internal/browser-utils": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.53.1.tgz",
-      "integrity": "sha512-X4d6y8sBMjmNhcDW4eMBU3ASsNIMz8dqaFkhyIMN/dkYr/yZKnbRZPaVuVUGvHKjnlficPpIH0/HK9KBjrYxPw==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/feedback": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.53.1.tgz",
-      "integrity": "sha512-vVpTI/aEYN5d9IgZeYJWMqVaN0+iFgidSrYNAsZTh1US5sJUzF/wrl+68KdpmCtFROrN3jiAn1oPSwL5CKvEJA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/replay": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.53.1.tgz",
-      "integrity": "sha512-wZNzTBYkgGUPWMuUQv7L64+OJmoCnz7GQNiTrTFK6EVAjJXFBCSsPp/nhif0bLhbk8+0g4xz633uOhpXuQbFdw==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/browser-utils": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry-internal/replay-canvas": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.53.1.tgz",
-      "integrity": "sha512-aueLaf/2prExwA76BGU5/bOXCKWqtt6jQXWA6WJQNrmKpPEtZJB4ypnpsou0McXQCF8tur2Y8U0TEkwQP13yJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/replay": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/babel-plugin-component-annotate": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-5.3.0.tgz",
-      "integrity": "sha512-p4q8gn8wcFqZGP/s2MnJCAAd8fTikaU6A0mM97RDHQgStcrYiaS0Sc5zUNfb1V+UOLPuvdEdL6MwyxfzjYJQTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@sentry/browser": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.53.1.tgz",
-      "integrity": "sha512-zXF373hzUOGzUOrqd8xb1U3LQi5uYC3mwv+z5OMKUUinQlu30tTWBs7ypy6YTchtix9QlYaHWlayUF8vBZ5UjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry-internal/browser-utils": "10.53.1",
-        "@sentry-internal/feedback": "10.53.1",
-        "@sentry-internal/replay": "10.53.1",
-        "@sentry-internal/replay-canvas": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-5.3.0.tgz",
-      "integrity": "sha512-L5T60sWdAI3qWwdg3Ptwek/0TY59PERrxyqp4XMUkroayQvGd9r5dIW9Q1kSeXX9iJ442nXbFZKAOyCKV4Z13Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.18.5",
-        "@sentry/babel-plugin-component-annotate": "5.3.0",
-        "@sentry/cli": "^2.58.5",
-        "dotenv": "^16.3.1",
-        "find-up": "^5.0.0",
-        "glob": "^13.0.6",
-        "magic-string": "~0.30.8"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/brace-expansion": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
-      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/glob": {
-      "version": "13.0.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
-      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "minimatch": "^10.2.2",
-        "minipass": "^7.1.3",
-        "path-scurry": "^2.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/minimatch": {
-      "version": "10.2.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
-      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.5"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@sentry/bundler-plugin-core/node_modules/minipass": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/@sentry/cli": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.58.6.tgz",
-      "integrity": "sha512-baBcNPLLfUi9WuL+Tpri9BFaAdvugZIKelC5X0tt0Zdy+K0K+PCVSrnNmwMWU/HyaF/SEv6b6UHnXIdqanBlcg==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "FSL-1.1-MIT",
-      "dependencies": {
-        "https-proxy-agent": "^5.0.0",
-        "node-fetch": "^2.6.7",
-        "progress": "^2.0.3",
-        "proxy-from-env": "^1.1.0",
-        "which": "^2.0.2"
-      },
-      "bin": {
-        "sentry-cli": "bin/sentry-cli"
-      },
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@sentry/cli-darwin": "2.58.6",
-        "@sentry/cli-linux-arm": "2.58.6",
-        "@sentry/cli-linux-arm64": "2.58.6",
-        "@sentry/cli-linux-i686": "2.58.6",
-        "@sentry/cli-linux-x64": "2.58.6",
-        "@sentry/cli-win32-arm64": "2.58.6",
-        "@sentry/cli-win32-i686": "2.58.6",
-        "@sentry/cli-win32-x64": "2.58.6"
-      }
-    },
-    "node_modules/@sentry/cli-darwin": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.58.6.tgz",
-      "integrity": "sha512-udAVvcyfNa0R+95GvPz/+43/N3TC0TYKdkQ7D7jhPSzbcMc7l2fxRNN5yB3UpCA5fWFnW4toeaqwDBhb/Wh3LA==",
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.58.6.tgz",
-      "integrity": "sha512-pD0LAt5PcUzAinBwvDqc66x9+2CabHEv486yP0gRjWO7SakbaxmfVq/EXd8VLq/Tzi39LAu422UYK1lpW3MILw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-arm64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.58.6.tgz",
-      "integrity": "sha512-q8mEcNNmeXMy5i+jWT30TVpH7LcP4HD21CD5XRSPAd/a912HF6EpK0ybf/1USO14WOhoXbAGi9txwaWabSe33g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-i686": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.58.6.tgz",
-      "integrity": "sha512-q8vNJi1eOV/4vxAFWBsEwLHoSYapaZHIf4j76KJGJXFKTkEbsjCOOsKbwUIBTQQhRgV4DFWh3ryfsPS/que4Kg==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-linux-x64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.58.6.tgz",
-      "integrity": "sha512-DZu956Mhi3ZRjTBe1WdbGV46ldVbA8d2rgp/fh51GsI25zjBHah4wZnPTSzpc+YqxU6pJpg579B/r3jrIK530Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "linux",
-        "freebsd",
-        "android"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-arm64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.58.6.tgz",
-      "integrity": "sha512-nj0Ff/kmAB73EPDhR8B4O9r+NUHK5GkPCkGWC+kXVemqAJWL5jcJ5KdxG0l/S0z6RoEoltID8/43/B+TaMlT7A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-i686": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.58.6.tgz",
-      "integrity": "sha512-WNZiDzPbgsEMQWq4avsQ391v/xWKJDIWWWo9GYl+N/w5qcYKkoDW7wQG7T9FasI6ENn68phChTOAPXXxbfAdOg==",
-      "cpu": [
-        "x86",
-        "ia32"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/cli-win32-x64": {
-      "version": "2.58.6",
-      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.58.6.tgz",
-      "integrity": "sha512-R35WJ17oF4D2eqI1DR2sQQqr0fjRTt5xoP16WrTu91XM2lndRMFsnjh+/GttbxapLCBNlrjzia99MJ0PZHZpgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "FSL-1.1-MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@sentry/core": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.53.1.tgz",
-      "integrity": "sha512-XG4ezlkyuAPjBC5+9kXC94rXXuqYTw9NRhfaDHssbTFaGnqBR8vQX2UUgZfY7ucbeelRDGfBu1sywoU+mB04uA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@sentry/react": {
-      "version": "10.53.1",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.53.1.tgz",
-      "integrity": "sha512-lrwNq5T/zW84l60894TpKHPcvFuc1I/Hnohecc0TfYVpIcYYuw2orCHoU4v4wgkFaJUpegVetbgdOphViyLVjA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/browser": "10.53.1",
-        "@sentry/core": "10.53.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0 || 17.x || 18.x || 19.x"
-      }
-    },
-    "node_modules/@sentry/rollup-plugin": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/rollup-plugin/-/rollup-plugin-5.3.0.tgz",
-      "integrity": "sha512-hgPGPYdQJ/G1cGYOxAb7d4z3V+/k/E5/P/5TFPEEBLuIbFFk+JG0CISUDJdzXJjO382Lb99PBJuXGbueBmO79w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/bundler-plugin-core": "5.3.0",
-        "magic-string": "~0.30.8"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "rollup": ">=3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@sentry/vite-plugin": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-5.3.0.tgz",
-      "integrity": "sha512-qcoSzo4n2MulVQ70UUPLq6dTleb2a2HwL2wuwvAgWhPChrYTuk6A6mDg6aQb9fairPAwFPiU9PzOANpoDJcz1A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@sentry/bundler-plugin-core": "5.3.0",
-        "@sentry/rollup-plugin": "5.3.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/@simple-libs/stream-utils": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@simple-libs/stream-utils/-/stream-utils-1.2.0.tgz",
@@ -4894,18 +4494,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dev": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -6635,19 +6223,6 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/dotenv": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -8474,19 +8049,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -10600,26 +10162,6 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -11179,16 +10721,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -11199,13 +10731,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -12784,12 +12309,6 @@
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
       "license": "MIT"
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
-    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -13337,22 +12856,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
-    },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -45,7 +45,6 @@
     "@giphy/js-util": "5.2.0",
     "@giphy/react-components": "10.1.2",
     "@sapphi-red/web-noise-suppressor": "0.3.5",
-    "@sentry/react": "10.53.1",
     "@tanstack/react-query": "5.100.13",
     "@tanstack/react-query-devtools": "5.100.13",
     "@tanstack/react-virtual": "3.13.25",
@@ -78,7 +77,6 @@
     "jotai": "2.20.0",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
-    "lodash": "4.18.1",
     "matrix-js-sdk": "41.6.0-rc.0",
     "matrix-widget-api": "1.17.0",
     "millify": "6.1.0",
@@ -103,10 +101,9 @@
     "ua-parser-js": "2.0.10"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.20.1",
+    "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",
-    "@sentry/vite-plugin": "5.3.0",
     "@types/chroma-js": "3.1.2",
     "@types/file-saver": "2.0.7",
     "@types/is-hotkey": "0.1.10",

public/locales/en.json

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

public/manifest.json

@@ -54,6 +54,18 @@
       "src": "./res/android/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
+    },
+    {
+      "src": "./res/android/maskable-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./res/android/maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "categories": ["social", "communication", "productivity"],

scripts/patch-folds.mjs

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

scripts/syncDecorations.mjs

@@ -21,10 +21,25 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const root = join(__dirname, '..');
 const catalogPath = join(root, 'src', 'app', 'features', 'lotus', 'avatarDecorations.ts');
 
-const CDN = 'https://drive.lotusguild.org/public.php/dav/files/bHswJ9pNKp2t26N/cinny-decorations';
+// Single source of truth: the CDN base URL lives in avatarDecorations.ts as
+// `export const DECORATION_CDN`. We extract it from there at runtime rather than
+// re-declaring it here, so the build script and the app can never drift. This
+// .mjs script can't cleanly import the browser-side .ts module (it's outside the
+// Vite/TS app graph), so we parse the constant out of the file text instead.
+// If you migrate the CDN, change it ONLY in avatarDecorations.ts.
+const catalog = readFileSync(catalogPath, 'utf8');
+
+const cdnMatch = catalog.match(/export const DECORATION_CDN\s*=\s*['"]([^'"]+)['"]/);
+if (!cdnMatch) {
+  console.error(
+    'Could not find `export const DECORATION_CDN` in avatarDecorations.ts — ' +
+      'the constant may have been renamed. Update scripts/syncDecorations.mjs.',
+  );
+  process.exit(1);
+}
+const CDN = cdnMatch[1];
 
 // Extract all slugs from the catalog file
-const catalog = readFileSync(catalogPath, 'utf8');
 const slugMatches = [...catalog.matchAll(/slug: '([^']+)'/g)].map((m) => m[1]);
 
 if (slugMatches.length === 0) {
@@ -41,7 +56,8 @@ async function headCheck(slug) {
     const res = await fetch(`${CDN}/${slug}.png`, { method: 'HEAD' });
     return { slug, ok: res.ok, status: res.status };
   } catch {
-    return { slug, ok: false, status: 0 };
+    // Network/DNS/TLS failure — NOT a confirmation the file is gone.
+    return { slug, ok: false, status: 0, networkError: true };
   }
 }
 
@@ -53,7 +69,27 @@ for (let i = 0; i < slugMatches.length; i += BATCH) {
   results.push(...batchResults);
 }
 
-const missing = results.filter((r) => !r.ok);
+// Only a CONFIRMED HTTP 404 means the file is genuinely gone and safe to
+// remove. A network error or any other non-ok status (5xx, 403, timeout) is
+// ambiguous — the CDN may be unreachable — so refuse to remove anything and
+// abort, otherwise a transient outage would wipe the whole catalog from source
+// control (N119).
+const transient = results.filter((r) => !r.ok && r.status !== 404);
+if (transient.length > 0) {
+  console.error(
+    `Aborting: ${transient.length} decoration(s) returned a non-404 failure ` +
+      `(network error / server error). The CDN may be unreachable — refusing to ` +
+      `remove entries to avoid wiping the catalog.`,
+  );
+  transient
+    .slice(0, 8)
+    .forEach((r) =>
+      console.error(`  ${r.slug}: ${r.networkError ? 'network error' : `HTTP ${r.status}`}`),
+    );
+  process.exit(1);
+}
+
+const missing = results.filter((r) => r.status === 404);
 const found = results.filter((r) => r.ok);
 
 if (missing.length === 0) {

src/app/components/CallEmbedProvider.tsx

@@ -9,6 +9,7 @@ import {
   config,
   Dialog,
   Icon,
+  IconButton,
   Icons,
   Overlay,
   OverlayBackdrop,
@@ -36,6 +37,7 @@ import {
   useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
+import { toastQueueAtom } from '../state/toast';
 import { CallEmbed, useCallControlState } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
@@ -51,6 +53,7 @@ import { mxcUrlToHttp, getMxIdLocalPart } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
 import { getChatBg } from '../features/lotus/chatBackground';
+import { ExitFullscreenIcon, FullscreenIcon } from '../features/call/Controls';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
@@ -62,6 +65,7 @@ import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { zIndices } from '../styles/zIndex';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
@@ -289,11 +293,16 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
   );
 
   // Single soft ping (non-looping) on arrival, respecting the chosen ringtone
-  // + volume. We intentionally do NOT loop here — the user is mid-call.
+  // + volume. We intentionally do NOT loop here — the user is mid-call — and we
+  // ping exactly once per incoming call, not again if the user happens to tweak
+  // ringtone settings while the banner is showing.
+  const pingedRef = useRef<string | undefined>(undefined);
   useEffect(() => {
     if (info.notificationType !== 'ring') return;
+    if (pingedRef.current === info.refEventId) return;
+    pingedRef.current = info.refEventId;
     previewRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
-  }, [info.notificationType, ringtoneId, ringtoneVolume]);
+  }, [info.notificationType, info.refEventId, ringtoneId, ringtoneVolume]);
 
   useEffect(() => {
     const remaining = info.senderTs + info.lifetime - Date.now();
@@ -316,7 +325,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
         position: 'fixed',
         top: config.space.S400,
         right: config.space.S400,
-        zIndex: 9990,
+        zIndex: zIndices.inCallBanner,
         width: toRem(300),
         maxWidth: `calc(100vw - 2 * ${config.space.S400})`,
         padding: config.space.S300,
@@ -397,6 +406,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
   const mx = useMatrixClient();
   const directs = useAtomValue(mDirectAtom);
   const { navigateRoom } = useRoomNavigate();
+  const setToast = useSetAtom(toastQueueAtom);
 
   const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
   const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
@@ -416,6 +426,31 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
         await event.getDecryptionPromise();
       }
 
+      // Caller-side: a participant declined a call we're hosting in this room.
+      // Without this the caller's UI keeps "ringing" until the notification
+      // lifetime expires, with no indication the callee said no.
+      if (event.getType() === EventType.RTCDecline) {
+        const decliner = event.getSender();
+        if (
+          data.liveEvent &&
+          room &&
+          decliner &&
+          decliner !== mx.getSafeUserId() &&
+          callEmbed?.roomId === room.roomId
+        ) {
+          const declinerName =
+            getMemberDisplayName(room, decliner) ?? getMxIdLocalPart(decliner) ?? decliner;
+          setToast({
+            id: `rtc-decline-${event.getId() ?? decliner}`,
+            displayName: declinerName,
+            body: 'Declined your call',
+            roomName: room.name,
+            roomId: room.roomId,
+          });
+        }
+        return;
+      }
+
       if (
         !room ||
         event.getType() !== EventType.RTCNotification ||
@@ -478,7 +513,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
       setCallInfo(info);
     },
-    [mx, directs],
+    [mx, directs, callEmbed, setToast],
   );
 
   useEffect(() => {
@@ -715,7 +750,25 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     if (pipMode) {
       if (!wasInPip) {
         const saved = localStorage.getItem('pip-position');
-        const savedPos = saved ? (JSON.parse(saved) as { left: number; top: number }) : null;
+        let savedPos: { left: number; top: number } | null = null;
+        if (saved) {
+          try {
+            const raw = JSON.parse(saved) as { left?: unknown; top?: unknown };
+            // Validate shape + finiteness: a corrupt value would otherwise feed
+            // NaN into Math.min and produce an invalid `NaNpx` CSS value.
+            if (
+              raw &&
+              typeof raw.left === 'number' &&
+              Number.isFinite(raw.left) &&
+              typeof raw.top === 'number' &&
+              Number.isFinite(raw.top)
+            ) {
+              savedPos = { left: raw.left, top: raw.top };
+            }
+          } catch {
+            savedPos = null;
+          }
+        }
         el.style.right = 'auto';
         el.style.bottom = 'auto';
         if (savedPos) {
@@ -1072,10 +1125,13 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
             >
               <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
                 {document.fullscreenEnabled && (
-                  <button
+                  <IconButton
                     type="button"
+                    size="300"
+                    radii="300"
+                    variant="Surface"
+                    fill="None"
                     aria-label={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
-                    title={pipIsFullscreen ? 'Exit fullscreen' : 'Fullscreen camera'}
                     onClick={(e) => {
                       e.stopPropagation();
                       handlePipFullscreen();
@@ -1084,19 +1140,11 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                       // Dark scrim is intentional for legibility over arbitrary video.
                       background: 'rgba(0,0,0,0.65)',
                       backdropFilter: 'blur(4px)',
-                      border: 'none',
-                      borderRadius: config.radii.R300,
-                      padding: `${config.space.S100} ${config.space.S200}`,
                       color: '#fff',
-                      fontSize: '13px',
-                      cursor: 'pointer',
-                      lineHeight: 1,
-                      display: 'flex',
-                      alignItems: 'center',
                     }}
                   >
-                    {pipIsFullscreen ? '⊡' : '⛶'}
-                  </button>
+                    {pipIsFullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}
+                  </IconButton>
                 )}
                 <div
                   style={{

src/app/components/DeviceVerification.tsx

@@ -5,6 +5,7 @@ import {
   Verifier,
 } from 'matrix-js-sdk/lib/crypto-api';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
 import {
   Box,
@@ -51,21 +52,23 @@ function WaitingMessage({ message }: WaitingMessageProps) {
 
 type VerificationUnexpectedProps = { message: string; onClose: () => void };
 function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
       <Text>{message}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
       </Button>
     </Box>
   );
 }
 
 function VerificationWaitAccept() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Please accept the request from other device.</Text>
-      <WaitingMessage message="Waiting for request to be accepted..." />
+      <Text>{t('Organisms.DeviceVerification.please_accept')}</Text>
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_accept')} />
     </Box>
   );
 }
@@ -74,12 +77,13 @@ type VerificationAcceptProps = {
   onAccept: () => Promise<void>;
 };
 function VerificationAccept({ onAccept }: VerificationAcceptProps) {
+  const { t } = useTranslation();
   const [acceptState, accept] = useAsyncCallback(onAccept);
 
   const accepting = acceptState.status === AsyncStatus.Loading;
   return (
     <Box direction="Column" gap="400">
-      <Text>Click accept to start the verification process.</Text>
+      <Text>{t('Organisms.DeviceVerification.click_accept')}</Text>
       <Button
         variant="Primary"
         fill="Solid"
@@ -87,17 +91,18 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
         before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
         disabled={accepting}
       >
-        <Text size="B400">Accept</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.accept')}</Text>
       </Button>
     </Box>
   );
 }
 
 function VerificationWaitStart() {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification request has been accepted.</Text>
-      <WaitingMessage message="Waiting for the response from other device..." />
+      <Text>{t('Organisms.DeviceVerification.request_accepted')}</Text>
+      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_response')} />
     </Box>
   );
 }
@@ -106,18 +111,20 @@ type VerificationStartProps = {
   onStart: () => Promise<void>;
 };
 function AutoVerificationStart({ onStart }: VerificationStartProps) {
+  const { t } = useTranslation();
   useEffect(() => {
     onStart();
   }, [onStart]);
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
 
 function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
+  const { t } = useTranslation();
   const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
 
   const confirming =
@@ -125,7 +132,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 
   return (
     <Box direction="Column" gap="400">
-      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
+      <Text>{t('Organisms.DeviceVerification.confirm_emoji')}</Text>
       <Box
         className={ContainerColor({ variant: 'SurfaceVariant' })}
         style={{
@@ -157,7 +164,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           disabled={confirming}
           before={confirming && <Spinner size="100" variant="Primary" />}
         >
-          <Text size="B400">They Match</Text>
+          <Text size="B400">{t('Organisms.DeviceVerification.they_match')}</Text>
         </Button>
         <Button
           variant="Primary"
@@ -165,7 +172,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
           onClick={() => sasData.mismatch()}
           disabled={confirming}
         >
-          <Text size="B400">Do not Match</Text>
+          <Text size="B400">{t('Organisms.DeviceVerification.do_not_match')}</Text>
         </Button>
       </Box>
     </Box>
@@ -177,6 +184,7 @@ type SasVerificationProps = {
   onCancel: () => void;
 };
 function SasVerification({ verifier, onCancel }: SasVerificationProps) {
+  const { t } = useTranslation();
   const [sasData, setSasData] = useState<ShowSasCallbacks>();
 
   useVerifierShowSas(verifier, setSasData);
@@ -192,7 +200,7 @@ function SasVerification({ verifier, onCancel }: SasVerificationProps) {
 
   return (
     <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
+      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
     </Box>
   );
 }
@@ -201,13 +209,14 @@ type VerificationDoneProps = {
   onExit: () => void;
 };
 function VerificationDone({ onExit }: VerificationDoneProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
       <div>
-        <Text>Your device is verified.</Text>
+        <Text>{t('Organisms.DeviceVerification.device_verified')}</Text>
       </div>
       <Button variant="Primary" fill="Solid" onClick={onExit}>
-        <Text size="B400">Okay</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.okay')}</Text>
       </Button>
     </Box>
   );
@@ -217,11 +226,12 @@ type VerificationCanceledProps = {
   onClose: () => void;
 };
 function VerificationCanceled({ onClose }: VerificationCanceledProps) {
+  const { t } = useTranslation();
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
+      <Text>{t('Organisms.DeviceVerification.verification_canceled')}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
+        <Text size="B400">{t('Organisms.DeviceVerification.close')}</Text>
       </Button>
     </Box>
   );

src/app/components/MemberVerificationBadge.tsx

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

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

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

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

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

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

@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Overlay,
   OverlayBackdrop,
@@ -66,6 +67,7 @@ type InviteUserProps = {
   requestClose: () => void;
 };
 export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
+  const { t } = useTranslation();
   const mx = useMatrixClient();
   const modalStyle = useModalStyle(560);
   const alive = useAlive();
@@ -194,7 +196,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
               >
                 <Box grow="Yes">
                   <Text size="H4" truncate>
-                    Invite
+                    {t('Organisms.InviteUser.invite')}
                   </Text>
                 </Box>
                 <Box shrink="No" gap="100" alignItems="Center">
@@ -351,7 +353,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   disabled={!validUserId || inviting}
                   before={inviting && <Spinner size="200" variant="Primary" fill="Solid" />}
                 >
-                  <Text size="B400">Invite</Text>
+                  <Text size="B400">{t('Organisms.InviteUser.invite')}</Text>
                 </Button>
               </Box>
             </Box>

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
 import { IContent } from 'matrix-js-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
@@ -507,6 +508,7 @@ type MLocationProps = {
   content: IContent;
 };
 export function MLocation({ content }: MLocationProps) {
+  const { t } = useTranslation();
   const geoUri = content.geo_uri;
   if (typeof geoUri !== 'string') return <BrokenContent />;
   const location = parseGeoUri(geoUri);
@@ -527,7 +529,7 @@ export function MLocation({ content }: MLocationProps) {
         style={{
           width: '280px',
           height: '160px',
-          border: '1px solid var(--bg-surface-border)',
+          border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
           borderRadius: '8px',
           display: 'block',
         }}
@@ -549,7 +551,7 @@ export function MLocation({ content }: MLocationProps) {
         radii="300"
         before={<Icon src={Icons.External} size="50" />}
       >
-        <Text size="B300">Open Location</Text>
+        <Text size="B300">{t('Organisms.Message.open_location')}</Text>
       </Button>
     </Box>
   );

src/app/components/message/Reply.tsx

@@ -1,6 +1,7 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
@@ -37,19 +38,22 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>(
   ),
 );
 
-export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box
-    shrink="No"
-    className={css.ThreadIndicator}
-    alignItems="Center"
-    gap="100"
-    {...props}
-    ref={ref}
-  >
-    <Icon size="50" src={Icons.Thread} />
-    <Text size="L400">Thread</Text>
-  </Box>
-));
+export const ThreadIndicator = as<'div'>(({ ...props }, ref) => {
+  const { t } = useTranslation();
+  return (
+    <Box
+      shrink="No"
+      className={css.ThreadIndicator}
+      alignItems="Center"
+      gap="100"
+      {...props}
+      ref={ref}
+    >
+      <Icon size="50" src={Icons.Thread} />
+      <Text size="L400">{t('Organisms.Message.thread')}</Text>
+    </Box>
+  );
+});
 
 type ReplyProps = {
   room: Room;

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

@@ -1,4 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Badge,
   Box,
@@ -81,6 +82,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const useAuthentication = useMediaAuthentication();
     const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
+    const { t } = useTranslation();
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
@@ -168,7 +170,7 @@ export const ImageContent = as<'div', ImageContentProps>(
               onClick={loadSrc}
               before={<Icon size="Inherit" src={Icons.Photo} filled />}
             >
-              <Text size="B300">View</Text>
+              <Text size="B300">{t('Organisms.ImageContent.view')}</Text>
             </Button>
           </Box>
         )}
@@ -212,7 +214,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                     }
                   }}
                 >
-                  <Text size="B300">Spoiler</Text>
+                  <Text size="B300">{t('Organisms.ImageContent.spoiler')}</Text>
                 </Chip>
               )}
             </TooltipProvider>
@@ -247,7 +249,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                   onClick={handleRetry}
                   before={<Icon size="Inherit" src={Icons.Warning} filled />}
                 >
-                  <Text size="B300">Retry</Text>
+                  <Text size="B300">{t('Organisms.ImageContent.retry')}</Text>
                 </Button>
               )}
             </TooltipProvider>

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useState } from 'react';
-import { Box, color, config, Text, toRem } from 'folds';
+import { Box, color, config, Icon, Icons, Text, toRem } from 'folds';
 import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
 import { RoomEvent } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -339,11 +339,7 @@ export function PollContent({
                     transition: 'all 0.15s',
                   }}
                 >
-                  {selected && isMultiple ? (
-                    <Text as="span" size="T200" style={{ lineHeight: 1 }}>
-                      ✓
-                    </Text>
-                  ) : null}
+                  {selected && isMultiple ? <Icon size="50" src={Icons.Check} /> : null}
                 </span>
                 <Text as="span" size="T300" style={{ flexGrow: 1 }}>
                   {text}

src/app/components/seasonal/SeasonalEffect.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom } from '../../state/settings';
+import { zIndices } from '../../styles/zIndex';
 import {
   animSeasonFall,
   animLeafFall,
@@ -758,7 +759,7 @@ function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: bool
         pointerEvents: 'none',
         // Below the Night Light overlay (9998) so seasonal particles are tinted
         // by it, and below modals (9999) so dialogs are never obscured.
-        zIndex: 9997,
+        zIndex: zIndices.seasonalEffect,
         overflow: 'hidden',
       }}
     >

src/app/components/settings-select/SettingsSelect.tsx

@@ -0,0 +1,98 @@
+import React, { MouseEventHandler, useState } from 'react';
+import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { stopPropagation } from '../../utils/keyboard';
+
+export type SettingsSelectOption<T extends string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+/**
+ * A folds-native dropdown (Button + PopOut + Menu) matching Cinny's select
+ * pattern — used instead of a raw `<select>`, which renders OS-styled and
+ * breaks under non-default themes.
+ */
+export function SettingsSelect<T extends string>({
+  value,
+  options,
+  onChange,
+  disabled,
+  'aria-label': ariaLabel,
+}: {
+  value: T;
+  options: SettingsSelectOption<T>[];
+  onChange: (v: T) => void;
+  disabled?: boolean;
+  'aria-label'?: string;
+}) {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (v: T) => {
+    onChange(v);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        aria-haspopup="menu"
+        aria-expanded={!!menuCords}
+      >
+        <Text size="T300">{selectedLabel}</Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {options.map((opt) => (
+                  <MenuItem
+                    key={opt.value}
+                    size="300"
+                    variant={opt.value === value ? 'Primary' : 'Surface'}
+                    radii="300"
+                    disabled={opt.disabled}
+                    onClick={() => !opt.disabled && handleSelect(opt.value)}
+                  >
+                    <Text size="T300">{opt.label}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}

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

@@ -17,10 +17,10 @@ export const Sidebar = style([
 ]);
 
 export const SidebarGlass = style({
-  backgroundColor: 'rgba(3, 5, 8, 0.55)',
+  backgroundColor: `color-mix(in srgb, ${color.Surface.Container} 55%, transparent)`,
   backdropFilter: 'blur(12px)',
   WebkitBackdropFilter: 'blur(12px)',
-  borderRight: '1px solid rgba(255,255,255,0.06)',
+  borderRight: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
 });
 
 export const SidebarStack = style([

src/app/components/uia-stages/PasswordStage.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
 import React, { FormEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
 import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
 import { ErrorCode } from '../../cs-errorcode';
@@ -13,6 +14,7 @@ export function PasswordStage({
 }: StageComponentProps & {
   userId: string;
 }) {
+  const { t } = useTranslation();
   const { errorCode, error, session } = stageData;
 
   const handleFormSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -44,7 +46,7 @@ export function PasswordStage({
       >
         <Box grow="Yes">
           <Text as="h2" size="H4">
-            Account Password
+            {t('Organisms.PasswordStage.account_password')}
           </Text>
         </Box>
         <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
@@ -59,12 +61,9 @@ export function PasswordStage({
         gap="400"
       >
         <Box direction="Column" gap="400">
-          <Text size="T200">
-            To perform this action you need to authenticate yourself by entering you account
-            password.
-          </Text>
+          <Text size="T200">{t('Organisms.PasswordStage.authenticate_prompt')}</Text>
           <Box direction="Column" gap="100">
-            <Text size="L400">Password</Text>
+            <Text size="L400">{t('Organisms.PasswordStage.password')}</Text>
             <PasswordInput size="400" name="passwordInput" outlined autoFocus required />
             {errorCode && (
               <Box alignItems="Center" gap="100" style={{ color: color.Critical.Main }}>
@@ -72,7 +71,7 @@ export function PasswordStage({
                 <Text size="T200">
                   <b>
                     {errorCode === ErrorCode.M_FORBIDDEN
-                      ? 'Invalid Password!'
+                      ? t('Organisms.PasswordStage.invalid_password')
                       : `${errorCode}: ${error}`}
                   </b>
                 </Text>

src/app/components/upload-board/UploadBoard.tsx

@@ -1,4 +1,5 @@
 import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
@@ -43,6 +44,7 @@ export function UploadBoardHeader({
   onSend,
   imperativeHandlerRef,
 }: UploadBoardHeaderProps) {
+  const { t } = useTranslation();
   const sendingRef = useRef(false);
   const uploads = useAtomValue(uploadFamilyObserverAtom);
 
@@ -88,7 +90,7 @@ export function UploadBoardHeader({
         gap="100"
       >
         <Icon src={open ? Icons.ChevronTop : Icons.ChevronRight} size="50" />
-        <Text size="H6">Files</Text>
+        <Text size="H6">{t('Organisms.UploadBoard.files')}</Text>
       </Box>
       <Box className={css.UploadBoardHeaderContent} alignItems="Center" gap="100">
         {isSuccess && (
@@ -100,12 +102,12 @@ export function UploadBoardHeader({
             outlined
             after={<Icon src={Icons.Send} size="50" filled />}
           >
-            <Text size="B300">Send</Text>
+            <Text size="B300">{t('Organisms.UploadBoard.send')}</Text>
           </Chip>
         )}
         {isError && !open && (
           <Badge variant="Critical" fill="Solid" radii="300">
-            <Text size="L400">Upload Failed</Text>
+            <Text size="L400">{t('Organisms.UploadBoard.upload_failed')}</Text>
           </Badge>
         )}
         {!isSuccess && !isError && !open && (

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
 import { ImageOverlay } from '../ImageOverlay';
@@ -1343,6 +1344,7 @@ function WikipediaCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }
 }
 
 function DiscordCard({ url, prev }: { url: string; prev: IPreviewUrlResponse }) {
+  const { t } = useTranslation();
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
   const iconUrl = (prev['og:image'] as string | undefined) ?? '';
@@ -1383,7 +1385,9 @@ function DiscordCard({ url, prev }: { url: string; prev: IPreviewUrlResponse })
           priority="300"
         >
           <SiteBadge label="Discord" colorClass={previewCss.BadgeDiscord} />
-          <span style={{ marginLeft: '6px', opacity: 0.7, fontSize: '0.85em' }}>Join Server</span>
+          <span style={{ marginLeft: '6px', opacity: 0.7, fontSize: '0.85em' }}>
+            {t('Organisms.UrlPreview.join_server')}
+          </span>
         </Text>
         {title && (
           <Text truncate priority="400">

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

@@ -91,10 +91,10 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
       {(status) => {
         const deviceColor =
           status === VerificationStatus.Verified
-            ? 'var(--tc-positive-normal, #5effc4)'
+            ? color.Success.Main
             : status === VerificationStatus.Unverified
-              ? 'var(--tc-warning-normal, #ffcc55)'
-              : 'var(--tc-surface-low-contrast)';
+              ? color.Warning.Main
+              : color.SurfaceVariant.OnContainer;
         return (
           <Box alignItems="Center" gap="200">
             <Icon size="100" src={Icons.ShieldUser} style={{ color: deviceColor, flexShrink: 0 }} />
@@ -106,7 +106,7 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) {
                 <Text
                   size="T200"
                   truncate
-                  style={{ color: 'var(--tc-surface-low-contrast)', fontFamily: 'monospace' }}
+                  style={{ color: color.SurfaceVariant.OnContainer, fontFamily: 'monospace' }}
                 >
                   {device.deviceId}
                 </Text>
@@ -160,7 +160,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
       direction="Column"
       gap="100"
       style={{
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         borderRadius: config.radii.R300,
         padding: config.space.S300,
       }}
@@ -171,7 +171,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) {
           <Text size="T300">
             <b>Sessions</b>
           </Text>
-          <Text size="T200" style={{ color: 'var(--tc-surface-low-contrast)' }}>
+          <Text size="T200" style={{ color: color.SurfaceVariant.OnContainer }}>
             {devices.length}
           </Text>
         </Box>

src/app/features/call/CallControls.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Chip,
+  color,
   config,
   Icon,
   IconButton,
@@ -276,8 +277,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               bottom: '110%',
               left: '50%',
               transform: 'translateX(-50%)',
-              background: 'var(--bg-surface)',
-              border: '1px solid var(--bg-surface-border)',
+              background: color.Surface.Container,
+              border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
               borderRadius: '0.75rem',
               padding: '1rem 1.25rem',
               zIndex: 100,

src/app/features/call/CallView.tsx

@@ -17,6 +17,7 @@ import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { StateEvent } from '../../../types/matrix/room';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { LotusDecorationPusher } from '../lotus/LotusDecorationPusher';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { VoiceLimitContent } from '../common-settings/general/RoomVoiceLimit';
 import { CallMemberRenderer } from './CallMemberCard';
@@ -164,7 +165,7 @@ function CallLoadErrorMessage() {
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
   // Disposing the embed tears down the hung iframe and returns the user to the
-  // prescreen, from which they can join again ("Retry") or simply walk away.
+  // prescreen, where they can choose to join again.
   const dismiss = () => setCallEmbed(undefined);
 
   return (
@@ -180,11 +181,8 @@ function CallLoadErrorMessage() {
         The call failed to load. Check your connection and try again.
       </Text>
       <Box gap="200" alignItems="Center">
-        <Button variant="Primary" size="300" radii="400" onClick={dismiss}>
-          <Text size="B400">Retry</Text>
-        </Button>
         <Button variant="Secondary" fill="Soft" size="300" radii="400" onClick={dismiss}>
-          <Text size="B400">Leave</Text>
+          <Text size="B400">Back</Text>
         </Button>
       </Box>
     </Box>
@@ -202,6 +200,8 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
     <Box grow="Yes" direction="Column">
       <Box grow="Yes" ref={containerRef} />
       {callEmbed && joined && <CallControls callEmbed={callEmbed} />}
+      {/* [lotus #6] push avatar decorations to EC's in-call tiles (post-join) */}
+      {callEmbed && joined && <LotusDecorationPusher callEmbed={callEmbed} />}
     </Box>
   );
 }

src/app/features/call/Controls.tsx

@@ -166,13 +166,13 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
   );
 }
 
-const FullscreenIcon = () => (
+export const FullscreenIcon = () => (
   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 4h-4v2h6v-6h-2v4z" />
   </svg>
 );
 
-const ExitFullscreenIcon = () => (
+export const ExitFullscreenIcon = () => (
   <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
     <path d="M9 3H7v4H3v2h6V3zm6 0v6h6V7h-4V3h-2zM3 13v2h4v4h2v-6H3zm14 4v-4h2v6h-6v-2h4z" />
   </svg>

src/app/features/call/PrescreenControls.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
+import { Box, Button, color, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
 import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls';
@@ -78,10 +78,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
       </Box>
       <Box grow="Yes" direction="Column" gap="200">
         {micDenied && (
-          <Text
-            size="T200"
-            style={{ color: 'var(--tc-critical-high, #e53e3e)', textAlign: 'center' }}
-          >
+          <Text size="T200" style={{ color: color.Critical.Main, textAlign: 'center' }}>
             Microphone access is blocked. Enable it in your browser settings to join.
           </Text>
         )}

src/app/features/lotus/LotusDecorationPusher.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback, useEffect, useMemo, useRef, type ReactElement } from 'react';
+import { type CallEmbed } from '../../plugins/call';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
+import { decorationUrl } from './avatarDecorations';
+
+/**
+ * [lotus #6] Pushes each call participant's avatar-decoration image URL to the
+ * forked Element Call (`io.lotus.decorations`), which renders it on the in-call
+ * video-tile avatars. Mounted only while joined, so the EC-side handler exists.
+ *
+ * The decoration roster is per-user slugs resolved via `useAvatarDecoration`;
+ * we render one invisible probe per member to reuse that hook + its cache, then
+ * debounce-send the aggregated `{ userId: url }` map whenever it changes.
+ */
+function DecorationProbe({
+  userId,
+  onResolve,
+}: {
+  userId: string;
+  onResolve: (userId: string, url: string | null) => void;
+}): null {
+  const slug = useAvatarDecoration(userId);
+  useEffect(() => {
+    onResolve(userId, slug ? decorationUrl(slug) : null);
+  }, [userId, slug, onResolve]);
+  return null;
+}
+
+export function LotusDecorationPusher({ callEmbed }: { callEmbed: CallEmbed }): ReactElement {
+  const session = useCallSession(callEmbed.room);
+  const members = useCallMembers(session);
+  const map = useRef<Map<string, string>>(new Map());
+  const pushTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const userIds = useMemo(
+    () => Array.from(new Set(members.map((m) => m.userId).filter((u): u is string => !!u))),
+    [members],
+  );
+
+  const push = useCallback(() => {
+    const decorations: Record<string, string> = {};
+    map.current.forEach((url, userId) => {
+      decorations[userId] = url;
+    });
+    callEmbed.call.transport.send('io.lotus.decorations', { decorations }).catch(() => undefined);
+  }, [callEmbed]);
+
+  const schedulePush = useCallback(() => {
+    if (pushTimer.current) clearTimeout(pushTimer.current);
+    pushTimer.current = setTimeout(push, 300);
+  }, [push]);
+
+  const onResolve = useCallback(
+    (userId: string, url: string | null) => {
+      const prev = map.current.get(userId);
+      if (url) {
+        if (prev !== url) {
+          map.current.set(userId, url);
+          schedulePush();
+        }
+      } else if (prev !== undefined) {
+        map.current.delete(userId);
+        schedulePush();
+      }
+    },
+    [schedulePush],
+  );
+
+  // Drop decorations for participants who left the call.
+  useEffect(() => {
+    const present = new Set(userIds);
+    let changed = false;
+    map.current.forEach((_url, userId) => {
+      if (!present.has(userId)) {
+        map.current.delete(userId);
+        changed = true;
+      }
+    });
+    if (changed) schedulePush();
+  }, [userIds, schedulePush]);
+
+  useEffect(
+    () => () => {
+      if (pushTimer.current) clearTimeout(pushTimer.current);
+    },
+    [],
+  );
+
+  return (
+    <>
+      {userIds.map((userId) => (
+        <DecorationProbe key={userId} userId={userId} onResolve={onResolve} />
+      ))}
+    </>
+  );
+}

src/app/features/lotus/avatarDecorations.ts

@@ -1,3 +1,8 @@
+// Single source of truth for the avatar-decoration CDN base URL.
+// scripts/syncDecorations.mjs reads this exact `DECORATION_CDN` declaration out
+// of this file at runtime (by regex) instead of re-declaring it, so the two can
+// never drift. If you migrate the CDN, change it here ONLY — keep the
+// `export const DECORATION_CDN = '...'` shape so the sync script can still parse it.
 export const DECORATION_CDN =
   'https://drive.lotusguild.org/public.php/dav/files/bHswJ9pNKp2t26N/cinny-decorations';
 

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

@@ -1,10 +1,23 @@
 import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem, Button } from 'folds';
-import { useAtomValue } from 'jotai';
+import {
+  Text,
+  Box,
+  Icon,
+  Icons,
+  color,
+  config,
+  Spinner,
+  IconButton,
+  Line,
+  toRem,
+  Button,
+} from 'folds';
+import { useAtom, useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { EventTimeline, EventType, Room, SearchOrderBy } from 'matrix-js-sdk';
+import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { _SearchPathSearchParams } from '../../pages/paths';
@@ -18,8 +31,18 @@ import { decodeSearchParamValueArray, encodeSearchParamValueArray } from '../../
 import { useRooms } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
-import { MessageSearchParams, useMessageSearch } from './useMessageSearch';
+import { getStateEvent } from '../../utils/room';
+import { StateEvent } from '../../../types/matrix/room';
+import {
+  filterGroupsByMsgType,
+  filterGroupsByPinned,
+  MessageSearchParams,
+  MsgTypeFilter,
+  ResultGroup,
+  useMessageSearch,
+} from './useMessageSearch';
 import { useLocalMessageSearch } from './useLocalMessageSearch';
+import { addRecentSearch, recentSearchesAtom } from '../../state/recentSearches';
 import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
@@ -101,7 +124,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
             gap="200"
             style={{
               padding: config.space.S200,
-              background: 'var(--bg-surface-variant)',
+              background: color.SurfaceVariant.Container,
               borderRadius: config.radii.R300,
             }}
           >
@@ -110,7 +133,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
               <Text size="T300" truncate>
                 {room.name}
               </Text>
-              <Text size="T200" style={{ opacity: 0.55 }}>
+              <Text size="T200" priority="300">
                 {msgEvents.length > 0
                   ? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
                   : 'No messages cached yet'}
@@ -130,7 +153,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
               </Button>
             )}
             {!canLoadMore && events.length > 0 && (
-              <Text size="T200" style={{ opacity: 0.5, flexShrink: 0 }}>
+              <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
                 Fully cached
               </Text>
             )}
@@ -167,6 +190,15 @@ export function MessageSearch({
 
   const searchInputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
+
+  // Client-side msgtype post-filter. Kept local — the Matrix search API cannot
+  // filter by msgtype server-side, so the server request is unaffected.
+  const [msgTypeFilters, setMsgTypeFilters] = useState<MsgTypeFilter[]>([]);
+  // Client-side "pinned only" post-filter. Narrows displayed results to events
+  // currently pinned in their room (`m.room.pinned_events`). Server-unaffected.
+  const [pinnedOnly, setPinnedOnly] = useState(false);
+  const [recentSearches, setRecentSearches] = useAtom(recentSearchesAtom);
+
   const [searchParams, setSearchParams] = useSearchParams();
   const searchPathSearchParams = useSearchPathSearchParams(searchParams);
   const { navigateRoom } = useRoomNavigate();
@@ -257,7 +289,45 @@ export function MessageSearch({
     getNextPageParam: (lastPage) => lastPage.nextToken,
   });
 
-  const groups = useMemo(() => data?.pages.flatMap((result) => result.groups) ?? [], [data]);
+  // Shared client-side post-filter (msgtype + pinned) applied to BOTH the
+  // server results and the local/encrypted-cache results, so the filter chips
+  // narrow the whole UI consistently rather than only the server section.
+  const applyResultFilters = useCallback(
+    (allGroups: ResultGroup[]): ResultGroup[] => {
+      const byMsgType = filterGroupsByMsgType(allGroups, msgTypeFilters);
+      if (!pinnedOnly) return byMsgType;
+      // Build a per-room pinned-event lookup. Heavy Matrix reads stay here
+      // (where `mx` is available); the pure helper only consumes the predicate.
+      const pinnedByRoom = new Map<string, Set<string>>();
+      const isPinned = (roomId: string, eventId: string): boolean => {
+        let pinned = pinnedByRoom.get(roomId);
+        if (!pinned) {
+          const room = mx.getRoom(roomId);
+          const content = room
+            ? getStateEvent(
+                room,
+                StateEvent.RoomPinnedEvents,
+              )?.getContent<RoomPinnedEventsEventContent>()
+            : undefined;
+          pinned = new Set(content?.pinned ?? []);
+          pinnedByRoom.set(roomId, pinned);
+        }
+        return pinned.has(eventId);
+      };
+      return filterGroupsByPinned(byMsgType, pinnedOnly, isPinned);
+    },
+    [msgTypeFilters, pinnedOnly, mx],
+  );
+
+  const groups = useMemo(() => {
+    const allGroups = data?.pages.flatMap((result) => result.groups) ?? [];
+    return applyResultFilters(allGroups);
+  }, [data, applyResultFilters]);
+
+  const localGroups = useMemo(
+    () => (localResult ? applyResultFilters(localResult.groups) : []),
+    [localResult, applyResultFilters],
+  );
   const highlights = useMemo(() => {
     const mixed = data?.pages.flatMap((result) => result.highlights);
     return Array.from(new Set(mixed));
@@ -278,7 +348,29 @@ export function MessageSearch({
       newParams.append('term', term);
       return newParams;
     });
+    setRecentSearches((prev) => addRecentSearch(prev, term));
   };
+
+  const handleRecentSearch = (term: string) => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = term;
+    }
+    handleSearch(term);
+  };
+
+  const handleToggleMsgTypeFilter = useCallback((msgType: MsgTypeFilter) => {
+    setMsgTypeFilters((prev) =>
+      prev.includes(msgType) ? prev.filter((t) => t !== msgType) : [...prev, msgType],
+    );
+  }, []);
+
+  const handleTogglePinnedOnly = useCallback(() => {
+    setPinnedOnly((prev) => !prev);
+  }, []);
+
+  const handleClearRecentSearches = useCallback(() => {
+    setRecentSearches([]);
+  }, [setRecentSearches]);
   const handleSearchClear = () => {
     if (searchInputRef.current) {
       searchInputRef.current.value = '';
@@ -407,6 +499,9 @@ export function MessageSearch({
           onSearch={handleSearch}
           onReset={handleSearchClear}
           onSenderAdd={handleSenderAdd}
+          recentSearches={recentSearches}
+          onRecentSearch={handleRecentSearch}
+          onClearRecentSearches={handleClearRecentSearches}
         />
         <SearchFilters
           defaultRoomsFilterName={defaultRoomsFilterName}
@@ -425,6 +520,10 @@ export function MessageSearch({
           onDateRangeChange={handleDateRangeChange}
           containsUrl={msgSearchParams.containsUrl}
           onContainsUrlChange={handleContainsUrlChange}
+          msgTypeFilters={msgTypeFilters}
+          onToggleMsgTypeFilter={handleToggleMsgTypeFilter}
+          pinnedOnly={pinnedOnly}
+          onTogglePinnedOnly={handleTogglePinnedOnly}
         />
       </Box>
 
@@ -550,14 +649,14 @@ export function MessageSearch({
       )}
 
       {localResult &&
-        (senderOnlyMode ? localResult.groups.length > 0 : localResult.encryptedRoomsCount > 0) && (
+        (senderOnlyMode ? localGroups.length > 0 : localResult.encryptedRoomsCount > 0) && (
           <Box direction="Column" gap="300">
             <Box direction="Column" gap="200">
               <Box alignItems="Center" gap="200">
                 <Icon size="200" src={senderOnlyMode ? Icons.User : Icons.Lock} />
                 <Text size="H5">{senderOnlyMode ? 'Messages from user' : 'Encrypted Rooms'}</Text>
                 {!senderOnlyMode && (
-                  <Text size="T200" style={{ opacity: 0.55 }}>
+                  <Text size="T200" priority="300">
                     {`${localResult.searchedRoomsCount} / ${localResult.encryptedRoomsCount} cached`}
                   </Text>
                 )}
@@ -565,15 +664,15 @@ export function MessageSearch({
               <Text size="T300" priority="300">
                 {senderOnlyMode
                   ? `Showing locally cached messages from this user across all rooms. Open more rooms or load history below to extend coverage.`
-                  : localResult.groups.length > 0
+                  : localGroups.length > 0
                     ? `Showing locally cached messages from ${localResult.searchedRoomsCount} encrypted room${localResult.searchedRoomsCount !== 1 ? 's' : ''}. Load more history below to extend coverage.`
                     : `No matches in your local cache. Load messages below to search further back.`}
               </Text>
               <Line size="300" variant="Surface" />
             </Box>
-            {localResult.groups.length > 0 && (
+            {localGroups.length > 0 && (
               <Box direction="Column" gap="300">
-                {localResult.groups.map((group) => {
+                {localGroups.map((group) => {
                   const groupRoom = mx.getRoom(group.roomId);
                   if (!groupRoom) return null;
                   return (

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

@@ -25,6 +25,7 @@ import {
   Input,
   Badge,
   RectCords,
+  IconSrc,
 } from 'folds';
 import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
@@ -41,6 +42,13 @@ import {
 import { DebounceOptions, useDebounce } from '../../hooks/useDebounce';
 import { VirtualTile } from '../../components/virtualizer';
 import { stopPropagation } from '../../utils/keyboard';
+import { MsgTypeFilter } from './useMessageSearch';
+
+const MSG_TYPE_FILTER_OPTIONS: { msgType: MsgTypeFilter; label: string; icon: IconSrc }[] = [
+  { msgType: 'm.image', label: 'Images', icon: Icons.Photo },
+  { msgType: 'm.file', label: 'Files', icon: Icons.File },
+  { msgType: 'm.video', label: 'Video', icon: Icons.VideoCamera },
+];
 
 type OrderButtonProps = {
   order?: string;
@@ -674,6 +682,10 @@ type SearchFiltersProps = {
   onDateRangeChange: (fromTs?: number, toTs?: number) => void;
   containsUrl?: boolean;
   onContainsUrlChange: (value?: boolean) => void;
+  msgTypeFilters: MsgTypeFilter[];
+  onToggleMsgTypeFilter: (msgType: MsgTypeFilter) => void;
+  pinnedOnly: boolean;
+  onTogglePinnedOnly: () => void;
 };
 export function SearchFilters({
   defaultRoomsFilterName,
@@ -692,6 +704,10 @@ export function SearchFilters({
   onDateRangeChange,
   containsUrl,
   onContainsUrlChange,
+  msgTypeFilters,
+  onToggleMsgTypeFilter,
+  pinnedOnly,
+  onTogglePinnedOnly,
 }: SearchFiltersProps) {
   const mx = useMatrixClient();
 
@@ -795,6 +811,56 @@ export function SearchFilters({
         >
           <Text size="T200">Has link</Text>
         </Chip>
+        {MSG_TYPE_FILTER_OPTIONS.map(({ msgType, label, icon }) => {
+          const active = msgTypeFilters.includes(msgType);
+          return (
+            <Chip
+              key={msgType}
+              variant={active ? 'Success' : 'SurfaceVariant'}
+              outlined={active}
+              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
+              }
+              onClick={() => onToggleMsgTypeFilter(msgType)}
+            >
+              <Text size="T200">{label}</Text>
+            </Chip>
+          );
+        })}
+        <Chip
+          variant={pinnedOnly ? 'Success' : 'SurfaceVariant'}
+          outlined={pinnedOnly}
+          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
+          }
+          onClick={onTogglePinnedOnly}
+        >
+          <Text size="T200">Pinned</Text>
+        </Chip>
         <DateRangeButton fromTs={fromTs} toTs={toTs} onChange={onDateRangeChange} />
         <OrderButton order={order} onChange={onOrderChange} />
       </Box>

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

@@ -43,6 +43,9 @@ type SearchInputProps = {
   onSearch: (term: string) => void;
   onReset: () => void;
   onSenderAdd?: (userId: string) => void;
+  recentSearches?: string[];
+  onRecentSearch?: (term: string) => void;
+  onClearRecentSearches?: () => void;
 };
 export function SearchInput({
   active,
@@ -51,6 +54,9 @@ export function SearchInput({
   onSearch,
   onReset,
   onSenderAdd,
+  recentSearches,
+  onRecentSearch,
+  onClearRecentSearches,
 }: SearchInputProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -58,6 +64,8 @@ export function SearchInput({
 
   const [fromQuery, setFromQuery] = useState('');
   const [showSuggestions, setShowSuggestions] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [inputEmpty, setInputEmpty] = useState(true);
 
   // Collect users from room member lists, scored for relevance.
   // Score: same homeserver → +1000, each shared room → +1.
@@ -121,6 +129,7 @@ export function SearchInput({
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
     const value = evt.target.value;
+    setInputEmpty(value.trim() === '');
     const match = FROM_TYPING_REGEX.exec(value);
     if (match) {
       setFromQuery(match[1]);
@@ -130,9 +139,24 @@ export function SearchInput({
     }
   };
 
+  const handleFocus = () => {
+    setFocused(true);
+  };
+
   // Close autocomplete when input loses focus — delay so item clicks fire first
   const handleBlur = () => {
-    setTimeout(closeAutocomplete, 150);
+    setTimeout(() => {
+      closeAutocomplete();
+      setFocused(false);
+    }, 150);
+  };
+
+  const handleRecentClick = (term: string) => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = term;
+    }
+    setInputEmpty(false);
+    onRecentSearch?.(term);
   };
 
   const handleSearchSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -181,6 +205,7 @@ export function SearchInput({
           placeholder="Search messages or type from:@user to filter by sender"
           autoComplete="off"
           onChange={handleChange}
+          onFocus={handleFocus}
           onBlur={handleBlur}
           before={
             active && loading ? (
@@ -255,7 +280,8 @@ export function SearchInput({
                         <Text
                           size="T200"
                           truncate
-                          style={{ opacity: 0.6, fontFamily: 'monospace', fontSize: '0.75em' }}
+                          priority="300"
+                          style={{ fontFamily: 'monospace', fontSize: '0.75em' }}
                         >
                           {user.userId}
                         </Text>
@@ -267,6 +293,52 @@ export function SearchInput({
             </Menu>
           </div>
         )}
+        {focused &&
+          inputEmpty &&
+          suggestedUsers.length === 0 &&
+          recentSearches &&
+          recentSearches.length > 0 && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                zIndex: 999,
+                marginTop: config.space.S100,
+              }}
+            >
+              <Menu variant="Surface" style={{ width: '100%' }}>
+                <Box direction="Column" gap="200" style={{ padding: config.space.S300 }}>
+                  <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
+                    <Text size="L400">Recent searches</Text>
+                    <Chip
+                      variant="SurfaceVariant"
+                      radii="Pill"
+                      onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
+                      onClick={() => onClearRecentSearches?.()}
+                    >
+                      <Text size="T200">Clear</Text>
+                    </Chip>
+                  </Box>
+                  <Box gap="200" wrap="Wrap">
+                    {recentSearches.map((term) => (
+                      <Chip
+                        key={term}
+                        variant="SurfaceVariant"
+                        radii="Pill"
+                        before={<Icon size="50" src={Icons.RecentClock} />}
+                        onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
+                        onClick={() => handleRecentClick(term)}
+                      >
+                        <Text size="T200">{term}</Text>
+                      </Chip>
+                    ))}
+                  </Box>
+                </Box>
+              </Menu>
+            </div>
+          )}
       </Box>
     </Box>
   );

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

@@ -26,6 +26,51 @@ export type SearchResult = {
   groups: ResultGroup[];
 };
 
+// Client-side msgtype post-filter. The Matrix search API cannot filter by
+// msgtype server-side, so this is applied to already-returned results.
+export type MsgTypeFilter = 'm.image' | 'm.file' | 'm.video';
+
+/**
+ * Filter result groups to items whose event msgtype is in `msgTypes` (OR/union).
+ * Empty/absent filter returns groups unchanged. Now-empty groups are dropped.
+ */
+export const filterGroupsByMsgType = (
+  groups: ResultGroup[],
+  msgTypes: MsgTypeFilter[],
+): ResultGroup[] => {
+  if (msgTypes.length === 0) return groups;
+  const allowed = new Set<string>(msgTypes);
+  return groups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => {
+        const msgtype = item.event.content?.msgtype;
+        return typeof msgtype === 'string' && allowed.has(msgtype);
+      }),
+    }))
+    .filter((group) => group.items.length > 0);
+};
+
+/**
+ * Filter result groups to items whose event is currently pinned in its room.
+ * `isPinned(roomId, eventId)` returns whether the event is in the room's
+ * `m.room.pinned_events` set. When `enabled` is false, groups are returned
+ * unchanged. Now-empty groups are dropped.
+ */
+export const filterGroupsByPinned = (
+  groups: ResultGroup[],
+  enabled: boolean,
+  isPinned: (roomId: string, eventId: string) => boolean,
+): ResultGroup[] => {
+  if (!enabled) return groups;
+  return groups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter((item) => isPinned(group.roomId, item.event.event_id)),
+    }))
+    .filter((group) => group.items.length > 0);
+};
+
 const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
   const groups: ResultGroup[] = [];
 

src/app/features/room/MediaGallery.tsx

@@ -6,6 +6,8 @@ import {
   Icon,
   IconButton,
   Icons,
+  Overlay,
+  OverlayBackdrop,
   Scroll,
   Spinner,
   Text,
@@ -15,6 +17,7 @@ import {
   config,
 } from 'folds';
 import { EventType, MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
+import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 import { useNearViewport } from '../../hooks/useNearViewport';
 import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
@@ -250,102 +253,112 @@ function Lightbox({
   });
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      role="dialog"
-      aria-modal
-      aria-label="Media viewer"
-      onKeyDown={handleKeyDown}
-      tabIndex={-1}
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 1000,
-        background: 'rgba(0,0,0,0.92)',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      {/* Header bar */}
-      <Box
-        alignItems="Center"
-        gap="200"
-        style={{
-          padding: `${config.space.S200} ${config.space.S300}`,
-          borderBottom: '1px solid rgba(255,255,255,0.08)',
-          flexShrink: 0,
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <FocusTrap
+        focusTrapOptions={{
+          initialFocus: false,
+          clickOutsideDeactivates: false,
+          escapeDeactivates: false,
         }}
       >
-        <Box grow="Yes" direction="Column" style={{ overflow: 'hidden' }}>
-          <Text size="T400" truncate style={{ color: '#fff', fontWeight: 500 }}>
-            {item.body || (item.msgtype === MsgType.Video ? 'Video' : 'Image')}
-          </Text>
-          <Text size="T200" style={{ color: 'rgba(255,255,255,0.5)' }}>
-            {item.sender} · {dateStr}
-          </Text>
-        </Box>
-        <Text size="T200" style={{ color: 'rgba(255,255,255,0.4)', flexShrink: 0 }}>
-          {index + 1} / {items.length}
-        </Text>
-        <TooltipProvider
-          position="Bottom"
-          align="End"
-          offset={4}
-          tooltip={
-            <Tooltip>
-              <Text>Close</Text>
-            </Tooltip>
-          }
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          role="dialog"
+          aria-modal
+          aria-label="Media viewer"
+          onKeyDown={handleKeyDown}
+          tabIndex={-1}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1000,
+            background: 'rgba(0,0,0,0.92)',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
         >
-          {(ref) => (
-            <IconButton ref={ref} variant="Surface" aria-label="Close" onClick={onClose}>
-              <Icon src={Icons.Cross} />
-            </IconButton>
-          )}
-        </TooltipProvider>
-      </Box>
+          {/* Header bar */}
+          <Box
+            alignItems="Center"
+            gap="200"
+            style={{
+              padding: `${config.space.S200} ${config.space.S300}`,
+              borderBottom: '1px solid rgba(255,255,255,0.08)',
+              flexShrink: 0,
+            }}
+          >
+            <Box grow="Yes" direction="Column" style={{ overflow: 'hidden' }}>
+              <Text size="T400" truncate style={{ color: '#fff', fontWeight: 500 }}>
+                {item.body || (item.msgtype === MsgType.Video ? 'Video' : 'Image')}
+              </Text>
+              <Text size="T200" style={{ color: 'rgba(255,255,255,0.5)' }}>
+                {item.sender} · {dateStr}
+              </Text>
+            </Box>
+            <Text size="T200" style={{ color: 'rgba(255,255,255,0.4)', flexShrink: 0 }}>
+              {index + 1} / {items.length}
+            </Text>
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(ref) => (
+                <IconButton ref={ref} variant="Surface" aria-label="Close" onClick={onClose}>
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
 
-      {/* Media area with nav arrows */}
-      <Box
-        grow="Yes"
-        alignItems="Center"
-        justifyContent="Center"
-        style={{ overflow: 'hidden', padding: config.space.S400 }}
-      >
-        {index > 0 && (
-          <IconButton
-            variant="Surface"
-            aria-label="Previous"
-            onClick={prev}
-            style={{ flexShrink: 0, marginRight: config.space.S200 }}
+          {/* Media area with nav arrows */}
+          <Box
+            grow="Yes"
+            alignItems="Center"
+            justifyContent="Center"
+            style={{ overflow: 'hidden', padding: config.space.S400 }}
           >
-            <Icon src={Icons.ArrowLeft} />
-          </IconButton>
-        )}
-        <Box
-          grow="Yes"
-          alignItems="Center"
-          justifyContent="Center"
-          style={{ overflow: 'hidden', height: '100%' }}
-        >
-          <LightboxMedia
-            key={`${item.mxcUrl}-${item.ts}`}
-            item={item}
-            useAuthentication={useAuthentication}
-          />
-        </Box>
-        {index < items.length - 1 && (
-          <IconButton
-            variant="Surface"
-            aria-label="Next"
-            onClick={next}
-            style={{ flexShrink: 0, marginLeft: config.space.S200 }}
-          >
-            <Icon src={Icons.ArrowRight} />
-          </IconButton>
-        )}
-      </Box>
-    </div>
+            {index > 0 && (
+              <IconButton
+                variant="Surface"
+                aria-label="Previous"
+                onClick={prev}
+                style={{ flexShrink: 0, marginRight: config.space.S200 }}
+              >
+                <Icon src={Icons.ArrowLeft} />
+              </IconButton>
+            )}
+            <Box
+              grow="Yes"
+              alignItems="Center"
+              justifyContent="Center"
+              style={{ overflow: 'hidden', height: '100%' }}
+            >
+              <LightboxMedia
+                key={`${item.mxcUrl}-${item.ts}`}
+                item={item}
+                useAuthentication={useAuthentication}
+              />
+            </Box>
+            {index < items.length - 1 && (
+              <IconButton
+                variant="Surface"
+                aria-label="Next"
+                onClick={next}
+                style={{ flexShrink: 0, marginLeft: config.space.S200 }}
+              >
+                <Icon src={Icons.ArrowRight} />
+              </IconButton>
+            )}
+          </Box>
+        </div>
+      </FocusTrap>
+    </Overlay>
   );
 }
 

src/app/features/room/RoomInput.tsx

@@ -1106,7 +1106,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 <Text
                   size="T200"
                   style={{
-                    color: 'var(--tc-danger-normal)',
+                    color: color.Critical.Main,
                     padding: '2px 6px',
                     alignSelf: 'center',
                     whiteSpace: 'nowrap',
@@ -1119,7 +1119,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 <Text
                   size="T200"
                   style={{
-                    color: 'var(--tc-danger-normal)',
+                    color: color.Critical.Main,
                     padding: '2px 6px',
                     alignSelf: 'center',
                     whiteSpace: 'nowrap',

src/app/features/room/ScheduleMessageModal.tsx

@@ -241,7 +241,7 @@ export function ScheduleMessageModal({
                 <Text size="L400">Send at</Text>
                 <Box gap="200">
                   <Box direction="Column" gap="100" style={{ flex: 1 }}>
-                    <Text as="label" htmlFor="schedule-date" size="T200" style={{ opacity: 0.7 }}>
+                    <Text as="label" htmlFor="schedule-date" size="T200" priority="400">
                       Date
                     </Text>
                     <input
@@ -253,7 +253,7 @@ export function ScheduleMessageModal({
                     />
                   </Box>
                   <Box direction="Column" gap="100" style={{ flex: 1 }}>
-                    <Text as="label" htmlFor="schedule-time" size="T200" style={{ opacity: 0.7 }}>
+                    <Text as="label" htmlFor="schedule-time" size="T200" priority="400">
                       Time
                     </Text>
                     <input

src/app/features/room/ScheduledMessagesTray.tsx

@@ -140,17 +140,17 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
             >
               <Text
                 size="T200"
+                priority="400"
                 style={{
                   flex: 1,
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
-                  opacity: 0.8,
                 }}
               >
                 {typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
               </Text>
-              <Text size="T200" style={{ opacity: 0.6, whiteSpace: 'nowrap', flexShrink: 0 }}>
+              <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
                 {formatSendAt(msg.sendAt)}
               </Text>
               <IconButton

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

@@ -255,6 +255,56 @@ export function About({ requestClose }: AboutProps) {
                       paddingLeft: config.space.S400,
                     }}
                   >
+                    <li>
+                      <Text size="T300">
+                        The Lotus Chat logo is a derivative work based on the original{' '}
+                        <a
+                          href="https://github.com/cinnyapp/cinny"
+                          rel="noreferrer noopener"
+                          target="_blank"
+                        >
+                          Cinny
+                        </a>{' '}
+                        logo by{' '}
+                        <a
+                          href="https://github.com/ajbura"
+                          rel="noreferrer noopener"
+                          target="_blank"
+                        >
+                          Ajay Bura
+                        </a>{' '}
+                        and contributors, used under the terms of{' '}
+                        <a
+                          href="https://creativecommons.org/licenses/by/4.0/"
+                          rel="noreferrer noopener"
+                          target="_blank"
+                        >
+                          CC-BY 4.0
+                        </a>
+                        . The modified logo is © Lotus Guild, also under CC-BY 4.0.
+                      </Text>
+                    </li>
+                    <li>
+                      <Text size="T300">
+                        Lotus Chat is a fork of{' '}
+                        <a
+                          href="https://github.com/cinnyapp/cinny"
+                          rel="noreferrer noopener"
+                          target="_blank"
+                        >
+                          Cinny
+                        </a>{' '}
+                        by Ajay Bura and contributors, used under the terms of{' '}
+                        <a
+                          href="https://www.gnu.org/licenses/agpl-3.0.html"
+                          rel="noreferrer noopener"
+                          target="_blank"
+                        >
+                          AGPL-3.0
+                        </a>
+                        .
+                      </Text>
+                    </li>
                     <li>
                       <Text size="T300">
                         The{' '}

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

@@ -30,6 +30,7 @@ import {
 } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
+import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -482,9 +483,9 @@ function ProfileStatus() {
                 opacity: statusMsg.length >= 56 ? 1 : 0.45,
                 color:
                   statusMsg.length >= 64
-                    ? 'var(--tc-critical-normal)'
+                    ? color.Critical.Main
                     : statusMsg.length >= 56
-                      ? 'var(--tc-warning-normal)'
+                      ? color.Warning.Main
                       : undefined,
               }}
             >
@@ -536,43 +537,20 @@ function ProfileStatus() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save status — server may be rate limiting. Try again.
           </Text>
         )}
         <Box alignItems="Center" gap="200">
-          <Text size="T200" style={{ opacity: 0.6, whiteSpace: 'nowrap', flexShrink: 0 }}>
+          <Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
             Auto-clear after:
           </Text>
-          <select
+          <SettingsSelect
             value={clearAfter}
-            onChange={(e) => setClearAfter(e.target.value)}
+            options={CLEAR_AFTER_OPTIONS}
+            onChange={setClearAfter}
             aria-label="Auto-clear status after"
-            style={{
-              background: color.SurfaceVariant.Container,
-              border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
-              borderRadius: config.radii.R300,
-              color: color.SurfaceVariant.OnContainer,
-              colorScheme: 'dark',
-              fontSize: '0.82rem',
-              padding: `${config.space.S100} ${config.space.S200}`,
-              cursor: 'pointer',
-              outline: 'none',
-            }}
-          >
-            {CLEAR_AFTER_OPTIONS.map((opt) => (
-              <option
-                key={opt.value}
-                value={opt.value}
-                style={{
-                  background: color.SurfaceVariant.Container,
-                  color: color.SurfaceVariant.OnContainer,
-                }}
-              >
-                {opt.label}
-              </option>
-            ))}
-          </select>
+          />
         </Box>
         {(presence?.status || statusMsg) && (
           <Button
@@ -730,7 +708,7 @@ function ProfilePronouns() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save pronouns. Try again.
           </Text>
         )}
@@ -781,10 +759,6 @@ function ProfileTimezone() {
   );
   const saving = saveState.status === AsyncStatus.Loading;
 
-  const handleSelectChange = (evt: React.ChangeEvent<HTMLSelectElement>) => {
-    setTimezone(evt.currentTarget.value);
-  };
-
   const handleReset = () => {
     setTimezone(savedTimezone);
   };
@@ -813,39 +787,16 @@ function ProfileTimezone() {
       <Box direction="Column" grow="Yes" gap="100">
         <Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center" aria-disabled={saving}>
           <Box grow="Yes" direction="Column">
-            <select
-              name="timezoneInput"
-              aria-label="Timezone"
+            <SettingsSelect
               value={timezone}
-              onChange={handleSelectChange}
+              options={[
+                { value: '', label: '— select timezone —' },
+                ...COMMON_TIMEZONES.map((tz) => ({ value: tz, label: tz })),
+              ]}
+              onChange={setTimezone}
               disabled={saving}
-              style={{
-                background: color.SurfaceVariant.Container,
-                border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
-                borderRadius: config.radii.R300,
-                color: color.SurfaceVariant.OnContainer,
-                colorScheme: 'dark',
-                fontSize: '0.875rem',
-                padding: `${config.space.S200} ${config.space.S300}`,
-                width: '100%',
-                cursor: 'pointer',
-                outline: 'none',
-              }}
-            >
-              <option value="">— select timezone —</option>
-              {COMMON_TIMEZONES.map((tz) => (
-                <option
-                  key={tz}
-                  value={tz}
-                  style={{
-                    background: color.SurfaceVariant.Container,
-                    color: color.SurfaceVariant.OnContainer,
-                  }}
-                >
-                  {tz}
-                </option>
-              ))}
-            </select>
+              aria-label="Timezone"
+            />
           </Box>
           {hasChanges && !saving && (
             <IconButton
@@ -873,7 +824,7 @@ function ProfileTimezone() {
           </Button>
         </Box>
         {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: 'var(--tc-critical-normal)' }}>
+          <Text size="T200" style={{ color: color.Critical.Main }}>
             Failed to save timezone. Try again.
           </Text>
         )}

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

@@ -37,12 +37,12 @@ function DecorationPreviewCell({
         width: CELL_SIZE,
         height: CELL_SIZE,
         flexShrink: 0,
-        border: `2px solid ${selected ? 'var(--accent-cyan)' : 'transparent'}`,
+        border: `2px solid ${selected ? color.Primary.Main : 'transparent'}`,
         borderRadius: '50%',
-        background: 'var(--bg-surface-variant)',
+        background: color.SurfaceVariant.Container,
         cursor: 'pointer',
         padding: 0,
-        boxShadow: selected ? '0 0 0 1px var(--accent-cyan)' : 'none',
+        boxShadow: selected ? `0 0 0 1px ${color.Primary.Main}` : 'none',
         overflow: 'hidden',
         outline: 'none',
       }}
@@ -142,7 +142,7 @@ export function ProfileDecoration() {
               height: CELL_SIZE,
               flexShrink: 0,
               borderRadius: '50%',
-              background: 'var(--bg-surface-variant)',
+              background: color.SurfaceVariant.Container,
               overflow: 'hidden',
             }}
           >
@@ -218,7 +218,7 @@ export function ProfileDecoration() {
         >
           {DECORATION_CATEGORIES.map((category) => (
             <div key={category.id} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-              <Text size="L400" style={{ opacity: 0.7 }}>
+              <Text size="L400" priority="400">
                 {category.label}
               </Text>
               <div

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Button, Text } from 'folds';
+import { Box, Button, color, config, Text } from 'folds';
 import { DenoiseModelId } from '../../../state/settings';
 import { DENOISE_MODELS } from '../../../utils/lotusDenoiseUtils';
 import {
@@ -49,8 +49,8 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
         style={{
           position: 'relative',
           height: '12px',
-          background: 'var(--bg-card)',
-          border: '1px solid var(--border-color)',
+          background: color.Surface.Container,
+          border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
           borderRadius: '6px',
           overflow: 'hidden',
         }}
@@ -62,7 +62,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
             left: 0,
             bottom: 0,
             width: `${pct}%`,
-            background: 'var(--accent-green)',
+            background: color.Success.Main,
             transition: 'width 0.05s linear',
           }}
         />
@@ -74,7 +74,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
               bottom: 0,
               left: `${markerPct}%`,
               width: '2px',
-              background: 'var(--accent-orange)',
+              background: color.Primary.Main,
             }}
           />
         )}

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

@@ -81,6 +81,7 @@ import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { playCallJoinSound } from '../../../utils/callSounds';
 import { previewRingtone, RINGTONE_OPTIONS } from '../../../utils/ringtones';
 import { DenoiseTester } from './DenoiseTester';
+import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 
 type ThemeSelectorProps = {
   themeNames: Record<string, string>;
@@ -169,83 +170,6 @@ function SelectTheme({ disabled }: { disabled?: boolean }) {
   );
 }
 
-type SettingsSelectOption<T extends string> = { value: T; label: string; disabled?: boolean };
-
-function SettingsSelect<T extends string>({
-  value,
-  options,
-  onChange,
-}: {
-  value: T;
-  options: SettingsSelectOption<T>[];
-  onChange: (v: T) => void;
-}) {
-  const [menuCords, setMenuCords] = useState<RectCords>();
-  const selectedLabel = options.find((o) => o.value === value)?.label ?? value;
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleSelect = (v: T) => {
-    onChange(v);
-    setMenuCords(undefined);
-  };
-
-  return (
-    <>
-      <Button
-        size="300"
-        variant="Secondary"
-        outlined
-        fill="Soft"
-        radii="300"
-        after={<Icon size="300" src={Icons.ChevronBottom} />}
-        onClick={handleMenu}
-      >
-        <Text size="T300">{selectedLabel}</Text>
-      </Button>
-      <PopOut
-        anchor={menuCords}
-        offset={5}
-        position="Bottom"
-        align="End"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setMenuCords(undefined),
-              clickOutsideDeactivates: true,
-              isKeyForward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-              isKeyBackward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                {options.map((opt) => (
-                  <MenuItem
-                    key={opt.value}
-                    size="300"
-                    variant={opt.value === value ? 'Primary' : 'Surface'}
-                    radii="300"
-                    disabled={opt.disabled}
-                    onClick={() => !opt.disabled && handleSelect(opt.value)}
-                  >
-                    <Text size="T300">{opt.label}</Text>
-                  </MenuItem>
-                ))}
-              </Box>
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </>
-  );
-}
-
 function SystemThemePreferences() {
   const themeKind = useSystemThemeKind();
   const themeNames = useThemeNames();
@@ -432,6 +356,7 @@ function Appearance() {
     settingsAtom,
     'mentionHighlightColor',
   );
+  const [customAccentColor, setCustomAccentColor] = useSetting(settingsAtom, 'customAccentColor');
   const [fontFamily, setFontFamily] = useSetting(settingsAtom, 'fontFamily');
   const [seasonalThemeOverride, setSeasonalThemeOverride] = useSetting(
     settingsAtom,
@@ -684,6 +609,55 @@ function Appearance() {
           }
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Custom Accent Color"
+          description={
+            lotusTerminal
+              ? 'Only applies to non-TDS themes. Disable Lotus Terminal Mode to use a custom accent.'
+              : 'Recolors the app accent (buttons, active states, links, selected states). Leave empty to use the theme default.'
+          }
+          after={
+            <HexColorPickerPopOut
+              picker={
+                <HexColorPicker
+                  color={customAccentColor || color.Primary.Main}
+                  onChange={setCustomAccentColor}
+                />
+              }
+              onRemove={customAccentColor ? () => setCustomAccentColor('') : undefined}
+            >
+              {(openPicker, opened) => (
+                <Button
+                  type="button"
+                  aria-pressed={opened}
+                  onClick={openPicker}
+                  disabled={lotusTerminal}
+                  size="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="300"
+                  before={
+                    <span
+                      style={{
+                        width: toRem(16),
+                        height: toRem(16),
+                        borderRadius: config.radii.R300,
+                        background: customAccentColor || color.Primary.Main,
+                        border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+                        display: 'inline-block',
+                        flexShrink: 0,
+                      }}
+                    />
+                  }
+                >
+                  <Text size="B300">{customAccentColor ? 'Change' : 'Pick'}</Text>
+                </Button>
+              )}
+            </HexColorPickerPopOut>
+          }
+        />
+      </SequenceCard>
     </Box>
   );
 }
@@ -1322,8 +1296,8 @@ function Calls() {
             style={{
               padding: '16px',
               marginTop: '8px',
-              borderTop: '1px solid var(--border-color)',
-              background: 'var(--bg-card)',
+              borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              background: color.Surface.Container,
             }}
           >
             {/* ── Model selection ───────────────────────────────────────── */}
@@ -1347,8 +1321,8 @@ function Calls() {
                   style={{
                     padding: '12px',
                     borderRadius: '8px',
-                    border: '1px solid var(--border-color)',
-                    background: 'var(--bg-input)',
+                    border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                    background: color.SurfaceVariant.Container,
                   }}
                 >
                   <Text size="T300">{selectedDenoiseModel.name}</Text>
@@ -1386,7 +1360,7 @@ function Calls() {
                     direction="Row"
                     gap="100"
                     style={{
-                      borderBottom: '1px solid var(--border-color)',
+                      borderBottom: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
                       paddingBottom: '4px',
                     }}
                   >
@@ -1439,7 +1413,10 @@ function Calls() {
             <Box
               direction="Column"
               gap="300"
-              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
+              style={{
+                paddingTop: '12px',
+                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              }}
             >
               <Text size="L400">Enhancements</Text>
               <SettingTile
@@ -1475,7 +1452,7 @@ function Calls() {
                     step="1"
                     value={callDenoiseGateThreshold}
                     onChange={(e) => setCallDenoiseGateThreshold(parseInt(e.target.value, 10))}
-                    style={{ width: '100%', accentColor: 'var(--accent-orange)' }}
+                    style={{ width: '100%', accentColor: color.Primary.Main }}
                   />
                 </Box>
               )}
@@ -1485,7 +1462,10 @@ function Calls() {
             <Box
               direction="Column"
               gap="200"
-              style={{ paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}
+              style={{
+                paddingTop: '12px',
+                borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+              }}
             >
               <Text size="L400">Test &amp; calibrate</Text>
               <Text size="T200" priority="300">
@@ -1608,7 +1588,7 @@ function Calls() {
                 value={ringtoneVolume}
                 onChange={(e) => setRingtoneVolume(parseInt(e.target.value, 10))}
                 aria-label="Ringtone volume"
-                style={{ flex: 1, accentColor: 'var(--accent-orange)' }}
+                style={{ flex: 1, accentColor: color.Primary.Main }}
               />
               <Text size="T200" style={{ minWidth: '32px', textAlign: 'right' }}>
                 {ringtoneVolume}%
@@ -1668,6 +1648,7 @@ function SeasonalBgGrid({
 }) {
   return (
     <Box
+      grow="Yes"
       style={{
         display: 'grid',
         gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,
@@ -1734,6 +1715,7 @@ function ChatBgGrid() {
 
   return (
     <Box
+      grow="Yes"
       style={{
         display: 'grid',
         gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,

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

@@ -1,6 +1,7 @@
 import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
 import { IPushRule, IPushRules, PushRuleKind } from 'matrix-js-sdk';
 import { Box, Text, Button, Input, config, IconButton, Icons, Icon, Spinner, Switch } from 'folds';
+import { SettingsSelect } from '../../../components/settings-select/SettingsSelect';
 import { useAccountData } from '../../../hooks/useAccountData';
 import { AccountDataEvent } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -193,10 +194,6 @@ function AddRuleForm({ kind, placeholder, label }: AddRuleFormProps) {
     setRuleId(evt.currentTarget.value);
   };
 
-  const handleModeChange: ChangeEventHandler<HTMLSelectElement> = (evt) => {
-    setMode(evt.target.value as NotificationMode);
-  };
-
   return (
     <Box as="form" onSubmit={handleSubmit} direction="Column" gap="200">
       <Text size="T200" priority="300">
@@ -217,24 +214,12 @@ function AddRuleForm({ kind, placeholder, label }: AddRuleFormProps) {
           />
         </Box>
         <Box shrink="No">
-          <select
+          <SettingsSelect
             value={mode}
-            onChange={handleModeChange}
-            style={{
-              background: 'transparent',
-              border: '1px solid currentColor',
-              borderRadius: config.radii.R300,
-              padding: `${config.space.S100} ${config.space.S200}`,
-              color: 'inherit',
-              fontSize: 'inherit',
-            }}
-          >
-            {ADD_MODES.map((m) => (
-              <option key={m} value={m}>
-                {MODE_LABELS[m]}
-              </option>
-            ))}
-          </select>
+            options={ADD_MODES.map((m) => ({ value: m, label: MODE_LABELS[m] }))}
+            onChange={setMode}
+            aria-label="Notification mode"
+          />
         </Box>
         <Button
           size="400"

src/app/features/toast/LotusToastContainer.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useRef, CSSProperties } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
+import { color, config, Icon, IconButton, Icons } from 'folds';
 import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { zIndices } from '../../styles/zIndex';
 
 // Inject the keyframe animation once
 const STYLE_ID = 'lotus-toast-keyframes';
@@ -29,16 +33,21 @@ type ToastCardProps = {
 
 function ToastCard({ toast }: ToastCardProps) {
   const dismiss = useSetAtom(dismissToastAtom);
+  // Lotus Terminal (TDS) gets its bespoke glow/accents; every other theme uses
+  // folds tokens so toasts render correctly on stock Cinny themes (the --lt-*
+  // vars only exist while Terminal mode is active).
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
+    if (toast.sticky) return;
     timerRef.current = setTimeout(() => {
       dismiss(toast.id);
     }, 4000);
     return () => {
       if (timerRef.current !== null) clearTimeout(timerRef.current);
     };
-  }, [dismiss, toast.id]);
+  }, [dismiss, toast.id, toast.sticky]);
 
   const handleCardClick = () => {
     if (toast.onClick) {
@@ -55,15 +64,29 @@ function ToastCard({ toast }: ToastCardProps) {
     dismiss(toast.id);
   };
 
+  const accent = toast.sticky ? color.Primary.Main : color.Surface.OnContainer;
+
   const cardStyle: CSSProperties = {
     position: 'relative',
-    background: 'var(--lt-bg-card)',
-    border: '1px solid var(--lt-border-color)',
-    borderRadius: '12px',
-    padding: '12px 14px',
+    background: lotusTerminal ? 'var(--lt-bg-card)' : color.Surface.Container,
+    border: `${config.borderWidth.B300} solid ${
+      lotusTerminal
+        ? toast.sticky
+          ? 'var(--lt-accent-cyan-border)'
+          : 'var(--lt-border-color)'
+        : toast.sticky
+          ? color.Primary.Main
+          : color.Surface.ContainerLine
+    }`,
+    borderRadius: config.radii.R400,
+    padding: `${config.space.S300} ${config.space.S400}`,
     minWidth: '280px',
     maxWidth: '340px',
-    boxShadow: 'var(--lt-box-glow-orange)',
+    boxShadow: lotusTerminal
+      ? toast.sticky
+        ? 'var(--lt-box-glow-cyan)'
+        : 'var(--lt-box-glow-orange)'
+      : `0 8px 24px ${color.Other.Shadow}`,
     cursor: 'pointer',
     animation: 'lotusToastIn 0.2s ease-out both',
     userSelect: 'none',
@@ -72,8 +95,8 @@ function ToastCard({ toast }: ToastCardProps) {
   const rowStyle: CSSProperties = {
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
-    marginRight: '20px',
+    gap: config.space.S200,
+    marginRight: config.space.S500,
   };
 
   const avatarStyle: CSSProperties = {
@@ -88,19 +111,25 @@ function ToastCard({ toast }: ToastCardProps) {
     width: '24px',
     height: '24px',
     borderRadius: '50%',
-    background: 'var(--lt-accent-orange-dim)',
-    border: '1px solid var(--lt-accent-orange-border)',
+    background: lotusTerminal ? 'var(--lt-accent-orange-dim)' : color.Primary.Container,
+    border: `${config.borderWidth.B300} solid ${
+      lotusTerminal ? 'var(--lt-accent-orange-border)' : color.Primary.ContainerLine
+    }`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '10px',
     fontWeight: 700,
-    color: 'var(--lt-accent-orange)',
+    color: lotusTerminal ? 'var(--lt-accent-orange)' : color.Primary.OnContainer,
     flexShrink: 0,
   };
 
   const nameStyle: CSSProperties = {
-    color: 'var(--lt-accent-orange)',
+    color: lotusTerminal
+      ? toast.sticky
+        ? 'var(--lt-accent-cyan)'
+        : 'var(--lt-accent-orange)'
+      : accent,
     fontWeight: 600,
     fontSize: '0.85rem',
     overflow: 'hidden',
@@ -108,31 +137,18 @@ function ToastCard({ toast }: ToastCardProps) {
     whiteSpace: 'nowrap',
   };
 
-  const dismissBtnStyle: CSSProperties = {
-    position: 'absolute',
-    top: '8px',
-    right: '10px',
-    background: 'none',
-    border: 'none',
-    color: 'var(--lt-text-secondary)',
-    cursor: 'pointer',
-    fontSize: '14px',
-    lineHeight: 1,
-    padding: '2px 4px',
-    borderRadius: '4px',
-  };
-
   const bodyStyle: CSSProperties = {
-    color: 'var(--lt-text-primary)',
+    color: lotusTerminal ? 'var(--lt-text-primary)' : color.Surface.OnContainer,
     fontSize: '0.82rem',
     margin: '4px 0 2px',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    ...(toast.sticky
+      ? { whiteSpace: 'normal', lineHeight: 1.4 }
+      : { textOverflow: 'ellipsis', whiteSpace: 'nowrap' }),
   };
 
   const roomNameStyle: CSSProperties = {
-    color: 'var(--lt-text-secondary)',
+    color: lotusTerminal ? 'var(--lt-text-secondary)' : color.SurfaceVariant.OnContainer,
     fontSize: '0.75rem',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -157,14 +173,19 @@ function ToastCard({ toast }: ToastCardProps) {
       }}
       aria-label={`Notification from ${toast.displayName} in ${toast.roomName}`}
     >
-      <button
-        type="button"
-        style={dismissBtnStyle}
-        onClick={handleDismiss}
-        aria-label="Dismiss notification"
-      >
-        ×
-      </button>
+      <span style={{ position: 'absolute', top: config.space.S100, right: config.space.S100 }}>
+        <IconButton
+          type="button"
+          size="300"
+          radii="300"
+          variant="Surface"
+          fill="None"
+          onClick={handleDismiss}
+          aria-label="Dismiss notification"
+        >
+          <Icon size="100" src={Icons.Cross} />
+        </IconButton>
+      </span>
       <div style={rowStyle}>
         {toast.avatarUrl ? (
           <img src={toast.avatarUrl} alt="" style={avatarStyle} aria-hidden="true" />
@@ -194,10 +215,10 @@ export function LotusToastContainer() {
     position: 'fixed',
     bottom: '1.5rem',
     right: '1.5rem',
-    zIndex: 10001,
+    zIndex: zIndices.toast,
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
+    gap: config.space.S200,
     pointerEvents: 'auto',
   };
 

src/app/hooks/useAfkAutoMute.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSetAtom } from 'jotai';
-import { CallEmbed } from '../plugins/call';
+import { CallEmbed, useCallControlState } from '../plugins/call';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { toastQueueAtom } from '../state/toast';
@@ -9,17 +9,25 @@ const SILENCE_RMS_THRESHOLD = 0.008;
 const CHECK_INTERVAL_MS = 500;
 
 /**
- * Monitors microphone audio while in a call. If the mic stays active but
- * silent for longer than the configured timeout, the mic is muted and a
- * toast is shown. Cleans up its own AudioContext and stream on unmount.
+ * Monitors microphone audio while in a call. If the mic stays unmuted but
+ * silent for longer than the configured timeout, the mic is muted and a toast
+ * is shown.
+ *
+ * The level-monitoring capture (`getUserMedia`) is opened ONLY while the mic is
+ * unmuted — there is nothing to auto-mute once you are already muted, so
+ * holding the capture would keep the OS recording indicator lit even though the
+ * UI shows you as muted (N95). Muting therefore releases our stream; unmuting
+ * re-acquires it. The AudioContext + stream are also torn down on unmount.
  */
 export function useAfkAutoMute(callEmbed: CallEmbed | undefined): void {
   const [enabled] = useSetting(settingsAtom, 'afkAutoMute');
   const [timeoutMinutes] = useSetting(settingsAtom, 'afkTimeoutMinutes');
   const setToast = useSetAtom(toastQueueAtom);
+  const { microphone } = useCallControlState(callEmbed?.control);
 
   useEffect(() => {
-    if (!callEmbed || !enabled) return;
+    // Only capture while in a call, enabled, AND unmuted (see N95 note above).
+    if (!callEmbed || !enabled || !microphone) return undefined;
 
     let stream: MediaStream | undefined;
     let audioCtx: AudioContext | undefined;
@@ -49,24 +57,20 @@ export function useAfkAutoMute(callEmbed: CallEmbed | undefined): void {
           const rms = Math.sqrt(buffer.reduce((sum, v) => sum + v * v, 0) / buffer.length);
 
           if (rms > SILENCE_RMS_THRESHOLD) {
-            // Audio detected — reset the silence timer
+            // Audio detected — reset the silence timer.
             silenceStart = null;
-          } else if (callEmbed.control.microphone) {
-            // Mic is on but silent — start or advance the timer
-            if (silenceStart === null) silenceStart = Date.now();
-            else if (Date.now() - silenceStart >= timeoutMs) {
-              callEmbed.control.setMicrophone(false);
-              setToast({
-                id: `afk-mute-${Date.now()}`,
-                displayName: 'Lotus Chat',
-                body: 'Your microphone was muted after inactivity.',
-                roomName: 'Voice call',
-                roomId: callEmbed.roomId,
-              });
-              silenceStart = null;
-            }
-          } else {
-            // Mic is already muted — don't count silence
+          } else if (silenceStart === null) {
+            // Mic is unmuted (effect only runs while unmuted) but silent — start the timer.
+            silenceStart = Date.now();
+          } else if (Date.now() - silenceStart >= timeoutMs) {
+            callEmbed.control.setMicrophone(false);
+            setToast({
+              id: `afk-mute-${Date.now()}`,
+              displayName: 'Lotus Chat',
+              body: 'Your microphone was muted after inactivity.',
+              roomName: 'Voice call',
+              roomId: callEmbed.roomId,
+            });
             silenceStart = null;
           }
         }, CHECK_INTERVAL_MS);
@@ -79,5 +83,5 @@ export function useAfkAutoMute(callEmbed: CallEmbed | undefined): void {
       stream?.getTracks().forEach((t) => t.stop());
       audioCtx?.close().catch(() => undefined);
     };
-  }, [callEmbed, enabled, timeoutMinutes, setToast]);
+  }, [callEmbed, enabled, timeoutMinutes, setToast, microphone]);
 }

src/app/hooks/useCallSpeakers.ts

@@ -1,60 +1,132 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { CallEmbed } from '../plugins/call';
-import { useMutationObserver } from './useMutationObserver';
 import { isUserId } from '../utils/matrix';
 import { useCallMembers, useCallSession } from './useCall';
 import { useCallJoined } from './useCallEmbed';
 
+/**
+ * Returns the set of Matrix user IDs currently speaking in the Element Call
+ * iframe.
+ *
+ * EC renders each participant's video tile with a `[data-video-fit]` wrapper.
+ * When a participant is speaking, EC draws a speaking indicator via the tile's
+ * `::before` pseudo-element `background-image` (anything other than `none`).
+ * The participant's Matrix user ID is exposed on the first descendant carrying
+ * an `aria-label`.
+ *
+ * We watch the whole iframe document so tiles added/removed mid-call are picked
+ * up automatically, and on every relevant mutation we re-scan ALL `[data-video-fit]`
+ * tiles and rebuild the set from the full current DOM state (rather than just the
+ * tiles in the mutation batch).
+ */
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const [speakers, setSpeakers] = useState(new Set<string>());
   const callSession = useCallSession(callEmbed.room);
   const callMembers = useCallMembers(callSession);
   const joined = useCallJoined(callEmbed);
 
-  const videoContainers = useMemo(() => {
-    if (callMembers && joined) return callEmbed.document?.querySelectorAll('[data-video-fit]');
-    return undefined;
-  }, [callEmbed, callMembers, joined]);
-
-  const mutationObserver = useMutationObserver(
-    useCallback(
-      (mutations) => {
-        const s = new Set<string>();
-
-        mutations.forEach((mutation) => {
-          if (mutation.type !== 'attributes') return;
-          const el = mutation.target as HTMLElement;
-
-          const style = callEmbed.iframe.contentWindow?.getComputedStyle(el, '::before');
-          if (!style) return;
-          const tileBackgroundImage = style.getPropertyValue('background-image');
-          const speaking = tileBackgroundImage !== 'none';
-          if (!speaking) return;
-
-          const speakerId = el.querySelector('[aria-label]')?.getAttribute('aria-label');
-          if (speakerId && isUserId(speakerId)) {
-            s.add(speakerId);
-          }
-        });
-
-        setSpeakers(s);
-      },
-      [callEmbed],
-    ),
-  );
-
   useEffect(() => {
-    videoContainers?.forEach((element) => {
-      mutationObserver.observe(element, {
+    if (!callMembers || !joined) {
+      setSpeakers(new Set<string>());
+      return undefined;
+    }
+
+    const getDoc = (): Document | undefined =>
+      callEmbed.iframe.contentDocument ?? callEmbed.iframe.contentWindow?.document ?? undefined;
+
+    const syncState = (): void => {
+      // [lotus #2] Prefer the fork's io.lotus.call_state events over scraping
+      // EC's rendered DOM. Falls back to the DOM path below when the fork hasn't
+      // sent yet (null) OR sent a spurious empty list (you're always present in
+      // your own joined call, so [] means "no usable data", not "nobody").
+      const lotus = callEmbed.getLotusParticipants();
+      if (lotus !== null && lotus.length > 0) {
+        const ls = new Set<string>();
+        lotus.forEach((p) => {
+          if (p.speaking && isUserId(p.userId)) ls.add(p.userId);
+        });
+        setSpeakers(ls);
+        return;
+      }
+      const doc = getDoc();
+      if (!doc) {
+        setSpeakers(new Set<string>());
+        return;
+      }
+      const s = new Set<string>();
+      // Re-scan every tile on each mutation and build the set from the full
+      // current DOM state, not just the tiles that mutated this batch.
+      const tiles = doc.querySelectorAll<HTMLElement>('[data-video-fit]');
+      tiles.forEach((el) => {
+        const style = callEmbed.iframe.contentWindow?.getComputedStyle(el, '::before');
+        if (!style) return;
+        const tileBackgroundImage = style.getPropertyValue('background-image');
+        const speaking = tileBackgroundImage !== 'none';
+        if (!speaking) return;
+
+        const speakerId = el.querySelector('[aria-label]')?.getAttribute('aria-label');
+        if (speakerId && isUserId(speakerId)) {
+          s.add(speakerId);
+        }
+      });
+      setSpeakers(s);
+    };
+
+    let tileObserver: MutationObserver | undefined;
+
+    const attachObserver = (): void => {
+      const doc = getDoc();
+      if (!doc) return;
+      tileObserver?.disconnect();
+      // Watch the whole document for attribute changes on tiles (which carry
+      // the speaking indicator) and for new tiles being added/removed.
+      tileObserver = new MutationObserver((mutations) => {
+        const relevant = mutations.some(
+          (m) =>
+            m.type === 'attributes' ||
+            (m.type === 'childList' &&
+              (Array.from(m.addedNodes).some(
+                (n) => n instanceof Element && n.querySelector('[data-video-fit]'),
+              ) ||
+                Array.from(m.removedNodes).some(
+                  (n) => n instanceof Element && n.querySelector('[data-video-fit]'),
+                ))),
+        );
+        if (relevant) syncState();
+      });
+      tileObserver.observe(doc.body, {
+        subtree: true,
+        childList: true,
         attributes: true,
         attributeFilter: ['class', 'style'],
       });
-    });
+      syncState();
+    };
+
+    attachObserver();
+    // [lotus #2] Re-derive whenever the fork pushes new call-state.
+    const unsubLotus = callEmbed.onLotusCallState(syncState);
+
+    // If iframe isn't ready yet, wait for body to be available.
+    let bodyWatcher: MutationObserver | undefined;
+    if (!getDoc()?.body) {
+      bodyWatcher = new MutationObserver(() => {
+        if (getDoc()?.body) {
+          bodyWatcher?.disconnect();
+          bodyWatcher = undefined;
+          attachObserver();
+        }
+      });
+      const doc = getDoc();
+      if (doc) bodyWatcher.observe(doc, { childList: true });
+    }
 
     return () => {
-      mutationObserver.disconnect();
+      tileObserver?.disconnect();
+      bodyWatcher?.disconnect();
+      unsubLotus();
     };
-  }, [videoContainers, mutationObserver]);
+  }, [callEmbed, callMembers, joined]);
 
   return speakers;
 };
@@ -81,6 +153,14 @@ export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean =>
     const localUserId = callEmbed.room.client?.getUserId() ?? '';
 
     const syncState = (): void => {
+      // [lotus #2] Prefer the fork's io.lotus.call_state over DOM scraping;
+      // ignore a spurious empty list (fall back to DOM).
+      const lotus = callEmbed.getLotusParticipants();
+      if (lotus !== null && lotus.length > 0) {
+        const remote = lotus.filter((p) => p.userId !== localUserId);
+        setMuted(remote.length > 0 && remote.every((p) => !p.audioEnabled));
+        return;
+      }
       const doc = getDoc();
       if (!doc) {
         setMuted(false);
@@ -89,13 +169,17 @@ export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean =>
       // Each participant's mute icon has data-muted="true"|"false" and
       // aria-label set to their Matrix user ID.
       const muteIcons = doc.querySelectorAll<HTMLElement>('[data-muted]');
-      let anyRemoteMuted = false;
+      let remoteCount = 0;
+      let remoteMutedCount = 0;
       muteIcons.forEach((el) => {
         const userId = el.getAttribute('aria-label') ?? '';
         if (userId === localUserId) return;
-        if (el.getAttribute('data-muted') === 'true') anyRemoteMuted = true;
+        remoteCount += 1;
+        if (el.getAttribute('data-muted') === 'true') remoteMutedCount += 1;
       });
-      setMuted(anyRemoteMuted);
+      // "All muted" badge: true only when there is at least one remote
+      // participant and every one of them is muted (not merely any single one).
+      setMuted(remoteCount > 0 && remoteMutedCount === remoteCount);
     };
 
     let tileObserver: MutationObserver | undefined;
@@ -130,6 +214,8 @@ export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean =>
     };
 
     attachObserver();
+    // [lotus #2] Re-derive whenever the fork pushes new call-state.
+    const unsubLotus = callEmbed.onLotusCallState(syncState);
 
     // If iframe isn't ready yet, wait for body to be available.
     let bodyWatcher: MutationObserver | undefined;
@@ -148,6 +234,7 @@ export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean =>
     return () => {
       tileObserver?.disconnect();
       bodyWatcher?.disconnect();
+      unsubLotus();
     };
   }, [callEmbed]);
 

src/app/hooks/useReminders.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { MatrixClient } from 'matrix-js-sdk';
 import { useMatrixClient } from './useMatrixClient';
 import { useAccountDataCallback } from './useAccountDataCallback';
@@ -32,39 +32,64 @@ export function useReminders(): {
   const mx = useMatrixClient();
   const [reminders, setReminders] = useState<Reminder[]>(() => readReminders(mx));
 
+  // Authoritative local snapshot used to compute mutations. Reading
+  // mx.getAccountData() per-mutation is racy: two quick add/remove calls both
+  // read the same stale baseline and the second write clobbers the first
+  // (N113). We instead mutate from this ref, kept in sync with server echoes.
+  const latestRef = useRef<Reminder[]>(reminders);
+  // Serialize writes so overlapping setAccountData calls can't land out of
+  // order on the server (last-write-wins would otherwise drop data).
+  const writeQueueRef = useRef<Promise<unknown>>(Promise.resolve());
+
+  const applyServerState = useCallback((list: Reminder[]) => {
+    latestRef.current = list;
+    setReminders(list);
+  }, []);
+
   useAccountDataCallback(
     mx,
     useCallback(
       (evt) => {
         if (evt.getType() === REMINDERS_KEY) {
-          setReminders(evt.getContent<RemindersContent>()?.reminders ?? []);
+          applyServerState(evt.getContent<RemindersContent>()?.reminders ?? []);
         }
       },
-      [setReminders],
+      [applyServerState],
     ),
   );
 
   // Re-read on mx change
   useEffect(() => {
-    setReminders(readReminders(mx));
-  }, [mx]);
+    applyServerState(readReminders(mx));
+  }, [mx, applyServerState]);
 
-  const addReminder = useCallback(
-    async (r: Reminder) => {
-      const current = readReminders(mx);
-      const next = [...current, r];
-      await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
+  const enqueueWrite = useCallback(
+    (compute: (current: Reminder[]) => Reminder[]): Promise<void> => {
+      const run = writeQueueRef.current.then(async () => {
+        const next = compute(latestRef.current);
+        latestRef.current = next;
+        setReminders(next);
+        await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
+      });
+      // Keep the chain alive even if one write rejects, but propagate the
+      // rejection to this caller so it can react (e.g. retry).
+      writeQueueRef.current = run.catch(() => undefined);
+      return run;
     },
     [mx],
   );
 
+  const addReminder = useCallback(
+    (r: Reminder) => enqueueWrite((current) => [...current, r]),
+    [enqueueWrite],
+  );
+
   const removeReminder = useCallback(
-    async (eventId: string, timestamp: number) => {
-      const current = readReminders(mx);
-      const next = current.filter((r) => !(r.eventId === eventId && r.timestamp === timestamp));
-      await (mx as any).setAccountData(REMINDERS_KEY, { reminders: next });
-    },
-    [mx],
+    (eventId: string, timestamp: number) =>
+      enqueueWrite((current) =>
+        current.filter((r) => !(r.eventId === eventId && r.timestamp === timestamp)),
+      ),
+    [enqueueWrite],
   );
 
   const getReminders = useCallback(() => reminders, [reminders]);

src/app/hooks/useTheme.ts

@@ -2,10 +2,15 @@ import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import {
+  bloodRedTheme,
   butterTheme,
+  classicMatrixTheme,
+  cyberpunkTheme,
   darkTheme,
   lotusTerminalLightTheme,
   lotusTerminalTheme,
+  midnightTheme,
+  oceanTheme,
   silverTheme,
 } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
@@ -43,6 +48,31 @@ export const ButterTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const CyberpunkTheme: Theme = {
+  id: 'cyberpunk-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['cyberpunk-theme', cyberpunkTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const OceanTheme: Theme = {
+  id: 'ocean-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['ocean-theme', oceanTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const BloodRedTheme: Theme = {
+  id: 'blood-red-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['blood-red-theme', bloodRedTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const ClassicMatrixTheme: Theme = {
+  id: 'classic-matrix-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['classic-matrix-theme', classicMatrixTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const MidnightTheme: Theme = {
+  id: 'midnight-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['midnight-theme', midnightTheme, onDarkFontWeight, 'prism-dark'],
+};
 export const LotusTerminalTheme: Theme = {
   id: 'lotus-terminal-theme',
   kind: ThemeKind.Dark,
@@ -60,7 +90,20 @@ export const LotusTerminalLightTheme: Theme = {
 };
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(
+    () => [
+      LightTheme,
+      SilverTheme,
+      DarkTheme,
+      ButterTheme,
+      CyberpunkTheme,
+      OceanTheme,
+      BloodRedTheme,
+      ClassicMatrixTheme,
+      MidnightTheme,
+    ],
+    [],
+  );
 
   return themes;
 };
@@ -72,6 +115,11 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [CyberpunkTheme.id]: 'Cyberpunk',
+      [OceanTheme.id]: 'Ocean',
+      [BloodRedTheme.id]: 'Blood Red',
+      [ClassicMatrixTheme.id]: 'Classic Matrix',
+      [MidnightTheme.id]: 'Midnight',
     }),
     [],
   );

src/app/pages/App.tsx

@@ -1,7 +1,16 @@
 import React, { useEffect } from 'react';
-import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Provider as JotaiProvider, useAtomValue } from 'jotai';
-import { OverlayContainerProvider, PopOutContainerProvider, TooltipContainerProvider } from 'folds';
+import {
+  Box,
+  Button,
+  config,
+  OverlayContainerProvider,
+  PopOutContainerProvider,
+  Text,
+  toRem,
+  TooltipContainerProvider,
+} from 'folds';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -17,6 +26,8 @@ import { settingsAtom } from '../state/settings';
 import { LotusToastContainer } from '../features/toast/LotusToastContainer';
 import { useTauriNotificationBadge } from '../hooks/useTauriNotificationBadge';
 import { SeasonalEffect } from '../components/seasonal/SeasonalEffect';
+import { applyCustomAccent, removeCustomAccent } from '../utils/accentColor';
+import { zIndices } from '../styles/zIndex';
 
 const FONT_MAP: Record<string, string> = {
   system: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
@@ -51,6 +62,17 @@ function AppearanceEffects() {
     }
   }, [settings.mentionHighlightColor]);
 
+  useEffect(() => {
+    // Custom accent color applies only to non-TDS themes. When Lotus Terminal
+    // (TDS) is active it has its own fixed palette, so we remove any overrides.
+    const accent = settings.customAccentColor;
+    if (accent && !settings.lotusTerminal && applyCustomAccent(accent)) {
+      return () => removeCustomAccent();
+    }
+    removeCustomAccent();
+    return undefined;
+  }, [settings.customAccentColor, settings.lotusTerminal]);
+
   useEffect(() => {
     const font = FONT_MAP[settings.fontFamily ?? 'inter'] ?? FONT_MAP.inter;
     document.body.style.setProperty('--font-secondary', font);
@@ -74,7 +96,7 @@ function NightLightOverlay() {
         position: 'fixed',
         inset: 0,
         pointerEvents: 'none',
-        zIndex: 9998,
+        zIndex: zIndices.nightLight,
         backgroundColor: `rgba(255, 140, 0, ${(settings.nightLightOpacity ?? 30) / 100})`,
       }}
     />
@@ -90,41 +112,25 @@ function App() {
   const portalContainer = document.getElementById('portalContainer') ?? undefined;
 
   return (
-    <Sentry.ErrorBoundary
-      fallback={({ error, resetError }) => (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100vh',
-            gap: '16px',
-            fontFamily: 'sans-serif',
-            padding: '24px',
-            textAlign: 'center',
-          }}
+    <ErrorBoundary
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <Box
+          direction="Column"
+          alignItems="Center"
+          justifyContent="Center"
+          gap="400"
+          style={{ height: '100vh', padding: config.space.S700, textAlign: 'center' }}
         >
-          <h2 style={{ margin: 0 }}>Something went wrong</h2>
-          <p style={{ margin: 0, color: '#666', maxWidth: '400px' }}>
+          <Text size="H2">Something went wrong</Text>
+          <Text size="T300" priority="300" style={{ maxWidth: toRem(400) }}>
             {error instanceof Error ? error.message : 'An unexpected error occurred.'}
-          </p>
-          <button
-            type="button"
-            onClick={resetError}
-            style={{
-              padding: '8px 20px',
-              borderRadius: '6px',
-              border: 'none',
-              background: '#5865f2',
-              color: '#fff',
-              cursor: 'pointer',
-              fontSize: '14px',
-            }}
-          >
-            Try again
-          </button>
-        </div>
+          </Text>
+          <Button variant="Primary" onClick={resetErrorBoundary}>
+            <Text as="span" size="B400">
+              Try again
+            </Text>
+          </Button>
+        </Box>
       )}
     >
       <TooltipContainerProvider value={portalContainer}>
@@ -159,7 +165,7 @@ function App() {
           </OverlayContainerProvider>
         </PopOutContainerProvider>
       </TooltipContainerProvider>
-    </Sentry.ErrorBoundary>
+    </ErrorBoundary>
   );
 }
 

src/app/pages/RouteError.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+import { Box, Button, config, Text, toRem } from 'folds';
 
 export function RouteError() {
   const error = useRouteError();
@@ -11,33 +12,22 @@ export function RouteError() {
       : 'An unexpected error occurred.';
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100dvh',
-        gap: '16px',
-        padding: '32px',
-        fontFamily: 'sans-serif',
-      }}
+    <Box
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="400"
+      style={{ height: '100dvh', padding: config.space.S700 }}
     >
-      <h2 style={{ margin: 0, fontSize: '1.25rem' }}>Something went wrong</h2>
-      <p style={{ margin: 0, opacity: 0.7, textAlign: 'center' }}>{message}</p>
-      <button
-        type="button"
-        onClick={() => window.location.reload()}
-        style={{
-          padding: '8px 20px',
-          borderRadius: '8px',
-          border: 'none',
-          cursor: 'pointer',
-          fontWeight: 600,
-        }}
-      >
-        Reload
-      </button>
-    </div>
+      <Text size="H3">Something went wrong</Text>
+      <Text size="T300" priority="300" style={{ textAlign: 'center', maxWidth: toRem(400) }}>
+        {message}
+      </Text>
+      <Button variant="Primary" onClick={() => window.location.reload()}>
+        <Text as="span" size="B400">
+          Reload
+        </Text>
+      </Button>
+    </Box>
   );
 }

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -242,6 +242,7 @@ function MessageNotifications() {
       roomId,
       eventId,
       body,
+      encrypted,
     }: {
       roomName: string;
       roomAvatar?: string;
@@ -249,6 +250,7 @@ function MessageNotifications() {
       roomId: string;
       eventId: string;
       body?: string;
+      encrypted?: boolean;
     }) => {
       const roomPath = mDirects.has(roomId)
         ? getDirectRoomPath(roomId, eventId)
@@ -267,10 +269,17 @@ function MessageNotifications() {
         return;
       }
 
+      // N109: the OS notification subsystem fetches icon/badge OUTSIDE the page,
+      // so the SW can't inject auth headers and authenticated-media URLs 401.
+      // Use the static app logo (as invite notifications already do).
+      // N106: never put decrypted E2EE plaintext into the OS notification (it
+      // persists in the notification center / lock screen / is readable by other
+      // apps). For encrypted rooms show only the sender; the in-page toast above
+      // still shows the preview while the user is actively looking at the screen.
       const noti = new window.Notification(roomName, {
-        icon: roomAvatar,
-        badge: roomAvatar,
-        body: body ? `${username}: ${body}`.slice(0, 120) : username,
+        icon: LogoSVG,
+        badge: LogoSVG,
+        body: !encrypted && body ? `${username}: ${body}`.slice(0, 120) : username,
         silent: true,
       });
 
@@ -341,6 +350,7 @@ function MessageNotifications() {
             roomId: room.roomId,
             eventId,
             body: (mEvent.getContent().body as string | undefined) ?? '',
+            encrypted: room.hasEncryptionStateEvent(),
           });
         }
 
@@ -390,16 +400,26 @@ function ReminderMonitor() {
   const setToast = useSetAtom(toastQueueAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const firedRef = useRef<Set<string>>(new Set());
+  const removingRef = useRef<Set<string>>(new Set());
+  // Read the latest reminders / DM map via refs so the poll interval below is
+  // created once — not torn down and restarted (which resets its 30s countdown
+  // and can indefinitely defer a near-due reminder) on every reminder sync (N115).
+  const remindersRef = useRef(reminders);
+  remindersRef.current = reminders;
+  const mDirectsRef = useRef(mDirects);
+  mDirectsRef.current = mDirects;
 
   useEffect(() => {
     const check = () => {
       const now = Date.now();
-      reminders.forEach((r) => {
+      remindersRef.current.forEach((r) => {
+        if (r.timestamp > now) return;
         const key = `${r.eventId}-${r.timestamp}`;
-        if (r.timestamp <= now && !firedRef.current.has(key)) {
+        // Show the toast exactly once.
+        if (!firedRef.current.has(key)) {
           firedRef.current.add(key);
           const room = mx.getRoom(r.roomId);
-          const hashPath = mDirects.has(r.roomId)
+          const hashPath = mDirectsRef.current.has(r.roomId)
             ? getDirectRoomPath(r.roomId, r.eventId)
             : getHomeRoomPath(r.roomId, r.eventId);
           setToast({
@@ -410,7 +430,15 @@ function ReminderMonitor() {
             roomId: r.roomId,
             hashPath,
           });
-          removeReminder(r.eventId, r.timestamp);
+        }
+        // Persist the removal, retrying on a later tick if it fails — without
+        // re-showing the toast (N114). The server echo drops it from
+        // `reminders` once the write lands.
+        if (!removingRef.current.has(key)) {
+          removingRef.current.add(key);
+          removeReminder(r.eventId, r.timestamp).catch(() => {
+            removingRef.current.delete(key);
+          });
         }
       });
     };
@@ -425,7 +453,7 @@ function ReminderMonitor() {
       clearInterval(interval);
       document.removeEventListener('visibilitychange', onVisible);
     };
-  }, [mx, reminders, setToast, removeReminder, mDirects]);
+  }, [mx, setToast, removeReminder]);
 
   return null;
 }
@@ -459,11 +487,12 @@ function TauriUpdateFeature() {
     firedRef.current = status.version;
     setToast({
       id: `tauri-update-${status.version}`,
-      displayName: 'Update Available',
-      body: `Lotus Chat ${status.version} is ready to install.`,
+      displayName: '⬆ Update Available',
+      body: `Lotus Chat ${status.version} is ready. Click to install and restart.`,
       roomName: 'System',
       roomId: '',
       onClick: install,
+      sticky: true,
     });
   }, [status, setToast, install]);
 

src/app/pages/client/ClientRoot.tsx

@@ -15,7 +15,14 @@ import {
 } from 'folds';
 import { HttpApiEvent, HttpApiEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
-import React, { MouseEventHandler, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   clearCacheAndReload,
   clearLoginData,
@@ -35,7 +42,7 @@ import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
-import { getFallbackSession } from '../../state/sessions';
+import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
 import { AutoDiscovery } from './AutoDiscovery';
 
 function ClientRootLoading() {
@@ -130,7 +137,10 @@ const useLogoutListener = (mx?: MatrixClient) => {
     const handleLogout: HttpApiEventHandlerMap[HttpApiEvent.SessionLoggedOut] = async () => {
       mx?.stopClient();
       await mx?.clearStores();
-      window.localStorage.clear();
+      // Remove only the session credential keys — NOT settings, drafts, and
+      // other preferences (N98). The SDK's IndexedDB stores are cleared above;
+      // window.localStorage.clear() is reserved for the explicit reset path.
+      removeFallbackSession();
       window.location.reload();
     };
 
@@ -146,6 +156,11 @@ type ClientRootProps = {
 };
 export function ClientRoot({ children }: ClientRootProps) {
   const [loading, setLoading] = useState(true);
+  const [syncError, setSyncError] = useState(false);
+  // Tracks whether the initial sync has ever reached PREPARED. After that,
+  // transient sync errors are handled by <SyncStatus>'s reconnection banner,
+  // so we must NOT pop the blocking error splash for them.
+  const hasPreparedRef = useRef(false);
   const { baseUrl, userId } = getFallbackSession() ?? {};
 
   const [loadState, loadMatrix] = useAsyncCallback<MatrixClient, Error, []>(
@@ -180,7 +195,14 @@ export function ClientRoot({ children }: ClientRootProps) {
     mx,
     useCallback((state) => {
       if (state === 'PREPARED') {
+        hasPreparedRef.current = true;
+        setSyncError(false);
         setLoading(false);
+      } else if (state === 'ERROR' || state === 'STOPPED') {
+        // Only surface the blocking error splash when the INITIAL sync fails
+        // (offline at startup, homeserver unreachable, non-retryable /sync
+        // error). After the first PREPARED, <SyncStatus> owns reconnection UX.
+        if (!hasPreparedRef.current) setSyncError(true);
       }
     }, []),
   );
@@ -188,9 +210,11 @@ export function ClientRoot({ children }: ClientRootProps) {
   return (
     <AutoDiscovery userId={userId!} baseUrl={baseUrl!}>
       <SpecVersions baseUrl={baseUrl!}>
-        {mx && <SyncStatus mx={mx} />}
+        {mx && !syncError && <SyncStatus mx={mx} />}
         {loading && <ClientRootOptions mx={mx} />}
-        {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
+        {(loadState.status === AsyncStatus.Error ||
+          startState.status === AsyncStatus.Error ||
+          syncError) && (
           <SplashScreen>
             <Box
               direction="Column"
@@ -223,6 +247,13 @@ export function ClientRoot({ children }: ClientRootProps) {
                   {startState.status === AsyncStatus.Error && (
                     <Text>{`Failed to start. ${startState.error.message}`}</Text>
                   )}
+                  {syncError &&
+                    loadState.status !== AsyncStatus.Error &&
+                    startState.status !== AsyncStatus.Error && (
+                      <Text>
+                        Failed to sync with your homeserver. Check your connection and try again.
+                      </Text>
+                    )}
                   {('error' in loadState ? (loadState as any).error?.message : undefined) !==
                     IDB_VERSION_CONFLICT && (
                     <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>

src/app/plugins/call/CallControl.ts

@@ -20,8 +20,6 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private _pipMode = false;
 
-  private mediaStatePromiseResolver: undefined | (() => void);
-
   private get document(): Document | undefined {
     return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
   }
@@ -183,13 +181,13 @@ export class CallControl extends EventEmitter implements CallControlState {
   }
 
   private async setMediaState(state: ElementMediaStatePayload) {
-    const data = await this.call.transport.send(ElementWidgetActions.DeviceMute, state);
-    return new Promise<typeof data>((resolve) => {
-      if (this.mediaStatePromiseResolver) {
-        this.mediaStatePromiseResolver();
-      }
-      this.mediaStatePromiseResolver = () => resolve(data);
-    });
+    // transport.send resolves once EC has ACK'd the command, which is enough to
+    // consider the mute applied. We deliberately do NOT gate completion on a
+    // follow-up DeviceMute state-echo: EC may elide it (e.g. when the requested
+    // state already matches its current state) or skip it during teardown,
+    // which would strand this promise forever and block applyState(). The echo,
+    // when it does arrive, is still handled authoritatively by onMediaState().
+    return this.call.transport.send(ElementWidgetActions.DeviceMute, state);
   }
 
   private setSound(sound: boolean): void {
@@ -233,11 +231,6 @@ export class CallControl extends EventEmitter implements CallControlState {
     if (this.microphone && !this.sound) {
       this.toggleSound();
     }
-
-    if (this.mediaStatePromiseResolver) {
-      this.mediaStatePromiseResolver();
-      this.mediaStatePromiseResolver = undefined;
-    }
   }
 
   private onControlMutation() {
@@ -353,23 +346,16 @@ export class CallControl extends EventEmitter implements CallControlState {
    * them yet).
    */
   public focusCameraParticipant(userId: string): void {
-    const doc = this.document;
-    if (!doc) return;
+    // [lotus #4] Pin the participant via the fork's widget action instead of
+    // DOM-poking tiles. EC's layout honors it — including surfacing the camera
+    // alongside a screenshare (A5) — and it's version-stable. The fork always
+    // acks, so the promise resolves regardless.
+    this.call.transport.send('io.lotus.focus_participant', { userId }).catch(() => undefined);
+  }
 
-    // Find the mute icon / aria-label element that identifies this participant
-    const userEl = doc.querySelector<HTMLElement>(`[aria-label="${CSS.escape(userId)}"]`);
-    // Walk up to the nearest video tile container
-    const tile =
-      userEl?.closest<HTMLElement>('[data-testid="videoTile"]') ??
-      userEl?.closest<HTMLElement>('[data-video-fit]');
-
-    if (!this.spotlight) {
-      this.spotlightButton?.click();
-    }
-
-    if (tile) {
-      tile.click();
-    }
+  /** [lotus #4] Clear any manual spotlight pin and return to speaker-follows. */
+  public clearFocusParticipant(): void {
+    this.call.transport.send('io.lotus.focus_participant', { userId: null }).catch(() => undefined);
   }
 
   public dispose() {

src/app/plugins/call/CallEmbed.ts

@@ -36,6 +36,15 @@ const CALL_LOAD_WATCHDOG_MS = 25_000;
 
 export type CallLoadErrorReason = 'timeout' | 'iframe';
 
+/** Payload entry of the fork's io.lotus.call_state widget event (#2). */
+export interface LotusCallParticipant {
+  id: string;
+  userId: string;
+  speaking: boolean;
+  audioEnabled: boolean;
+  videoEnabled: boolean;
+}
+
 export class CallEmbed {
   private mx: MatrixClient;
 
@@ -47,6 +56,13 @@ export class CallEmbed {
 
   public joined = false;
 
+  // [lotus #2] Latest per-participant state from io.lotus.call_state, or null
+  // until the fork sends the first one. When non-null, the speaker/mute hooks
+  // read it instead of scraping the EC iframe DOM.
+  private lotusParticipants: LotusCallParticipant[] | null = null;
+
+  private lotusCallStateListeners = new Set<() => void>();
+
   public readonly control: CallControl;
 
   private readonly container: HTMLElement;
@@ -70,7 +86,9 @@ export class CallEmbed {
 
   private loadError?: CallLoadErrorReason;
 
-  private readonly loadErrorListeners = new Set<(reason: CallLoadErrorReason) => void>();
+  private readonly loadErrorListeners = new Set<
+    (reason: CallLoadErrorReason | undefined) => void
+  >();
 
   // Arrow-function class fields so dispose() passes the exact same reference to mx.off()
   private readonly boundOnEvent = (ev: MatrixEvent) => this.onEvent(ev);
@@ -120,7 +138,9 @@ export class CallEmbed {
     themeKind: ElementCallThemeKind,
     denoiseMode: NoiseSuppressionMode = 'browser',
     denoiseModel: string = 'rnnoise',
-    denoiseNativeNS: boolean = true,
+    // [lotus] no longer used by the in-source denoise path; kept positionally
+    // for callers. Prefixed with _ to satisfy no-unused-vars.
+    _denoiseNativeNS: boolean = true,
     denoiseGate: boolean = false,
     denoiseGateThreshold: number = -45,
     initialAudio = true,
@@ -146,20 +166,30 @@ export class CallEmbed {
       perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
       lang: 'en-EN',
       theme: themeKind,
-      // EC's built-in WebRTC suppressor: on only for 'browser' tier. For 'ml' we
-      // disable it here so EC doesn't do its own extra processing, and let the
-      // Lotus denoise shim (which keeps native NS on) handle the pipeline.
+      // EC's built-in WebRTC suppressor: on only for 'browser' tier. For 'ml'
+      // we disable it so EC captures a raw mic and the fork's in-source denoise
+      // TrackProcessor (lotusDenoiseSource) handles the pipeline.
       noiseSuppression: (denoiseMode === 'browser').toString(),
       audio: initialAudio.toString(),
       video: initialVideo.toString(),
       header: 'none',
+      // [lotus] Activate the self-built fork's in-source features (each is a
+      // no-op on the EC side unless its flag/action is present):
+      //  - call-state stream (speaking/mute events) -> useCallSpeakers
+      //  - transparent background so the room wallpaper shows through natively
+      lotusCallState: 'true',
+      lotusTransparent: 'true',
     });
 
     if (denoiseMode === 'ml') {
-      // Signal the Lotus denoise shim to route the mic through the ML processors.
-      params.append('lotusDenoise', 'ml');
+      // [lotus] In-source ML denoise: the fork runs RNNoise/Speex/DTLN/DFN as a
+      // real LiveKit audio TrackProcessor (survives reconnects — fixes A7),
+      // replacing the old build-time getUserMedia shim. The shim injection was
+      // removed from vite.config.js; the denoise/ assets are still shipped and
+      // loaded by the processor. lotusDenoiseSource (not lotusDenoise=ml) gates
+      // it so the two engines can never both run.
+      params.append('lotusDenoiseSource', 'true');
       params.append('lotusModel', denoiseModel);
-      params.append('lotusNativeNS', denoiseNativeNS.toString());
       params.append('lotusGate', denoiseGate.toString());
       params.append('lotusGateThreshold', denoiseGateThreshold.toString());
     }
@@ -316,6 +346,18 @@ export class CallEmbed {
     this.disposables.push(
       this.listenAction(WidgetApiFromWidgetAction.UpdateAlwaysOnScreen, () => {}),
     );
+    // [lotus #2] Consume the fork's per-participant call-state stream. listenAction
+    // auto-replies {} so the fork's transport doesn't time out. Stored for the
+    // speaker/mute hooks (which prefer this over DOM scraping).
+    this.disposables.push(
+      this.listenAction('io.lotus.call_state', (evt) => {
+        const data = (evt.detail as { data?: { participants?: unknown } } | undefined)?.data;
+        this.lotusParticipants = Array.isArray(data?.participants)
+          ? (data!.participants as LotusCallParticipant[])
+          : [];
+        this.lotusCallStateListeners.forEach((l) => l());
+      }),
+    );
 
     // Populate the map of "read up to" events for this widget with the current event in every room.
     // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
@@ -375,17 +417,44 @@ export class CallEmbed {
     }
   }
 
+  private notifyLoadListeners(reason: CallLoadErrorReason | undefined): void {
+    this.loadErrorListeners.forEach((cb) => {
+      try {
+        cb(reason);
+      } catch {
+        // a misbehaving subscriber must not block the others
+      }
+    });
+  }
+
   /**
-   * Marks the load lifecycle as settled. Called on success (no reason) or on
-   * failure (reason set). Idempotent so the first signal wins.
+   * Marks the load lifecycle as settled.
+   *
+   * - Failure (reason set): the FIRST failure wins; a later success can still
+   *   heal it (below). Once we've genuinely succeeded, later spurious failures
+   *   are ignored.
+   * - Success (no reason): always clears the watchdog. Crucially, if we had
+   *   previously settled as a failure (e.g. the 25s watchdog fired on a slow
+   *   network but EC then finished loading), we self-heal: clear the error and
+   *   notify subscribers with `undefined` so the recovery UI dismisses itself
+   *   instead of stranding the user on an error screen over a live call.
    */
   private settleLoad(reason?: CallLoadErrorReason): void {
-    if (this.loadSettled) return;
-    this.loadSettled = true;
-    this.clearLoadWatchdog();
     if (reason) {
+      if (this.loadSettled) return;
+      this.loadSettled = true;
+      this.clearLoadWatchdog();
       this.loadError = reason;
-      this.loadErrorListeners.forEach((cb) => cb(reason));
+      this.notifyLoadListeners(reason);
+      return;
+    }
+
+    this.clearLoadWatchdog();
+    const wasFailed = this.loadError !== undefined;
+    this.loadSettled = true;
+    this.loadError = undefined;
+    if (wasFailed) {
+      this.notifyLoadListeners(undefined);
     }
   }
 
@@ -402,7 +471,7 @@ export class CallEmbed {
    * immediately so late subscribers still see the error.
    * @returns an unsubscribe function.
    */
-  public onLoadError(callback: (reason: CallLoadErrorReason) => void): () => void {
+  public onLoadError(callback: (reason: CallLoadErrorReason | undefined) => void): () => void {
     this.loadErrorListeners.add(callback);
     if (this.loadError) callback(this.loadError);
     return () => {
@@ -594,6 +663,20 @@ export class CallEmbed {
     }
   }
 
+  /** [lotus #2] Latest io.lotus.call_state participants, or null if the fork
+   * hasn't sent any yet (callers then fall back to DOM scraping). */
+  public getLotusParticipants(): LotusCallParticipant[] | null {
+    return this.lotusParticipants;
+  }
+
+  /** [lotus #2] Subscribe to io.lotus.call_state updates. Returns an unsubscribe. */
+  public onLotusCallState(cb: () => void): () => void {
+    this.lotusCallStateListeners.add(cb);
+    return () => {
+      this.lotusCallStateListeners.delete(cb);
+    };
+  }
+
   public listenAction<T>(type: string, callback: (event: CustomEvent<T>) => void) {
     const wrapped = (ev: CustomEvent<T>) => {
       ev.preventDefault();

src/app/state/recentSearches.ts

@@ -0,0 +1,38 @@
+import { atom } from 'jotai';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+
+const STORAGE_KEY = 'cinny_recent_searches_v1';
+const MAX_RECENT_SEARCHES = 10;
+
+// Internal atom persists as a plain string[] (JSON-serializable).
+const internalAtom = atomWithStorage<string[]>(
+  STORAGE_KEY,
+  [],
+  createJSONStorage(() => localStorage),
+);
+
+/**
+ * Global atom: string[] of the most recent distinct, non-empty search terms.
+ * Most-recent first, deduped, capped at MAX_RECENT_SEARCHES.
+ * Backed by localStorage so recent searches survive page refreshes.
+ */
+export const recentSearchesAtom = atom(
+  (get): string[] => get(internalAtom),
+  (_get, set, updater: string[] | ((prev: string[]) => string[])) => {
+    set(internalAtom, (prev) => {
+      const prevList = Array.isArray(prev) ? prev : [];
+      const next = typeof updater === 'function' ? updater(prevList) : updater;
+      return next;
+    });
+  },
+);
+
+/**
+ * Prepend a search term: dedupes (case-sensitive), drops empties, caps at 10.
+ */
+export const addRecentSearch = (prev: string[], term: string): string[] => {
+  const trimmed = term.trim();
+  if (!trimmed) return prev;
+  const withoutDupe = prev.filter((t) => t !== trimmed);
+  return [trimmed, ...withoutDupe].slice(0, MAX_RECENT_SEARCHES);
+};

src/app/state/settings.ts

@@ -146,6 +146,7 @@ export interface Settings {
   composerToolbarButtons: ComposerToolbarSettings;
 
   mentionHighlightColor: string;
+  customAccentColor: string;
   fontFamily: 'system' | 'inter' | 'jetbrains-mono' | 'fira-code';
 
   afkAutoMute: boolean;
@@ -242,6 +243,7 @@ const defaultSettings: Settings = {
   composerToolbarButtons: DEFAULT_COMPOSER_TOOLBAR,
 
   mentionHighlightColor: '',
+  customAccentColor: '',
   fontFamily: 'inter',
 
   afkAutoMute: false,

src/app/state/toast.ts

@@ -9,6 +9,7 @@ export type ToastNotif = {
   roomId: string;
   hashPath?: string; // overrides window.location.hash navigation when set
   onClick?: () => void; // custom click handler; skips hash navigation when set
+  sticky?: boolean; // when true, does not auto-dismiss — use for action toasts that require a click
 };
 
 const baseAtom = atom<ToastNotif[]>([]);

src/app/styles/zIndex.ts

@@ -0,0 +1,16 @@
+/**
+ * Global overlay stacking layers, centralized so floating Lotus UI doesn't
+ * collide. (folds `Overlay`/`Dialog` modals resolve to 9999, which sits between
+ * `nightLight` and `toast`.) Component-internal stacking uses small local
+ * z-index values and is intentionally not listed here.
+ */
+export const zIndices = {
+  /** In-call incoming-call banner — below seasonal/night-light/modals. */
+  inCallBanner: 9990,
+  /** Seasonal particle effect — below the night-light tint so particles tint. */
+  seasonalEffect: 9997,
+  /** Night Light tint overlay — above effects, below modals. */
+  nightLight: 9998,
+  /** Toasts — above everything, including modals. */
+  toast: 10001,
+} as const;

src/app/utils/accentColor.ts

@@ -0,0 +1,117 @@
+import { color } from 'folds';
+
+// Custom accent color support for non-TDS themes. The folds `Primary.*` tokens
+// are imported as strings like "var(--oq6d07f)"; we extract the underlying CSS
+// variable name at runtime and override it on `document.body`, mirroring the
+// mention-highlight pattern in pages/App.tsx. When unset (or when the Lotus
+// Terminal/TDS theme is active) the overrides are removed so the theme defaults
+// take over again.
+
+export type Rgb = { r: number; g: number; b: number };
+
+const clamp = (n: number): number => Math.max(0, Math.min(255, Math.round(n)));
+
+export const hexToRgb = (hex: string): Rgb | undefined => {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (!m) return undefined;
+  const h = m[1];
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16),
+  };
+};
+
+const rgbToHex = ({ r, g, b }: Rgb): string =>
+  `#${[clamp(r), clamp(g), clamp(b)].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+
+// Lighten/darken by moving each channel a percentage toward white/black.
+export const lighten = ({ r, g, b }: Rgb, amount: number): Rgb => ({
+  r: r + (255 - r) * amount,
+  g: g + (255 - g) * amount,
+  b: b + (255 - b) * amount,
+});
+
+export const darken = ({ r, g, b }: Rgb, amount: number): Rgb => ({
+  r: r * (1 - amount),
+  g: g * (1 - amount),
+  b: b * (1 - amount),
+});
+
+export const rgba = ({ r, g, b }: Rgb, alpha: number): string =>
+  `rgba(${clamp(r)}, ${clamp(g)}, ${clamp(b)}, ${alpha})`;
+
+// WCAG 2.1 relative luminance with gamma linearization (matches the mention
+// highlight contrast logic in pages/App.tsx).
+const toLinear = (c: number): number => {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+};
+
+export const relativeLuminance = ({ r, g, b }: Rgb): number =>
+  0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+
+// Choose contrasting text color over the given base (threshold 0.179).
+export const contrastingText = (rgb: Rgb): string =>
+  relativeLuminance(rgb) > 0.179 ? '#000' : '#fff';
+
+// Extract the underlying CSS variable name from a folds token string such as
+// "var(--oq6d07f)" -> "--oq6d07f".
+export const varNameFromToken = (token: string): string | undefined =>
+  token.match(/var\((--[^)]+)\)/)?.[1];
+
+// The folds Primary token family, keyed by sub-token name.
+const PRIMARY_TOKENS: Record<string, string> = {
+  Main: color.Primary.Main,
+  MainHover: color.Primary.MainHover,
+  MainActive: color.Primary.MainActive,
+  MainLine: color.Primary.MainLine,
+  OnMain: color.Primary.OnMain,
+  Container: color.Primary.Container,
+  ContainerHover: color.Primary.ContainerHover,
+  ContainerActive: color.Primary.ContainerActive,
+  ContainerLine: color.Primary.ContainerLine,
+  OnContainer: color.Primary.OnContainer,
+};
+
+// Derive the 10 Primary sub-token values from a single chosen base color.
+export const derivePrimaryPalette = (base: Rgb): Record<string, string> => {
+  const baseHex = rgbToHex(base);
+  // If the base is very light, darken OnContainer slightly so it stays readable
+  // against the (light, low-alpha) container backgrounds.
+  const onContainer = relativeLuminance(base) > 0.6 ? rgbToHex(darken(base, 0.25)) : baseHex;
+
+  return {
+    Main: baseHex,
+    MainHover: rgbToHex(lighten(base, 0.08)),
+    MainActive: rgbToHex(darken(base, 0.08)),
+    MainLine: baseHex,
+    OnMain: contrastingText(base),
+    Container: rgba(base, 0.12),
+    ContainerHover: rgba(base, 0.16),
+    ContainerActive: rgba(base, 0.22),
+    ContainerLine: rgba(base, 0.4),
+    OnContainer: onContainer,
+  };
+};
+
+// Apply a custom accent color by overriding the folds Primary CSS variables on
+// `document.body`. Returns true when applied, false when the input is invalid.
+export const applyCustomAccent = (hex: string): boolean => {
+  const base = hexToRgb(hex);
+  if (!base) return false;
+  const palette = derivePrimaryPalette(base);
+  Object.entries(PRIMARY_TOKENS).forEach(([key, token]) => {
+    const varName = varNameFromToken(token);
+    if (varName) document.body.style.setProperty(varName, palette[key]);
+  });
+  return true;
+};
+
+// Remove all custom accent overrides, reverting to the active theme's defaults.
+export const removeCustomAccent = (): void => {
+  Object.values(PRIMARY_TOKENS).forEach((token) => {
+    const varName = varNameFromToken(token);
+    if (varName) document.body.style.removeProperty(varName);
+  });
+};

src/app/utils/matrix.ts

@@ -169,12 +169,17 @@ const matrixErrorFromUnknown = (e: unknown): MatrixError => {
 // HTTP statuses that should not be retried — client errors are deterministic
 // (e.g. 413 payload too large, 400 bad request, 401/403 auth) and won't succeed on retry.
 const isRetryableUploadError = (e: unknown): boolean => {
+  // A user-cancelled / aborted upload must never be retried. matrix-js-sdk's
+  // mx.cancelUpload() rejects the upload with a DOMException named "AbortError";
+  // without this guard the retry loop would resurrect an upload the user just
+  // cancelled.
+  if ((e as { name?: unknown } | null | undefined)?.name === 'AbortError') return false;
   if (e instanceof MatrixError) {
     const status = e.httpStatus;
     // No status => network/transport failure (transient): retry.
     if (typeof status !== 'number') return true;
-    // Retry on rate-limiting and server-side (5xx) errors only.
-    return status === 429 || status >= 500;
+    // Retry on request-timeout, rate-limiting and server-side (5xx) errors only.
+    return status === 408 || status === 429 || status >= 500;
   }
   // Non-Matrix errors are typically network/transport failures: retry.
   return true;
@@ -307,6 +312,8 @@ export const addRoomIdToMDirect = async (
   // (it can only be a DM room for one person)
   Object.keys(userIdToRoomIds).forEach((targetUserId) => {
     const roomIds = userIdToRoomIds[targetUserId];
+    // Guard against a corrupt m.direct where a value isn't an array.
+    if (!Array.isArray(roomIds)) return;
 
     if (targetUserId !== userId) {
       const indexOfRoomId = roomIds.indexOf(roomId);
@@ -316,7 +323,7 @@ export const addRoomIdToMDirect = async (
     }
   });
 
-  const roomIds = userIdToRoomIds[userId] || [];
+  const roomIds = Array.isArray(userIdToRoomIds[userId]) ? userIdToRoomIds[userId] : [];
   if (roomIds.indexOf(roomId) === -1) {
     roomIds.push(roomId);
   }
@@ -334,6 +341,7 @@ export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string):
 
   Object.keys(userIdToRoomIds).forEach((targetUserId) => {
     const roomIds = userIdToRoomIds[targetUserId];
+    if (!Array.isArray(roomIds)) return;
     const indexOfRoomId = roomIds.indexOf(roomId);
     if (indexOfRoomId > -1) {
       roomIds.splice(indexOfRoomId, 1);

src/app/utils/ringtones.ts

@@ -78,7 +78,7 @@ const PHRASES: Record<
   },
 };
 
-const playPhrase = (style: SynthStyle, volume: number): void => {
+const playPhrase = (style: SynthStyle, volume: number, destination: AudioNode): void => {
   const ctx = getCtx();
   if (!ctx) return;
   const { type, gain: peak, notes } = PHRASES[style];
@@ -96,18 +96,23 @@ const playPhrase = (style: SynthStyle, volume: number): void => {
     gain.gain.linearRampToValueAtTime(scaledPeak, start + 0.015);
     gain.gain.exponentialRampToValueAtTime(0.0001, start + dur);
     osc.connect(gain);
-    gain.connect(ctx.destination);
+    gain.connect(destination);
     osc.start(start);
     osc.stop(start + dur + 0.02);
   });
 };
 
+// The bundled call.ogg is mastered near full scale, so at equal `volume` it is
+// perceptibly much louder than the synthesized styles (which peak at ~0.12–0.3).
+// Attenuate it so all ringtones sit at a comparable loudness.
+const CLASSIC_GAIN = 0.45;
+
 const startClassic = (volume: number, loop: boolean): (() => void) => {
   let audio: HTMLAudioElement | undefined;
   try {
     audio = new Audio(CallSound);
     audio.loop = loop;
-    audio.volume = clamp01(volume);
+    audio.volume = clamp01(volume) * CLASSIC_GAIN;
     audio.play().catch(() => undefined);
   } catch {
     audio = undefined;
@@ -121,11 +126,41 @@ const startClassic = (volume: number, loop: boolean): (() => void) => {
 };
 
 const startSynth = (style: SynthStyle, volume: number, loop: boolean): (() => void) => {
-  playPhrase(style, volume);
-  if (!loop) return () => undefined;
-  const period = PHRASES[style].period * 1000;
-  const id = window.setInterval(() => playPhrase(style, volume), period);
-  return () => window.clearInterval(id);
+  const ctx = getCtx();
+  if (!ctx) return () => undefined;
+  // All notes route through a per-session master gain so stop() can silence
+  // everything instantly — including notes already scheduled slightly in the
+  // future — instead of letting the last phrase ring out after the user answers.
+  const master = ctx.createGain();
+  master.gain.value = 1;
+  master.connect(ctx.destination);
+
+  playPhrase(style, volume, master);
+  const id = loop
+    ? window.setInterval(() => playPhrase(style, volume, master), PHRASES[style].period * 1000)
+    : 0;
+
+  let stopped = false;
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    if (id) window.clearInterval(id);
+    try {
+      const now = ctx.currentTime;
+      master.gain.cancelScheduledValues(now);
+      master.gain.setValueAtTime(master.gain.value, now);
+      master.gain.linearRampToValueAtTime(0, now + 0.03);
+    } catch {
+      /* context may be closed */
+    }
+    window.setTimeout(() => {
+      try {
+        master.disconnect();
+      } catch {
+        /* already disconnected */
+      }
+    }, 100);
+  };
 };
 
 /**

src/app/utils/sanitize.ts

@@ -155,6 +155,11 @@ export const sanitizeCustomHtml = (customHtml: string): string =>
     allowProtocolRelative: false,
     allowedClasses: {
       code: ['language-*'],
+      // `pre` permits `class` (for `<pre class="language-*">` wrappers); without
+      // an allowedClasses entry, sanitize-html lets a remote sender put ARBITRARY
+      // class names on <pre>, activating site CSS (N100). Restrict to the same
+      // language-* whitelist as <code>.
+      pre: ['language-*'],
     },
     allowedStyles: {
       '*': {

src/client/initMatrix.ts

@@ -2,6 +2,7 @@ import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from
 
 import { cryptoCallbacks } from './secretStorageKeys';
 import { clearNavToActivePathStore } from '../app/state/navToActivePath';
+import { removeFallbackSession } from '../app/state/sessions';
 import { pushSessionToSW } from '../sw-session';
 
 type Session = {
@@ -75,7 +76,9 @@ export const logoutClient = async (mx: MatrixClient) => {
     // ignore if failed to logout
   }
   await mx.clearStores();
-  window.localStorage.clear();
+  // Remove only the session credential keys, preserving user preferences and
+  // unsent drafts (N98). The factory-reset path is clearLoginData() below.
+  removeFallbackSession();
   window.location.reload();
 };
 

src/colors.css.ts

@@ -237,6 +237,301 @@ export const butterTheme = createTheme(color, {
   },
 });
 
+export const cyberpunkTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#0a0015',
+    ContainerHover: '#130722',
+    ContainerActive: '#1c0f30',
+    ContainerLine: '#26173d',
+    OnContainer: '#ECE6F5',
+  },
+
+  Surface: {
+    Container: '#130722',
+    ContainerHover: '#1c0f30',
+    ContainerActive: '#26173d',
+    ContainerLine: '#2f1f4a',
+    OnContainer: '#ECE6F5',
+  },
+
+  SurfaceVariant: {
+    Container: '#1c0f30',
+    ContainerHover: '#26173d',
+    ContainerActive: '#2f1f4a',
+    ContainerLine: '#392858',
+    OnContainer: '#ECE6F5',
+  },
+
+  Primary: {
+    Main: '#bf5fff',
+    MainHover: '#c873ff',
+    MainActive: '#cd7eff',
+    MainLine: '#d28aff',
+    OnMain: '#1a0033',
+    Container: '#3d1a5c',
+    ContainerHover: '#461e69',
+    ContainerActive: '#502276',
+    ContainerLine: '#592683',
+    OnContainer: '#EBD6FF',
+  },
+
+  Secondary: {
+    Main: '#ff2d9b',
+    MainHover: '#ff47a8',
+    MainActive: '#ff54af',
+    MainLine: '#ff61b6',
+    OnMain: '#33001a',
+    Container: '#5c0033',
+    ContainerHover: '#69003a',
+    ContainerActive: '#760041',
+    ContainerLine: '#830048',
+    OnContainer: '#FFD6EB',
+  },
+
+  Other: {
+    FocusRing: 'rgba(191, 95, 255, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(10, 0, 21, 0.9)',
+  },
+});
+
+export const oceanTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#020b18',
+    ContainerHover: '#051426',
+    ContainerActive: '#091d34',
+    ContainerLine: '#0e2742',
+    OnContainer: '#DCEAF2',
+  },
+
+  Surface: {
+    Container: '#051426',
+    ContainerHover: '#091d34',
+    ContainerActive: '#0e2742',
+    ContainerLine: '#143150',
+    OnContainer: '#DCEAF2',
+  },
+
+  SurfaceVariant: {
+    Container: '#091d34',
+    ContainerHover: '#0e2742',
+    ContainerActive: '#143150',
+    ContainerLine: '#1a3b5e',
+    OnContainer: '#DCEAF2',
+  },
+
+  Primary: {
+    Main: '#00c9b1',
+    MainHover: '#1ad2bd',
+    MainActive: '#29d7c4',
+    MainLine: '#38dccb',
+    OnMain: '#00231f',
+    Container: '#004c43',
+    ContainerHover: '#00564c',
+    ContainerActive: '#006155',
+    ContainerLine: '#006b5e',
+    OnContainer: '#B3F0E8',
+  },
+
+  Secondary: {
+    Main: '#0096d6',
+    MainHover: '#1aa3dc',
+    MainActive: '#29aadf',
+    MainLine: '#38b1e2',
+    OnMain: '#001a26',
+    Container: '#003a52',
+    ContainerHover: '#00425e',
+    ContainerActive: '#004b6b',
+    ContainerLine: '#005377',
+    OnContainer: '#B3E2F5',
+  },
+
+  Other: {
+    FocusRing: 'rgba(0, 201, 177, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(2, 11, 24, 0.9)',
+  },
+});
+
+export const bloodRedTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#0d0203',
+    ContainerHover: '#180608',
+    ContainerActive: '#240a0d',
+    ContainerLine: '#300e12',
+    OnContainer: '#F2DDDD',
+  },
+
+  Surface: {
+    Container: '#180608',
+    ContainerHover: '#240a0d',
+    ContainerActive: '#300e12',
+    ContainerLine: '#3c1318',
+    OnContainer: '#F2DDDD',
+  },
+
+  SurfaceVariant: {
+    Container: '#240a0d',
+    ContainerHover: '#300e12',
+    ContainerActive: '#3c1318',
+    ContainerLine: '#48181e',
+    OnContainer: '#F2DDDD',
+  },
+
+  Primary: {
+    Main: '#ff2233',
+    MainHover: '#ff3d4b',
+    MainActive: '#ff4a57',
+    MainLine: '#ff5763',
+    OnMain: '#330003',
+    Container: '#7a0010',
+    ContainerHover: '#8a0013',
+    ContainerActive: '#990015',
+    ContainerLine: '#a80018',
+    OnContainer: '#FFD1D6',
+  },
+
+  Secondary: {
+    Main: '#FFFFFF',
+    MainHover: '#E5E5E5',
+    MainActive: '#D9D9D9',
+    MainLine: '#CCCCCC',
+    OnMain: '#0d0203',
+    Container: '#3c1318',
+    ContainerHover: '#48181e',
+    ContainerActive: '#541d24',
+    ContainerLine: '#60222a',
+    OnContainer: '#F2DDDD',
+  },
+
+  Other: {
+    FocusRing: 'rgba(255, 34, 51, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(13, 2, 3, 0.9)',
+  },
+});
+
+export const classicMatrixTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#000000',
+    ContainerHover: '#0a0f0a',
+    ContainerActive: '#121a12',
+    ContainerLine: '#1c281c',
+    OnContainer: '#C8E6C8',
+  },
+
+  Surface: {
+    Container: '#0a0f0a',
+    ContainerHover: '#121a12',
+    ContainerActive: '#1c281c',
+    ContainerLine: '#263626',
+    OnContainer: '#C8E6C8',
+  },
+
+  SurfaceVariant: {
+    Container: '#121a12',
+    ContainerHover: '#1c281c',
+    ContainerActive: '#263626',
+    ContainerLine: '#304530',
+    OnContainer: '#C8E6C8',
+  },
+
+  Primary: {
+    Main: '#00ff41',
+    MainHover: '#1aff57',
+    MainActive: '#29ff63',
+    MainLine: '#38ff6f',
+    OnMain: '#001a08',
+    Container: '#003311',
+    ContainerHover: '#003d14',
+    ContainerActive: '#004718',
+    ContainerLine: '#00521b',
+    OnContainer: '#9DFFB8',
+  },
+
+  Secondary: {
+    Main: '#C8E6C8',
+    MainHover: '#baddba',
+    MainActive: '#b0d6b0',
+    MainLine: '#a3cca3',
+    OnMain: '#000000',
+    Container: '#263626',
+    ContainerHover: '#304530',
+    ContainerActive: '#3a543a',
+    ContainerLine: '#446344',
+    OnContainer: '#DFF2DF',
+  },
+
+  Other: {
+    FocusRing: 'rgba(0, 255, 65, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(0, 0, 0, 0.9)',
+  },
+});
+
+export const midnightTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: '#111827',
+    ContainerHover: '#1a2234',
+    ContainerActive: '#232d42',
+    ContainerLine: '#2c3850',
+    OnContainer: '#E5E9F0',
+  },
+
+  Surface: {
+    Container: '#1a2234',
+    ContainerHover: '#232d42',
+    ContainerActive: '#2c3850',
+    ContainerLine: '#35435e',
+    OnContainer: '#E5E9F0',
+  },
+
+  SurfaceVariant: {
+    Container: '#232d42',
+    ContainerHover: '#2c3850',
+    ContainerActive: '#35435e',
+    ContainerLine: '#3e4e6c',
+    OnContainer: '#E5E9F0',
+  },
+
+  Primary: {
+    Main: '#6b7ca8',
+    MainHover: '#7989b1',
+    MainActive: '#8493b8',
+    MainLine: '#8f9dbf',
+    OnMain: '#000000',
+    Container: '#2e3a55',
+    ContainerHover: '#354161',
+    ContainerActive: '#3c496d',
+    ContainerLine: '#435179',
+    OnContainer: '#D2DAEC',
+  },
+
+  Secondary: {
+    Main: '#E5E9F0',
+    MainHover: '#d4d9e3',
+    MainActive: '#c9cfdb',
+    MainLine: '#bdc4d3',
+    OnMain: '#111827',
+    Container: '#35435e',
+    ContainerHover: '#3e4e6c',
+    ContainerActive: '#47597a',
+    ContainerLine: '#506488',
+    OnContainer: '#E5E9F0',
+  },
+
+  Other: {
+    FocusRing: 'rgba(107, 124, 168, 0.5)',
+    Shadow: 'rgba(0, 0, 0, 1)',
+    Overlay: 'rgba(17, 24, 39, 0.9)',
+  },
+});
+
 export const lotusTerminalTheme = createTheme(color, {
   Background: {
     Container: '#030508',

src/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable import/first */
-import * as Sentry from '@sentry/react';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { enableMapSet } from 'immer';
@@ -7,31 +6,6 @@ import '@fontsource-variable/inter/index.css';
 import 'folds/dist/style.css';
 import { configClass, varsClass } from 'folds';
 
-const sentryDsn = import.meta.env.VITE_SENTRY_DSN;
-if (sentryDsn) {
-  Sentry.init({
-    dsn: sentryDsn,
-    environment: import.meta.env.MODE,
-    release: import.meta.env.VITE_APP_VERSION,
-    // browserTracingIntegration omitted — it injects sentry-trace/baggage headers
-    // into outgoing fetch calls, which breaks Synapse CORS on matrix.lotusguild.org
-    // No propagation targets — we don't control the Matrix server's CORS allow-list
-    tracePropagationTargets: [],
-    tracesSampleRate: 0,
-    // Don't send PII (IPs, usernames) — this is a private chat app
-    sendDefaultPii: false,
-    // Forward Sentry logs to the dashboard
-    enableLogs: true,
-    // Suppress benign PostmessageTransport / matrixRTC heartbeat timeouts (upstream library noise)
-    ignoreErrors: ['Request timed out'],
-    beforeSend(event) {
-      // Drop any event that may have leaked an access token into breadcrumbs/data
-      if (JSON.stringify(event).includes('access_token')) return null;
-      return event;
-    },
-  });
-}
-
 enableMapSet();
 
 import './index.css';

vite.config.js

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { sentryVitePlugin } from '@sentry/vite-plugin';
 import { wasm } from '@rollup/plugin-wasm';
 import inject from '@rollup/plugin-inject';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
@@ -17,13 +16,15 @@ const copyFiles = {
       // widget URL (/public/element-call/index.html) resolves. v4.x of
       // vite-plugin-static-copy preserves the full source path under dest, so
       // we strip the 4 leading segments of the source base
-      // (node_modules/@element-hq/element-call-embedded/dist) — mirroring the
+      // (node_modules/@lotusguild/element-call-embedded/dist) — mirroring the
       // stripBase pattern used by the android/locales targets below. The old
       // `rename: 'element-call'` form silently produced
       // public/node_modules/.../dist/ under v4.x, 404ing the widget (calls
       // broke on cinny-desktop; web only worked because its deployed copy was
       // a stale artifact from before the vite-plugin-static-copy v4 bump).
-      src: 'node_modules/@element-hq/element-call-embedded/dist',
+      // Source is our self-built fork (LotusGuild/element-call) published to
+      // the Gitea npm registry; see HANDOFF_ELEMENT_CALL_FORK.md.
+      src: 'node_modules/@lotusguild/element-call-embedded/dist',
       dest: 'public/element-call',
       rename: { stripBase: 4 },
     },
@@ -160,34 +161,14 @@ function lotusDenoise() {
         fs.copyFileSync(s, d);
       });
 
-      const shimSrc = path.resolve('build/lotus-denoise.js');
-      if (!fs.existsSync(shimSrc)) {
-        throw new Error(`[lotus-denoise] Missing shim source ${shimSrc} — build aborted.`);
-      }
-      fs.copyFileSync(shimSrc, path.join(ecDir, 'lotus-denoise.js'));
-
-      // Inject the shim <script> into Element Call's index.html so it runs
-      // before EC captures the mic. Verify the injection actually landed —
-      // if EC's bundle ever drops its deferred module entry the replace would
-      // no-op and ML would silently never engage, so fail loudly.
-      const indexPath = path.join(ecDir, 'index.html');
-      if (fs.existsSync(indexPath)) {
-        let html = fs.readFileSync(indexPath, 'utf8');
-        if (!html.includes('lotus-denoise.js')) {
-          // Classic (non-deferred) script runs before EC's deferred module entry.
-          html = html.replace(
-            /<script type="module"/,
-            '<script src="./lotus-denoise.js"></script><script type="module"',
-          );
-          if (!html.includes('lotus-denoise.js')) {
-            throw new Error(
-              '[lotus-denoise] Failed to inject shim into Element Call index.html ' +
-                '(no `<script type="module">` entry found) — build aborted.',
-            );
-          }
-          fs.writeFileSync(indexPath, html);
-        }
-      }
+      // [lotus] DENOISE CUTOVER: the getUserMedia shim is no longer injected.
+      // Our forked Element Call now runs ML denoise in-source as a real LiveKit
+      // audio TrackProcessor (activated by lotusDenoiseSource=1 in CallEmbed),
+      // which survives reconnects (fixes A7). We still copy the denoise/ assets
+      // above because the in-source processor loads its worklets/wasm from
+      // ./denoise/ at runtime. To roll back to the shim: restore the
+      // copy+inject of build/lotus-denoise.js here and swap lotusDenoiseSource
+      // back to lotusDenoise=ml in CallEmbed.getWidget.
     },
   };
 }
@@ -261,20 +242,6 @@ export default defineConfig({
     react(),
     copyPdfWorker(),
     lotusDenoise(),
-    ...(process.env.SENTRY_AUTH_TOKEN
-      ? [
-          sentryVitePlugin({
-            org: 'lotus-guild',
-            project: 'javascript-react',
-            authToken: process.env.SENTRY_AUTH_TOKEN,
-            sourcemaps: {
-              filesToDeleteAfterUpload: ['./dist/**/*.map'],
-            },
-            release: { name: process.env.VITE_APP_VERSION ?? 'lotus' },
-            telemetry: false,
-          }),
-        ]
-      : []),
     VitePWA({
       srcDir: 'src',
       filename: 'sw.ts',
@@ -302,7 +269,7 @@ export default defineConfig({
   build: {
     target: 'esnext',
     outDir: 'dist',
-    sourcemap: process.env.SENTRY_AUTH_TOKEN ? 'hidden' : false,
+    sourcemap: false,
     copyPublicDir: false,
     // manualChunks must be in rolldownOptions (not rollupOptions) for Vite 8 / Rolldown
     rolldownOptions: {