fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246 )

Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard radiogroup, voters) is unchanged. - Every row shows "N votes · P%". Multiple choice looked broken as "100% / 100%" with no counts; the footer now says "voters" there. - Results are a thin progress bar under each answer: accent for your pick, success for the winner, neutral otherwise. The old full-row fill was the same grey as the row, so a 100% answer just looked disabled. - Radio and checkbox indicators are 18px with a 2px border in a colour mixed from the theme's text colour. Primary.ContainerLine was nearly invisible, especially in dark themes. - The winner shows a star and "Winner" instead of a second check mark. - Bordered card, 460px wide (max 100%, same width for every poll). The header is now "Poll · Single choice | Pick up to N | Results hidden until the end | Final results", replacing the letter-spaced "◉ POLL · …" line. - Footer: plain muted text that wraps, and chips ("Who voted", "End poll") that never wrap. Previously the chip label broke onto two lines inside a one-line chip and spilled out of it. Reproduced before/after in Lotus Terminal at 150% zoom, a 360px phone, and dark at 125%. - Lotus Terminal theme: data-winner gets its own green border rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
Merge pull request #245 : desktop without WebRTC offers "Open in browser"
2026-09-27 23:18:25 -04:00 · 2026-09-27 17:10:50 -04:00 · 2026-09-27 16:54:29 -04:00 · 2026-09-27 13:54:11 -04:00 · 2026-09-27 13:32:45 -04:00 · 2026-09-27 12:48:12 -04:00
701 changed files with 52224 additions and 9553 deletions
@@ -1,2 +1,6 @@
 node_modules/
 .git/
 dist/
 experiment/
 *.md
 !README.md
@@ -6,6 +6,18 @@ on:
  pull_request:
    branches: [lotus]
 # Only the newest commit per ref needs to build: a superseded push cancels its
 # in-flight run. This keeps the shared act_runner free (web CI otherwise queues
 # behind long Tauri desktop builds) and — since `trigger-desktop` is `needs:
 # build` — means only the latest lotus commit ever kicks a desktop build,
 # instead of one per rapid push. Cancelling a superseded run is deploy-safe
 # ONLY because lotus_deploy.sh re-resolves origin/lotus each poll iteration and
 # retargets its CI gate to HEAD — otherwise a run cancelled mid-poll would
 # strand the newest commit undeployed. Keep those two in sync.
 concurrency:
  group: ci-${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 jobs:
  build:
    name: Build & Quality Checks
@@ -18,8 +30,13 @@ jobs:
        uses: actions/setup-node@v4
        with:
          node-version-file: '.node-version'
          cache: npm
      # No npm / node_modules cache: the act_runner's internal cache server is
      # unreachable from job containers (`getCacheEntry failed: connect ETIMEDOUT
      # 172.17.0.2`), so every cache restore hangs ~5 min and then fails — pure
      # cost, zero benefit. `cache: npm` was removed from Setup Node above for the
      # same reason. Re-enable both (setup-node `cache: npm` + an actions/cache
      # node_modules step) once the runner's cache server is reachable from jobs.
      - name: Install dependencies
        # Harden against transient registry network failures (ECONNRESET etc.):
        # raise npm's built-in fetch retries/timeouts and retry `npm ci` up to
@@ -40,50 +57,69 @@ jobs:
            sleep $((attempt * 15))
          done
-      # ── Critical gate — if this fails, nothing deploys ──────────────────
+      # ── #99 — lockfile.yml (GitHub-only, deleted) commented on lockfile
      # diffs after the fact; this is the CI-native equivalent, ported as a
      # hard gate. `npm ci` already refuses to run on an out-of-range
      # mismatch, but it can silently normalize lesser lockfile drift (e.g.
      # metadata/resolved fields behind a stale-but-satisfiable range)
      # without failing — so assert zero diff afterward, which is the
      # cheapest way to also catch that class of drift.
      - name: Verify lockfile is in sync
        run: git diff --exit-code package-lock.json
      # ── Quality gates run BEFORE the slow build so a format/lint/type/test
      # error fails in seconds instead of after the ~minutes-long build. All are
      # hard gates — any failure fails the job and blocks the deploy. The tree is
      # held clean (prettier formatted, eslint 0 errors, typecheck 0), so these
      # gate real regressions. NOTE: the lotus-build.sh upstream-merge path can
      # deploy without CI; a later normal push surfaces any introduced issue here
      # — fix forward (or briefly re-soften a gate) rather than deploy broken.
      # eslint gates on errors, plus a warning ratchet (Gitea #97): `check:eslint`
      # runs with `--max-warnings 74`, the exact warning count on this tree at
      # the time the ratchet was added. New warnings push the count over that
      # ceiling and fail the build; fixing an existing warning is free to do
      # and should lower the ceiling in the same PR so the count can only go
      # down over time, never back up.
      - name: Prettier
        run: npm run check:prettier
      - name: ESLint
        run: npm run check:eslint
      - name: TypeScript
        run: npm run typecheck
      # Deterministic pure-logic tests on Node's built-in runner via tsx (no
      # vitest — Vite 8 is ahead of vitest's range). A failure blocks the deploy.
      - name: Unit tests
        run: npm test
      # ── Critical gate — if this fails, nothing deploys. Produces dist/. ──
      - name: Build
        run: npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
          VITE_APP_VERSION: ${{ github.sha }}
-      # Unit tests are a hard gate too — deterministic pure-logic tests on Node's
+      # ── Boot check — actually loads the built dist/, not just builds it ──
-      # built-in runner via tsx (no vitest — Vite 8 is ahead of vitest's range).
+      - name: Boot check
-      # A failure blocks the deploy.
+        run: node scripts/boot-check.mjs
      - name: Unit tests
        run: npm test
-      # ── Quality checks (informational — pre-existing issues exist) ───────
+      # ── Security — hard gate. #24 cleared the outstanding advisories (0
-      - name: TypeScript
+      # vulnerabilities on this tree, verified with `npm audit --omit=dev`), so
-        run: npm run typecheck
+      # there is nothing left this should be soft against. Hard on both
-        continue-on-error: true
+      # `push` and `pull_request`: a new high/critical advisory should block
-
+      # the deploy just as much as it should block the PR.
      - name: ESLint
        run: npm run check:eslint
        continue-on-error: true
      - name: Prettier
        run: npm run check:prettier
        continue-on-error: true
      # ── Security ─────────────────────────────────────────────────────────
      - name: Audit (high/critical)
        run: npm audit --audit-level=high --omit=dev
        continue-on-error: true
-      # ── Bundle size report ───────────────────────────────────────────────
+      # ── Bundle size budget — hard gate on pull_request, warning on push (a
-      - name: Report bundle sizes
+      # push has already merged; failing it can only delay deploying an
-        run: |
+      # otherwise-good commit, not prevent the regression, so pull_request is
-          echo "### Bundle sizes" >> $GITHUB_STEP_SUMMARY
+      # where this should be caught). Budgets live in scripts/bundle-budget.json.
-          echo "" >> $GITHUB_STEP_SUMMARY
+      - name: Check bundle size budget
-          echo "| File | Size | Gzip |" >> $GITHUB_STEP_SUMMARY
+        continue-on-error: ${{ github.event_name == 'push' }}
-          echo "|------|------|------|" >> $GITHUB_STEP_SUMMARY
+        run: node scripts/check-bundle-size.mjs ${{ github.event_name }}
          find dist/assets -name "*.js" -not -name "*.map" | sort | while read f; do
            name=$(basename "$f")
            size=$(du -sh "$f" | cut -f1)
            gzip_size=$(gzip -c "$f" | wc -c | awk '{printf "%.1f kB", $1/1024}')
            echo "| $name | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
          done
  # ── Desktop build trigger ──────────────────────────────────────────────
  # Gated on `build` succeeding so a broken push (e.g. failing `npm ci` or
@@ -96,11 +132,27 @@ jobs:
    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/lotus' }}
    runs-on: ubuntu-latest
    steps:
      # [matrix #9] Debounce: a Tauri build takes ~30 min on the shared runner,
      # so at most one bump per DEBOUNCE_MIN. Commits that land inside the
      # window are picked up by cinny-desktop's nightly catch-up workflow (or a
      # manual dispatch of it) — the desktop cadence no longer tracks every web
      # commit. The bump is also skipped when nothing changed.
      - name: Bump cinny submodule
        env:
          TOKEN: ${{ secrets.RELEASE_TOKEN }}
          DEBOUNCE_MIN: '60'
        run: |
          CINNY_SHA="${{ github.sha }}"
          LAST=$(curl -fsSL -H "Authorization: token $TOKEN" \
            "https://code.lotusguild.org/api/v1/repos/LotusGuild/cinny-desktop/commits?sha=main&limit=1&stat=false&verification=false&files=false" \
            | python3 -c 'import sys,json; c=json.load(sys.stdin); print(c[0]["commit"]["committer"]["date"] if c else "")' 2>/dev/null || true)
          if [ -n "$LAST" ]; then
            AGE=$(python3 -c "import sys,datetime; d=datetime.datetime.fromisoformat(sys.argv[1].replace('Z','+00:00')); print(int((datetime.datetime.now(datetime.timezone.utc)-d).total_seconds()//60))" "$LAST")
            if [ "$AGE" -lt "$DEBOUNCE_MIN" ]; then
              echo "Last desktop bump was ${AGE} min ago (< ${DEBOUNCE_MIN}); skipping — the nightly catch-up will pick this up."
              exit 0
            fi
          fi
          git clone "https://x-access-token:$TOKEN@code.lotusguild.org/LotusGuild/cinny-desktop.git" desktop
          cd desktop
          git config user.email "ci@lotusguild.org"
@@ -116,3 +168,164 @@ jobs:
            git push origin main
            echo "Pushed — cinny-desktop release.yml will start via on:push trigger"
          fi
  # ── #95 — secret scanning ────────────────────────────────────────────────
  # zricethezav/gitleaks-action is GitHub-Actions-only; on the Gitea act_runner
  # we can't assume the host has a Docker daemon reachable from job containers
  # (see the `docker` job below), so this downloads the pinned linux/amd64
  # binary release directly instead. `--no-git` scans the checked-out tree as
  # plain files (a point-in-time content scan) rather than walking history,
  # since this runs on both push and pull_request and a PR's shallow checkout
  # doesn't carry full history anyway.
  gitleaks:
    name: Secret scan (gitleaks)
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Install gitleaks 8.30.1
        run: |
          curl -fsSL -o gitleaks.tar.gz \
            https://github.com/gitleaks/gitleaks/releases/download/v8.30.1/gitleaks_8.30.1_linux_x64.tar.gz
          tar -xzf gitleaks.tar.gz gitleaks
          chmod +x gitleaks
      - name: Scan for secrets
        run: ./gitleaks detect --no-git -v --redact --source . --config .gitleaks.toml
  # ── #93 — the image was never actually built in CI, so a Dockerfile break
  # (or a header regression, once #95's nginx CSP shipped) could sit unnoticed
  # until a manual `docker build` on deploy infra caught it. This builds the
  # real image, boots it, and asserts both a 200 and the security headers
  # added to docker-nginx.conf for #95.
  #
  # Gated on the repo/org Actions VARIABLE `CI_HAS_DOCKER` == "true": run #1880
  # proved the shared act_runner has no `docker` binary in job containers, and
  # Gitea does not honour job-level continue-on-error for the run conclusion,
  # so an unconditional job just paints every run red. Set the variable once a
  # Docker-capable runner (or DinD) is attached; until then the job is skipped.
  docker:
    name: Docker image build & smoke test
    needs: build
    if: ${{ vars.CI_HAS_DOCKER == 'true' }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Build image
        run: docker build -t cinny-ci .
      - name: Run container
        run: docker run -d --name cinny-ci -p 8095:80 cinny-ci
      - name: Wait for container to be ready
        run: |
          for i in $(seq 1 30); do
            curl -fsS -o /dev/null http://localhost:8095/ && exit 0
            sleep 1
          done
          echo "container never became ready" >&2
          exit 1
      - name: Check response and security headers
        run: |
          headers="$(curl -fsSI http://localhost:8095/)"
          echo "$headers"
          echo "$headers" | grep -qi '^HTTP/[0-9.]* 200' || { echo "expected HTTP 200"; exit 1; }
          echo "$headers" | grep -qi '^content-security-policy:' || { echo "missing Content-Security-Policy header"; exit 1; }
          echo "$headers" | grep -qi "frame-ancestors 'none'" || { echo "CSP missing frame-ancestors 'none'"; exit 1; }
          echo "$headers" | grep -qi '^referrer-policy: *no-referrer' || { echo "missing Referrer-Policy header"; exit 1; }
          echo "$headers" | grep -qi '^x-content-type-options: *nosniff' || { echo "missing X-Content-Type-Options header"; exit 1; }
      - name: Stop container
        if: always()
        run: docker rm -f cinny-ci || true
  # ── #90 — Playwright smoke test ──────────────────────────────────────────
  # Boots the built client in a real (headless) Chromium and drives it. Two
  # tiers live under e2e/ (see LOTUS_TESTING.md → "Playwright smoke test"):
  #   boot tier   — always runs: login page renders with no console/page
  #                 errors, sw.js is served + registers, bundled Element Call
  #                 mounts in a frame.
  #   E2EE tier   — password login, create a private encrypted room, send text
  #                 + a compressed image, assert every `PUT …/send/*` went out
  #                 as m.room.encrypted. Skips itself unless the E2E_* secrets
  #                 below are set (create them under repo → Settings → Actions
  #                 → Secrets; they are empty until then).
  #   local tier  — (#220) regression suite against a Synapse this job starts
  #                 itself; skips itself if that homeserver isn't reachable.
  # dist/ is rebuilt in-job because actions/upload-artifact@v4 does not work
  # on this Gitea runner (see LOTUS_REFERENCE.md → CI/CD), so `needs: build` only gates on the
  # main job having passed, not on its artifact.
  # Hard gate: proven green on the runner in run #1880 (chromium + deps
  # install fine there). The E2EE tier self-skips without the E2E_* secrets.
  e2e:
    name: Playwright smoke (e2e)
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: '.node-version'
      - name: Install dependencies
        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
      # [Gitea #221] WebKit too — Playwright's Safari/iOS proxy for the tagged
      # subset (see playwright.config.ts projects). `--with-deps` pulls the
      # GTK/GStreamer libraries WebKit needs on the runner.
      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium webkit
      - name: Build
        run: npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=6144'
          VITE_APP_VERSION: ${{ github.sha }}
      # ── #220 — tier 3: a throwaway Synapse the job starts itself (SQLite,
      # open registration, no rate limits; scripts/dev-homeserver.sh). The
      # regression spec (e2e/local-homeserver.spec.ts) registers its own users
      # and rooms through the CS API and drives the built client against it —
      # no prod secrets involved. If the homeserver fails to come up the spec
      # skips itself and the step below still reports why.
      - name: Start local homeserver
        id: local_hs
        continue-on-error: true
        run: |
          python3 -m venv --help >/dev/null 2>&1 || { (command -v sudo >/dev/null && sudo -n true 2>/dev/null && sudo apt-get update -qq && sudo apt-get install -y -qq python3-venv) || (apt-get update -qq && apt-get install -y -qq python3-venv); }
          scripts/dev-homeserver.sh start
          python3 scripts/dev-seed.py 20 > .dev-homeserver/seed.json
          echo "E2E_LOCAL_HS=http://localhost:8008" >> "$GITHUB_ENV"
      - name: Playwright smoke test
        run: npm run test:e2e
        env:
          CI: 'true'
          E2E_HOMESERVER: ${{ secrets.E2E_HOMESERVER }}
          E2E_USER: ${{ secrets.E2E_USER }}
          E2E_PASSWORD: ${{ secrets.E2E_PASSWORD }}
      - name: Stop local homeserver
        if: always()
        run: scripts/dev-homeserver.sh stop || true
@@ -0,0 +1,33 @@
 name: Renovate
 # Gitea #94 — no dependency update automation existed at all. Runs the
 # official renovate/renovate Docker image against this Gitea instance.
 #
 # Requires a `RENOVATE_TOKEN` repo/org secret: a Gitea access token with
 # read/write on LotusGuild/cinny and LotusGuild/element-call, created by a
 # maintainer — this workflow does not (and cannot) create one for you.
 # Note: Gitea reserves the `GITEA_` secret-name prefix, so the token cannot
 # be named e.g. `GITEA_TOKEN` — hence `RENOVATE_TOKEN`.
 on:
  schedule:
    - cron: '0 4 * * 1' # weekly, Monday 04:00 UTC
  workflow_dispatch: {}
 jobs:
  renovate:
    name: Renovate
    runs-on: ubuntu-latest
    # Gated on the Actions VARIABLE `RENOVATE_ENABLED` == "true" (set it together
    # with the RENOVATE_TOKEN secret). Gitea ignores job-level continue-on-error
    # for the run conclusion, so without the gate every weekly run would be red
    # until the token exists. Also needs a Docker-capable runner (uses the
    # renovate/renovate image) — see CI_HAS_DOCKER in ci.yml.
    if: ${{ vars.RENOVATE_ENABLED == 'true' }}
    steps:
      - name: Run Renovate
        uses: docker://renovate/renovate:44
        env:
          RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
          RENOVATE_PLATFORM: gitea
          RENOVATE_ENDPOINT: https://code.lotusguild.org/api/v1
          RENOVATE_REPOSITORIES: LotusGuild/cinny,LotusGuild/element-call
@@ -57,7 +57,7 @@ body:
      required: true
  - type: textarea
    attributes:
-      label: Environement
+      label: Environment
      description: |
        Please provide information about your environment. Include the following:
        - OS:
@@ -0,0 +1,27 @@
 ---
 name: Bug Report
 about: Report something that isn't working in Lotus Chat
 title: ''
 labels: bug
 ---
 **Describe the bug**
 A clear and concise description of what went wrong.
 **Steps to reproduce**
 1. Go to '...'
 2. Click on '...'
 3. See error
 **Expected behavior**
 What you expected to happen instead.
 **Client info**
 - Lotus Chat version (Settings → Help & About):
 - Platform: Web / Desktop (Windows / macOS / Linux)
 - Browser + version (if web):
 **Screenshots / logs**
 If applicable, add screenshots or the browser devtools console output.
@@ -1,5 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
  - name: Features, Bug Reports, Questions
    url: https://github.com/cinnyapp/cinny/discussions/new/choose
    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
@@ -0,0 +1,15 @@
 ---
 name: Feature Request
 about: Suggest an idea or improvement for Lotus Chat
 title: ''
 labels: enhancement
 ---
 **What would you like?**
 A clear and concise description of the feature or change.
 **Why / use case**
 What problem does it solve, or what does it make better?
 **Alternatives considered**
 Any workarounds or other approaches you've thought about.
@@ -1,9 +0,0 @@
 ---
 name: Pre-Discussed and Approved Topics
 about: |-
  Only for topics already discussed and approved in the GitHub Discussions section.
 ---
 **DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
 **I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**
@@ -0,0 +1,9 @@
 ### Description
 <!-- Please include a summary of the change. -->
 Fixes #
 ### Checklist:
 - [ ] I have read and understood the [Contribution policy](https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md).
@@ -1,40 +0,0 @@
 name: Build pull request
 on:
  pull_request:
    types: ['opened', 'synchronize']
 jobs:
  build-pull-request:
    name: Build pull request
    runs-on: ubuntu-latest
    env:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: preview
          path: dist
          retention-days: 1
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: pr
          path: ./pr.txt
          retention-days: 1
@@ -1,36 +0,0 @@
 name: 'CLA Assistant'
 on:
  issue_comment:
    types: [created]
  pull_request_target:
    types: [opened, closed, synchronize]
 jobs:
  CLAssistant:
    runs-on: ubuntu-latest
    steps:
      - name: 'CLA Assistant'
        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
        # Beta Release
        uses: cla-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          # the below token should have repo scope and must be manually added by you in the repository's secret
          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
        with:
          path-to-signatures: 'signatures.json'
          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
          # branch should not be protected
          branch: 'main'
          allowlist: ajbura,bot*
          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
          remote-organization-name: cinnyapp
          remote-repository-name: cla
          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
          #use-dco-flag: true - If you are using DCO instead of CLA
@@ -1,63 +0,0 @@
 name: Deploy PR to Netlify
 run-name: 'Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})'
 on:
  workflow_run:
    workflows: ['Build pull request']
    types: [completed]
 jobs:
  deploy-pull-request:
    name: Deploy pull request
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - name: Download pr number
        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
          name: pr
      - name: Validate and output pr number
        id: pr
        run: |
          PR_ID=$(<pr.txt)
          if ! [[ "${PR_ID}" =~ ^[0-9]+$ ]]; then
            echo "::error::pr.txt contains non-numeric content: ${PR_ID}"
            exit 1
          fi
          echo "id=${PR_ID}" >> "${GITHUB_OUTPUT}"
      - name: Download artifact
        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
          name: preview
          path: dist
      - name: Deploy to Netlify
        id: netlify
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
          deploy-message: 'Deploy PR ${{ steps.pr.outputs.id }}'
          alias: ${{ steps.pr.outputs.id }}
          # These don't work because we're in workflow_run
          enable-pull-request-comment: false
          enable-commit-comment: false
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN_PR }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
      - name: Comment preview on PR
        uses: thollander/actions-comment-pull-request@24bffb9b452ba05a4f3f77933840a6a841d1b32b #v3.0.1
        env:
          github-token: ${{ secrets.GITHUB_TOKEN }}
        with:
          pr-number: ${{ steps.pr.outputs.id }}
          comment-tag: ${{ steps.pr.outputs.id }}
          message: |
            Preview: ${{ steps.netlify.outputs.deploy-url }}
            ⚠️ Exercise caution. Use test accounts. ⚠️
@@ -1,63 +0,0 @@
 name: 'Docker check'
 on:
  pull_request:
    paths:
      - 'Dockerfile'
      - '.github/workflows/docker-pr.yml'
      - '.github/workflows/prod-deploy.yml'
 jobs:
  docker-build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Set up QEMU
        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
      - name: Login to Docker Hub #Do not update this action from a outside PR
        if: github.event.pull_request.head.repo.fork == false
        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
        continue-on-error: true
      - name: Login to the Github Container registry #Do not update this action from a outside PR
        if: github.event.pull_request.head.repo.fork == false
        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
        continue-on-error: true
      - name: Extract metadata (tags, labels) for Docker, GHCR
        id: meta
        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
        with:
          images: |
            ajbura/cinny
            ghcr.io/${{ github.repository }}
      - name: Build Docker image (no push)
        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
        with:
          context: .
          platforms: linux/amd64
          push: false
          load: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
      - name: Show Docker images
        run: docker images
@@ -1,26 +0,0 @@
 name: NPM Lockfile Changes
 on:
  pull_request:
    paths:
      - 'package-lock.json'
 jobs:
  lockfile_changes:
    runs-on: ubuntu-latest
    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
    permissions:
      contents: read
      pull-requests: write
    steps:
      - name: Checkout
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: NPM Lockfile Changes
        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891 # v1.0.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # Optional inputs, can be deleted safely if you are happy with default values.
          collapsibleThreshold: 25
          failOnDowngrade: false
          path: package-lock.json
          updateComment: true
@@ -1,39 +0,0 @@
 name: Deploy to Netlify (dev)
 on:
  push:
    branches:
      - dev
 jobs:
  deploy-to-netlify:
    name: Deploy to Netlify
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
          deploy-message: 'Dev deploy ${{ github.sha }}'
          enable-commit-comment: false
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
          github-deployment-environment: nightly
          github-deployment-description: 'Nightly deployment on each commit to dev branch'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
        timeout-minutes: 1
@@ -1,15 +0,0 @@
 name: Check PR title
 on:
  pull_request_target:
    types:
      - opened
      - edited
 jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1,99 +0,0 @@
 name: Production deploy
 on:
  release:
    types: [published]
 jobs:
  deploy-and-tarball:
    name: Netlify deploy and tarball
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
          deploy-message: 'Prod deploy ${{ github.ref_name }}'
          enable-commit-comment: false
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
          github-deployment-environment: stable
          github-deployment-description: 'Stable deployment on each release'
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
        timeout-minutes: 1
      - name: Get version from tag
        id: vars
        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
      - name: Create tar.gz
        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
      - name: Sign tar.gz
        run: |
          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
          # Sadly a few lines in the private key match a few lines in the public key,
          # As a result just --export --armor gives us a few lines replaced with ***
          # making it useless for importing the signing key. Instead, we dump it as
          # non-armored and hex-encode it so that its printable.
          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
  publish-image:
    name: Push Docker image to Docker Hub, GHCR
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Set up QEMU
        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
      - name: Login to Docker Hub #Do not update this action from a outside PR
        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Login to the Github Container registry #Do not update this action from a outside PR
        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Extract metadata (tags, labels) for Docker, GHCR
        id: meta
        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
        with:
          images: |
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
@@ -6,3 +6,11 @@ devAssets
 .DS_Store
 .ideapackage-lock.json
 public/decorations/
 # Playwright (npm run test:e2e)
 playwright-report/
 test-results/
 # local dev homeserver (scripts/dev-homeserver.sh)
 .dev-homeserver/
 __pycache__/
@@ -0,0 +1,36 @@
 title = "gitleaks config for Lotus Chat (cinny fork)"
 # Gitea #95 — secret scanning was entirely absent. Extend gitleaks' built-in
 # ruleset (don't replace it) and allowlist the known-public infrastructure
 # URLs that show up in tracked config, which are hostnames, not secrets.
 [extend]
 useDefault = true
 [allowlist]
 description = "Known-public Lotus/Matrix homeserver + npm registry URLs — not secrets"
 regexes = [
  '''https?://matrix\.lotusguild\.org''',
  '''https?://code\.lotusguild\.org/api/packages/LotusGuild/npm/''',
  '''matrix\.lotusguild\.org''',
 ]
 paths = [
  '''config\.json''',
  '''\.npmrc''',
  # Build output and vendored bundles are not source — CI scans a fresh
  # checkout, but a local run after `npm run build` would trip on minified
  # matrix-js-sdk crypto identifiers (claimedEd25519Key etc.).
  '''^dist/''',
  '''^node_modules/''',
  '''^public/element-call/''',
 ]
 # localStorage / IndexedDB key NAMES (e.g. `STORAGE_KEY = 'cinny_recent_gifs_v1'`)
 # match generic-api-key purely because the variable is called *_KEY. They are
 # namespaced identifiers, not credentials.
 [[rules]]
 id = "generic-api-key"
 [rules.allowlist]
 regexTarget = "line"
 regexes = [
  '''(STORAGE|CACHE|IDB|DB|LS)_KEY\s*=\s*['"](cinny|lotus)[-_][a-z0-9_-]+['"]''',
 ]
@@ -1,3 +1 @@
-# These are commented until we enable lint and typecheck
+npx lint-staged
 # npx tsc -p tsconfig.json --noEmit
 # npx lint-staged
@@ -0,0 +1 @@
 24.13.1
@@ -2,5 +2,4 @@ dist
 node_modules
 package.json
 package-lock.json
-LICENSE
+LICENSE
 README.md
@@ -11,7 +11,7 @@ RUN npm run build
 ## App
-FROM nginx:1.29.8-alpine
+FROM nginx:1.31.5-alpine
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
@@ -0,0 +1,60 @@
 # Developing Cinny
 > [!TIP]
 > We recommend using a version manager as versions change very quickly.
 > You will likely need to switch between multiple Node.js versions based
 > on the needs of different projects you're working on. [NVM-windows]
 > on Windows and [nvm] on Linux/macOS are pretty good choices. Recommended
 > nodejs version is Krypton LTS (v24.13.1).
 [nvm-windows]: https://github.com/coreybutler/nvm-windows#installation--upgrades
 [nvm]: https://github.com/nvm-sh/nvm
 Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
 npm start # Serve a development version
 ```
 To build the app:
 ```sh
 npm run build # Compiles the app into the dist/ directory
 ```
 To commit changes:
 ```sh
 npm run commit
 ```
 ## Running with Docker
 This repository includes a Dockerfile, which builds the application from
 source and serves it with Nginx on port 80. To use this locally, you can
 build the container like so:
 ```
 docker build -t cinny:latest .
 ```
 You can then run the container you've built with a command similar to this:
 ```
 docker run -p 8080:80 cinny:latest
 ```
 This will forward your `localhost` port 8080 to the container's port 80.
 You can visit the app in your browser by navigating to `http://localhost:8080`.
 ## Code formatting
 We use [ESLint](https://eslint.org/) for clean and stylistically
 consistent code syntax, so make sure your pull request follow it.
 ## Helpful links
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
 - [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
@@ -1,666 +0,0 @@
 # 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)
 > ✅ **STATUS (2026-06): COMPLETE.** All items below are shipped. call_state,
 > focus_participant, decorations, and transparent background are active; the
 > in-source denoise cutover is done (flag `lotusDenoiseSource=1`, **all four**
 > models in-source); and the two formerly-dormant capabilities now have cinny
 > UI — **soundboard** (`io.lotus.inject_audio`, P5-15) and **quality controls +
 > room permissions** (`io.lotus.set_quality` + `io.lotus.room_quality`, P5-31,
 > with server-side enforcement in `LotusGuild/matrix`). See `LOTUS_FEATURES.md`
 > → "Element Call — Self-Built Fork". The checklist is kept below as the record
 > of what was wired. (One open denoise item tracked separately: the "Series
 > Suppression" native-NS toggle is not wired to the real call path.)
 The EC side is additive and dormant until cinny opts in. Host work (in
 `src/app/plugins/call/CallEmbed.ts` unless noted) — **done**:
 > ⚠️ **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 (RESOLVED)** — all four models (`rnnoise`/`speex`/`dtln`/
 > `deepfilternet`) are now implemented in-source in `lotusDenoiseProcessor.ts`;
 > the picker offers all four. **F4** — cinny no longer forwards a native-NS flag
 > in the `ml` branch (the "Series Suppression" toggle is currently a no-op in
 > real calls — open item). **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 sets `lotusDenoiseSource=1` + `lotusModel`/`lotusGate`/`lotusGateThreshold` in the `ml` tier.)
 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.
@@ -1,159 +0,0 @@
 # Lotus Chat — Open Bugs & Technical Debt
 **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).
 > Design rules for any fix here: follow the **Native-Cinny Law** and **TDS
 > Design Law** in [`LOTUS_TODO.md`](./LOTUS_TODO.md).
 ---
 ## ⚠️ Needs Verification — fixed in code, awaiting live testing
 Implemented and gate-green; confirm each per `LOTUS_TESTING.md`, then delete the row.
 | ID   | Item                                                                                   | File / area                                          | Test                                                                              |
 | :--- | :------------------------------------------------------------------------------------- | :--------------------------------------------------- | :-------------------------------------------------------------------------------- |
 | #2   | Chat-background animation flicker (`contain:paint`)                                    | `lotus/chatBackground.ts`                            | F1                                                                                |
 | #4   | Ringtone re-fixes: classic loudness + caller decline notice (A2 ✓ live)                | `CallEmbedProvider.tsx`, `ringtones.ts`              | A1,A3,A4                                                                          |
 | #6   | Background vs. seasonal theme mutual exclusion                                         | `state/settings.ts`, `General.tsx`                   | F2                                                                                |
 | #7   | Composer toolbar touch targets (≥44px)                                                 | `room/RoomInput.tsx`                                 | E1                                                                                |
 | #8   | Room Settings horizontal overflow (mobile)                                             | `components/page/style.css.ts`                       | E2                                                                                |
 | #9   | Modal fullscreen on mobile (`useModalStyle`)                                           | 22+ modal files                                      | E3                                                                                |
 | #10  | Composer not hidden by keyboard (`100dvh`)                                             | `src/index.css`                                      | E4                                                                                |
 | #12  | PiP "All muted" badge re-fixed (was firing on any single mute)                         | `hooks/useCallSpeakers.ts`                           | G1                                                                                |
 | N96  | Call-recovery overlay single "Back" button                                             | `call/CallView.tsx`                                  | A7                                                                                |
 | N95  | AFK-monitor mic released on mute (OS indicator clears)                                 | `hooks/useAfkAutoMute.ts`                            | L1                                                                                |
 | N108 | Maskable PWA icons (Android adaptive)                                                  | `public/manifest.json` + `res/android/maskable-*`    | L2                                                                                |
 | EC   | EC iframe load watchdog + self-heal + recovery UI                                      | `plugins/call/CallEmbed.ts`, `CallView.tsx`          | A7                                                                                |
 | N105 | Notification clicks work after tab close (SW `notificationclick` + `showNotification`) | `sw.ts`, `utils/dom.ts`, `ClientNonUIFeatures.tsx`   | get a msg notif, close the tab, click it → app focuses/opens + routes to the room |
 | Gal  | MediaGallery lazy-decrypt (true virtualization deferred)                               | `room/MediaGallery.tsx`                              | H1                                                                                |
 | a11y | aria-labels: edit-history / reaction / thread / reply                                  | `message/*` (`FallbackContent`, `Reaction`, `Reply`) | I                                                                                 |
 **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.
 ---
 ## 🧩 Element Call source-level items — now actionable via the fork
 > 🔱 **[EC-FORK]** **UPDATE 2026-06-30: Phase 2 IMPLEMENTED.** We own and
 > self-build Element Call (`LotusGuild/element-call` →
 > `@lotusguild/element-call-embedded@0.20.1-lotus.1`, cinny wired). A5/A6/A7
 > below are **fixed in the fork** — they are now ⚠️ awaiting **live
 > verification** (`LOTUS_TESTING.md` §D2), not open work. See
 > [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md) §10. Delete each
 > row once verified live.
 The in-call participant grid is rendered **inside EC's app** — now editable source
 (previously a prebuilt npm bundle we could only style around). Status of the items
 from testing:
 - **A5 — "Focus camera": ⚠️ FIXED in fork, awaiting verify (D2-3).** cinny now
  sends an `io.lotus.focus_participant` widget action that pins a participant in
  EC's layout (coexisting with / overriding the screenshare spotlight); the old
  `.click()`-the-tile DOM hack in `CallControl.ts` is deleted.
 - **A6 — avatar decorations in-call: ⚠️ FIXED in fork, awaiting verify (D2-4).**
  cinny pushes `io.lotus.decorations` (per-user APNG URLs) and the fork renders
  them on EC's participant video-tile avatars — not just our pre-join lobby roster.
 - **A7 — mic dead after EC's "Reconnect": ⚠️ FIXED in fork, awaiting verify
  (D2-1).** Denoise moved into EC's mic-capture/publish pipeline as a first-class
  LiveKit `TrackProcessor` (flag `lotusDenoiseSource=1`); EC re-runs it on every
  (re)publish, so reconnects keep denoise alive natively. The build-time
  `getUserMedia`/`index.html` injection (the root cause) is removed. **Highest
  blast radius — everyone's mic; verify D2-1 carefully.**
 ---
 ## 🔴 Open — Actionable
 ### Calls / Audio
 - ~~**N127 — ML denoise shim is never injected in `vite dev`.**~~ **RESOLVED (dissolved by the A7 denoise cutover).** `vite.config.js` no longer injects a getUserMedia shim at all — the forked Element Call runs ML denoise in-source as a LiveKit `TrackProcessor` (activated by `lotusDenoiseSource=1`), so there is no build-time injection that could be missing in dev. Nothing to fix.
 ### 🧨 Encryption / E2EE — ⚠️ EXTREME COMPLEXITY · 🧠 PLANNING SESSION REQUIRED · 👤 SENIOR ENGINEER
 > **Observed live in prod 2026-06-30** on `chat.lotusguild.org` during a 2-person
 > **Element Call** (E2EE enabled). These span **client rust-crypto (via
 > `matrix-js-sdk@41.6.0-rc.0`) ↔ Synapse ↔ Element Call's MatrixRTC E2EE** and are
 > very likely **interrelated** (see KE-1 → KE-2). Do **not** spot-fix — they need
 > a dedicated cross-system planning session with the homeserver owner. Capture
 > full client console + a synapse-side trace for the same call before starting.
 > **None of these are caused by the EC fork work** (the issues reproduce on the
 > old build; the local mic/denoise path is unrelated to key distribution).
 - **KE-1 — One-time-key (OTK) upload conflict storm (CRITICAL, root-cause candidate).**
  `POST /_matrix/client/v3/keys/upload` returns `400 M_UNKNOWN: One time key
 signed_curve25519:AAAAAAAAAGQ already exists. Old key: {…} new key: {…}` —
  firing **continuously** (many/sec). The client repeatedly tries to publish an
  OTK at a key id the server already holds **with a different value**, i.e. the
  rust-crypto key store and Synapse have **diverged OTK state**. Impact: floods
  the crypto outgoing-request loop and is the prime suspect for the downstream
  missing-key failures (no fresh OTKs ⇒ no new Olm sessions ⇒ undecryptable
  to-device key events). _Investigate:_ device/key-store reset-or-restore
  mismatch, OTK id-counter desync, RC-SDK (`41.6.0-rc.0`) regression, or a
  Synapse OTK bug. Repro signature: grep console for `already exists`.
  **Extreme — planning session.**
 - **KE-2 — Element Call media keys not arriving/decrypting → audio & video cut out (CRITICAL).**
  `MissingKey: missing key at index N for participant @user`, `skipping decryption
 due to missing key`, `MissingKey: key set not found for @user at index 0`, and
  rust-crypto `WARN … Received an unexpected encrypted to-device event …
 event_type="io.element.call.encryption_keys"`. EC distributes per-participant
  media keys as **encrypted to-device `io.element.call.encryption_keys`** events;
  these aren't being received/decrypted in order, so remote LiveKit audio/video
  can't be decrypted — **this is the "friend's audio cuts out occasionally"
  symptom.** Almost certainly downstream of **KE-1** (broken Olm sessions). Spans
  EC's MatrixRTC E2EE + rust-crypto to-device + Synapse. **Extreme — planning
  session.**
 - **KE-3 — Timeline decryption error: missing `algorithm` field (HIGH).**
  `Error decrypting event (… type=m.room.encrypted …): DecryptionError[msg:
 missing field 'algorithm' at line 1 column 138 …]`. A malformed/legacy
  encrypted event (or a serialization mismatch in the RC SDK) that rust-crypto
  can't parse. Lower frequency than KE-1/2 but a distinct decode-path failure —
  capture the offending event id (`$SASBBzoqj…` seen) and inspect its raw content.
 - **KE-4 — MatrixRTC delayed-event / membership timeouts (MEDIUM-HIGH, reliability).**
  `[MembershipManager] Network local timeout error while sending event, immediate
 retry … AbortError: Restart delayed event timed out before the HS responded`,
  with repeated `org.matrix.msc4157.update_delayed_event`. MSC4140/4157
  delayed-event reliability against `matrix.lotusguild.org` — can cause stale/ghost
  call membership and missed leave events. May be partly **homeserver
  responsiveness**; correlate with synapse latency/load. Include in the same
  planning session since it shares the call-reliability + HS-interaction surface.
 ### Security & Privacy
 - **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.
 ### PWA / Offline / Notifications
 - **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`** may block PWA install~~ — **verified OK (2026-06):** `index.html` links `/manifest.json`, which exists in `public/` and is copied to `dist/`; VitePWA intentionally doesn't generate one. Not a bug.
 ### Dependencies & Build
 - **`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.
 ### Code Hygiene / DevEx
 - **Automated test suite — 545 tests across 62 modules, a hard CI gate.** `npm test` runs Node's built-in runner via `tsx` (not vitest — Vite 8 is ahead of vitest's range) and **blocks the build job on failure**. Broad pure-logic coverage: utils (common, regex, sanitize/XSS, time, matrix, matrix-uia, mimeTypes, sort, accentColor, findAndReplace, AsyncSearch, ASCIILexicalTable, keyboard, room, matrix-crypto, featureCheck, syntaxHighlight, imageCompression, user-agent, callSounds), state (settings, sessions, recentSearches, upload, typingMembers, lists, room-list, toast, scheduledMessages, backupRestore, callEmbed/callPreferences, spaceRooms, …), plugins (matrix-to, call/utils, via-servers, bad-words, recent-emoji, custom-emoji, markdown block/inline/utils), OIDC (cs-api, useParsedLoginFlows, oidcState), lotus/avatarDecorations, message-search, search filters. Prevention work has caught + fixed **4 real bugs** (`findAndReplace` infinite-loop; `getSettings` crash-on-load when storage is blocked; `isMacOS` never matching modern Macs; `isMLDenoiseSupported` throwing `ReferenceError` instead of returning false on browsers lacking the `AudioWorkletNode` binding). **Next:** component/integration tests (the untestable-under-tsx DOM/React surface).
 - **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`.
 ### Big Projects
 - **#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.
@@ -1,7 +1,7 @@
 # Lotus Chat — Feature Reference
 Everything added to Lotus Chat beyond upstream Cinny v4.12.1.
-Last updated: June 2026.
+Last updated: July 2026.
 ---
@@ -18,14 +18,17 @@ Last updated: June 2026.
 9. [Per-Message Read Receipts](#per-message-read-receipts)
 10. [Delivery Status Indicators](#delivery-status-indicators)
 11. [Messaging Enhancements](#messaging-enhancements)
-12. [Presence](#presence)
+12. [Threads (P3-8)](#threads-p3-8)
-13. [UX & Composer](#ux--composer)
+13. [Presence](#presence)
-14. [Room Customization](#room-customization)
+14. [UX & Composer](#ux--composer)
-15. [Moderation](#moderation)
+15. [Room Customization](#room-customization)
-16. [Notifications](#notifications)
+16. [Moderation](#moderation)
-17. [Server Integration](#server-integration)
+17. [Notifications](#notifications)
-18. [Infrastructure](#infrastructure)
+18. [Server Integration](#server-integration)
-19. [Key Custom Files](#key-custom-files)
+19. [Infrastructure](#infrastructure)
 20. [Localization](#localization)
 21. [Desktop App Features](#desktop-app-features)
 22. [Key Custom Files](#key-custom-files)
 ---
@@ -152,13 +155,13 @@ A "Pause Background Animations" toggle is exposed in **Settings → Appearance**
 ### Animation Improvements (June 2026)
-All five animated backgrounds were rewritten for smoother, more organic motion:
+All five animated backgrounds were rewritten for smoother, more organic motion. Each background drives its own single drift/scroll keyframe (no secondary glow or blink layers):
- **Digital Rain** — added a phosphor glow flicker (`animRainGlowKeyframe`, 2.1 s) layered on top of the column scroll; stripe opacity increased for better visibility
+- **Digital Rain** — column scroll keyframe; stripe opacity increased for better visibility
 - **Star Drift** — each of the three dot layers now moves by exactly its own tile width/height per cycle (`−130 px`, `−190 px`, `−260 px`), eliminating the visible seam on loop
- **Grid Pulse** — independent brightness oscillation (`animGridBrightnessKeyframe`, 3.3 s) runs alongside the size breathe (4 s) at a prime period ratio so they never synchronise
+- **Grid Pulse** — size breathe keyframe (4 s)
 - **Aurora Flow** — four gradient layers now have individual `backgroundSize` values (`200%`, `250%`, `300%`, `220%`); the keyframe drives each layer through a distinct 5-stop path, replacing the robotic single back-and-forth
- **Fireflies** — glow pulse (`animFirefliesGlowKeyframe`, 2.3 s `filter: brightness`) and opacity blink (`animFirefliesBlinkKeyframe`, 1.7 s) added on top of the position drift; prime periods create unsynchronised bioluminescence
+- **Fireflies** — position drift keyframe with per-firefly duration/delay so motion stays unsynchronised
 ### Files
@@ -173,19 +176,19 @@ Decorative CSS-only overlays that activate automatically on holidays and events.
 ### Themes
-| Theme                | Window        | Effect                                                                                             |
+| Theme                | Window        | Effect                                                                                                                                                                                  |
-| -------------------- | ------------- | -------------------------------------------------------------------------------------------------- |
+| -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 🎆 New Year          | Dec 31–Jan 2  | Radial firework bursts in gold, red, cyan, purple; gold shimmer sweep                              |
+| 🎆 New Year          | Dec 31–Jan 2  | Radial firework bursts in gold, red, cyan, purple; gold shimmer sweep                                                                                                                   |
-| 🏮 Lunar New Year    | Jan 22–Feb 5  | Floating paper lanterns bobbing; silk texture; gold shimmer accent                                 |
+| 🏮 Lunar New Year    | Jan 22–Feb 5  | Floating paper lanterns bobbing; silk texture; gold shimmer accent                                                                                                                      |
-| 💖 Valentine's Day   | Feb 10–15     | ♥ hearts floating upward; soft pink ambient glow                                                   |
+| 💖 Valentine's Day   | Feb 10–15     | ♥ hearts floating upward; soft pink ambient glow                                                                                                                                        |
-| 🍀 St. Patrick's Day | Mar 15–18     | ☘ clovers drifting down; gold metallic shimmer top border                                          |
+| 🍀 St. Patrick's Day | Mar 15–18     | ☘ clovers drifting down; gold metallic shimmer top border                                                                                                                               |
-| 🃏 April Fool's      | Apr 1         | Glitch overlay: RGB channel separation, hue-rotate spikes, scanline sweep, "SIGNAL LOST" watermark |
+| 🃏 April Fool's      | Apr 1         | Glitch overlay: RGB channel separation, hue-rotate spikes, scanline sweep, "SIGNAL LOST" watermark                                                                                      |
-| 🌱 Earth Day         | Apr 20–23     | 🌿🍃 leaf emoji drift; sage green ambient tint; vine accent on left edge                           |
+| 🌱 Earth Day         | Apr 20–23     | 🌿🍃 leaf emoji drift; sage green ambient tint; vine accent on left edge                                                                                                                |
-| 🍂 Autumn            | Sep 21–Oct 31 | Warm orange/amber leaf shapes rotating and falling                                                 |
+| 🍂 Autumn            | Sep 21–Oct 31 | Warm orange/amber leaf shapes rotating and falling                                                                                                                                      |
-| 👾 Arcade Day        | Sep 12        | CRT scanlines; blinking pixel corner decorations; "INSERT COIN" prompt                             |
+| 👾 Arcade Day        | Sep 12        | Synthwave CRT: neon perspective grid framing the timeline (faded through the chat column), broken horizon line, rolling scanlines, pixel sparkles, bottom-right "1UP / INSERT COIN" HUD |
-| 🚀 Deep Space Week   | Oct 4–10      | Warp-speed star streaks radiating from screen centre; nebula purple/blue ambient                   |
+| 🚀 Deep Space Week   | Oct 4–10      | Violet void with drifting magenta/cyan nebula clouds, two-depth parallax starfield (~60 twinkling stars + 6 hero gleams), slow galaxy spiral, occasional comet streaks                  |
-| 🎃 Halloween         | Oct 15–Nov 1  | Purple and orange glowing particles; SVG spider web in top-left corner; dark purple tint           |
+| 🎃 Halloween         | Oct 15–Nov 1  | Purple and orange glowing particles; SVG spider web in top-left corner; dark purple tint                                                                                                |
-| ❄️ Christmas         | Dec 10–Jan 2  | White dot snowfall in multiple layers at varied speeds                                             |
+| ❄️ Christmas         | Dec 10–Jan 2  | White dot snowfall in multiple layers at varied speeds                                                                                                                                  |
 ### Implementation
@@ -292,6 +295,7 @@ A warm orange overlay rendered over the entire UI to reduce blue light emission.
 - CSS: `position: fixed; inset: 0; pointer-events: none; z-index: 9998`
 - Orange tint color with configurable opacity
 - **Controls:** Toggle to enable/disable + intensity slider ranging from 5% to 80% opacity
 - **Schedule (auto on at night):** an optional schedule with From/To time inputs; when on, the overlay only shows during that window and turns itself on/off automatically (the overlay re-checks every minute, no reload). Overnight windows that wrap midnight (e.g. 21:00 → 07:00) are handled. Window logic is the pure, unit-tested `isWithinTimeWindow`/`parseHHMM` in `src/app/utils/timeWindow.ts` (`timeWindow.test.ts`). Defaults: 21:00–07:00.
 - Settings persisted via the standard Lotus settings store
 ---
@@ -328,7 +332,7 @@ Users can set a custom background color for `@mention` chips that highlight thei
 > pre-built npm bundle. Several in-call behaviors below are now first-class
 > source changes rather than DOM/widget hacks. Background, plan, and the Phase-2
 > work list are in
-> [`HANDOFF_ELEMENT_CALL_FORK.md`](./HANDOFF_ELEMENT_CALL_FORK.md).
+> the Element Call fork reference in [`LOTUS_REFERENCE.md`](./LOTUS_REFERENCE.md).
 ### Element Call — Self-Built Fork (`0.20.1-lotus.1`)
@@ -345,15 +349,16 @@ so a stock EC config is byte-for-byte upstream behavior.
 **Active (cinny drives them today):**
-| #   | Feature                           | Mechanism                                                                                                                               | Replaces (old hack)                                                                                                 |
+| #    | Feature                             | Mechanism                                                                                                                                                                                                                                                   | Replaces (old hack)                                                                                                                                               |
-| --- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| ---- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| A7  | **Denoise in-source**             | ML noise suppression runs inside EC as a LiveKit `TrackProcessor<Audio>` (flag `lotusDenoiseSource=1`); re-applied on every (re)publish | the build-time `getUserMedia` monkeypatch injected into `index.html` — **removed**. Fixes mic-dead-after-reconnect. |
+| A7   | **Denoise in-source**               | ML noise suppression runs inside EC as a LiveKit `TrackProcessor<Audio>` (flag `lotusDenoiseSource=1`); re-applied on every (re)publish                                                                                                                     | the build-time `getUserMedia` monkeypatch injected into `index.html` — **removed**. Fixes mic-dead-after-reconnect.                                               |
-| #2  | **Speaking / mute events**        | EC emits `io.lotus.call_state` (throttled); cinny reads speaker + mute state from it (flag `lotusCallState=1`)                          | scraping EC's DOM for `[data-lk-speaking]` (kept only as fallback)                                                  |
+| #2   | **Speaking / mute events**          | EC emits `io.lotus.call_state` (throttled); cinny reads speaker + mute state from it (flag `lotusCallState=1`)                                                                                                                                              | scraping EC's DOM for `[data-lk-speaking]` (kept only as fallback)                                                                                                |
-| A5  | **Focus participant**             | host sends `io.lotus.focus_participant` to pin a tile, coexisting with / overriding the screenshare spotlight                           | the `.click()`-the-tile DOM hack in `CallControl.ts` — **removed**                                                  |
+| A5   | **Focus participant**               | host sends `io.lotus.focus_participant` to pin a tile, coexisting with / overriding the screenshare spotlight                                                                                                                                               | the `.click()`-the-tile DOM hack in `CallControl.ts` — **removed**                                                                                                |
-| #6  | **In-call avatar decorations**    | host pushes `io.lotus.decorations` (per-user APNG URLs); the fork renders them on EC's video-tile avatars                               | previously impossible — decorations only showed on our pre-join lobby roster                                        |
+| #6   | **In-call avatar decorations**      | host pushes `io.lotus.decorations` (per-user APNG URLs); the fork renders them on EC's video-tile avatars                                                                                                                                                   | previously impossible — decorations only showed on our pre-join lobby roster                                                                                      |
-| #5  | **Native transparent background** | flag `lotusTransparent=1` makes EC's surface transparent so the host wallpaper shows through                                            | the injected `background:none !important` CSS                                                                       |
+| #5   | **Native transparent background**   | flag `lotusTransparent=1` makes EC's surface transparent so the host wallpaper shows through                                                                                                                                                                | the injected `background:none !important` CSS                                                                                                                     |
 | P6-2 | **Deafen / screenshare-audio mute** | host sends `io.lotus.set_deafen {deafened, screenshareAudioMuted}`; both become the `muted` prop of EC's audio elements (server stops sending), so they hold across re-renders, late joiners and a sharer stopping + re-sharing (fixed in `0.25.0-lotus.4`) | the iframe-DOM `.muted` hack (kept only as a transitional fallback) and `setVolume(0, ScreenShareAudio)`, which EC's own volume controls reset on every new share |
-**Now wired (cinny drives them — ⚠️ awaiting live verification):**
+**Now wired (cinny drives them — verified end-to-end on the local calls stack, 2026-09-18):**
 | #     | Capability           | Widget action                                                                        | cinny surface                                                       |
 | ----- | -------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
@@ -361,7 +366,9 @@ so a stock EC config is byte-for-byte upstream behavior.
 | P5-31 | **Quality controls** | `io.lotus.set_quality` — sets audio/screenshare encoding bitrate/framerate           | Call Quality Controls (user settings + room-admin caps) — see below |
 > Both were dormant capabilities; cinny now drives them (armed via
-> `lotusAudioInject=1`). The **only** EC item still open is the P5-31
+> `lotusAudioInject=1`). Verified headless with two clients: a clip publishes as
 > an extra `AUDIO/UNKNOWN` track on the SFU and is refused while muted; a room
 > cap set mid-call re-sends `io.lotus.set_quality` with the clamped values. The **only** EC item still open is the P5-31
 > **server-side** quality guard (a `voice-limit-guard`-style sidecar reading
 > `io.lotus.room_quality`) for hard enforcement across all Matrix clients — the
 > client cap is best-effort.
@@ -658,6 +665,7 @@ The indicator is hidden once the server confirms the event (when the internal st
 - API: `GET /_matrix/client/v1/rooms/{roomId}/relations/{eventId}/m.replace`
 - E2EE fix: the "Original" entry uses `getClearContent()` to retrieve the decrypted content rather than the encrypted payload
 - **Word-level diff**: a "Highlight changes" toggle (on by default) renders each edit as a word diff against the previous version — added words highlighted (green), removed words struck-through (red) — using semantic `<ins>`/`<del>`. Toggle off to see full text (formatted messages render rich there; the diff is plain-text only). Diff logic is the pure, unit-tested `diffWords` (LCS) in `src/app/utils/textDiff.ts`.
 - Accessible from the message context menu
 ### Inline GIF Preview
@@ -671,31 +679,106 @@ The indicator is hidden once the server confirms the event (when the internal st
 - Giphy-powered picker accessible from the composer toolbar
 - The button is only shown when `gifApiKey` is set in `config.json`
 - Selected GIFs are sent as `m.image` events
 - **Recently used**: a "Recent" row at the top of the picker (shown on the default view, hidden while searching) surfaces the GIFs you last sent for one-click re-sending — no re-searching. Persisted in localStorage (`cinny_recent_gifs_v1`), deduped by url, most-recent-first, capped at 16, via the pure/unit-tested `addRecentGif` (`src/app/state/recentGifs.ts`).
 - Picker UI is styled with TDS variables when the TDS theme is active
 - Located at `src/app/components/GifPicker.tsx`
 ### Sticker Picker — Recently used
 The sticker tab of the shared `EmojiBoard` now has a **"Recent" group** (a sidebar
 `RecentClock` icon + top group), matching the emoji and GIF pickers — the stickers you last sent
 surface for one-click re-sending instead of hunting through packs. Only shown once you've sent at
 least one sticker (hidden otherwise). Persisted in localStorage (`cinny_recent_stickers_v1`),
 deduped by url, most-recent-first, capped at 16, via the pure/unit-tested `addRecentSticker`
 (`src/app/state/recentStickers.ts`). Recent entries are rebuilt into minimal `PackImageReader`s
 (`StickerItem` only needs `url`/`shortcode`/`body`) so they render and re-send exactly like pack
 stickers. Recorded on select for both the grouped and search paths (shared delegated click).
 ### Message Forwarding
 Context menu → **Forward** allows forwarding a message to any room the user is a member of.
 ### Copy Message Text
 Context menu → **Copy Text** copies a message's plain-text body to the clipboard (reply fallback stripped via `trimReplyFromBody`), complementing the existing **Copy Link** (permalink) action. It renders only when the event has a usable text body, so media without a caption doesn't show an empty action.
 ### On-Device Message Translation
 Translate chat messages written in other languages into a language you choose,
 inline in the timeline — running **entirely on your device** so message text
 never leaves it.
 - **Per-message translate** — a foreign-language message shows a **Translate**
  action in its message menu; once translated, the message displays an inline
  **"Translated from &lt;language&gt; · Show original"** toggle that swaps between
  the translation and the original text.
 - **Fully on-device / E2EE-preserving** — translation and language detection run
  through the browser's built-in **Translator** and **Language Detector** APIs
  (the Chromium on-device AI translation models). Message text is **never** sent
  to any cloud translation service — no Google / DeepL / Microsoft, not even a
  self-hosted server — and there is **no network fallback**, so end-to-end
  encryption is preserved. That privacy guarantee is the whole point of the
  feature.
 - **Automatic detection** — the language of each message is detected
  automatically; messages already in your target language are skipped (no
  Translate action is shown).
 - **Settings (Settings → General → Messages):**
  - **Translate Messages Into** — your target language (default **English**;
    ~26 common languages).
  - **Auto-translate Incoming Messages** (default **off**) — automatically
    translates foreign-language messages whose on-device language model is
    already downloaded.
 - **One-time model download** — the first time you translate from a given
  language, a small on-device model (a few MB) downloads once. Because the
  browser requires a user gesture for that first download, the initial
  translation needs a click.
 - **Availability** — Chromium desktop browsers (**Chrome / Edge 138+**) and the
  **Lotus desktop app** (WebView2 / Chromium). Not available in Firefox, Safari,
  or mobile browsers; where the APIs are unavailable the feature hides itself and
  the settings tile shows a note.
 ### Draft Persistence
 - Composer drafts are stored in `localStorage` keyed by `roomId`
 - Draft is cleared on successful send
 - The Jotai atom is the primary source of truth; `localStorage` is only read on room mount
 - **Room-nav draft indicator**: a subtle green dot (the composer's shared `DraftDot`, `color.Success.Main`) appears on a room's nav item when it has an unsent message draft (and isn't the open room), so you can see at a glance where you left half-written messages. The dot reuses the composer draft affordance's vocabulary (`role="img"`, aria-label "Unsent draft"). It reacts to the shared draft atom via a memoized `selectAtom(…, hasMsgDraft)` (re-renders only when the flag flips; the atom is written on room-leave, not per keystroke). `useHydrateMsgDrafts` (mounted in `ClientNonUIFeatures`) pre-fills the draft atoms from `draft-msg-*` localStorage on startup so indicators are correct after a reload. Emptiness check shared via the pure, unit-tested `hasMsgDraft` (`src/app/utils/draft.ts`), also used by the composer's `DraftIndicator`.
 ### Message Search Date Range
- The search panel accepts `from_ts` and `to_ts` values (epoch milliseconds) passed to the search API
+- The search panel accepts `from_ts` and `to_ts` values (epoch milliseconds); server results are filtered client-side by `origin_server_ts` (they are not Matrix filter fields), matching the local encrypted-room search
 - A chip shows the active date range with an **×** button to clear it
 ### Encrypted Search Cache (P4-8, opt-in)
 Persistent local index for encrypted-room search, so coverage survives page reloads instead of requiring re-pagination + re-decryption every session.
 - Raw IndexedDB (`lotus-search-cache`): message rows keyed `[roomId, eventId]` + per-room coverage markers; merged into local search results with in-memory-wins dedupe
 - **Opt-in, default OFF** (it stores decrypted text at rest): toggle + "Clear cached index" live in the search panel's Encrypted Rooms section, with the privacy note "Stores decrypted text on this device"
 - Always wiped on logout; any IndexedDB error degrades to a cache-miss (never breaks search)
 - Files: `src/app/utils/searchCache.ts`, `src/app/state/searchCacheEnabled.ts`, `features/message-search/useLocalMessageSearch.ts`
 ### Math / LaTeX Rendering (P4-4)
 KaTeX-rendered math in messages, two paths:
 - **Spec path (CS-API §11.5):** `<span/div data-mx-maths="…">` in `formatted_body` renders the attribute's LaTeX (block for div, inline for span); on render failure the element's child fallback content shows instead
 - **Plain-text path:** `$…$` (inline) and `$$…$$` (block) with conservative rules — escape-aware (`\$`), currency-guarded (`$5 and $10` stays text), never inside `code`/`pre`
 - **Outgoing interop:** on send, the composer converts `$…$`/`$$…$$` to spec `<span/div data-mx-maths>` HTML in `formatted_body` (extracted before markdown so LaTeX isn't mangled; off inside code), so math renders on Element and every other client — not just Lotus. The plain `body` keeps literal `$…$` as the fallback
 - KaTeX + its CSS load lazily on first math encountered — zero cost to the main bundle
 - Files: `src/app/utils/mathParse.ts` (+14 tests), `components/math/KaTeX.tsx`, `plugins/react-custom-html-parser.tsx` (render), `components/editor/output.ts` (+ `output.test.ts`, outgoing)
 ### Image / Video Captions
-Images and videos can be sent with a caption. The caption and media are sent as a single event.
+Images and videos can be sent with a caption. The caption and media are sent as a single event (caption = the event `body` when it differs from `filename`).
 - **Edit caption**: an image/video you sent shows an **Edit caption** action (quick-actions pencil + message menu). It opens the message editor seeded with the current caption; saving sends an `m.replace` whose `m.new_content` preserves the media (`url`/`info`/encrypted `file`/`filename`) and only changes `body`/`formatted_body`. An empty caption removes it (`body` falls back to `filename`). Gated by `canEditCaption` (`utils/room.ts`) to your own image/video messages that carry an MSC2530 `filename`. Caption edits carry `m.mentions` (an @-mention in a caption notifies) and appear in Edit History (diffed by the word-diff) — even after a caption is removed, the "(edited)" marker remains so history stays reachable. No re-upload — encrypted media keeps its original file/key.
 ### Location Sharing
-`m.location` events render an inline map tile using the coordinates from the event content.
+`m.location` events render an inline map tile using the coordinates from the event content. The renderer reads the top-level `geo_uri` and **falls back to the MSC3488 `org.matrix.msc3488.location`/`m.location` `uri`**, so locations from clients that send only the new shape still render (previously they showed as broken); an MSC3488 `description`, if present, is shown above the coordinates.
 Sharing your location (composer → location button) sends an **MSC3488-compliant** `m.location` event: the legacy `geo_uri` plus the `org.matrix.msc3488.location` (uri), `org.matrix.msc3488.asset` (`m.self`), and `org.matrix.msc3488.ts`/`m.ts` blocks, and a human-readable `body`. This makes Lotus-shared locations render as proper pins on Element and other clients instead of falling back to plain text.
 ### Deleted Message Placeholders
@@ -706,15 +789,27 @@ Redacted events display "This message has been deleted" along with the redaction
 - Bookmarks are stored in `io.lotus.bookmarks` account data, syncing across all devices
 - Maximum of 500 bookmarked entries
 - `BookmarksPanel.tsx` is a sidebar panel accessible from the navigation rail
 - Live-renders edits/redactions, text search, jump-to-message, and remove
 - **Author attribution**: each saved-message card shows who wrote it (`{sender} · {time ago}`). The author is snapshotted at save time (`senderId`/`senderName` on the bookmark, optional for backward compatibility) and re-resolved live from the event when the room is joined; search also matches the author name.
 - **Sort & group**: a Newest / Oldest / By-room segmented control sorts the list; "By room" renders collapsible per-room sections (groups ordered by most-recent save). The chosen sort persists across panel opens (`cinny_bookmarks_sort_v1`). Ordering/grouping logic is pure and unit-tested in `src/app/utils/bookmarks.ts` (`bookmarks.test.ts`).
 - Hook: `src/app/hooks/useBookmarks.ts`
 ### Message Scheduling
 - Implements MSC4140 delayed events for scheduling messages to be sent at a future time
 - `ScheduleMessageModal.tsx` provides the date/time picker UI
- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual cancel buttons
+- A collapsible "Scheduled" tray in the room shows all pending scheduled messages with individual send-now, edit, and cancel buttons
 - **Send now**: the tray's send button fires a pending message immediately via MSC4140 `action: 'send'` (the server dispatches the stored delayed event now, as a normal timeline event — no cancel+retype). The row is pruned only once the server confirms; a failed send leaves an inline "Could not send now" error with the message still sendable/editable/cancellable.
 - **Edit / reschedule**: the tray's edit button re-opens `ScheduleMessageModal` (seeded with the existing body + send-time) to change the text and/or time. Since MSC4140 has no in-place edit, this is implemented as schedule-new-then-cancel-old; the old copy is only removed once the server confirms cancellation, so a failed cancel leaves a visible, cancellable copy rather than losing the message. Edits go through the plain-text composer (rich content becomes `m.text`).
 - Utilities in `src/app/utils/scheduledMessages.ts`
 ### Message Reminders
 - Message context menu → **Remind Me** sets a personal reminder to revisit a message; reminders are stored in `io.lotus.reminders` account data (sync across devices) via `useReminders`, and fire from `ClientNonUIFeatures`.
 - `RemindMeDialog.tsx` offers quick presets (in 20 min / 1 hour / 3 hours / tomorrow 9am) **plus a "Custom time…" option** that reveals date + time pickers for an arbitrary reminder time (validated to be ≥ 1 minute in the future).
 - **Manage existing reminders**: opening the dialog on a message that already has reminders lists them (soonest first, friendly time via `formatFriendlyDateTime`) each with a cancel (×) button, so you can see and remove pending reminders instead of silently stacking duplicates.
 - The date/time input helpers (`toLocalDate`, `toLocalTime`, `parseLocalDateTime`, `pickerInputStyle`) are shared, pure, and unit-tested in `src/app/utils/datetimeInput.ts` (`datetimeInput.test.ts`) — also used by `ScheduleMessageModal` (deduped from a prior inline copy).
 ### File Upload Compression (opt-in)
 - Implemented in `UploadCardRenderer.tsx`
@@ -747,20 +842,130 @@ Redacted events display "This message has been deleted" along with the redaction
 Generic (non-domain-specific) cards display a Google S2 favicon. Empty or unparseable preview responses are suppressed entirely rather than showing a blank card.
 ### Inline Media Embeds
 Media links play/render **in place** instead of opening a browser tab. A pure
 resolver, `parseMediaEmbed(url, host)` in `src/app/utils/videoEmbed.ts`, maps a
 URL to `{ provider, kind, embedUrl }`; `MediaEmbedCard` / `TikTokEmbedCard` /
 `TwitterCard` in `UrlPreviewCard.tsx` render it. Four render `kind`s:
 | kind        | shape                     | providers                                                          |
 | ----------- | ------------------------- | ------------------------------------------------------------------ |
 | `landscape` | 16:9 video player         | YouTube, Vimeo, Dailymotion, Streamable, Twitch, Loom, Kick (live) |
 | `portrait`  | 9:16 video player         | YouTube Shorts, TikTok                                             |
 | `audio`     | fixed-height audio player | Spotify, SoundCloud, Apple Music, Tidal                            |
 | `rich`      | self-resizing post embed  | X/Twitter, Instagram, Reddit, Bluesky                              |
 **Privacy-friendly facade.** The tile first shows the homeserver's cached
 `og:image` thumbnail + a play button; the third-party `<iframe>` is only mounted
 on click, so nothing hits Google/Meta/etc. until the user opts in. A **Close**
 button collapses a playing embed back to the facade, and video players carry a
 Fullscreen control. Cookie-less/DNT variants are used where offered
 (`youtube-nocookie.com`, Vimeo `dnt=1`).
 **Provider notes.**
 - **TikTok** — short "copy-link" URLs (`vm.tiktok.com`, `tiktok.com/t/…`) carry no
  video id and the homeserver preview is bot-walled, so `TikTokEmbedCard`
  resolves the id client-side via TikTok's CORS-enabled **oEmbed** API on click
  (`AbortController`-guarded), then plays the `player/v1` embed.
 - **Reddit / Instagram / Bluesky / X** — post embeds self-size via `postMessage`;
  `useIframeAutoHeight` listens scoped to each provider's origin **and** our own
  iframe, parsing each provider's height shape (Instagram `MEASURE`, Reddit
  `resize.embed`, Twitter `twttr.private.resize`). `redd.it` short links resolve to
  the subreddit-less `embed.reddit.com/comments/{id}/` route.
 - **Vimeo** unlisted-video privacy hashes (`vimeo.com/{id}/{hash}`) and
  channel/group/album forms are parsed; **YouTube** handles `/watch`, `youtu.be`,
  `/embed`, `/live`, `/shorts`, and `m.`/`music.youtube.com`.
 **Defense-in-depth.** Every embed iframe carries a `sandbox` that omits
 `allow-top-navigation` (so a compromised embed can't redirect the whole app —
 phishing guard) on top of the CSP `frame-src` allowlist. Previews are also capped
 at 6 per message.
 **Setting.** `inlineMediaEmbeds` (Settings → General → "Inline Media Players",
 default **on**). Off → media links fall back to plain link tiles.
 **Latent web bug fixed along the way.** YouTube thumbnails now come from the
 homeserver `og:image` instead of `img.youtube.com` — which was silently broken on
 the web build (nginx `img-src` has no YouTube host) — removing a pre-click Google
 request as a bonus.
 **CSP.** Desktop Tauri `frame-src` (`cinny-desktop` `tauri.conf.json`) and the web
 nginx `frame-src` allowlist enumerate every embed host (youtube-nocookie,
 player.vimeo, geo.dailymotion, streamable, player/clips.twitch, open.spotify,
 w.soundcloud, embed.music.apple, embed.tidal, www.tiktok + connect-src for its
 oEmbed, platform.twitter, www.instagram, embed.reddit, embed.bsky.app, www.loom,
 player.kick).
 **Files:** `src/app/utils/videoEmbed.ts` (resolver + parsers, unit-tested),
 `src/app/components/url-preview/{UrlPreviewCard,UrlPreview.css}.tsx`.
 ### Poll Creation
- `PollCreator.tsx` creates stable `m.poll.start` events
+- `PollCreator.tsx` creates stable `m.poll.start` events (with a text fallback body for non-poll clients)
- Supports 2 to 10 answer options
+- Supports 2 to 10 answer options; single-choice or multiple-choice
- Supports both single-choice and multiple-choice modes
+- **Max selections** — for a multiple-choice poll, a "Voters can pick up to N of M options" control sets `max_selections` (2 … option count), so you can run "pick your top 2" polls rather than only "select all". Defaults to the option count (unchanged "select all that apply" behavior) until you lower it; the display side already enforces the cap ("Select up to N")
 - **Results visibility toggle** — _Show live results_ (disclosed, default) vs _Hidden until ended_ (undisclosed)
 - Accessible via the `Icons.OrderList` button in the composer toolbar
-### Poll Display
+### Poll Display & Voting (MSC3381, full lifecycle)
-`PollContent.tsx` renders polls in read-only mode. Handles both the stable `m.poll` format and the legacy MSC3381 unstable `org.matrix.msc3381.poll.start` format. Displays current vote counts and a note directing users to Element to cast votes.
+`PollContent.tsx` is a fully interactive, spec-correct poll card:
-### Voice Message Playback Speed
+- **Vote / change / clear** in place — sends stable `m.poll.response` (`m.selections`); latest response per voter wins; clearing removes you from the tally. Multi-choice enforces `max_selections` ("Select up to N").
 - **Disclosed vs undisclosed** — undisclosed polls hide counts/percentages/bars (and the vote total) until the poll ends; disclosed polls show live results.
 - **See who voted** — a "Show who voted" toggle (shown only when results are visible, i.e. disclosed live or undisclosed-after-end) reveals the voter names under each answer. The voter list rides the same tally as the counts (`voters: Map<answerId, senderId[]>` populated in `tallyResponses`'s latest-response-per-sender loop), so it can never disagree with the numbers; a re-vote moves the voter, and a cleared vote drops them. Names via `getMemberName`; undisclosed polls stay secret until close.
 - **End a poll** — the poll's creator or a moderator (redact power) can end it via an inline confirm; sends stable `m.poll.end`. Ended polls lock voting, show "Poll closed · Final results", reveal results, and highlight the winner(s) (ties supported). Only responses cast on/before the end event count.
 - **Cross-client** — reads **both** the stable (`m.poll`/`m.id`/`m.selections`) and unstable (`org.matrix.msc3381.poll.*`) wire formats by hand (matrix-js-sdk 41.7.0's poll parsers only speak unstable), and uses the SDK `Poll` model for end-event validation (creator / redact-PL) + before-end response filtering. Polls authored in Element render/vote/end correctly and vice-versa.
 - **Accessibility** — `radiogroup`/`radio` (single, with arrow-key roving) or `group`/`checkbox` (multi) semantics, `aria-checked`/`aria-disabled`, winner announced to AT.
 - Pure tally/visibility/winner/voters + wire-format parsing live in `utils/poll.ts` (+ `poll.test.ts`, 18 tests incl. the stable/unstable round-trip and voter attribution).
-`AudioContent.tsx` adds a playback speed cycle button to voice message players. Available speeds: `[0.75, 1, 1.5, 2]×`. A `useEffect` sets `audioElement.playbackRate` whenever the speed selection changes.
+### Voice Message Playback (waveform + speed)
 `AudioContent.tsx` is the shared audio player (timeline + Media Gallery Audio tab):
 - **Waveform scrubbing** — voice messages carry an MSC1767 waveform (`org.matrix.msc1767.audio.waveform`, sent by the recorder). Playback renders it as bars that fill with the accent as the clip plays (TDS green under Lotus Terminal), and the waveform **is** the seek control — click, drag, or keyboard (arrows ±5s, Home/End) to scrub (`role="slider"`, ARIA value text). Threaded through `MAudio` (`MsgTypeRenderers.tsx`) + passed directly by the gallery. Regular audio with no waveform keeps the plain seek bar.
 - **Playback speed** — a cycle button (`[0.75, 1, 1.5, 2]×`); a `useEffect` sets `audioElement.playbackRate` and re-applies it on (re)load (the browser resets it).
 - **Recording pause / resume** — `VoiceMessageRecorder.tsx` supports a `paused` state via `MediaRecorder.pause()/resume()`, so you can pause mid-recording and continue without a gap. The duration timer accumulates only active-recording time (paused time is excluded), the waveform/meters freeze while paused and the record dot stops pulsing, and the finish button (which advances to the preview/review step) is a checkmark distinct from the Pause control.
 ---
 ## Threads (P3-8)
 Full threaded-conversation support (`m.thread`, matrix-js-sdk `threadSupport`), Element-consistent.
 ### Thread Panel
 A right-side drawer (mirrors the members drawer; fullscreen on mobile) with the thread's root message emphasized at top, an "N replies" divider, the full reply timeline (virtualized, back-paginates via `/relations`, decrypts E2EE threads), reactions/edits/redactions, and its own composer. Open it from **Reply in Thread** in the message menu, a reply's thread indicator, or a summary chip; close with **×** or Escape. Reading the panel sends threaded read receipts so per-thread unread counts clear.
 ### Threads List Panel
 A room-level overview of **all** threads, opened from a **Threads** button (🧵) in the room header (mirrors the gallery/widgets toggles). Each row shows the root sender + message snippet, an unread dot, a meta line ("N replies · last reply 5m ago") and a **participant avatar pile**. A segmented **filter** (All / Unread / Participating — the latter via `thread.hasCurrentUserParticipated`) and **sort** (Recent / Oldest, by last-reply time) sit in the toolbar; both persist in localStorage (`cinny_threads_filter_v1` / `cinny_threads_sort_v1`). Clicking a row opens the existing single-thread `ThreadPanel` (reuses `setActiveThreadId`), and reading it clears the row's unread badge live. The list stays live via `ThreadEvent.New/NewReply/Update/Delete` + `RoomEvent.UnreadNotifications` and is virtualized for busy rooms.
 - Files: `features/room/thread/ThreadsListPanel.tsx`, `hooks/useRoomThreads.ts` (populates via `room.fetchRoomThreads()` + `room.getThreads()`; last-activity + reply-count + root-edit signature so rows refresh live), `state/threadsList.ts`, pure filter/sort in `utils/threadList.ts` (`filterThreads`/`sortThreads`, unit-tested). Unread mirrors `useThreadSummary`'s logic (`getThreadUnreadNotificationCount`, muted threads zeroed) and renders the app-wide `UnreadBadge` (red for mentions via the Highlight count). Reuses `StackedAvatar`/`useMemberAvatar` for the participant pile and the Bookmarks-panel segmented-control pattern.
 ### Summary Chips
 Root messages in the main timeline show a **"N replies · time"** chip (server-aggregated `m.thread` bundle, or the live Thread once loaded) with an unread badge — threaded replies no longer render inline in the main timeline, so the chip is how conversations stay discoverable.
 ### Thread Composer
 The panel embeds the full composer (uploads, emoji, stickers, GIFs, voice, location, polls) with drafts, reply state, and upload queues **isolated per thread** (`roomId::threadRootId` keys). Replies-to-replies produce spec-correct `m.thread` + `m.in_reply_to` (`is_falling_back: false`). **Slash commands work in threads** — content-transform commands (`/me`, `/notice`, `/shrug`, `/tableflip`, `/unflip`) route into the thread via the normal send path, and room-level commands (`/invite`, `/kick`, …) act on the room; this also matches the command autocomplete, which was already shown in the thread composer. Scheduling is still disabled inside threads (v1).
 **↑ to edit last reply**: pressing Up-arrow in the empty thread composer opens the editor on your most recent editable reply _in that thread_ — parity with the main timeline. The thread composer carries a distinct `editableName="ThreadInput"` so the main timeline's global up-arrow handler and the thread's no longer cross-fire (previously the thread composer had the same name, so Up-arrow there wrongly targeted the main timeline's last message).
 ### Notifications (Slack-style, P4-1)
 By default you're notified for a thread reply only when you **participate** in that thread (you've posted in it) or the reply **@mentions** you — other threads accumulate quietly behind their chip badges. Every thread can be overridden from the bell menu in the panel header: **Default (participating) / All replies / Mentions only / Mute**. Modes sync across your devices (`io.lotus.thread_notifications` account data, auto-pruned). Muting a thread silences notifications and sounds, removes the chip's unread badge (a small bell-mute glyph shows instead), and subtracts that thread from the room's sidebar unread badge (client-side — other Matrix clients on the account still count it).
 ### Under the Hood
 - `threadSupport: true` (startClient) partitions thread events into SDK `Thread` timelines; markAsRead sends **unthreaded** receipts so room badges keep clearing
 - Thread replies are notified via exactly one path (room-level `ThreadEvent.NewReply` w/ per-thread dedupe + panel-aware focus suppression); the main timeline notifier is thread-guarded, and room badges refresh live on `RoomEvent.UnreadNotifications`
 - Pending sends render via a `LocalEchoUpdated` strip (chronological local echo never enters thread timelineSets)
 - Deep links to thread events redirect into the panel
 - Files: `features/room/thread/*`, `state/room/thread.ts`, `hooks/useThreadSummary.ts` (+35 tests across the stack)
 ---
@@ -784,9 +989,11 @@ A presence status selector in the user panel offering five modes:
 ### Custom Status Message
 - Up to 64 characters of free text plus an emoji
 - **Emoji picker is unicode-only** (`EmojiBoard hideCustomEmojis`): a status is plain-text presence (`status_msg`) that can't render a custom mxc-image emoji, so the picker hides custom/image-pack emojis (packs, sidebar icons, search, and custom entries in Recent) — every emoji shown actually inserts. (Previously custom emojis were listed but silently did nothing when clicked, since there was no `onCustomEmojiSelect` on this field.)
 - Optional auto-clear timer with presets: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days
 - Status is broadcast via `mx.setPresence({ status_msg: ... })`
 - Character counter appears at 56/64 characters remaining to warn of the limit
 - **Status presets**: a "Quick statuses" row of 11 built-in presets spanning gaming/social/life/work — 🎮 Gaming, 🎧 In a party, 🏆 Ranked grind, 😴 AFK, 🍿 Watching, 🍽️ Lunch, 🗓️ In a meeting, 🏠 Working remotely, 🎯 Focusing, 🌴 On vacation, 🤒 Out sick (see `BUILT_IN_STATUS_PRESETS`). Clicking a preset applies its message + suggested auto-clear in one click. Users can also save the current status as a reusable custom preset (stored in `io.lotus.status_presets` account data, synced across devices, de-duped by label, capped at 20; a saved preset matching a built-in is hidden to avoid a duplicate chip) and delete presets inline. Built-in list + pure `upsertPreset` de-dupe/cap logic live in `src/app/utils/statusPresets.ts` (unit-tested); persistence in `src/app/hooks/useStatusPresets.ts`.
 ### Presence Badges
@@ -816,10 +1023,12 @@ Fixed by replacing the single read with a `readStatus()` function called inside
 The browser tab title updates to reflect unread state:
- `(N) Lotus Chat` — N unread messages
+- `(N) Lotus Chat` — N mentions / keyword highlights (the count is highlights, not total unread)
- `· Lotus Chat` — unread activity without a specific count
+- `· Lotus Chat` — unread messages without a mention (activity, no specific count)
 - `Lotus Chat` — no unread items
 The favicon mirrors this (highlight badge / unread dot / default).
 ### Extended Profile Fields
 Supports MSC4133 custom profile fields via `PUT /_matrix/client/unstable/uk.tcpip.msc4133/{userId}/{field}`:
@@ -855,6 +1064,18 @@ Hook: `src/app/hooks/useUserNotes.ts`
 ## UX & Composer
 ### Forward to Multiple Rooms (P6-3)
 The Forward Message dialog is a checkbox multi-select: pick any number of rooms (search + select persist across queries) and **"Send to N rooms"** forwards in one batch (`Promise.allSettled`). Full success auto-closes; a partial failure keeps the dialog open with a "Forwarded to X/N — failed: …" summary. The forwarded content (latest edit via `m.new_content`, reply-quote stripped, undecryptable refused) is built by the shared, unit-tested `forwardContent.ts`.
 - **Message preview**: a compact preview at the top of the dialog shows the sender + body (and a thumbnail for image/video) so you can see what you're forwarding.
 - **Optional comment**: an "Add a comment" field sends a short `m.text` note to each target room _before_ the forwarded message (sequenced per room; a room counts as failed if either send fails).
 - **Recent targets**: a "Recent" chip row (hidden while searching) surfaces the rooms you last forwarded to for one-tap selection. Successful targets are recorded most-recent-first, deduped, capped at 8, in localStorage (`cinny_recent_forward_targets_v1`) via the pure, unit-tested `addRecentForwardTarget` (`state/recentForwardTargets.ts`); rooms you've since left are dropped from the row.
 ### Live Bookmark Previews (P6-3)
 `BookmarksPanel` resolves each saved message's **live event** (`useRoomEvent`) so previews reflect **edits** and show a **deleted** indicator for redactions, instead of the save-time snapshot. The stored snapshot (`previewText`) remains the fallback while loading, on fetch failure, or when you've **left the room**.
 ### Message Length Counter
 A character count indicator is shown in the composer when `charCount > 0`. The counter resets to zero when switching rooms.
@@ -879,10 +1100,9 @@ OS-level notifications are unchanged and still fire when the window is not focus
 ### Collapsible Long Messages
-Messages exceeding a configurable line threshold are truncated with a "Show more" toggle.
+Messages exceeding a fixed height threshold are truncated with a "Show more" toggle.
- Default threshold: 20 lines
+- Threshold: a fixed `COLLAPSE_MAX_HEIGHT` of 320px (≈ 20 lines) — not currently user-configurable
 - Threshold is configurable in **Settings → Appearance**
 - Uses CSS `max-height` + `overflow: hidden` with a smooth transition
 - Transition is disabled when `prefers-reduced-motion: reduce` is active
@@ -945,7 +1165,8 @@ Persists via the `homeRoomSort` setting.
 `RoomShareInvite.tsx` provides a shareable invite UI:
- 160×160px QR code generated via `api.qrserver.com`
+- 160×160px QR code generated locally via `qrcode.react` (`QRCodeSVG`) — no third-party service, works offline and under strict CSP, on a white quiet-zone so it scans on any theme
 - **Download QR**: exports the code as a PNG via an offscreen high-resolution (1024px, spec 4-module margin) `QRCodeCanvas` + `canvas.toBlob`, saved through `useSaveFile` (filename derived from the room name) with the standard download toast
 - "Copy Link" button to copy the `matrix.to` URI
 - Also accessible via a toggle button (⊞) in the Invite modal
@@ -953,14 +1174,41 @@ Persists via the `homeRoomSort` setting.
 A toggle in **Settings → Privacy** switches between sending `m.read` (public receipts) and `m.read.private` (private receipts visible only to the sender and the server).
 ### Tracking-Parameter Stripping (Gitea #103)
 Links you paste, send, edit, or merely _see_ lose ad/analytics identifiers — `utm_*`, `fbclid`, `gclid`, YouTube `si=`, Amazon `ref=`/`tag=`, X `s=`/`t=`, TikTok `_r`/`_t`, and ~40 more, plus host-scoped rules so e.g. `si` is only removed on YouTube/Spotify. Runs entirely on the device (`src/app/utils/urlTracking.ts`, unit-tested). Wired at paste (re-inserted through Slate so multi-line pastes still split into paragraphs), at send/schedule/edit on both `body` and `formatted_body`, and at render (linkify + explicit `<a href>` in formatted HTML), so links from other clients are cleaned locally too. `matrix.to` and non-http(s) schemes are never touched; Amazon's `th`/`psc` variant selectors are kept. Toggle in **Settings → Privacy → Strip Tracking Parameters from Links** (default on).
 ### Settings Sync Across Devices (Gitea #104)
 The syncable subset of Lotus settings (theme, composer toolbar order, notification/quiet-hour preferences, call keys, privacy toggles, …) is mirrored to the `io.lotus.settings` account-data event on the user's own homeserver and applied on every other device. Device-bound keys stay local (`DEVICE_LOCAL_KEYS` in `src/app/utils/settingsSync.ts`: page zoom, media auto-load, animation pause, glassmorphism, noise-suppression tier/model, bitrates, volumes, notification permission, developer tools, PTT mode, camera-on-join, drawer state). Conflicts are last-write-wins on an `updatedAt` stamp forced monotonic per device; a per-account `lastSyncedAt` marker in localStorage stops a device from echoing a snapshot it just applied. **Settings → General → Sync** has the toggle (itself device-local), **Push now** (make this device win everywhere) and **Clear synced copy**. Hook: `src/app/hooks/useSettingsSync.ts`, mounted from `ClientNonUIFeatures`.
 ### Push to Deafen: off switch + typing-safe
 **Settings → Calls → Push to Deafen** now has a switch (off = no key toggles deafen; the call-bar headphone button remains). Root cause of the "I went deaf while typing" reports: Cinny's type-anywhere-to-focus-the-composer and the deafen key both listen on `window`, so with the default `M` the first letter of a message typed after clicking the timeline toggled deafen and was swallowed (`mom` → `om`). Rules now: a typable key (letter/digit/Space/…) only toggles deafen in the call view — on any screen with a composer, typing wins; and such keys are never bound system-wide on desktop (`isSafeGlobalToggleKey`: F-keys, numpad, lock/navigation cluster qualify), so the letter `m` typed in Discord or a game can't deafen you either. The tile explains this and suggests an F-key/Numpad key for an everywhere binding.
 ### Forwarded messages show their provenance
 A forwarded message used to arrive as if the forwarder had written it. `buildForwardContent` now stamps `io.lotus.forwarded` (`sender`, `origin_server_ts`, `room_id`, `event_id`; forwarding a forward keeps the _original_ stamp) and the timeline (main + threads) renders a reply-style line above the message — **↪ Forwarded from bob in Other Room · 9:05 PM** — which is a button that jumps to the original when you are in the source room; if you are not, it shows only the sender and time (the source room's name is deliberately not shared). Other Matrix clients ignore the key and see the plain content. Component: `src/app/components/message/ForwardedHeader.tsx`.
 ### Copy Lotus Link — direct permalinks (Gitea #130)
 `matrix.to` cannot be pointed at this deployment (its Cinny adapter is hard-coded to `app.cinny.in`; `web-instance[]` only works for Element), so every **Copy Link** (message ⋯ menu, space header menu, sidebar space-tab menu) has a **Copy Lotus Link** beside it that yields `https://chat.lotusguild.org/home/<room>/<event>?viaServers=…` (spaces: `/<space>/`). Helpers in `src/app/plugins/lotus-permalink.ts` (unit-tested). Lotus links pasted into a room render and click like matrix.to links (`toMatrixToHref` in the HTML parser rewrites them into the existing mention pipeline). Supporting fixes: `/home/<room>` for a room you are already in but that lives under a space or in Direct now redirects to its own route instead of a preview card (this is also the form matrix.to → "Continue in Cinny" produces); `?via=a,b` is accepted as an alias of `?viaServers=` (the matrix.to Cinny adapter emits `via`); and a deep link opened while logged out is honoured after an **OIDC/SSO** login too — the OIDC callback reloads at the app root, which previously discarded the stored path (`takeAfterLoginPath` is now consumed by the index route as well as the password flow). matrix.to stays the default, interoperable link and the Share Room QR is unchanged.
 ### PWA App-Icon Badge (Gitea #154)
 When Lotus Chat is installed as a PWA (Android Chrome, desktop Chrome/Edge), the app icon carries a numeric badge via the Badging API (`navigator.setAppBadge`). The number is the same highlight count (mentions/DMs, leaf rooms only) that the tab title shows, so the two can never disagree; it clears when the count reaches zero. Lives in `FaviconUpdater` (`ClientNonUIFeatures.tsx`) next to the title/favicon logic. No-op in a plain browser tab (the API is absent) and under Tauri, where the native `set_badge_count` already owns the badge.
 ### Media Gallery
 `MediaGallery.tsx` — a right-side drawer for browsing room media.
- Three tabs: **Images**, **Videos**, **Files**
+- Four tabs: **Images**, **Videos**, **Audio**, **Files** (each with a live count)
- Reads already-decrypted events from the room timeline
+- **Images/Videos** — a month-grouped grid; tiles decrypt on demand (lazy, near-viewport), open a keyboard-navigable **lightbox** (←/→/Esc, prev/next). Each grid tile has a hover/focus **download** button, and the lightbox header has a **Download** action — both reuse the shared `FileDownloadButton` (full-resolution source, decrypts E2EE media client-side, spinner/✓/retry states), so images and videos can be saved without jumping to the message. On touch (no-hover) devices the tile download button stays visible. In the lightbox, **images support zoom & pan** (scroll wheel or −/+ header buttons, `+`/`-`/`0` keys, double-click or the % chip to toggle 1×↔2×; drag to pan when zoomed) via the shared `useZoom`/`usePan` hooks; zoom resets when navigating to another item.
- Encrypted images show a lock placeholder rather than an error
+- **Audio** — voice messages + audio files (`m.audio`) with an inline player (reuses `AudioContent`: **waveform scrubbing** for voice messages, play/seek/**speed control**; decrypts on play)
- "Load More" button triggers `mx.paginateEventTimeline()` to fetch older media
+- **Files** — name/size/sender rows with download
 - **Jump to message** — a "Go to message" action on file rows, audio rows, and in the lightbox navigates the timeline to the source event (`useRoomNavigate`) and closes the drawer
 - Encrypted media is decrypted client-side on demand (no lock placeholder); download works for all types
 - **Auto-pagination** — an `IntersectionObserver` sentinel pulls older media as you scroll (manual retry on error). Since Gitea #163 this pages through the gallery's **own timeline set** (`useRoomMediaTimeline` → `utils/detachedTimeline.ts`), never the room's live timeline: unencrypted rooms use a server-side `contains_url` filter (a page is 100 media events, not 100 events), encrypted rooms page raw history into a private set and filter after decrypting. The message list behind the drawer no longer jumps into the past; the Activity log and history Export use the same helper.
 ### Knock-to-Join
@@ -985,7 +1233,7 @@ Hook: `src/app/hooks/usePendingKnocks.ts`
 ### Room Emoji Prefix
-A leading emoji in a room name is rendered at 1.15× size in the sidebar for visual hierarchy. An emoji picker button (😊) is added to all room name input fields, prepending the selected emoji to the room name.
+An emoji picker button (😊) is added to all room name input fields, prepending the selected emoji to the room name.
 ### Configurable Composer Toolbar (P3-6)
@@ -1069,9 +1317,9 @@ Features:
 Accessible via **Room/Space Settings → Policy Lists** (admin only).
- Displays the room's subscribed policy lists in read-only format
+- Enter a policy-list room's **ID or alias** (one you have already joined) to view its `m.policy.rule.user` / `.room` / `.server` rules in read-only format
- Subscribe (join) and unsubscribe (leave) controls for each list
+- Viewer only — there are **no** subscribe/unsubscribe controls and no listing of "subscribed" lists; join or leave the policy-list room itself the normal way
- Enforcement is delegated to Draupnir or equivalent tooling; Lotus only manages list membership
+- Enforcement is delegated to Draupnir or equivalent tooling
 ---
@@ -1091,6 +1339,13 @@ Accessible via **Room/Space Settings → Policy Lists** (admin only).
 - Gates both `notify()` (visual/OS notifications) and `playSound()` (audio alerts)
 - When active, notifications are silently dropped rather than queued
 ### Pause Notifications (snooze)
 - A **cross-platform** "Pause Notifications" control in **Settings → Notifications** (the desktop-tray Do Not Disturb only worked on the desktop app; web/mobile had no manual pause).
 - Quick presets: 30 minutes / 1 hour / 4 hours / Until 8 AM / **Until I resume** (indefinite), plus a **Resume** button; the tile shows the live "Paused until …" status (via `formatFriendlyDateTime`) and flips back to "on" the moment the snooze lapses.
 - Persisted (`cinny_notification_snooze_until_v1`) as the epoch-ms instant to pause until (`0` = off), so a snooze survives a reload. Feeds the same notification gate as Focus Assist / Quiet Hours (`ClientNonUIFeatures`), suppressing both `notify()` and `playSound()`.
 - Pure, unit-tested helpers `isSnoozeActive` / `nextTimeAtHour` / `SNOOZE_INDEFINITE` in `src/app/utils/snooze.ts` (`snooze.test.ts`); persisted atom in `src/app/state/notificationSnooze.ts`.
 ### Full Push Rule Editor
 A complete UI for managing Matrix push notification rules:
@@ -1129,6 +1384,18 @@ Three one-tap presets at the top of **Settings → Notifications** that apply a
 ---
 ## Accessibility (P3-4)
 WCAG 2.1 AA hardening of the golden path (find room → read → reply → send) for keyboard and screen-reader users.
 - **Timeline for screen readers:** each message is `role="article"`; **collapsed messages announce their sender + time** (they drop the visible header, so AT would otherwise hear the body with no attribution). The timeline is a `role="log"` `aria-live="polite"` region so new messages are announced; emoji/emoticons carry text labels.
 - **Live status:** typing indicators announce via a `role="status"` region; editing a message announces "Editing message from <sender>".
 - **Forms & overlays:** all inputs have associated labels (visible `<label htmlFor>` or `aria-label`); the Media Gallery and Search overlays are named.
 - **Focus management:** skip-to-content link + `nav`/`main` landmarks; genuine dialogs return focus to their trigger on close (inline popouts intentionally keep focus in context).
 - **Keyboard-shortcuts help:** press <kbd>?</kbd> for a dialog of the existing shortcuts (Escape, type-to-focus composer, Enter/Shift+Enter send, message actions).
 - **Regression gate:** a curated `eslint-plugin-jsx-a11y` rule set (ARIA correctness + label association) runs in CI. Files: `components/message/*`, `features/room/RoomViewTyping.tsx`, `features/shortcuts/*`, `utils/a11y.ts`, `eslint.config.mjs`.
 - _Known limitation:_ list virtualization keeps far-scrolled history out of the a11y tree (perf trade-off); newly-arriving messages are announced.
 ## Infrastructure
 ### Authenticated Media
@@ -1159,6 +1426,100 @@ The `useAuthentication` parameter was previously mispositioned, causing unauthen
 The `encUrlPreview` setting defaults to `true` rather than `false`. A security advisory chip in **Settings → Privacy** explains the tradeoff (the homeserver can see which URLs are being previewed) so users can make an informed choice.
 ### Hardened Session Storage (N97 partial, 2026-07)
 The session persists as ONE atomic `cinny_session_v1` JSON write (previously ~10 separate localStorage keys written non-atomically). Reads prefer the blob with transparent migration from the legacy keys (dual-written one release for rollback). Cross-tab sync: logging out or in from one tab reloads the others so no tab runs with stale credentials. `state/sessions.ts` (22 tests), `hooks/useSessionSync.ts`.
 ### Crypto Diagnostics (E2EE investigation kit)
 **Settings → Developer Tools → Crypto Diagnostics**: a capture-only ring buffer (max 200) hooks `console.warn/error` for E2EE failure signatures (OTK upload conflicts, missing call media keys, decryption errors, delayed-event timeouts) and downloads a JSON report — the evidence input for the KE-1→4 investigation. Companion diagnosis: the Encryption / E2EE section of [`LOTUS_REFERENCE.md`](./LOTUS_REFERENCE.md). `utils/cryptoDiagLog.ts`, `features/settings/developer/CryptoDiagnostics.tsx`.
 ---
 ## Localization
 Lotus Chat is **English-only for now**, by explicit decision (Sept 2026 audit, #53). The i18next
 mechanism (`i18next-browser-languagedetector` + `public/locales/{en,de}.json`, wired in
 `src/app/i18n.ts`) is real and still used by the ~11 upstream-inherited files that call
 `useTranslation()`, but none of the Lotus-added UI (presence picker, calls/soundboard, avatar
 decorations, seasonal settings, keyboard shortcuts help, toasts, etc.) is routed through it. Letting
 the language detector pick a non-English browser locale therefore produced a UI that was only
 partially translated. `src/app/i18n.ts` now sets `supportedLngs: ['en']` so the whole app renders
 consistently in English regardless of browser locale, while leaving the detector/backend/`de.json`
 in place. Re-enabling another language requires two things: (1) route Lotus strings through
 `useTranslation()`/`public/locales/<lng>.json` like the existing localized files, then (2) drop (or
 extend) `supportedLngs` in `src/app/i18n.ts` — a one-line change.
 ---
 ## Desktop App Features
 Native capabilities of the Lotus Chat **Tauri v2** desktop app (Windows, macOS, Linux) on top of the shared web client. Web hooks live in `src/app/hooks/useTauri*.ts` (each no-ops in the browser) and call Rust commands in `cinny-desktop/src-tauri/src/native/*`. Windows-only pieces are `#[cfg(target_os = "windows")]`, compile-verified in CI (Windows runners).
 ### Call Continuity — No-Sleep (P5-46)
 Holds the system awake (`SetThreadExecutionState`) while a voice/video call is active; releases on end. `useTauriCallPower` ↔ `native/power.rs`.
 ### Windows Jump List (P5-36)
 Right-click the taskbar icon → a **Recent Rooms** list of your most-active rooms; each entry opens that room via the `matrix:` deep-link. `useTauriJumpList` ↔ `native/jumplist.rs` (`ICustomDestinationList`).
 ### Taskbar Thumbnail Toolbar (P5-44)
 Hover the taskbar preview during a call → **Mute / Deafen / End Call** buttons. `useTauriThumbbar` ↔ `native/thumbbar.rs` (`ITaskbarList3` + a window subclass for `THBN_CLICKED`).
 ### System Media Transport Controls — SMTC (P5-43)
 Exposes call status + a mute control to the Windows volume-flyout / media overlay (WinRT `SystemMediaTransportControls`). `useTauriSmtc` ↔ `native/smtc.rs`. _Experimental — may require an active audio session to surface._
 ### Network Awareness (P5-49)
 Detects Windows connectivity changes (`INetworkListManager`) and nudges the Matrix client to reconnect (`retryImmediately`). `useTauriNetwork` ↔ `native/network.rs`.
 ### Instant Background Sync (P5-42)
 Keeps the `/sync` loop + notifications running full-speed while the app is closed to the tray, by disabling Chromium background throttling via WebView2 `additional_browser_args` (`lib.rs`) — no separate background process. Windows/WebView2 only; doesn't block system sleep.
 ### Native Rich Notifications (P5-41 / P5-35)
 Windows toasts with **click-to-open-room** and **inline quick reply** (WinRT `ToastNotification`, in-process `Activated` event). Falls back to the standard toast otherwise. `useTauriToastActions` ↔ `native/toast.rs`; the desktop notification bridge routes room notifications to it.
 ### Focus Assist Sync (P5-56)
 When Windows Focus Assist / Quiet Hours is active, Lotus suppresses its own notifications + sounds (reuses the quiet-hours gate). `useTauriFocusAssist` + `focusAssistActiveAtom` ↔ `native/focus_assist.rs` (`SHQueryUserNotificationState`).
 ### Linux parity + cross-platform extras (P6-1)
 Rounds out the native app beyond Windows (macOS out of scope):
 - **No-sleep during calls on Linux** — a D-Bus `org.freedesktop.ScreenSaver` inhibit (zbus) keeps the display awake mid-call, matching the Windows behavior. `native/power.rs`.
 - **Launcher unread badge on Linux** — best-effort Unity `LauncherEntry` D-Bus signal (Ubuntu/Dash-to-Dock/KDE), mirroring the Windows taskbar badge.
 - **Launch on login** — `tauri-plugin-autostart` + a **Settings → General "Launch on login"** toggle (desktop-only).
 - **Tray "Do Not Disturb"** — a tray checkbox that silences Lotus notifications (feeds `manualDndAtom` into the same quiet-gate as Focus Assist). `useTauriDnd`.
 ### System-Wide Voice Hotkeys (cinny-desktop #2)
 Push to Talk and Push to Deafen keep working while a game or any other app has focus. The desktop does **not** register a global shortcut (that would swallow the key from every app — a bare `Space` PTT would stop other apps typing spaces); instead, only while a call is joined, a native thread polls `GetAsyncKeyState` for the two configured keys every ~8 ms and emits a `lotus-global-hotkey` DOM event on each press/release transition (`src-tauri/src/native/hotkeys.rs`). `useCallHotkeys` ignores those events while the Lotus window itself has focus (the DOM handlers own that case with their editable-field checks), so nothing double-fires. Windows only — Linux/Wayland has no non-consuming path; `global_hotkeys_supported` reports it and the toggle is hidden outside Tauri. Toggle: **Settings → Calls → Hotkeys Work Outside the Window** (device-local, default on).
 ### Custom Window Chrome (P5-47)
 Opt-in (Settings → General → **Custom Window Chrome**): replaces the OS title bar with a TDS-styled titlebar (min / max / close + drag region), runtime-reversible via `set_decorations`. `features/desktop/TitleBar.tsx` + `useTauriWindowChrome` ↔ `native/chrome.rs`.
 ### Proactive Update Toast (P5-40)
 Checks for a new desktop release every 12h and offers a one-click update. `TauriUpdateFeature` (ClientNonUIFeatures) + `useTauriUpdater`.
 ### Cross-platform composer niceties
 - **Composer toolbar drag-reorder (P5-55)** — drag to reorder the composer buttons (Settings → General), via `@atlaskit/pragmatic-drag-and-drop`.
 - **Draft-saved indicator (P5-57)** — a subtle cue in the composer when the current room has a persisted draft.
 - **Recursive folder drag-drop (P5-48)** — drop a folder to upload every file inside it (all nesting levels), `utils/fileEntries.ts`.
 ### Files
 - Web: `src/app/hooks/useTauri*.ts`, `src/app/components/TauriDesktopFeatures.tsx`, `src/app/features/desktop/TitleBar.tsx`, `src/app/features/room/DraftIndicator.tsx`, `src/app/utils/fileEntries.ts`, `src/app/state/{customWindowChrome,focusAssist}.ts`.
 - Native (`cinny-desktop`): `src-tauri/src/native/{power,jumplist,thumbbar,smtc,network,chrome,toast,focus_assist}.rs` + `native/mod.rs` (registered in `lib.rs`).
 ---
 ## Key Custom Files
@@ -0,0 +1,115 @@
 # Lotus Chat — Engineering Reference
 **Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`
 **Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
 > **There is no backlog in this file.** All open work lives in Gitea issues — [cinny](https://code.lotusguild.org/LotusGuild/cinny/issues), [element-call](https://code.lotusguild.org/LotusGuild/element-call/issues), [cinny-desktop](https://code.lotusguild.org/LotusGuild/cinny-desktop/issues), [matrix](https://code.lotusguild.org/LotusGuild/matrix/issues) (infra/CI) — grouped by milestone (`Features 2026-Q4`, `Desktop 2026-Q4`, `Manual QA backlog`, `Desktop QA backlog`, the `Audit 2026-09 · *` set). Shipped features are documented in [LOTUS_FEATURES.md](./LOTUS_FEATURES.md); how to run the automated tests is in [LOTUS_TESTING.md](./LOTUS_TESTING.md). The former `LOTUS_TODO.md` backlog was migrated to issues on 2026-09-17 (full history in git).
 This file keeps only what a contributor needs to have open while working: the two design laws, decisions already made, what the server blocks, and the operational reference.
 ---
 ## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
 > **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
 > Do NOT hardcode hex values. Do NOT invent new variable names. Canonical tokens: `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green`, `--lt-glow-*`, `--lt-box-glow-*`, `--lt-border-color`, `--lt-font-mono`. Syntax-highlight token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn`.
 > Reference patterns: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css). Applies to every task without exception.
 > New components must respect both TDS dark (`LotusTerminalTheme`) and TDS light (`LotusTerminalLightTheme`); non-TDS theme work uses vanilla-extract (match `src/lotus-terminal.css.ts`).
 ## 🧩 NATIVE-CINNY LAW — EVERY FEATURE MUST FEEL LIKE STOCK CINNY
 > **Every feature must feel native to upstream Cinny — indistinguishable from what the Cinny team would ship.** Reference: <https://github.com/cinnyapp/cinny>.
 >
 > - **Use the `folds` design system, not bespoke UI** (`Button`, `Chip`, `IconButton`, `Menu`, `MenuItem`, `Dialog`, `Modal`, `Input`, `Switch`, `Badge`, `SettingTile`, `SequenceCard`, …) and folds tokens (`color.*`, `config.space.*`, `config.radii.*`). **Use folds `Icon`/`Icons`, never literal emoji, in UI chrome.** No hardcoded hex/`rgba()`, no invented CSS variables.
 > - **Match Cinny's existing patterns** — find the closest existing component/flow and mirror it before adding UI.
 > - **The ONE exception:** explicit **TDS** features, which follow the TDS Design Law above (opt-in, only in Lotus Terminal mode).
 ---
 ## Deferred / dropped (decided — kept for context)
 - **[DEFERRED] P5-51** Federated "Identity Contexts" (session isolation) — multi-sprint, touches auth/crypto/storage core; smaller intermediate step = plain multi-account switch. **[DROPPED] P5-52** per-room sync governor — js-sdk can't truly per-room filter `/sync`; only a cosmetic hide. **[DEFERRED] P5-53** local scripting plugin — prefer a declarative automation-rules feature (no arbitrary code). **[DEFERRED] Audit-3** profile banner — MSC4427 open/unmerged; revisit on merge. **[WON'T FIX] P5-50** Windows HW media pipeline (WebRTC decode lives in WebView2; not injectable). **[MOVED] P5-9** LFG → LotusBot `!lfg`.
 ---
 ## 🚫 Blocked Features (server / upstream gated)
 Re-run `/_matrix/client/versions` + `unstable_features` after each Synapse upgrade. **Re-checked on 1.157.1 (2026-07-23): no change — all four below are still `false`.** The 1.156.0→1.157.1 delta unblocked nothing (it's a bugfix release; the only feature-bearing release in the gap was 1.156.0, which we were already running).
 - **[BLOCKED] Live Location Sharing** (MSC3489 + MSC3672 both `false`) — real-time GPS beacons over the existing static share.
 - **[BLOCKED] Reaction/Relation Redaction** (MSC3892 `false`) — remove a reaction without redacting the parent; current full-redaction fallback is acceptable.
 - **[DONE 2026-07] Room Preview before joining** (MSC3266) — the client was always built (`JoinBeforeNavigate` → `RoomCard` via `mx.getRoomSummary`). The earlier "blocked" flag was a **misdiagnosis**: it tested `/v1/rooms/{id}/summary` (404), but the SDK calls the _unstable_ `im.nheko.summary/summary/{id}` path, which returns **200** with name/topic/members/join_rule. Verified live after the 1.156 upgrade; also added a join-rule/encryption chip + Request-to-join for knock rooms to the preview card.
 - **[BLOCKED] Thread Subscriptions** (MSC4306 `false`) — "Follow thread" button (depends on the shipped Thread Panel).
 ---
 ## 📖 Reference
 ### Server Capabilities (as of 2026-07)
 - **Homeserver** `matrix.lotusguild.org` · **Synapse** `1.157.1+trixie1` (upgraded 2026-07-23 from **1.156.0** — note the host was found on 1.156.0 while the docs claimed 1.155.0, so **always verify with `dpkg-query -W matrix-synapse-py3`**, don't trust the docs; apt package on Debian 13, LXC 151) · **Matrix spec** up to `v1.12` (Synapse still advertises v1.12; MSC features via `unstable_features`).
 - **MSC ON** (re-dumped live from `/_matrix/client/versions` on 1.157.1): `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` (room summary live at unstable `im.nheko.summary/summary/{id}` — 200; the `/v1/rooms/{id}/summary` path is still 404) · `msc3401_matrix_rtc` · `msc2285.stable` · `msc3827.stable` · `msc3981` · `msc4380.stable` · `msc4445` · `msc2659.stable` · `msc2666` · `msc2432` · `e2e_cross_signing` · `label_based_filtering`. **OFF/blocked:** `msc4306` · `msc3882` · `msc3912` · `msc4155` · `msc3489`/`msc3672` · `msc3892` · `msc4028` · `msc4069` · `msc4108` · `msc3391` · `msc4354` (sticky events — **deliberately off**, see the Matrix 2.0 section above) · `msc4143` (RTC foci — **not a gap**: LiveKit is discovered via `.well-known` `org.matrix.msc4143.rtc_foci`, confirmed live, not this flag).
 - **Dead client code:** Synapse 1.157.0 **removed** `msc3861` (MAS auth delegation) entirely — the ~6 `msc3861`/`msc2965` references in `src/` can never activate against this homeserver (we auth via Authelia `oidc_providers`). Harmless, but cleanup material.
 - **Live endpoints:** Report User (MSC4260) **200** ✅ · Report Room (MSC4151) ✅.
 - **Homeserver access (audits):** Synapse = LXC 151 (`pct exec 151 -- bash`), config `/etc/matrix-synapse/homeserver.yaml`. Web deploy = LXC 106. Voice guard = `voice-limit-guard.py` on LXC 151.
 - **SDK notes:** no arbitrary profile-field methods (use `mx.http.authedRequest()` for MSC4133); js-sdk can't per-room filter `/sync`; sanitizer strips `<math>`/MathML; SW exists at `src/sw.ts`; `getMatrixToRoom()` builds invite URLs; EC audio-inject unblocked via the fork's `io.lotus.inject_audio`.
 ### Key File Reference
 | What                           | File                                                                | Lines               |
 | ------------------------------ | ------------------------------------------------------------------- | ------------------- |
 | Global keydown / room nav      | `hooks/useKeyDown.ts` · `hooks/useRoomNavigate.ts`                  | whole / 19-72       |
 | Room unread counts atom        | `state/room/roomToUnread.ts`                                        | `roomToUnreadAtom`  |
 | Overlay portal provider        | `pages/App.tsx` · `index.html`                                      | 65 / 101            |
 | Room settings tabs             | `features/room-settings/RoomSettings.tsx`                           | 27-56               |
 | State event read/write pattern | `features/common-settings/general/RoomEncryption.tsx`               | 42-52               |
 | Power levels                   | `hooks/usePowerLevels.ts`                                           | whole               |
 | Slash commands                 | `hooks/useCommands.ts`                                              | 140-537             |
 | Chat background picker/defs    | `features/settings/general/General.tsx` · `lotus/chatBackground.ts` | 945-981 / whole     |
 | Matrix.to URL builder          | `plugins/matrix-to.ts`                                              | `getMatrixToRoom()` |
 | Media URL conversion           | `utils/matrix.ts`                                                   | `mxcUrlToHttp()`    |
 | Search pagination / virtual    | `features/message-search/{useMessageSearch,MessageSearch}.tsx`      | 74-121 / 234-365    |
 | Call mic control               | `plugins/call/CallControl.ts`                                       | 206-212             |
 | Knock support check            | `utils/matrix.ts`                                                   | 376-391             |
 | Notification mute push rules   | `hooks/useRoomsNotificationPreferences.ts`                          | 110-150             |
 ### Element Call fork — operational reference
 Fork = `LotusGuild/element-call` (branch `lotus`, upstream base **v0.25.0** since the 2026-09 sync — was v0.20.1); cinny consumes the npm package `@lotusguild/element-call-embedded` (built bundle copied into `public/element-call/`).
 **Toolchain (upstream-driven, accepted 2026-09):** Node ≥ 22.13 (`.node-version` = 24) and **pnpm 11**, installed directly (`npm i -g pnpm@<packageManager version>`, currently 11.21.0) — **not** via `corepack enable`: `matrix-js-sdk` is a git dependency pnpm builds from source, and its own devEngines pins pnpm 11.9.0; a corepack-shimmed pnpm refuses to switch for that nested install and `pnpm install` fails (fork CI run #1854). pnpm 10 rejects the lockfile and Node 20 cannot build. Lint is **oxlint + oxfmt** (upstream dropped eslint/prettier in v0.25.0): `pnpm lint` (tsc + oxlint + knip) and `pnpm format:check` / `pnpm format`. `matrix-js-sdk` is pinned to a `matrix-org/matrix-js-sdk#develop` commit in the lockfile, as upstream ships it. Fork CI (`.gitea/workflows/ci.yml`) hard-gates lint + format + `pnpm test:unit` before build, with `concurrency: cancel-in-progress`.
 **Publish a new version (CI on tag push; needs the `NPM_PUBLISH_TOKEN` org secret):** the published version is derived from the git tag — bump `embedded/web/package.json` (currently `0.25.0-lotus.12`, published by CI; the secret is `NPM_PUBLISH_TOKEN`, names starting `GITEA_` are reserved), push `lotus`, then `git push lotus v0.25.0-lotus.1`; the `publish` job builds and publishes to the Gitea registry. Always push (never delete) the annotated `vX.Y.Z-lotus.N` tag for every published version. Then in cinny bump the `@lotusguild/element-call-embedded` pin (currently `0.25.0-lotus.12`) → `npm install` → build. Manual fallback: `pnpm run build:embedded && cd embedded/web && npm version <ver> --no-git-tag-version && npm publish`.
 **`io.lotus.*` widget actions** (add new toWidget actions to the enum + `LOTUS_TO_WIDGET_ACTIONS` in `src/lotus/lotusActions.ts`; only send AFTER call-join or a 10s timeout fires):
 | Action                       | Dir     | Purpose                                                | Module                |
 | :--------------------------- | :------ | :----------------------------------------------------- | :-------------------- |
 | `io.lotus.call_state`        | EC→host | speaker/mute/camera stream (`lotusCallState=1`)        | `lotusCallState.ts`   |
 | `io.lotus.focus_participant` | host→EC | spotlight (works during screenshare)                   | `lotusFocus.ts`       |
 | `io.lotus.inject_audio`      | host→EC | soundboard clip mixed into call (`lotusAudioInject=1`) | `lotusAudioInject.ts` |
 | `io.lotus.set_quality`       | host→EC | audio/screenshare bitrate/fps caps                     | `lotusQuality.ts`     |
 | `io.lotus.decorations`       | host→EC | in-call avatar decorations                             | `lotusDecorations.ts` |
 | `io.lotus.set_deafen`        | host→EC | LiveKit-source deafen (P6-2)                           | `lotusDeafen.ts`      |
 Also flag-gated: `lotusTransparent`/`lotusTheme`, `lotusDenoiseSource=1` (in-source ML denoise).
 ### CI/CD + per-feature checklist
 ```
 edit → commit → git push origin lotus
 → Gitea Actions (.gitea/workflows/ci.yml): npm ci → build + npm test + tsc + eslint + prettier (ALL hard gates) → audit + bundle-size (informational)
 → lotus_deploy.sh on LXC 106 polls the "Build & Quality Checks" status → npm ci && npm run build → rsync → live (~11 min)
   (a push that lands while a deploy is mid-build is queued and deployed right after — matrix@b6ea4a3; before that it was dropped)
 ```
 Before marking a feature complete: `npx tsc --noEmit` (0 errors) · `npx eslint src/` (0 new) · `npx prettier --check src/` · `npm test` (Node runner via tsx, hard CI gate — colocated `*.test.ts`) · update `README.md`/`landing/index.html` for Lotus-custom features · visually verify on `chat.lotusguild.org`.
 **CI hardening (2026-07, reviewed):**
 - [x] **Concurrency** — `cancel-in-progress` on cinny `ci.yml` and cinny-desktop `release.yml` (`386a2979` / `c5461ce`): a superseded lotus push cancels its in-flight web CI and collapses queued ~30-min Tauri desktop builds to just the newest. Safe for deploys because `lotus_deploy.sh` now **follows origin/lotus HEAD** each poll iteration + resets to the gated SHA (`matrix` `c15a489`) — closes the latched-SHA freeze race.
 - [x] **Hard quality gates** — typecheck/eslint/prettier promoted from `continue-on-error` to blocking (tree held clean). eslint gates on errors only; `no-explicit-any` warnings stay informational.
 **CI follow-ups (open):**
 **CI follow-ups** are tracked in the `matrix` repo: [#8](https://code.lotusguild.org/LotusGuild/matrix/issues/8) dedicated `desktop-linux` runner, [#9](https://code.lotusguild.org/LotusGuild/matrix/issues/9) debounce the desktop trigger, [#10](https://code.lotusguild.org/LotusGuild/matrix/issues/10) verify Gitea `concurrency`. Build-once/deploy-the-artifact was considered and deferred (noted on #8).
@@ -1,582 +1,77 @@
-# Lotus Chat — Manual Testing Guide
+# Lotus Chat — Testing
-**Generated:** June 2026
+> **Manual QA checklists no longer live here.** Every shipped-but-unverified behaviour is a Gitea issue labelled **`qa`** — cinny milestone [Manual QA backlog](https://code.lotusguild.org/LotusGuild/cinny/milestones), cinny-desktop milestone [Desktop QA backlog](https://code.lotusguild.org/LotusGuild/cinny-desktop/milestones). Each issue carries the full steps + expected results; tick items as they pass, comment on FAIL (what you saw vs expected, browser/OS, web vs desktop, theme, console errors), close when green. Migrated from this file on 2026-09-17 (full text in git history).
 **Scope:** Everything landed on the `lotus` branch since the v4.12.3 merge that I (Claude) could **not** verify statically and that needs a human in a real environment to confirm. Work through it top-to-bottom; the highest-risk / hardest-to-reproduce items are first.
-> **How to report back:** For each numbered check, tell me **PASS** / **FAIL** (or **partial**). On any FAIL, include: what you saw vs. expected, the browser/OS (and whether web LXC 106 or the desktop/Tauri build), the theme you were on, and any **browser console** errors (F12 → Console). Screenshots help for anything visual.
+This file keeps what a contributor needs to run and extend the **automated** coverage, plus the ops tip at the bottom.
 ## Environment notes
- You push from your own machine; these commits are local on `lotus` until you do.
+- Test the **web** build (`chat.lotusguild.org`, LXC 106) first; re-run call + poll items on the **desktop (Tauri)** build too, since CSP and the EC iframe behave differently there.
- Test the **web** build (LXC 106 / `code.lotusguild.org`) first; re-run the **call** + **poll** sections on the **desktop (Tauri)** build too, since CSP and the EC iframe behave differently there.
+- Several call checks need a **second participant** (marked **👥 2 people** in the issues); a couple need a third room/call in parallel (**👥👥**).
 - Several call features need a **second participant** (second account on another device/browser, or a colleague). Items that need this are marked **👥 2 people**.
 - A couple of call items need a **third room/call** in parallel — marked **👥👥**.
 ---
-## Commits covered
+## Local dev environment — drive the real UI against a throwaway homeserver
-| Commit     | Area                                                                         |
+```
-| :--------- | :--------------------------------------------------------------------------- |
+scripts/dev-homeserver.sh start     # Synapse in .dev-homeserver/ (venv, SQLite), open registration, no rate limits, :8008
-| `caf6318a` | Poll vote buttons → folds tokens (N4)                                        |
+python3 scripts/dev-seed.py 400     # alice + bob, "Busy Room": 400 messages, an image every 10th
-| `c67aed01` | In-call incoming-call banner (#4b)                                           |
+npm start                           # Vite on :5173
-| `4a875884` | Selectable ringtone (#4a)                                                    |
+```
-| `0394fce9` | EC iframe load watchdog + recovery UI; avatar decorations on call tiles (#3) |
+
-| `d2946c00` | Upload retry/backoff, presence-on-unload, typed m.direct                     |
+**Calls too:** `scripts/dev-homeserver.sh calls` adds a LiveKit SFU, a JWT issuer, the real `voice-limit-guard` from the `matrix` checkout and an https well-known — real two-party calls in headless Chromium with fake mic/camera (`--use-fake-device-for-media-stream`, `--use-file-for-fake-audio-capture=<tone.wav>` to trigger speaking detection, `--auto-select-desktop-capture-source="Entire screen"` for screenshare; `ignoreHTTPSErrors: true`). This is how #29, #161, #173/#174 and the guard's live-revoke bug were found and fixed on 2026-09-18.
-| `b7e1f89c` | Timeline/composer/emoji perf memoization                                     |
+
-| `c0f98672` | Upstream **Element Call 0.20.1** merge (regression sweep)                    |
+Log in at `http://127.0.0.1:5173/login/http%3A%2F%2Flocalhost%3A8008/` as `alice` / `password123` (bob is the second participant; both can also be driven over the client API with their tokens). Playwright is installed (`npm run test:e2e:install`), so a scripted reproduction is `node` + `chromium.launch()` against `:5173` — this is how Gitea #163 was reproduced and its fix verified in both plain and encrypted rooms. `scripts/dev-homeserver.sh reset` wipes the database; `stop` shuts it down.
 ## Automated coverage map — what the unit tests already pin (2026-07)
 **Read this before working a `qa` issue.** Much of the _logic_ the manual checks were written to catch is now locked by deterministic unit tests (`npm test`, 920+ cases, green in CI). Unit tests do **not** prove visual rendering, real-call behavior, the desktop build, E2EE, or cross-device sync — those still need a human. But where a decision is pure logic, you can **trust the test and spend your manual time on the human-only part**. For each row below, the middle column is "don't bother re-deriving this by hand"; the right column is "this is what your manual pass is actually for."
 | QA item                                    | Logic **pinned by a unit test** (trust it)                                                                                                                                                                                                                                            | What still needs **you** (manual)                                                                                          |
 | :----------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------- |
 | **A1** ringtone previews                   | `callSounds.test.ts` — each style's synthesized melody (chime/soft/retro), click-free gain ramps, context unlock/reuse, unknown = no-op                                                                                                                                               | that it's actually **audible** + the WebAudio first-gesture caveat                                                         |
 | **A2** ringtone persist/fallback           | `settings.test.ts` — unknown `ringtoneId` → default, malformed JSON → defaults, merge-over-defaults (this **is** A2 step 3)                                                                                                                                                           | the dropdown shows the persisted value after reload (trivial glance)                                                       |
 | **B2/B3** poll voting                      | `poll.test.ts` (18) — vote tally, latest-per-sender, multi-select, cleared/re-vote, winners, results-visible, single-vs-multi validation                                                                                                                                              | **visual** only: borders, radio-vs-checkbox, progress-bar fill, on each theme                                              |
 | **O2/P4-1** thread notifications           | `threadNotifications.test.ts` (32) — the **entire** notify decision (participating default, All/Mentions/Mute, @mention+highlight override, room-mute trumps), mode-map + muted-badge hygiene                                                                                         | live **2-person** delivery + sound + **cross-device** account-data sync                                                    |
 | **O3** math / LaTeX                        | `mathParse.test.ts` (14) — inline `$…$`, block `$$…$$`, **currency guard** (`$5 and $10`), escaped/unbalanced stay text, adjacency rules                                                                                                                                              | KaTeX **renders** visually + lazy-chunk load; code-block-literal is the markdown pipeline                                  |
 | **O4/P4-8** encrypted search cache         | `searchCache.test.ts` — the pure helpers `mergeSearchResults` (merge/dedupe/sort) + `computeCoverage` (window widening) + resilient-when-IDB-absent. **The IDB round-trip test is `skip`ped under `npm test`** (node has no IndexedDB), so it runs only in a browser-like env, not CI | the actual IndexedDB persist-across-**reload**, Clear button, **logout wipe** (integration — and the round-trip itself)    |
 | **M1** `has:image/file/video`              | `useMessageSearch.test.ts` — `filterGroupsByMsgType` union filter, drops empty groups, ignores non-string msgtype                                                                                                                                                                     | the chips render + compose with room/sender/date filters                                                                   |
 | **M4** pinned-only filter                  | `useMessageSearch.test.ts` — `filterGroupsByPinned` keeps pinned, drops empty                                                                                                                                                                                                         | chip renders; needs a room with actual pins                                                                                |
 | **M2** recent searches                     | `recentSearches.test.ts` (6) — prepend, dedupe+move-to-front, trim, ignore-empty, cap-at-10                                                                                                                                                                                           | chips render/click-re-run; persistence across refresh                                                                      |
 | **Retention** (disappearing msgs)          | `retention.test.ts` — `isExpired` window math (strict boundary), disabled = never, preset monotonicity                                                                                                                                                                                | the timeline **hide** + self-**redact** integration; Synapse-side purge                                                    |
 | **O5/N97a** session hardening              | `sessions.test.ts` (22) — blob migration, legacy-key coercion, dual-write blob↔legacy sync, corrupt/partial-blob fallback, token-refresh, AND the `subscribeSessionChanges` storage-event logic (fires on session/null, ignores unrelated keys)                                       | the real **cross-tab** logout _behavior_ end-to-end (two live tabs)                                                        |
 | **Q1/Q2** embeds (URL→player)              | `videoEmbed.test.ts` (26) — every provider's URL→`{provider, kind, embedUrl, height}` parse (incl. Mixcloud/Deezer, TikTok, reserved-path guards)                                                                                                                                     | the click-to-play **facade**, no-network-until-Play, the **CSP** (esp. desktop), visuals                                   |
 | **Seasonal theme resolution** (part of F2) | `seasonSchedule.test.ts` — `resolveSeasonTheme` (off→none, auto→active season, pinned→that) + `getActiveSeason` priority/boundary days. **NB: this pins _which_ theme shows for a date, NOT F2's background↔seasonal mutual exclusion** — that write-side logic is untested           | all of **F2**: the picker actually clearing the _other_ setting live, and the overlay suppression when a background is set |
 Everything else in the guide (calls, screen readers, desktop/Tauri, chat backgrounds, animated visuals, PWA install, real E2EE) is genuinely manual — no unit test substitutes for it. Items already verified live were dropped when the checklists moved to issues.
 ---
-## A. Calls — new ringtone + notification work (highest priority)
+## Playwright smoke test (Gitea #90) — `npm run test:e2e`
-### A1. Ringtone selection — preview in Settings
+Browser-level smoke tests under `e2e/` (config: `playwright.config.ts`). They boot the **built** `dist/` through `vite preview` on port 4173, so run `npm run build` first (one-time: `npm run test:e2e:install` downloads the pinned Chromium). Three tiers:
-**Steps**
+| Tier                              | File                           | When it runs                                                                                                                                                                                      | What it proves                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | :-------------------------------- | :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Boot** (always)                 | `e2e/boot.spec.ts`             | every CI run (`e2e` job in `.gitea/workflows/ci.yml`) and locally                                                                                                                                 | login page renders with `#root` populated and **no** `pageerror` / unexpected `console.error` (allowlist in `e2e/helpers.ts`: the README's avatar-thumbnail 404, the login page's `POST /register` 401 probe, offline discovery), `sw.js` is served and registers, bundled Element Call mounts in a frame with every `/public/element-call/` asset returning 200                                                                                                                                                                                                                                               |
 | **E2EE composer** (gated)         | `e2e/e2ee-composer.spec.ts`    | only when `E2E_HOMESERVER`, `E2E_USER`, `E2E_PASSWORD` are all set                                                                                                                                | password login → `/home/create/` with the End-to-End Encryption switch on (asserts `createRoom` carries `m.room.encryption`) → text message renders → attach a generated JPEG with "Compress image before uploading" ticked, image renders → every `PUT …/rooms/*/send/*` was `m.room.encrypted` with `ciphertext` and no plaintext `body` / `url` / `file` / `mxc://`                                                                                                                                                                                                                                         |
 | **Local homeserver** (Gitea #220) | `e2e/local-homeserver.spec.ts` | when a Synapse answers at `E2E_LOCAL_HS` (default `http://localhost:8008`); the CI `e2e` job starts one with `scripts/dev-homeserver.sh start` + `dev-seed.py`, locally run the same two commands | registers its own `e2e_alice_*`/`e2e_bob_*` users and rooms over the CS API, then drives the built client: login + send/receive, own message scrolls into view (#212), `/kick` failure toast (#216), upload 413 sentence (#213), forward provenance header, thread panel + drawer at 1400 px (#218), timeline image → gallery lightbox (#219), clock-skew banner via `page.clock` (#158), status save under the presence rate limit (#226), long-press action sheet on a Pixel 7 emulation (#166). Helpers in `e2e/localHs.ts`; add a test here whenever a fix was reproduced with a scratch Playwright script |
-1. Open **Settings → General**, scroll to the **Calls** section.
+**Accessibility gate** (Gitea #222): `e2e/a11y.spec.ts` runs `@axe-core/playwright` (WCAG 2.x A/AA tags) over the login page, room timeline + composer, message options menu, thread panel, user settings and room settings, and fails on any **critical/serious** finding except `color-contrast` (reported in the log, not gated — generated avatar colours and portal false positives). It also keeps accessibility-tree snapshots (`e2e/a11y.spec.ts-snapshots/*.aria.yml`) of the composer, message menu, thread panel and settings nav, so a lost name/role/live-region shows as a diff; update them deliberately with `npx playwright test e2e/a11y --update-snapshots` and keep dynamic bits as regexes. A real NVDA/VoiceOver pass is still manual.
 2. Find the new **Ringtone** dropdown (just above **Ringtone Volume**).
 3. Select each option in turn: **Classic, Chime, Soft, Retro, Silent**.
-**Expected**
+**Browsers** (Gitea #221): everything runs under Chromium; the tests tagged `@webkit` (boot, login + send/receive, thread panel, lightbox) also run under Playwright's WebKit as desktop Safari, and those tagged `@ios` under the `iPhone 14` descriptor — the closest CI gets to Safari/iOS. It catches WebKit-only breakage (CSS, `dvh`, IndexedDB, media decode) but does not emulate the on-screen keyboard or Home-Screen install; a real iPhone pass (#166/#199) stays manual. Locally: `npx playwright install --with-deps webkit` once, then `npx playwright test --project=webkit --project=iphone`. WebKit words handled fetch failures as page errors (`TypeError: Load failed`, `due to access control checks`), so the allowlist in `e2e/helpers.ts` applies to page errors too.
- Selecting **Classic** plays the existing `call.ogg` clip (cut off after a few seconds).
+**CI secrets** (Gitea → repo → Settings → Actions → Secrets; the `e2e` job forwards them via `env:`; until they exist the E2EE tier reports `skipped`, the boot tier still runs):
 - **Chime / Soft / Retro** each play a short, distinct synthesized preview.
 - **Silent** plays nothing.
 - Changing **Ringtone Volume** then re-selecting a ringtone previews at the new volume.
 - No console errors.
-> ⚠️ **Known browser limitation:** the synthesized tones use WebAudio. If a preview is ever silent, click anywhere on the page once (a "user gesture") and retry — browsers suspend audio until the page has been interacted with. The Settings preview is _after_ a click so it should always sound; this note matters more for A3.
+- `E2E_HOMESERVER` — server name as typed on the login page (e.g. `matrix.example.org`). Must offer `m.login.password`; a next-gen-auth (MAS/OIDC-issuer) server shows only the OIDC button and the tier will fail at the username field.
 - `E2E_USER` / `E2E_PASSWORD` — a **throwaway** account: each run logs in as a new device and creates a new `e2e-smoke-<timestamp>` room. Prune devices/rooms occasionally.
-### A2. Ringtone selection persists
+The `e2e` job is `continue-on-error: true` for now because `playwright install --with-deps` needs `apt` on the runner image — promote it to a hard gate once it is green on the runner. Locally: `npm run test:e2e` (boot tier only), or `E2E_HOMESERVER=… E2E_USER=… E2E_PASSWORD=… npm run test:e2e` for both; on failure look in `test-results/` (screenshot + trace) and `playwright-report/`.
 1. Set Ringtone to **Retro**, reload the app.
 2. **Expected:** the dropdown still shows **Retro** (setting persisted).
 3. Bonus: in devtools, set `localStorage.settings` to a bogus `ringtoneId` and reload → it should fall back to **Classic**, not break.
 ### A3. Incoming call uses the selected ringtone — 👥 2 people
 **Setup:** Account A (you) and Account B in a **DM** or a **private (invite-only) group** room.
 1. As A, pick a non-silent ringtone (e.g. **Chime**).
 2. From B, **start a call** in that DM/room. Do **not** answer on A.
 **Expected on A**
 - The full-screen **Incoming Call** dialog appears (caller name, room avatar, Answer / Reject).
 - The **selected ringtone loops** until you answer/reject/ignore (at the set volume).
 - Answer → joins the call. Reject (DM) / Ignore (group) → dialog dismisses and ring stops.
 - Set ringtone to **Silent** and repeat → dialog still appears, **no sound**.
 ### A4. In-call banner for a second incoming call — 👥👥 (the trickiest one)
 **Setup:** You (A) already **in a call** in Room 1. Account B can call you in a **different** Room 2 (a DM or private group you share). Ideally a third account C, or B leaves Room 1's call first.
 1. While A is **actively in Room 1's call**, trigger an incoming call to A from **Room 2**.
 **Expected on A**
 - **No** full-screen takeover. Instead a **compact banner appears in the top-right corner** with the caller's avatar, room name, "Incoming voice/video call", and **Answer / Reject (or Ignore)** buttons.
 - It plays a **single soft ping**, _not_ a looping ring (so it doesn't talk over your active call).
 - The banner does **not** cover your active call's controls/PiP in a way that blocks them.
 - **Answer** → switches you into Room 2's call. **Reject/Ignore** → banner disappears.
 - The banner auto-dismisses if the caller hangs up / the call times out.
 **Also verify the no-op case:** while in Room 1's call, if a notification for **Room 1 itself** arrives, **nothing** should pop up (no banner, no dialog).
 ### A5. Camera focus during screenshare (#1) — 👥 2 people
 **Setup:** You (A) and B in a call; B (or another participant) **sharing their screen**, and at least one person with **camera on**.
 1. As A, open the **participant glance** (the stacked avatars / member list for the call) and click a participant who has their **camera on**.
 2. In the menu, click **"Focus camera"**.
 **Expected**
 - The view switches to **spotlight** and **pins that person's camera tile**, overriding the auto-spotlighted screenshare.
 - It **stays** on that camera (doesn't immediately snap back to the screenshare).
 - If you pick someone with their camera **off**, it should at worst just toggle spotlight (graceful fallback), not error.
 ### A6. Avatar decorations on call tiles (#3) — 👥 2 people
 **Setup:** A participant in the call has an **avatar decoration** set (Settings → Profile decoration).
 1. Join a call with that participant.
 2. Look at **our** participant roster / prescreen tiles (not the avatars rendered inside the Element Call video grid — those are EC's and out of scope).
 **Expected:** the decoration ring/overlay renders around that participant's avatar on the call tile, the same way it does in member lists.
 ### A7. EC iframe load watchdog + recovery UI (#EC, N96)
 This guards against a permanently-stuck "Loading…" call. Also covers the N96 button-label fix (the old "Retry" and "Leave" buttons were identical — now there is a single **"Back"** button).
 1. Normal case: **join a call** → it should connect within a few seconds as usual (the watchdog stays invisible).
 2. Failure case (best-effort to reproduce): throttle your network hard (devtools → Network → Offline) **right as** you click join, or block the Element Call origin, so the iframe can't finish loading.
 **Expected**
 - On a genuine failure/timeout (~25s), instead of an endless spinner you get a **visible error overlay with a single "Back" button** (the old "Retry" + "Leave" pair is gone — they did the same thing and "Retry" was misleading).
 - Clicking **Back** returns you to the call prescreen, where you can manually click Join to try again.
 - Normal joins must **not** trigger the error overlay (no false positives) — this is the important part to confirm.
 - **Self-heal:** if the error overlay appears on a slow network but EC then finishes loading anyway, the overlay should **dismiss itself** and drop you into the live call. Worth confirming on a deliberately throttled-but-not-blocked connection.
 ---
 ## B. Polls (N4) — render correctly on non-TDS themes
 This was the actual bug: poll buttons used undefined CSS variables, so on the **default (non-Lotus-Terminal) themes** they rendered with invisible borders / no selected state.
 ### B1. Poll renders on a default theme — ✅ PASS
 1. Switch to a **default Cinny theme** (Settings → Appearance — **not** Lotus Terminal / TDS). Test both a **dark** and a **light** theme.
 2. In any room, create a poll (composer → poll button): a **single-choice** poll with 3 options.
 **Expected**
 - Each option is a clearly **bordered** button with visible rounded corners.
 - A **radio circle** indicator is visible on the left of each option.
 - Text, and (after votes) the percentage, are legible.
 ### B2. Voting + selected/progress state
 1. **Vote** on an option.
   **Expected**
 - The selected option shows a **filled accent border + filled radio**, and an **accent progress-bar fill** grows behind it proportional to the vote %.
 - The percentage and total vote count update.
 - Click again / pick another option → selection moves correctly (single-choice replaces; the bar redraws).
 ### B3. Multiple-choice poll
 1. Create a poll allowing **multiple selections**.
   **Expected**
 - Indicators are **square checkboxes** (not circles); selected ones show a **✓** that's legible against the filled box.
 - You can select **several** options; each shows its own progress fill.
 ### B4. Lotus Terminal theme regression — ✅ PASS
 1. Switch to **Lotus Terminal / TDS** theme and re-open a poll.
   **Expected:** still looks correct (the fix uses theme tokens, so the TDS accent should now drive it) — no worse than before.
 ---
-## C. Robustness / background behavior
+### Green CI but the fix isn't live?
-### C1. Presence updates on tab close
+`curl -s https://chat.lotusguild.org/index.html | grep -o 'assets/index-[^"]*\.js'` gives the deployed entry chunk; grep it for a string unique to your change (`curl -s https://chat.lotusguild.org/<that path> | grep -c <string>`). If it's 0 after ~15 min, the deploy trigger was lost — push again (any commit) to re-fire the `lotus-deploy` webhook. The deploy log lives at `/var/log/lotus-deploy.log` on LXC 106.
 1. Open the app, then **close the tab** (or quit the browser).
 2. From another session/device, check your **presence** shortly after.
   **Expected:** you go **offline/away** reliably (the unload now uses `fetch({keepalive})`). Previously this could be missed.
 ### C2. Upload retry on flaky network (best-effort)
 1. In devtools → Network, set a throttle that drops/slows requests, or toggle Offline briefly **during** a file upload.
   **Expected**
 - A transient failure **retries** (up to 3×, with backoff) and the upload can still succeed once the network recovers.
 - A genuine, permanent rejection (e.g. file too large / 4xx) still **fails fast** with the usual error — it should **not** spin retrying.
 ### C3. General timeline/composer perf (no functional regression)
 The memoization changes are invisible if correct. Just confirm **nothing broke**:
 - Open a busy room; scrolling, jump-to-latest, mark-as-read all still work.
 - Composer: send a message, upload a file, share a location, pick an emoji and a sticker — all still work.
 ---
 ## D. Element Call 0.20.1 merge — regression sweep (👥 2 people)
 The upstream bump changed EC's internals and DOM selectors; our call controls drive that iframe, so sweep them. In a live call with 2 people, confirm **each** of our control-bar buttons works:
 - [ ] **Mic** mute/unmute (icon + actual audio)
 - [ ] **Camera** on/off
 - [ ] **Deafen / Sound** toggle (your deafen key too)
 - [ ] **Screenshare** start/stop (and the "Share your screen?" confirm)
 - [ ] **Screenshare audio** mute toggle
 - [ ] **Fullscreen** toggle
 - [ ] **⋮ More** menu → **Spotlight/Grid**, **Reactions**, **Settings** each open the right EC panel
 - [ ] **End** call leaves cleanly
 - [ ] **PTT** (push-to-talk) if enabled: hold key = transmit, release = mute; releasing on blur works
 - [ ] **AFK auto-mute** if enabled: goes muted after the timeout
 - [ ] **PiP** (picture-in-picture) mini window: drag, resize, fullscreen button, return-to-call; the "You muted" / "All muted" badges show on the right person
 - [ ] **Denoise** (if ML noise suppression enabled): call audio still flows, no silence
 If any control does nothing, that usually means an EC DOM selector changed — capture the console and tell me which button.
 ---
 ## D2. Element Call **fork** — Phase 2 feature sweep (👥 2 people) — `0.20.1-lotus.1`
 > The whole EC iframe is now our **self-built fork** (`@lotusguild/element-call-embedded@0.20.1-lotus.1`).
 > Five features are **active** (the host sets their flags / sends their actions); two ship **dormant**.
 > **Confirm you're on the fork first:** EC iframe console prints `Element Call embedded-v0.20.1-lotus.1`
 > (the old build prints `embedded-v0.20.1`). If it says the old version, the web deploy hasn't landed —
 > the fork features won't be present, so don't test D2 yet.
 > For non-dev testers, each item below also states the plain "✅ good if / ❌ tell us if" outcome.
 ### D2-1. Denoise **in-source** — survives reconnect (fixes A7) ⭐ highest risk (everyone's mic)
 Flag: cinny sets `lotusDenoiseSource=1` when ML denoise is selected (the old build-time getUserMedia
 shim is **removed**). This is the single change with the widest blast radius — test deliberately.
 - [ ] **Audio flows, no silence** with ML denoise on (baseline, also §D line 204).
 - [ ] **Reconnect (the A7 fix):** in a call with ML denoise on, kill network ~10 s (devtools → Offline)
      so EC shows "Connection lost / Reconnect", then restore. **Mic still works AND still denoised**
      afterward, **without** End+rejoin. _(This is the exact bug that was reintroduced then fixed; if it
      regresses, mic dies on every reconnect.)_
 - [ ] **Mic device switch mid-call** (Settings → change microphone): audio keeps working (same
      `restart()` path as reconnect).
 - [ ] **Mute → unmute** a few times: audio returns each time.
 - [ ] **Each model** if the picker offers them: `rnnoise` (default), `speex`, `dtln`, `deepfilternet` —
      each loads + denoises, no silence. (All four are in-source now; DTLN runs at 16 kHz, others 48 kHz.)
 - [ ] **No double-processing:** audio isn't over-suppressed/artifacted (would mean the old shim is still
      injected alongside the in-source engine).
 - **Rollback if bad for everyone:** revert the cinny deploy commit (restores the shim + `@element-hq` parity).
 ### D2-2. Speaking + mute indicators from widget **events** (#2)
 Flag: `lotusCallState=1`. cinny now reads speaker/mute state from `io.lotus.call_state` events instead of
 scraping EC's DOM (DOM fallback retained). Overlaps **G1**.
 - [ ] **Speaking glow** lights the **correct** person when they talk (you, then your friend).
 - [ ] **PiP "All muted" / "You muted" badge** points at the right person and updates on mute/unmute.
 ### D2-3. Focus camera **during a screenshare** (#4 / A5)
 Action: cinny sends `io.lotus.focus_participant` (the DOM `.click()` hack is gone). Overlaps **A5 / G2**.
 - [ ] Person A screenshares; Person B camera on; **MemberGlance → Focus camera** on B → B's camera is
      spotlighted **alongside/over** the shared screen (not ignored).
 - [ ] Camera-**off** target = graceful (no error, no kick out of the screenshare).
 ### D2-4. In-call avatar decorations (#6) — **NEW, beyond A6**
 Action: cinny pushes `io.lotus.decorations`. **A6 only covered the lobby roster** and called in-call EC
 tiles out of scope — that's now in scope.
 - [ ] A participant with a **Profile decoration** joins **camera off** → the decoration ring renders on
      their **in-call video-tile avatar** (inside EC, not just the lobby), correctly sized/positioned.
 - [ ] Decoration tracks the right person across grid/spotlight layout changes; disappears when they leave.
 ### D2-5. Native transparent background (#5)
 Flag: `lotusTransparent=1` (native, replacing the injected `background:none !important`).
 - [ ] Call background looks right — host wallpaper/surface shows through; **no** black box, bad
      see-through, or layout breakage (also covered loosely by §D2 "looks right").
 ### D2-7. In-Call Soundboard (#3 / P5-15) — 👥 2 people — **NEW**
 Flag: `lotusAudioInject=1`. A 🔔 **Soundboard** button now sits in the call controls bar (left group,
 next to the chat button). Clips are user-uploadable and sync across your devices like emoji packs.
 _Prereq:_ Settings → General → Calls → **Soundboard** must be ON (default on).
 - [ ] **Upload:** open the soundboard popout → **Upload** → pick a short audio file (mp3/ogg/wav, ≤ 1 MB).
      It appears as a clip tile. (Too-big / too-many shows an error, doesn't crash.)
 - [ ] **Plays into the call:** with a second person in the call, click a clip. **They hear it**, and
      **you hear it locally** too. ✅ good if both hear it; ❌ tell us if only one side does.
 - [ ] **Sync:** the uploaded clip shows up on your **other device**/session (account-data sync).
 - [ ] **Delete:** the ✕ on a tile removes it (everywhere, after sync).
 - [ ] **Off switch:** turn Settings → Calls → **Soundboard** off → the call-bar button disappears.
 - [ ] Injecting a clip does **not** mute/interrupt your mic or anyone else's audio.
 ### D2-8. Call Quality Controls (#7 / P5-31) — 👥 2 people — **NEW**
 Action: `io.lotus.set_quality`. User settings in **Settings → General → Calls** (Microphone Bitrate,
 Screenshare Bitrate, Screenshare Framerate; all default **Auto**). Admin caps in **Room Settings →
 General → Voice → Call Quality Caps**.
 - [ ] **No regression at Auto:** with everything on **Auto**, calls/screenshare work exactly as before.
 - [ ] **User cap takes effect:** set Microphone Bitrate to **32 kbps**, rejoin/continue a call — audio
      still flows (thinner is fine). Set Screenshare Framerate to **15 fps** and share your screen — it
      still shares. ❌ tell us if any setting kills audio/screenshare.
 - [ ] **Applies mid-call:** changing a setting **during** a call takes effect without End+rejoin.
 - [ ] **Room-admin cap (admin needed):** as a room admin, set **Max Microphone Bitrate = 64 kbps** in
      Room Settings → Voice. A member whose user setting is higher (e.g. 256) should be **clamped to 64**
      (best-effort/UX — this is client-side; hard server enforcement is a separate follow-up).
 - [ ] Resetting a setting back to **Auto** removes the cap for the rest of the call.
 > Soundboard + quality are no longer "dormant" — if either does nothing, grab the **EC iframe console**
 > and check for `io.lotus.inject_audio` / `io.lotus.set_quality` rejections.
 ### D2-9. Call Permissions — HARD server-side, cross-client (👥 2 people, admin) — **NEW**
 This is enforced by the `voice-limit-guard` on the server (re-signs the LiveKit JWT), so it applies to
 **every** client, not just Lotus Chat. Set in **Room Settings → General → Voice → Call Permissions**.
 _(Requires the guard deployed on LXC 151 — auto-deploys on a `matrix` repo push.)_
 - [ ] **Disable screenshare:** as admin, turn **Allow Screen Sharing** off. In a call, the
      **screenshare button disappears** in Lotus Chat. ✅ good if no one can screenshare.
 - [ ] **Cross-client (the important one):** have someone join the **same room from stock Element / Element
      X** and try to screenshare → the server **refuses** the track (it won't publish). This proves it's
      not just our client hiding a button.
 - [ ] **Audio-only room:** turn **Allow Camera** off too → the camera button disappears and cameras are
      server-blocked for all clients; **microphones still work**.
 - [ ] **⭐ Live kill (mid-call):** while someone is **actively screensharing**, an admin turns **Allow
      Screen Sharing** off. Within a few seconds their screenshare should **stop for everyone** on its own
      (no rejoin needed) — this is the server reconcile loop revoking it live. Works even if the sharer is
      on stock Element. ✅ good if the share drops within ~3–5 s; ❌ tell us if it keeps going.
 - [ ] **Turning it back on** restores the ability to screenshare/camera (start a new share).
 - [ ] **No policy = no change:** a room with Call Permissions left on defaults behaves exactly as before.
 > If any D2 item fails, grab the **EC iframe console** (right-click the call → inspect the iframe) — a
 > widget-action/payload mismatch shows up there as a `io.lotus.*` rejection or a `MissingKey`/transport log.
 ---
 # Backlog of previously-fixed-but-unverified items
 > Sections A–D above are **this session's** work. Everything below was fixed in earlier waves and is still flagged **⚠️ UNTESTED** in `LOTUS_BUGS.md` / `LOTUS_TODO.md`. They're grouped by what kind of environment you need (mobile, desktop, screen reader, etc.) so you can knock out a whole category at once. None of these are urgent the way A–D are; do them as you have the right device handy.
 ## E. Mobile / responsive (needs a real phone, or devtools device emulation)
 ### E1. Composer toolbar touch targets (#7)
 On a phone, open a room and the composer toolbar. Tap each button (attach, format, sticker, emoji, GIF, location, poll, schedule, send).
 **Expected:** every button is comfortably tappable (≥44×44px), no mis-taps hitting the wrong icon.
 ### E2. Room Settings — no horizontal overflow (#8)
 On a narrow phone screen, open **Room Settings**.
 **Expected:** the settings nav panel fills the full width; **no** horizontal scrollbar / sideways scrolling anywhere in the panel.
 ### E3. Modals go fullscreen on mobile (#9)
 On a phone, open several dialogs: Leave Room, Create Room, Create Space, Invite User, Report (room/user/message), Edit History, Forward Message, Remind Me, Schedule Message, Device Verification, Poll Creator.
 **Expected:** each opens **fullscreen** (no floating box, no rounded corners / max-width margins). On desktop the same modals should still be the normal centered boxes.
 ### E4. Composer not hidden by the keyboard (#10) — iOS Safari especially
 On a phone (priority: **iOS Safari**), tap into the composer so the on-screen keyboard appears.
 **Expected:** the composer input stays **visible above** the keyboard; the layout shrinks rather than the composer sliding under the keyboard.
 ### E5. Mobile "Saved Messages" access (Mobile Bookmarks)
 On a phone, **inside a room**, open the room header **··· More Options** menu.
 **Expected:** a **"Saved Messages"** item is present; tapping it opens the bookmarks panel. (This was the only in-room access point missing on mobile.)
 ---
 ## F. Visual / theming
 ### F1. Animated chat background — no flicker (#2)
 Settings → set an **animated** chat background (e.g. anim-rain / anim-aurora / anim-stars). Watch the message text and composer while it animates.
 **Expected:** smooth animation, **no flickering / shimmering** on message text or the composer, especially after scrolling. Note your GPU/browser if you see artifacts.
 ### F2. Background vs. Seasonal theme are mutually exclusive (#6)
 In Settings → Appearance:
 1. Pick a **chat background** → confirm any **seasonal theme** auto-switches off.
 2. Pick a **seasonal theme** → confirm the **chat background** auto-clears to none.
 3. (Edge) If you have old data with both set, after reload only one should visibly apply (no double-overlay clutter).
 ### F3. Background / seasonal picker grid layout (N81)
 In Settings → Appearance, look at the **Chat Background** and **Seasonal Theme** swatch grids; resize the window narrow→wide.
 **Expected:** swatches reflow to fill each row evenly (responsive grid), with no lopsided/orphaned last row at any width.
 ---
 ## G. Calls — additional unverified (👥 2 people)
 ### G1. PiP mute badges point at the right person (#12)
 In a call with at least one other person, pop out the **Picture-in-Picture** mini window.
 - **You** mute your own mic → a **"You"/muted badge appears bottom-left** (your status).
 - A **remote** participant (or all of them) mutes → an **"All muted"** badge appears **top-right** (clearly about other people).
  **Expected:** the bottom-left badge is **never** triggered by someone else muting — that was the original bug (it looked like your own mic was muted when it wasn't).
 ### G2. Full-screen camera broadcasts
 1. In a **camera-only** call (no screenshare), confirm the **Fullscreen** button is available (previously only showed during screenshare).
 2. Use **MemberGlance → Focus camera** to full-screen/spotlight a specific person's camera. (Overlaps **A5**; if you've done A5 you can skip.)
 ### G3. PTT badge renders on all themes (N53)
 Enable **Push-to-talk** (Settings → Calls) and join a call. Hold the PTT key.
 **Expected:** the floating PTT badge above the controls shows "PTT — Hold KEY" when idle and "● Live" (green) while held — on **both** a default theme and Lotus Terminal (it's now a single folds Chip; the old terminal-only variant was removed).
 ---
 ## H. Media / performance (needs a room with many images)
 ### H1. Lazy image decryption (P5-5 / MediaGallery)
 Open a room / media gallery with **many images** (ideally encrypted). Scroll down through them.
 **Expected:** images decrypt/load as they **approach the viewport**, not all at once on open; scrolling stays smooth and memory doesn't balloon. Off-screen images shouldn't all decode up front.
 ### H2. Thumbnail framing (P5-6)
 Look at **tall portrait** images in the timeline and in the media gallery.
 **Expected:** thumbnails are framed **center-top** (so faces/subjects at the top aren't cropped out); no awkward stretching. Opening the full-size viewer still shows the **whole** image (contain, not cropped).
 ---
 ## I. Accessibility (needs a screen reader: VoiceOver / NVDA / TalkBack)
 With a screen reader on, navigate message hover-actions and content and confirm each control **announces a meaningful label** (not "button" / blank):
 - [ ] **Reaction** buttons announce the emoji + count (e.g. "thumbsup reaction, 3 people").
 - [ ] **Edit history** button announces "View edit history".
 - [ ] **Thread indicator** announces "View thread".
 - [ ] **Reply** (jump to original) announces "Jump to original message".
 ---
 ## J. Desktop / Tauri build only
 ### J1. Proactive update notifications (P5-40)
 In the **desktop (Tauri)** build, with an update available, launch the app (and/or leave it running ~12h).
 **Expected:** an in-app toast/badge alerts you that an update is available, without manually checking Settings. (Needs an actual newer release to point at.)
 ### J2. DTLN noise suppression sanity
 In Settings → Calls, enable **ML noise suppression** with the **DTLN** model, then join a call.
 **Expected:** your mic audio still flows (no silence/robotic dropouts) and background noise is reduced. Confirmed working earlier but flagged for a final real-call check; verify on **both** web and desktop.
 ---
 ## K. Features — end-to-end unverified
 ### K1. Remind Me Later
 On a message, **··· → Remind Me**, pick a short preset (the 20-min one, or wait one out).
 **Expected:** when due, a Lotus toast fires linking to that message; the reminder then clears itself. Survives a reload while pending (stored in account data).
 ### K2. Advanced search filters (P4-9)
 In message search: use the **sender picker** (instead of typing `from:@user`), the **date-range** quick presets (Today / Last week / Last month / Last year), and the **Has link** toggle.
 **Expected:** each narrows results correctly and reflects in the search.
 ### K3. Notification content + click target (P5-20 partial)
 Trigger a desktop/browser notification for a new message.
 **Expected:** it shows the **real message body** (`username: message`, not "New inbox notification from…"); **clicking it** brings the window to front and navigates **directly to that message** (not just the inbox).
 ---
 ## L. Fixed — verify
 ### L1. AFK auto-mute releases the OS microphone indicator on mute (N95) — 👥 live call
 **Context (now FIXED):** `useAfkAutoMute.ts` opened its own `getUserMedia` level-monitor capture for the whole call, so the OS recording indicator (green dot on macOS, mic icon on Windows/Linux) stayed lit even when muted. The capture is now gated on the reactive mic-on state — it runs only while unmuted, so muting releases the stream.
 **To verify:**
 1. Enable **AFK auto-mute** in Settings → Calls and **join a call**.
 2. Manually **mute your mic** using the call controls → the **OS recording indicator should clear** within ~a second.
 3. **Unmute** → the indicator should re-appear (capture re-acquired).
 4. Also confirm AFK still works end-to-end: stay unmuted and silent past the configured timeout → mic auto-mutes with the "muted after inactivity" toast, and the indicator clears.
 ### L2. Maskable PWA icon (N108) — Android install
 1. On **Android Chrome**, install Lotus Chat as a PWA (Add to Home Screen).
 2. Look at the **home-screen icon**.
 **Expected:** the icon fills the adaptive-icon shape cleanly (the logo centered with safe-zone padding on the dark background), **not** clipped at the corners or floating in an odd box. Also worth a quick check in Chrome DevTools → Application → Manifest that the two `purpose: maskable` icons load without a 404 (this also validates the manifest's icon paths resolve in production — a pre-existing path convention I couldn't verify statically).
 ---
 ## M. New features (this round)
 ### M1. Search: `has:image` / `has:file` / `has:video` filters
 1. Open message search (in a room with shared images/files/videos in history).
 2. Run a broad search, then toggle the **Images**, **Files**, **Video** chips (in the filter bar, next to "Has link").
 **Expected:**
 - Each chip narrows the visible results to that message type; multiple active chips = union (any of them).
 - Toggling them off restores the full results. The existing room/sender/date/has-link filters still work alongside.
 - **Known limitation (by design):** filtering is client-side over already-fetched results, so the visible count can be lower than the server's total for that query — paginating/loading more pulls in more to filter. Confirm this reads acceptably.
 ### M2. Search: recent searches
 1. Run a few different searches, then **clear the search box** and focus it.
 **Expected:** your last (up to 10) distinct searches appear as clickable chips; clicking one re-runs it. A **Clear** affordance wipes the list. The list **persists across a page refresh** (localStorage).
 ### M3. Custom accent color (non-TDS themes) — ⚠️ needs your visual judgment
 1. Make sure **Lotus Terminal (TDS)** is **off**. Settings → Appearance → **Custom Accent Color** → pick a color.
 **Expected:**
 - The app's accent (buttons, selected/active states, links, primary chips) recolors to your choice **live**.
 - **Look critically at quality** (this is the part I can't verify): button **text legibility** (OnMain contrast) on the accent buttons; **hover/active** shades; and **selected-row / chip** backgrounds (the translucent "Container" tints). Try a **light** color and a **dark** color and a **saturated** one.
  - If a dark accent makes selected-row text (OnContainer) hard to read, tell me — that's the one spot in the auto-derived palette most likely to need tuning.
 - **Reset** clears it back to the theme default.
 - Turn **Lotus Terminal ON** → the custom accent should be **ignored** (TDS fixed palette wins) and the picker shows a "non-TDS only" note; turn it back off → custom accent returns.
 - Reload → the chosen accent **persists**.
 ---
 ### M4. Search: "Pinned only" filter
 In message search, toggle the **Pinned** chip.
 **Expected:** results narrow to messages currently pinned in their room; composes with the Images/Files/Video chips and room/sender/date filters; toggling off restores results. It also narrows the **encrypted/local-cache** results section (not just server results). Needs a room with actually pinned messages.
 ### M5. New theme presets (Cyberpunk / Ocean / Blood Red / Classic Matrix / Midnight) — ⚠️ visual judgment
 Settings → Appearance → theme picker → try each of the 5 new themes.
 **Expected:** each applies a complete, legible dark palette. Code review computed WCAG contrast and all pass AA, but **eyeball these specifically**: **Midnight** (lowest-contrast accent `#6b7ca8` — selected/focus states), **Classic Matrix** (green accents, light-green body text on near-black), **Blood Red** (white-ish text on bright-red buttons). Confirm Success/Warning/Critical (save/leave/delete) still look correctly green/amber/red, not recolored. Switching back to a stock theme should fully revert.
 ---
 ## N. OIDC / Next-Gen Auth login (MSC3861) — P4-6
 The Lotus client can now sign into OIDC-native homeservers (ones that delegate
 auth to a Matrix Authentication Service / MAS), e.g. mozilla.org. lotusguild's
 own server is **not** MSC3861, so test EITHER against a **local MAS dev loop**
 (full setup in `dev/oidc-test/README.md` — docker-compose + Synapse `msc3861`
 delta + a `config.json` override) OR against **mozilla.org** with a real account.
 ### N1. OIDC login flow (the core test) — needs a MAS homeserver
 1. On the login screen, select the OIDC homeserver (local `localhost:8008`, or `mozilla.org`).
 2. **Expected:** instead of the username/password form, a single **"Continue with single sign-on"** button appears (password + legacy-SSO are suppressed for that server).
 3. Click it → redirected to the provider's login page (MAS / `chat.mozilla.org`).
 4. Authenticate there → redirected back to `…/auth/oidc/callback` → a brief "Signing you in…" spinner → you land in the app, logged in.
 **Expected:** no console CSP violations; you reach the room list as the OIDC user.
 ### N2. Session persists across reload (token storage)
 After N1, hard-refresh the page.
 **Expected:** you stay logged in — the OIDC session (access + refresh token + issuer/clientId/claims) was persisted (`cinny_refresh_token`, `cinny_oidc_*` keys in localStorage).
 ### N3. Token refresh (long-lived session)
 Leave the session past the access-token lifetime (MAS default is short — or revoke the access token in the MAS admin UI to force a 401).
 **Expected:** the client refreshes transparently (no logout); the stored access token rotates (reactive 401 refresh via the wired `OidcTokenRefresher`).
 ### N4. Logout revokes at the issuer
 Log out from Settings.
 **Expected:** back to login; OIDC tokens are revoked at the issuer's `revocation_endpoint` (best-effort) and all `cinny_*` / `cinny_oidc_*` keys are cleared. Logging back in works.
 ### N5. Account-management deep-link
 Settings → Account.
 **Expected:** on an OIDC server a **"Manage account"** card appears (opens the provider's account page in a new tab). On a non-OIDC server (lotusguild) the card is **absent**.
 ### N6. Non-OIDC regression — password login unchanged
 Log into **matrix.lotusguild.org** (password) and **matrix.org**.
 **Expected:** identical to before — username/password form (+ SSO button where offered). The OIDC path only activates when discovery advertises an issuer, so nothing changes for these servers.
 ---
 ## Priority if you're short on time
 1. **A4** (in-call banner) + **A3** (ringtone) — newest, most logic, hardest to reproduce.
 2. **B1–B3** (polls on a default theme) — the confirmed visual bug.
 3. **D** (EC 0.20.1 control sweep) — guards against the upstream merge breaking calls.
 4. **A7** false-positive check (normal joins don't show the error overlay).
 5. Everything else.
@@ -1,728 +0,0 @@
 # Lotus Chat — Work Backlog
 **Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`  
 **Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
 ---
 ## ⚠️ TDS DESIGN LAW — READ BEFORE TOUCHING ANY UI
 > **ALL Lotus Terminal Design System (TDS) styling — colors, animations, glows, borders, fonts, spacing — MUST come exclusively from `/root/code/web_template/base.css` CSS variables.**
 > Do NOT hardcode hex values. Do NOT invent new variable names. Do NOT deviate from the design tokens defined in that file.
 > The canonical variable reference: `--lt-accent-orange`, `--lt-accent-cyan`, `--lt-accent-green`, `--lt-glow-orange`, `--lt-box-glow-*`, `--lt-border-color`, etc.
 > Reference implementation for code patterns: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)
 > This rule applies to EVERY task in this file without exception.
 ---
 ## 🧩 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                |
 | In-Call Soundboard (P5-15, uploadable clips → real call inject)                   | D2-7              |
 | Call Quality Controls (P5-31, user + room-admin caps)                             | D2-8              |
 | Call Permissions (P5-31, hard server-side screenshare/camera policy)              | D2-9              |
 ---
 Legend:
 - `[AUDIT REQUIRED]` — at least one assumption needs code/server verification before implementing
 - `[SERVER CHECK]` — depends on a Synapse feature or MSC; verify on `matrix.lotusguild.org`
 - `[LOW PRIORITY]` — implement after all higher-priority items
 - `[EXTREME COMPLEXITY]` — multi-sprint, plan separately before touching
 - `[BLOCKED]` — cannot build until a server upgrade, upstream MSC, or dependency resolves
 - `[IMPROVE]` — feature exists in upstream Cinny; this task enhances it for Lotus Chat
 Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 ---
 ## Server Capabilities (as of June 2026)
 - **Homeserver:** `matrix.lotusguild.org`
 - **Synapse version:** `1.155.0` (2026-06-18) — fully up to date; last version for Debian 12 (LXC 151 already on Debian 13 Trixie)
 - **Matrix spec:** up to `v1.12` formally; newer MSC features via `unstable_features`
 ### Confirmed facts
 | Finding                                                                                                                                                  | Impact                                                                                                  |
 | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
 | **MSC flags ON:** `msc4140` · `msc3771` · `msc3440.stable` · `msc4133.stable` · `simplified_msc3575` · `msc4222` · `msc3266` · `msc3401_matrix_rtc`      | All safe to use now                                                                                     |
 | **MSC flags OFF:** `msc4306` (thread subscriptions) · `msc3882` · `msc3912` · `msc4155`                                                                  | These features are BLOCKED                                                                              |
 | **MSC3266** room summary: flag `msc3266_enabled: true` set but `GET /v1/rooms/{id}/summary` still returns 404 (M_UNRECOGNIZED)                           | Room Preview BLOCKED — endpoint not implemented in Synapse 1.155                                        |
 | **MSC3892** relation redaction: not in flags                                                                                                             | Reaction Redaction feature BLOCKED                                                                      |
 | **MSC4260** report user: `POST /_matrix/client/v3/users/{userId}/report` returns **200** ✅                                                              | **Report User UNBLOCKED** — endpoint live since Synapse 1.133; ready to build                           |
 | **MSC4151** report room: HTTP 405 on GET = endpoint exists (POST only)                                                                                   | Report Room live ✅                                                                                     |
 | `folds AvatarImage` does NOT accept children                                                                                                             | Add frame/overlay inside `UserAvatar.tsx` itself — optional `frameName` prop                            |
 | No in-app toast system exists (was)                                                                                                                      | Built `ToastProvider` + Jotai queue; at `App.tsx:65`                                                    |
 | `useUnverifiedDeviceCount()` hook exists                                                                                                                 | `src/app/hooks/useDeviceVerificationStatus.ts:65-106`                                                   |
 | Voice player: `AudioContent.tsx:44-223`                                                                                                                  | Playback rate on hidden `<audio>` at line 217                                                           |
 | `CallControl.setMicrophone(bool)` at `CallControl.ts:206-212`                                                                                            | For AFK auto-mute                                                                                       |
 | `CallControl.toggleSound()` at `CallControl.ts:230-251`                                                                                                  | Push-to-deafen — just wire a hotkey to this                                                             |
 | matrix-js-sdk has NO arbitrary profile field methods                                                                                                     | Use `mx.http.authedRequest()` for MSC4133                                                               |
 | Sanitizer (`sanitize.ts`) allows table, div, span, a, code, hr                                                                                           | LFG HTML card is safe locally; test on Element/FluffyChat                                               |
 | Sanitizer STRIPS `<math>`/MathML tags                                                                                                                    | Math/LaTeX task must also modify sanitizer                                                              |
 | Service worker EXISTS at `src/sw.ts`                                                                                                                     | Quick-reply task: add `notificationclick` handler                                                       |
 | `knockSupported()` utility exists at `matrix.ts:376-391`                                                                                                 | Knock UX: only need "Request to Join" in `RoomIntro.tsx`                                                |
 | `KeywordMessages.tsx` already has custom keyword push rules                                                                                              | Full push rule editor: only non-keyword rule types need new UI                                          |
 | `getMatrixToRoom()` in `matrix-to.ts` generates invite URLs                                                                                              | Invite link: just add QR code to room settings                                                          |
 | ~~Cindy CANNOT inject audio into EC call stream~~ **UNBLOCKED by EC fork** — `io.lotus.inject_audio` widget action publishes a clip as a real call track | In-call soundboard CAN now mix into the call (no longer local-only); needs cinny UI to drive the action |
 | Folds uses vanilla-extract in non-TDS, NOT CSS custom properties                                                                                         | Custom accent color: must create new vanilla-extract theme variant dynamically                          |
 | Theme presets need ~50 CSS custom properties each                                                                                                        | Significant design work before coding                                                                   |
 | `useCallSpeakers.ts` CSS MutationObserver polling                                                                                                        | Visual speaking indicator: TDS ring animation on top of existing data                                   |
 | MSC3489/3672 live location: BOTH false on server                                                                                                         | Live Location BLOCKED                                                                                   |
 ---
 ## Key File Reference
 | What you need                    | File                                                          | Lines               |
 | -------------------------------- | ------------------------------------------------------------- | ------------------- |
 | Global keydown hook              | `src/app/hooks/useKeyDown.ts`                                 | whole file          |
 | Room navigation                  | `src/app/hooks/useRoomNavigate.ts`                            | 19-72               |
 | All room IDs atom                | `src/app/state/room-list/roomList.ts`                         | `allRoomsAtom`      |
 | Room unread counts               | `src/app/state/room/roomToUnread.ts`                          | `roomToUnreadAtom`  |
 | Overlay portal provider          | `src/app/pages/App.tsx`                                       | 65                  |
 | Portal container div             | `index.html`                                                  | 101                 |
 | Room settings tabs               | `src/app/features/room-settings/RoomSettings.tsx`             | 27-56               |
 | State event read/write pattern   | `src/app/features/common-settings/general/RoomEncryption.tsx` | 42-52               |
 | Power level checker              | `src/app/hooks/usePowerLevels.ts`                             | whole file          |
 | Slash command registration       | `src/app/hooks/useCommands.ts`                                | 140-537             |
 | Chat background picker           | `src/app/features/settings/general/General.tsx`               | 945-981             |
 | Chat backgrounds definition      | `src/app/features/lotus/chatBackground.ts`                    | whole file          |
 | Matrix.to URL builder            | `src/app/plugins/matrix-to.ts`                                | `getMatrixToRoom()` |
 | Media event content types        | `src/app/types/matrix/common.ts`                              | 46-91               |
 | Media URL conversion             | `src/app/utils/matrix.ts`                                     | `mxcUrlToHttp()`    |
 | Message pagination (search)      | `src/app/features/message-search/useMessageSearch.ts`         | 74-121              |
 | Infinite pagination pattern      | `src/app/features/message-search/MessageSearch.tsx`           | 234-365             |
 | Poll event format                | `src/app/components/message/content/PollContent.tsx`          | 1-320               |
 | Theme class application          | `src/app/hooks/useTheme.ts`                                   | 25-60               |
 | Animations file                  | `src/app/styles/Animations.css.ts`                            | whole file          |
 | Message status (EventStatus)     | `src/app/features/room/message/Message.tsx`                   | 84-142              |
 | Call member change events        | `src/app/hooks/useCall.ts`                                    | 37-52               |
 | Mic control in calls             | `src/app/plugins/call/CallControl.ts`                         | 206-212             |
 | Device verification hook         | `src/app/hooks/useDeviceVerificationStatus.ts`                | 65-106              |
 | Knock room support check         | `src/app/utils/matrix.ts`                                     | 376-391             |
 | Room join button location        | `src/app/components/room-intro/RoomIntro.tsx`                 | 25-119              |
 | Notification mute via push rules | `src/app/hooks/useRoomsNotificationPreferences.ts`            | 110-150             |
 | Message text body CSS            | `src/app/components/message/layout/layout.css.ts`             | 182-205             |
 ---
 ## Priority 3 — Higher complexity / lower daily frequency
 ### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
 **What:** Comprehensive audit and fix pass targeting the critical user paths:
 - Room list navigation (keyboard-only)
 - Reading messages in the timeline (screen reader announces new messages)
 - Composing and sending a reply
 - Opening and closing modals (focus trap, return focus)
 - ARIA labels on all icon-only buttons
 **Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).  
 **[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).
 **Investigation Findings:**
 - **Root Cause:** Inconsistent focus management, missing `aria-live` regions for dynamic timeline updates, and sparse global keyboard shortcuts.
 - **Approach:** Standardize `focus-trap-react` usage (reference `RoomNavItem.tsx`). Add `aria-live` regions to the timeline. Expand `useKeyDown.ts` for section navigation shortcuts.
 - **Complexity:** Medium-High (audit is the main work).
 ---
 ### [ ] P3-8 · Thread Panel (full side drawer)
 **⚠️ LARGEST FEATURE — requires its own planning session before implementation.**  
 **What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.
 Features:
 - Click "Reply in Thread" → opens thread drawer on the right
 - Thread root event shown at the top of the panel
 - Full message rendering for all in-thread replies (reuse timeline components)
 - Reply input at the bottom (full composer with formatting, emoji, etc.)
 - Unread count badge on the thread button in the main timeline
 - Keyboard shortcut to close thread panel
 **Architecture:**
 - New Jotai atom: `activeThreadEventId: string | null`
 - New component: `src/app/features/room/thread/ThreadPanel.tsx`
 - Rendered alongside `RoomView` as a conditional right panel (mirror the members drawer pattern)
 - Filter events in timeline to `m.thread` relation for the active root event ID
 - Shares the same `mx` client and room reference as the main timeline
 **[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).
 **Investigation Findings:**
 - **Root Cause:** Current `m.thread` events are treated as standard `m.room.message` events and rendered in the main timeline.
 - **Approach:** Introduce new Jotai atom `activeThreadEventId`. Create `ThreadPanel.tsx`. Update `RoomTimeline.tsx` to filter out thread relations (`m.relates_to`). Implement aggregation fetch using `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Use `thread.timelineSet` directly for the most accurate thread view.
 - **Complexity:** High.
 ---
 ## Priority 4 — Specialized, high complexity, or low priority
 ### [ ] P4-7 · Virtualized Infinite Scroll for Search Results
 **What:** Replace the manual "load more" button with an automated, virtualized infinite scroll for search results.  
 **Approach:** Utilize `@tanstack/react-virtual` in `MessageSearch.tsx` to handle the `nextToken` automatically as the user scrolls.
 ### [ ] P4-8 · Encrypted Message Search Indexing & Caching
 **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.
 ### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
 **Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).  
 **What:** Per-thread notification toggle: "All messages" vs "Mentions only". Accessible from the thread panel header. Tracks unread counts separately per thread.  
 **[AUDIT REQUIRED]** — Implement after Thread Panel. Requires understanding how the SDK tracks per-thread unread counts.  
 **Complexity:** Medium (after thread panel exists).
 ---
 ### [ ] P4-2 · Thread Subscriptions (MSC4306) [BLOCKED]
 **Spec:** MSC4306 (Synapse experimental). Depends on Thread Panel (#P3-8).  
 **What:** "Follow thread" button to receive notifications for a thread you haven't posted in. Uses MSC4306 subscription endpoint.  
 **[SERVER CHECK]** — `org.matrix.msc4306 = false` on `matrix.lotusguild.org` — BLOCKED until server enables it.  
 **Complexity:** Medium (after thread panel exists).
 ---
 ### [ ] P4-4 · Math / LaTeX Rendering in Messages (LOW PRIORITY)
 **Spec:** CS-API §11.5 (stable) — `formatted_body` can contain LaTeX.  
 **What:** Render `$...$` or `$$...$$` LaTeX expressions in message bodies. Use KaTeX (lightweight, ~100KB, renders server-side-compatible CSS). Must gracefully fall back to raw LaTeX text if KaTeX fails.  
 **Note:** This is LOW PRIORITY — only useful for academic/technical communities. Implement last.  
 **[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here. (Confirmed: sanitizer STRIPS `<math>` tags — must be patched alongside the renderer.)  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P4-5 · Live Location Sharing (MSC3489 + MSC3672) (LOW PRIORITY, HIGH COMPLEXITY) [BLOCKED]
 **Spec:** MSC3489 + MSC3672. Implemented in Element Web.  
 **Note:** Static location sharing is already implemented. This adds live/real-time GPS beacons. Very low priority per user preference.  
 **What:** Start sharing live location → creates `m.beacon_info` state event → client posts `m.beacon` events on a timer → other users see your position update live on a map.  
 **[SERVER CHECK]** — `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` — BLOCKED.  
 **Complexity:** High. Requires background geolocation API + live map rendering.
 ---
 ### [~] P4-6 · OIDC / SSO Next-Gen Auth (MSC3861) — CLIENT-SIDE BUILT, awaiting live verification
 **Spec:** MSC3861 / MSC2965, Matrix spec v1.15. OAuth2-native auth via a Matrix Authentication Service (MAS).  
 **Scope decision (2026-06):** CLIENT-ONLY. We implemented OIDC login _in the Lotus client_ so it can sign into next-gen homeservers (mozilla.org, eventually matrix.org). We deliberately did **not** convert lotusguild's own Synapse to MAS (no account migration; lotusguild keeps password + legacy Authelia SSO).  
 **Built (matrix-js-sdk already ships the OIDC API; this was wiring):**
 - Discovery: `cs-api.ts` `getOidcIssuer()` (stable `m.authentication` + msc2965). Flow hint: `useParsedLoginFlows` `getOidcCompatibilityFlag()` (MSC3824).
 - Login: `pages/auth/oidc/{oidcConfig,oidcLoginUtil,oidcState}.ts` (dynamic registration + cache, PKCE authorize), `login/OidcLogin.tsx`, issuer-gated `Login.tsx`.
 - Callback: `oidc/OidcCallback.tsx` + `App.tsx` short-circuit (non-hash redirect path).
 - Session/refresh: `state/sessions.ts` OIDC fields, `client/{oidcTokenRefresher,oidcLogout}.ts`, `initMatrix.ts` wiring.
 - Account mgmt: `settings/account/OidcManageAccount.tsx`.
 - 13 unit tests (discovery/flow/session/cache/callback parsing). All gates green.
  **Awaiting verification (needs a real MSC3861 server — lotusguild is NOT one):** deploy + log into **mozilla.org** (requires adding mozilla to the deployed `config.json` homeserverList + its domains to the CSP `connect-src`/`img-src` — see below), OR run a local `matrix-authentication-service` + Synapse `msc3861` dev loop.  
  **To enable the mozilla.org test:** add to `matrix/cinny/config.json` homeserverList `"mozilla.org"`, and to the nginx CSP `connect-src`/`img-src`: `https://mozilla.org https://mozilla.modular.im https://chat.mozilla.org https://vector.im`.
 ---
 ## Priority 5 — Gamer / Aesthetic / Customization
 ### [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).
 ---
 ### [~] P5-15 · In-Call Soundboard — IMPLEMENTED (⚠️ awaiting live verification, D2-7)
 **What:** Soundboard button in the call controls bar → popout grid of the user's clips; clicking one plays it **into the call** as a real published track (peers hear it) and locally (presser hears it). Clips are **user-uploadable, just like custom emojis/stickers**.  
 **🔱 [EC-FORK] Fork side + cinny side DONE.** The fork ships `io.lotus.inject_audio` (`LotusWidgetActions.InjectAudio`, allow-listed in `widget.ts`), armed via the `lotusAudioInject=1` flag; it publishes a clip as a separate LiveKit track — a **real** in-call soundboard mixed into the call, not local-only. cinny now drives it.  
 **Shipped (cinny):**
 - Clips stored in `io.lotus.soundboard` account data → **synced across devices like emoji/sticker packs** (`useSoundboard` hook; `AccountDataEvent.LotusSoundboard`).
 - Upload audio (≤1 MB, ≤40 clips) → `mx.uploadContent` → mxc; play resolves mxc → authed download → `blob:` object URL (the widget can't fetch authenticated media itself) → `control.injectAudio(url, volume)` + local playback.
 - `CallSoundboard.tsx` popout in the call bar (upload / play / delete), gated on the `soundboardEnabled` setting (Settings → General → Calls, + volume slider).  
  **Remaining:** a dedicated Settings management page (optional — upload/delete already live in the popout); a small default clip set; live verification (D2-7). Files: `utils/soundboardClips.ts`, `hooks/useSoundboard.ts`, `features/call/CallSoundboard.tsx`, `plugins/call/CallControl.ts#injectAudio`.  
  **Complexity:** Medium — done.
 ---
 ### [~] P5-20 · Quick Reply from Browser Notification
 **What:** Inline reply field in browser notification toasts via Notification Actions API. Reply sends as threaded reply to the triggering message.  
 **[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) Confirmed: service worker EXISTS at `src/sw.ts` — add `notificationclick` handler there.  
 **Complexity:** Medium-High.  
 **Partial Fix Applied ⚠️ UNTESTED:** Notifications now (a) show the real message body (`username: message` instead of "New inbox notification from..."), (b) click navigates directly to the room at the specific event (not the inbox), (c) `window.focus()` called on click so the tab comes to front, (d) reminder toasts also link to the specific event. Full inline-reply via Notification Actions API still needs the SW `push`+`notificationclick` pipeline (requires switching from `new Notification()` to `showNotification()` through the SW).
 ---
 ### [x] P5-30 · Advanced ML Noise Suppression (Krisp-style)
 **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.  
 **🔱 [EC-FORK] DONE — moved in-source (2026-06).** ML denoise is now a first-class audio stage **inside** the forked Element Call: a LiveKit `TrackProcessor<Audio>` activated by `lotusDenoiseSource=1` (cinny sets it when ML is selected). The old build-time `getUserMedia`/`index.html` monkeypatch is **removed**. Because EC re-runs the processor on every (re)publish, denoise now **survives reconnects and mic-device switches** — this is the A7 fix (see `LOTUS_BUGS.md` A7, `LOTUS_TESTING.md` §D2-1). The processor degrades to the raw mic rather than going silent.  
 **Key decision:** LiveKit's Krisp filter is LiveKit-Cloud-only (we self-host the SFU); EC's own RNNoise PR #3892 is unmerged. Owning the fork let us implement the in-source stage directly.
 **Models — all in-source in the fork:**
 - [x] **DeepFilterNet 3** (48 kHz, **ML default**) · **DTLN** (16 kHz) · **RNNoise** (48 kHz) · **Speex** (48 kHz) — all four wired and selectable; dropdown ordered best-quality first. Tier default is **Browser-native**.
 - [x] **Quality tuning (2026-07):** dry/wet **attenuation floor** (~-16 dB, RNNoise/Speex only — the "robotic" fix; DTLN/DFN would comb-filter), **gate-after-ML**, **DFN level 80→60**. Floor tunable via `lotusDenoiseFloor`.
 - [x] **AEC/AGC (2026-07):** echo-cancellation ON; **AGC OFF for the ML tier** (`autoGainControl=false`, threaded through EC `UrlParams`→`ConnectionFactory`) so browser AGC doesn't fight the model; playback confirmed no AEC-defeat.
 - [x] **Reliability (2026-07):** never-silent watchdog, resume-timeout, WASM-cache reject-eviction, activate-off-local-participant, init/build leak fixes.
 - [ ] **Open verification:** real-call by-ear **A/B** — model choice, floor value, AGC on/off (RNNoise known-weak historically). `LOTUS_TESTING.md` §D2-1 / J2.
 - [ ] **GTCRN (RESEARCHED — DEFERRED):** tiny MIT 16 kHz model that beats RNNoise, but **no drop-in browser package** — needs a ~1-week from-scratch build: `onnxruntime-web` (WASM, 1 thread) in a **Web Worker** (ORT can't run in an AudioWorklet — issue #13072) behind a custom AudioWorklet ring-buffer node presenting as an `AudioNode`; model `gtcrn_simple.onnx` (~300 KB, stateful — thread `conv/tra/inter` caches per frame); we write STFT/iSTFT (n_fft 512/hop 256). Assets ~3–4 MB via the `lotusDenoise()` vite plugin. Registration checklist known (both repos, incl. the 2nd `denoisePipeline.ts` used by the DenoiseTester). **Revisit only if low-power quality is insufficient after validating the current tuning.**
 - [ ] **Desktop-only / HW-gated (future):** FRCRN or NVIDIA Maxine (RTX/Tensor only) — impossible in-browser; would run in the Tauri Rust backend + bridge a virtual mic into the webview. Detect capability; web falls back to RNNoise.
 - **Excluded:** Krisp (LiveKit Cloud only); FRCRN/Maxine on web (GPU/server-bound).
 ---
 ### [~] P5-31 · Granular Voice & Screenshare Quality Controls — IMPLEMENTED (⚠️ awaiting live verification, D2-8)
 **What:** Let users (and room admins) adjust audio bitrate and screenshare bitrate/framerate.  
 **🔱 [EC-FORK] Fork side + client side DONE.** The fork ships `io.lotus.set_quality` (`LotusWidgetActions.SetQuality`) that applies audio/screenshare encoding params (`RTCRtpSender.setParameters`, all simulcast encodings, re-applied on `TrackUnmuted`/republish) inside EC. cinny now drives it.
 **Shipped (cinny):**
 1. **User settings** (Settings → General → Calls): Microphone Bitrate, Screenshare Bitrate, Screenshare Framerate (`callAudioBitrate` / `screenshareBitrate` / `screenshareFramerate`).
 2. **Room-admin caps**: `io.lotus.room_quality` state event (`StateEvent.LotusRoomQuality`) + `RoomQuality.tsx` in Room Settings → General → Voice (mirrors `RoomVoiceLimit`).
 3. **Apply logic**: `useCallQuality` (wired in `CallEmbedProvider`'s `CallUtils`) builds `min(user setting, room cap)` and sends `io.lotus.set_quality` on join / when settings change (`utils/callQuality.ts`, unit-tested).
 **Server-side enforcement (DONE — matrix repo):** extended `voice-limit-guard.py` (LXC 151) to also read `io.lotus.room_quality` and hard-enforce a **publish-source policy** for ALL clients.
 - **Reality (researched, primary-source, LiveKit 1.9.11):** numeric bitrate/fps caps **cannot** be hard-enforced server-side — LiveKit is a pure SFU (forwards, never transcodes); there is NO bitrate/fps field in the JWT grant, `RoomConfiguration`, server `limit:` config, or any admin RPC, and stock Element Call ignores room metadata / custom claims for publish quality. So numeric caps stay **cooperative** (our fork honors them via `min()` → `set_quality`, already shipped).
 - **What IS hard-enforced cross-client:** `VideoGrant.canPublishSources`. The guard holds the LiveKit secret, so when `io.lotus.room_quality` sets `allow_screenshare:false` / `allow_camera:false` it re-signs the issued JWT with a narrowed source list → the SFU refuses those tracks for **every** client (Element, FluffyChat, our fork). Mic always kept. Fail-open; unit-tested (`livekit/test_voice_limit_guard.py`). Admin UI: Room Settings → Voice → **Call Permissions** switches. cinny also hides the blocked buttons.
 - **Live (mid-call) enforcement — DONE:** the JWT re-sign covers new joins; for participants **already in the call**, a background reconcile loop in the guard calls LiveKit `UpdateParticipant` every ~3 s to narrow `canPublishSources`, which unpublishes an in-progress screenshare/camera **server-side for all clients** and blocks re-publish (verified LiveKit 1.9.11 auto-unpublishes on permission narrowing). Only removes forbidden sources (never grants), preserves other permission flags, no-ops once compliant. So flipping a room audio-only kills live cameras/screenshares within ~one interval.
 - **Not enforceable / deferred:** numeric server enforcement (impossible — see above); screenshare **resolution** control (`set_quality` covers bitrate + framerate; resolution needs a `getDisplayMedia` hook inside the fork).
 **Complexity:** DONE — client (cooperative numeric caps) + server (hard publish-source policy). Only the physically-impossible numeric server enforcement is out of scope.
 ---
 ### [ ] P5-35 · Desktop — Notification Click Opens Room (DEFERRED)
 **What:** Clicking a system tray notification navigates to the relevant room. Quick-reply from the notification toast would send the reply without opening the window.  
 **Status:** Deferred — `tauri-plugin-notification` has no Rust click/action callback API. Quick-reply would need a custom WinRT toast activator + COM registration, which can't be compile-tested without a Windows build environment.  
 **Note:** Tray icon and `matrix:` deep links already bring the window forward on most interactions. Revisit when tauri-plugin-notification gains click handler support upstream.  
 **Complexity:** High (platform-specific native code required).
 ---
 ### [ ] P5-36 · Desktop — Windows Jump List (DEFERRED)
 **What:** Right-clicking the taskbar icon shows a jump list with recent/favorite rooms for quick navigation.  
 **Status:** Deferred — implementing the Windows COM jump list API in Tauri requires iterating on C++/COM code that can only be compile-checked on Windows, making blind CI iteration impractical.  
 **Action when unblocked:** Revisit when a Tauri plugin abstracts the Windows Shell `ICustomDestinationList` interface, or when a Windows build environment is available for local iteration.  
 **Complexity:** High (Windows-only native COM).
 ---
 ### [ ] P5-41 · Desktop — Native WinRT Toast Notifications
 **What:** Replace emulated notifications with native WinRT Toast notifications.  
 **Approach:** Implement native WinRT Toast integration using `windows-rs` to enable full Action Center integration, including native Quick Reply functionality.
 ### [ ] P5-42 · Desktop — Persistent Background Sync
 **What:** Maintain light connection to homeserver when WebView2 is suspended.  
 **Approach:** Implement a headless Rust sidecar to fetch unread counts/notifications while the webview is suspended to ensure instant notification delivery.
 ### [ ] P5-43 · Desktop — System Media Transport Controls (SMTC)
 **What:** Integrate with Windows SMTC for volume flyout call/media control.  
 **Approach:** Use Windows SMTC API to expose call status, mic mute/unmute, and media controls to the Windows volume flyout/media overlay.
 ### [ ] P5-44 · Desktop — Taskbar Thumbnail Toolbar
 **What:** Add persistent call controls to the taskbar preview.  
 **Approach:** Implement a COM thumbnail toolbar in the application preview window, featuring Mute/Deafen/End Call buttons.
 ### [ ] P5-46 · Desktop — System Power Management (Call Continuity)
 **What:** Prevent system sleep/hibernate during active calls.  
 **Approach:** Use Tauri/Rust `power-manager` or platform-specific APIs to block system power saving states while a voice/video session is active.
 ### [ ] P5-47 · Desktop — TDS-Styled Native Window Chrome
 **What:** Replace system titlebar with custom Lotus TDS chrome.  
 **Approach:** Configure Tauri window (`decorations: false`) and implement custom, TDS-token compliant titlebar controls (Close/Max/Min) for a cohesive UI.
 ### [ ] P5-48 · Desktop — Native File System Drag-and-Drop Improvements
 **What:** Enhance drag-and-drop support for Windows.  
 **Approach:** Improve handling for Windows file shortcuts, recursive folder uploads, and shell-integrated "Send To" context menu actions.
 ### [ ] P5-49 · Desktop — Network Awareness (NCSI Integration)
 **What:** Proactively detect Windows network connectivity changes.  
 **Approach:** Integrate with the Windows Network Connectivity Status Indicator (NCSI) API to improve offline mode transition latency and network recovery.
 ### [ ] P5-50 · Desktop — Windows Hardware-Accelerated Media Pipeline
 **What:** Replace standard browser decoding with native Windows Media Foundation.  
 **Approach:** Leverage DirectShow/Media Foundation to offload video/audio decoding from the CPU to the GPU, significantly reducing power consumption and latency during calls.
 ### [ ] P5-51 · Desktop — Federated "Identity Contexts" (Isolation Manager)
 **What:** Compartmentalize sessions, local databases, and caches into isolated "Contexts."  
 **Approach:** Implement a zero-leak boundary for personas (e.g., Work vs. Personal) by isolating `IndexedDB`, filesystem caches, and session persistence per context.  
 **Priority:** Extreme Low (Multi-sprint/Architectural).
 ### [~] P5-52 · Desktop — Room-Level Sync Governor (Performance Control) [STILL_CONSIDERING]
 **What:** Granular sync tuning for individual rooms.  
 **Approach:** Allow per-room overrides for sync frequency and event type filtering (e.g., disable read receipts/typing in heavy rooms) to optimize performance. Implementation requires careful UX to prevent complexity fatigue.
 ### [ ] P5-53 · Desktop — Local-Only "Scripting" Plugin System (Tampermonkey-like)
 **What:** A sandboxed environment for local execution of user scripts on Matrix events.  
 **Approach:** Implement a WASM-based execution engine that allows users to write local-only, client-side scripts to interact with incoming Matrix events, trigger sounds/notifications, or inject custom UI elements based on event payload rules. Designed for privacy — all logic runs exclusively on the local machine.
 ### [ ] P5-55 · Desktop — Composer Toolbar Drag-and-Drop Reordering
 **What:** Allow users to reorder toolbar icons via drag-and-drop.  
 **Approach:** Extend the current settings-based toolbar toggle system to include a drag-and-drop UI mode in the composer settings, allowing users to personalize their icon order.
 ### [ ] P5-56 · Desktop — Windows "Focus Assist" (DND) Sync
 **What:** Automatically toggle notification state based on Windows Focus Assist.  
 **Approach:** Integrate with the Windows `NotificationCenter` / `Focus` state via Tauri/Rust to automatically enable/disable Lotus Chat's internal notification suppression mode when Windows Focus Assist is toggled.
 ### [ ] P5-57 · Desktop — Visual Draft Persistence Indicator
 ---
 ## 🚀 Features to Add
 - [ ] **Mobile Audit:** Comprehensive audit of all features in LOTUS_FEATURES.md for mobile PWA usability and layout responsiveness.
 ---
 ## Blocked Features
 These features are confirmed desirable but cannot be built until the listed dependency is resolved.
 Check back after each Synapse upgrade — re-run `/matrix/client/versions` and `unstable_features` to see if they've become available.
 ### [BLOCKED] · Live Location Sharing (MSC3489 + MSC3672)
 **Blocked by:** `org.matrix.msc3489 = false` AND `org.matrix.msc3672 = false` on `matrix.lotusguild.org` (confirmed from unstable_features).  
 **What it would do:** Real-time GPS beacon streaming upgrading the existing static location share.  
 **Action when unblocked:** Both MSCs must be enabled on the homeserver before any client work.
 ### [BLOCKED] · Reaction / Relation Redaction (MSC3892)
 **Blocked by:** `org.matrix.msc3892` = false on `matrix.lotusguild.org`  
 **What it would do:** Cleanly remove a reaction without redacting the parent message.  
 **Current behavior:** Full event redaction — acceptable fallback, no user-facing issue.  
 **Action when unblocked:** Find `onReactionToggle` redaction call site; swap in MSC3892 endpoint with fallback.
 ### [BLOCKED] · Room Preview Before Joining (MSC3266)
 **Blocked by:** `GET /_matrix/client/v1/rooms/{roomId}/summary` returns `M_UNRECOGNIZED` 404 — endpoint not implemented in Synapse 1.155. Config flag `msc3266_enabled: true` is set but has no effect; Synapse appears not to have shipped a stable implementation at the v1 path. Verified 2026-06-18.  
 **What it would do:** Show room name, topic, avatar, member count before joining.  
 **Action when unblocked:** Re-test after each future Synapse upgrade.
 ### [BLOCKED] · Thread Subscriptions (MSC4306)
 **Blocked by:** `org.matrix.msc4306` = false on `matrix.lotusguild.org`  
 **What it would do:** Follow a thread without posting; get notifications for replies.  
 **Action when unblocked:** Add "Follow thread" button in the thread panel header (depends on #P3-8 Thread Panel).
 ### [DONE] · Report User (MSC4260) ✅
 **Previously blocked by:** Server spec v1.12, but `POST /_matrix/client/v3/users/{userId}/report` was confirmed **200** on 2026-06-18 (live since Synapse 1.133.0).  
 **What it does:** Reports a specific user to homeserver admins (separate from reporting a message).  
 **Note:** Report Message already exists in upstream Cinny. This adds Report User to the profile panel.  
 **Implemented 2026-06-18:** `ReportUserModal.tsx` added at `src/app/features/room/ReportUserModal.tsx`. Button wired into `UserRoomProfile.tsx` between UserModeration and UserDeviceSessions (hidden for own profile). Category dropdown + reason text, inline success/error feedback, auto-close 1500ms after success.
 ---
 ## Pending Audits
 ### [ ] Audit-3 · Profile banner image — Matrix protocol support
 Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banner field. `uk.tcpip.msc4133.stable = true` on our server — check if a `banner_url` or similar field is defined. If no cross-client standard exists, do not implement.
 ---
 ## 📚 Implementation Reference
 Exhaustive, low-level implementation details for backlog items. Follow these patterns to ensure code is "Lotus-perfect" (idiomatic, performant, and TDS-compliant).
 ### P3-8 · Thread Panel (Full Side Drawer)
 **Architecture:** Mirror the `MembersDrawer` pattern but with a specialized timeline.
 - **State (`src/app/state/room/thread.ts`):**
  ```typescript
  export const activeThreadIdAtom = atom<string | null>(null);
  ```
 - **Layout (`src/app/features/room/Room.tsx`):** Insert `ThreadPanel` conditionally alongside `RoomTimeline`:
  ```tsx
  {
    activeThreadId && (
      <>
        <Line variant="Background" direction="Vertical" size="300" />
        <ThreadPanel roomId={roomId} threadId={activeThreadId} />
      </>
    );
  }
  ```
 - **Component (`src/app/features/room/thread/ThreadPanel.tsx`):** Use `room.getThread(threadId)` from the SDK. Render a `Header` with a "Close" button that sets `activeThreadIdAtom` to `null`. Reuse `RoomTimeline` but pass a filtered `EventTimelineSet`. Use `thread.timelineSet` directly for the most accurate thread view.
 ---
 ### P4-4 · Math / LaTeX Rendering
 **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') {
    const parts = node.data.split(/(\$\$.*?\$\$|\$.*?\$)/g);
    return parts.map((p) => {
      if (p.startsWith('$')) return <KaTeX math={p.replace(/\$/g, '')} />;
      return p;
    });
  }
  ```
 - **CSS (`src/app/styles/CustomHtml.css.ts`):** Import `katex/dist/katex.min.css` only when a math block is rendered to save initial bundle size.
 ---
 ### P4-6 · OIDC / SSO Next-Gen Auth (MSC3861)
 **Mechanism:** Matrix Authentication Service (MAS) Integration.
 - **Architecture:** Shift from password-based `/login` to OAuth2 `authorization_code` flow.
 - **Key Files:** `src/app/pages/auth/Login.tsx` and `src/app/hooks/useAuth.ts`.
 - **Implementation:** Use `oidc-client-ts` or a similar lightweight OIDC library. Check for `m.authentication` in `/.well-known/matrix/client`. Redirect to the MAS authorization endpoint. Handle the callback in a new `OidcCallback` route and store the OIDC `refresh_token`.
 ---
 ### P5-1 · Custom Accent Color Picker (Non-TDS only)
 **Mechanism:** Dynamic CSS variable injection.
 - **Setting (`src/app/state/settings.ts`):** Add `customAccentColor: string` (hex).
 - **Manager (`src/app/pages/ThemeManager.tsx`):** Inside the `useEffect` that monitors theme changes:
  ```typescript
  if (!lotusTerminal && customAccentColor) {
    document.documentElement.style.setProperty('--lt-accent-orange', customAccentColor);
    document.documentElement.style.setProperty('--lt-accent-orange-glow', `${customAccentColor}80`);
  }
  ```
 - **UI (`src/app/features/settings/general/General.tsx`):** Use `<Input type="color">`. Hide this section if `lotusTerminal` is `true`.
 ---
 ### P5-15 · In-Call Soundboard
 **Mechanism:** Local-to-Global Audio Bridge via Web Audio API.
 - Create an `AudioContext` and a `MediaStreamDestinationNode`.
 - Create an `AudioBufferSourceNode` for each clip.
 - 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 — RESOLVED]** Both the original claim and the earlier "practical blocker still holds" correction are now **outdated**. EC is same-origin **and** we own the source, so we no longer reach into EC's module scope from cinny — instead the fork **exposes the inject point itself**: the `io.lotus.inject_audio` widget action (`LotusWidgetActions.InjectAudio`) publishes a clip as a separate LiveKit track from inside EC. A **real** in-call soundboard (mixed into the call, not local-only) is therefore unblocked, and the cinny-side soundboard UI is now **built** (P5-15 above): uploadable clips played into the call via this action, stored in `io.lotus.soundboard` account data.
 ---
 ### 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) => {
  if (event.action === 'reply' && event.reply) {
    const { roomId, threadId } = event.notification.data;
    const session = sessions.get(event.clientId);
    fetch(`${session.baseUrl}/_matrix/client/v3/rooms/${roomId}/send/m.room.message`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${session.accessToken}` },
      body: JSON.stringify({
        msgtype: 'm.text',
        body: event.reply,
        'm.relates_to': threadId ? { rel_type: 'm.thread', event_id: threadId } : undefined,
      }),
    });
  }
 });
 ```
 ---
 ### P5-30 · Advanced ML Noise Suppression — Model Roadmap
 See shipped implementation in LOTUS_FEATURES.md → "Noise Suppression (Advanced Multi-Tier)".
 **Models status:**
 - **RNNoise** (sapphi, 48 kHz) — ✅ working, default fallback. Keep — runs on any hardware.
 - **Speex** (sapphi, 48 kHz) — ✅ working, low value; candidate to drop.
 - **DTLN** (@workadventure, 16 kHz) — 🟡 wired; sample-rate fix applied (was robotic at 48 kHz). **TODO: verify in a real call.** Narrowband (16 kHz) = slightly telephone-y even when correct.
 **Constraints:** client-side AudioWorklet, fully self-hosted, no GPU, self-hosted SFU (no LiveKit Cloud).
 **Roadmap:**
 - [ ] Verify DTLN 16 kHz fix in a real call.
 - [ ] **DeepFilterNet 3** — best self-hostable upgrade: Rust→WASM, CPU real-time, 48 kHz fullband. Self-host `df_bg.wasm` + DFN3 ONNX model; wire a 48 kHz worklet. Audio quality unverifiable without a real-call test.
 - [ ] **Desktop-only / HW-gated:** FRCRN (Alibaba) or NVIDIA Maxine (RTX/Tensor only). Runs in Tauri Rust backend + bridges a virtual mic into the webview. Must detect capability; web + weak HW falls back to RNNoise/DTLN.
 ---
 ### P5-31 · Granular Voice & Screenshare Quality Controls
 **Mechanism:** WebRTC Encoding Parameters + Backend Quality Guard.
 - **State Event:** `io.lotus.room_quality` (state key `""`) containing:
  ```json
  { "audio_bitrate": 128000, "screen_max_res": "1080p", "screen_max_fps": 60 }
  ```
 - **Screenshare:** In `src/app/plugins/call/CallControl.ts`, map the "Quality" setting to `getDisplayMedia` constraints.
 - **Audio Bitrate:** After the call joins, find the `RTCRtpSender` for the audio track:
  ```typescript
  const sender = peerConnection.getSenders().find((s) => s.track?.kind === 'audio');
  const params = sender.getParameters();
  params.encodings[0].maxBitrate = roomBitrate || 128000;
  await sender.setParameters(params);
  ```
 - **Backend Sidecar:** Extend `voice-limit-guard.py` (LXC 151) to fetch `io.lotus.room_quality` and inject limits into the LiveKit JWT or return them as an authorized config packet.
 ---
 ### P5-40 · Desktop — Proactive Update Notifications (Tauri)
 **Key Files:** `src/app/hooks/useTauriUpdater.ts`, `src/app/pages/client/ClientNonUIFeatures.tsx`, `src/app/features/toast/LotusToastContainer.tsx`.
 1. Create a `TauriUpdateFeature` component. Use `useTauriUpdater()` to get the `check` function and `status`.
 2. In a `useEffect`, call `check()` on mount and then on a `setInterval` (every 12 hours).
 3. When status transitions to `{ state: 'available', version: '...' }`, fire a Lotus Toast: "Lotus Chat v[version] is available!" with an "Update" button that calls `install()`.
 4. Store `lastCheck` timestamp in `localStorage` to prevent redundant checks on refresh.
 ---
 ### Mobile Bookmarks Visibility Fix
 **Issue:** `ClientLayout.tsx` explicitly restricts `BookmarksPanel` to `ScreenSize.Desktop` (lines 51-56).
 ```tsx
 // ClientLayout.tsx
 {
  bookmarksOpen && (
    <BookmarksPanel
      onClose={() => setBookmarksOpen(false)}
      isMobile={screenSize !== ScreenSize.Desktop}
    />
  );
 }
 ```
 `BookmarksPanel.tsx` already supports the `isMobile` prop (line 127) to enable full-screen absolute positioning. No other changes required.
 ---
 ### Remind Me Later (Slack-style)
 **Mechanism:** Account Data + Timer/Service Worker.
 - **Storage (`src/app/hooks/useReminders.ts`):** Store in account data `io.lotus.reminders` as `Array<{ id: string, roomId: string, eventId: string, timestamp: number }>`.
 - **Context Menu (`src/app/features/room/message/MessageContextMenu.tsx`):** Add "Remind me" option → opens date/time picker modal (reuse `JumpToTime.tsx` logic).
 - **Trigger (foreground):** `setTimeout` in a hook inside `ReminderMonitor` in `ClientNonUIFeatures.tsx` → pushes to `toastQueueAtom` in `state/toast.ts` when due.
 - **Trigger (background):** Use Service Worker — `setTimeout` in the main thread will not fire when the PWA is suspended.
 ---
 ### Mobile Usability Audit — Methodology
 1. **Viewport & Touch:** All interactive elements must have at least `44px × 44px` touch targets. Audit for horizontal overflow (horizontal scrolling must be disabled).
 2. **Modal Responsiveness:** All modals (Settings, Profile, etc.) MUST cover the full screen on mobile, not float as overlays.
 3. **Sidebar / Panels:** On mobile, sidebar panels (Members, Bookmarks, Media) must become full-screen overlays (using a `Drawer` or `Modal` pattern) rather than side-by-side flexbox panels.
 4. **Input & Composer:** Ensure the composer doesn't get obscured by the mobile keyboard. Test focus trap and blur behaviors.
 ---
 ## Implementation Notes
 ### ⚠️ TDS DESIGN LAW (repeated here for emphasis)
 > Every TDS color, animation, glow, border, shadow, and font value MUST come from `/root/code/web_template/base.css`.  
 > Never hardcode hex values. Never invent CSS variable names.  
 > Key variables: `--lt-accent-orange` · `--lt-accent-cyan` · `--lt-accent-green` · `--lt-glow-*` · `--lt-box-glow-*` · `--lt-border-color` · `--lt-font-mono`  
 > Reference implementation: `/root/code/tinker_tickets/` (markdown.js, base.js, ticket.css)  
 > This applies without exception to every task marked `[IMPROVE]`, `[Build]`, or any UI change.
 ### Design Rules
 - All new components must respect both TDS dark (`LotusTerminalTheme`) and TDS light (`LotusTerminalLightTheme`) modes
 - Non-TDS theme work (custom accent color, theme presets) uses vanilla-extract theme files — match the pattern in `src/lotus-terminal.css.ts`
 - Code syntax highlighting token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn` (defined in `web_template/base.css`)
 - `folds AvatarImage` does NOT accept children — wrap Avatar components externally for overlays/frames/borders
 ### CI/CD Pipeline
 ```
 edit → commit → git push origin lotus
 → Gitea Actions: tsc --noEmit, eslint, prettier (~3 min)
 → Webhook: lotus_deploy.sh on LXC 106 polls CI, then npm ci && npm run build → rsync
 → Live at chat.lotusguild.org (~11 min total)
 ```
 ### Per-Feature Checklist (before marking complete)
 - [ ] `npx tsc --noEmit` — zero TypeScript errors
 - [ ] `npx eslint src/` — zero new errors (warnings OK if pre-existing)
 - [ ] `npx prettier --check src/` — formatting passes
 - [ ] `README.md` updated (Lotus-custom features only — not upstream Cinny features)
 - [ ] `landing/index.html` updated if the feature appears in the comparison table
 - [ ] Visually tested at `chat.lotusguild.org` after CI deploys
 ### Homeserver Access (for server audits)
 - **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
 - **Config:** `/etc/matrix-synapse/homeserver.yaml`
 - **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`
@@ -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)** &nbsp;|&nbsp; Forked from [Cinny](https://github.com/cinnyapp/cinny), synced through v4.12.3
+**Deployed at [chat.lotusguild.org](https://chat.lotusguild.org)** &nbsp;|&nbsp; Forked from [Cinny](https://github.com/cinnyapp/cinny), synced through v4.12.7
 ---
@@ -18,9 +18,11 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
 ### Messaging
 - Threads: reply in a thread and read/write the whole conversation in a side panel — root messages show a "N replies" chip with an unread badge (threaded replies live in the panel now, not inline in the room)
 - Slack-style thread notifications: by default you're only pinged for threads you're in or where you're @mentioned; set any thread to All / Mentions-only / Mute from the panel's bell menu (muted threads stop bumping badges; syncs across devices)
 - See who has read each message, and track delivery status (sending / sent / failed)
 - Bookmark any message and revisit saved messages from the sidebar
- Schedule messages to send at a specific time
+- Schedule messages to send at a specific time (unencrypted rooms only — MSC4140 delayed events cannot be end-to-end encrypted, so the option is hidden in E2EE rooms)
 - Click "edited" on any message to see the full edit history
 - Drafts are saved automatically and survive page reloads
 - Long messages collapse automatically — click "Read more" to expand
@@ -33,10 +35,14 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
 - Search for and send GIFs from a built-in GIF picker
 - Control voice message playback speed: 0.75× / 1× / 1.5× / 2×
 - Search messages with a date range filter
 - Optional persistent search index for encrypted rooms (off by default — stores decrypted text on your device; clearable, wiped on logout)
 - On-device message translation — foreign-language messages show a "Translate" action, then an inline "Translated from <language> · Show original" toggle. Runs entirely on your device via the browser's built-in translation models, so message text never leaves your device or touches a cloud service (no Google/DeepL/Microsoft) — preserving end-to-end encryption. Pick your target language and optionally auto-translate incoming messages at Settings → General → Messages. Chromium desktop (Chrome/Edge 138+) and the Lotus desktop app only; hidden where unavailable (Firefox, Safari, mobile)
 - Write math with LaTeX: `$inline$` and `$$block$$` render via KaTeX (spec `data-mx-maths` supported)
 - Room topics support rich formatting (bold, links, italics)
 - Deleted messages show a placeholder instead of disappearing
 - Code blocks highlight syntax for JS/TS, Python, and Rust
 - Rich link preview cards for YouTube, GitHub, Twitter/X, Reddit, Spotify, Twitch, Steam, Wikipedia, Discord, npm, Stack Overflow, and IMDb
 - Inline media embeds — play videos and posts in place instead of opening a browser tab: YouTube/Shorts, Vimeo, Dailymotion, Streamable, Twitch, Loom, and Kick as video players; TikTok, X/Twitter, Instagram, Reddit, and Bluesky as inline posts; Spotify, SoundCloud, Apple Music, and Tidal as a built-in audio player. A privacy-friendly facade shows the homeserver's cached thumbnail and only loads the third-party player when you press play. Toggle at Settings → General → "Inline Media Players" (on by default)
 ### Calls & Voice
@@ -67,7 +73,6 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
 - Toggle to pause background animations
 - Glassmorphism sidebar — frosted glass effect that lets the background show through
 - Night Light / blue light filter with an adjustable intensity slider
 - Emoji prefixes on room names render larger in the sidebar (e.g. 🎮 general)
 - Rename any room for yourself only — other members see the original name
 - Emoji picker on all room name inputs
@@ -114,6 +119,7 @@ The Lotus Chat logo (`public/res/Lotus.png`) is a derivative work based on the o
 - Pending knock requests shown in the members list for room admins with a live badge count on the Members button
 - Homeserver support contact displayed in Help & About (MSC1929)
 - Server notice rooms are visually distinct from regular DMs
 - Known limitation: the UI is English-only for now — Lotus-added surfaces aren't yet localized, so language selection is restricted to English rather than showing a partially-translated UI (see [`LOTUS_FEATURES.md`](./LOTUS_FEATURES.md#localization))
 ---
@@ -123,7 +129,16 @@ Lotus Chat has a desktop app for Windows, macOS, and Linux. It wraps the same we
 ### Download
-Download the latest release from the [Releases page on code.lotusguild.org](https://code.lotusguild.org).
+| Operating System                 | Download                                                                                                                                                                                   |
 | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Windows                          | [Get the installer (.exe)](https://code.lotusguild.org/LotusGuild/cinny-desktop/releases/download/latest/LotusChat-x86_64-setup.exe)                                                       |
 | Linux (AppImage, any distro)     | [Get the AppImage](https://code.lotusguild.org/LotusGuild/cinny-desktop/releases/download/latest/LotusChat-x86_64.AppImage)                                                                |
 | Linux (Debian/Ubuntu)            | [Get the .deb](https://code.lotusguild.org/LotusGuild/cinny-desktop/releases/download/latest/LotusChat-x86_64.deb)                                                                         |
 | Linux (Arch/CachyOS/EndeavourOS) | [Get the .pkg.tar.zst](https://code.lotusguild.org/LotusGuild/cinny-desktop/releases/download/latest/LotusChat-x86_64.pkg.tar.zst) — install with `pacman -U LotusChat-x86_64.pkg.tar.zst` |
 All Linux builds need `webkit2gtk-4.1` and, for calls to work, GStreamer's `good`/`bad`/`ugly`/`libav` plugin sets (the pacman package pulls these in automatically; on the AppImage/.deb, install them via your package manager if joining a call shows "browser does not support WebRTC").
 See the full [Releases page on code.lotusguild.org](https://code.lotusguild.org/LotusGuild/cinny-desktop/releases) for signatures and older builds.
 ### SmartScreen Warning (Windows)
@@ -139,18 +154,49 @@ When you first run the installer on Windows, you may see a popup that says **"Wi
 After the first install, automatic in-app updates handle all future versions — you will not see this prompt again for updates.
 ### Desktop-Specific Features
 Beyond the web client, the desktop app adds native OS integration (Windows-focused; graceful no-ops elsewhere). See [`LOTUS_FEATURES.md`](./LOTUS_FEATURES.md#desktop-app-features) for detail.
 - **Native rich notifications** — Windows toasts you can click to open the room or reply to inline, right from the toast.
 - **Focus Assist sync** — Lotus silences its own notifications while Windows Focus Assist / Quiet Hours is on.
 - **Windows Jump List** — right-click the taskbar icon for quick access to your most-active rooms.
 - **Taskbar call controls** — Mute / Deafen / End Call buttons on the taskbar thumbnail during a call, plus call status in the volume flyout (SMTC).
 - **Stays awake in calls** — the system won't sleep or dim during a voice/video call.
 - **Network awareness** — reconnects promptly when Windows connectivity changes.
 - **Custom window chrome** (opt-in) — a Lotus-styled title bar in place of the OS one.
 - **Recursive folder drag-drop** — drop a whole folder onto the composer to upload everything inside it.
 - **Automatic background updates** with a one-click update toast.
 ---
 ## For Developers
 The source code lives in `/root/code/cinny`. All changes should be made on the `lotus` branch. Push to `origin/lotus` and CI will automatically build and deploy to [chat.lotusguild.org](https://chat.lotusguild.org) in approximately 11 minutes — no manual build or deploy steps required.
-See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_TODO.md](LOTUS_TODO.md) for the work backlog.
+See [LOTUS_FEATURES.md](LOTUS_FEATURES.md) for the full feature changelog and [LOTUS_REFERENCE.md](LOTUS_REFERENCE.md) for the design laws and operational reference (open work is in [Gitea issues](https://code.lotusguild.org/LotusGuild/cinny/issues)).
 ### Local Development
 Lotus Chat is a **pure client — there is no backend of its own to run.** It talks directly to a Matrix homeserver (Synapse) over HTTPS, so the only thing you run locally is the Vite dev server; it connects to a real homeserver for all data. If you were looking for "the backend to pair with it," there isn't one — that's the homeserver.
 **Prerequisites:** Node 20+ (CI builds on Node 24) and npm.
 ```bash
 npm ci        # deps; @lotusguild/* come from our Gitea npm registry (public read — no auth/token needed)
 npm start     # Vite dev server → http://localhost:8080
 ```
 The dev server defaults to **port 8080** (`vite.config.js`); if 8080 is already in use it falls through to 8081+, so check the "Local:" URL Vite prints on startup. If it boots but the page renders blank, it's almost always a failed module/asset resolution, not a "missing backend" — open the devtools console and read the first error.
 **Which homeserver / logging in:** `config.json` sets `defaultHomeserver: 0` → `matrix.lotusguild.org`, so you sign in with your normal `@you:matrix.lotusguild.org` account. That homeserver is **live production** — anything you send is real, so keep test traffic to a DM with yourself or a throwaway room. To develop fully isolated instead, point `config.json` at a throwaway `matrix.org` account (already in `homeserverList`) or a local Synapse.
 - **SSO / OIDC works from localhost.** Login goes through Authelia via OIDC dynamic registration; the provider redirects back to `http://localhost:8080/…` and the client registers that redirect on the fly, so no server-side allow-listing is needed. After the callback you may see a `GET …/_matrix/media/v1/thumbnail/… 404` — that's just a missing avatar thumbnail, **not** a login failure.
 ### 🔱 Element Call fork ("Lotus Call") — LIVE
 Voice/video channels embed **Element Call**, which is now our **self-built fork**
-(`@lotusguild/element-call-embedded` `0.20.1-lotus.1`, source at
+(`@lotusguild/element-call-embedded` `0.25.0-lotus.12`, upstream base v0.25.0, source at
 `LotusGuild/element-call`), published to our private Gitea npm registry and served
 same-origin. We no longer depend on the upstream prebuilt bundle, so in-call
 behavior is editable source instead of fragile DOM/widget hacks.
@@ -162,10 +208,10 @@ avatar decorations on EC video tiles, and a native transparent background.
 (`io.lotus.inject_audio` → in-call soundboard) and quality controls
 (`io.lotus.set_quality`).
-The full plan and integration map is in
+The fork's `io.lotus.*` action catalog + the publish procedure are in
-**[`HANDOFF_ELEMENT_CALL_FORK.md`](HANDOFF_ELEMENT_CALL_FORK.md)**; infra/hosting +
+**[`LOTUS_REFERENCE.md`](LOTUS_REFERENCE.md)** ("Element Call fork — operational reference");
-build-pipeline notes live in the `LotusGuild/matrix` repo README. Search the docs
+infra/hosting + build-pipeline notes live in the `LotusGuild/matrix` repo README.
-for the **`[EC-FORK]`** tag to find every related note.
+Search the docs for the **`[EC-FORK]`** tag to find every related note.
 ### Build
@@ -184,3 +230,5 @@ NODE_OPTIONS=--max_old_space_size=6144 npm run build
 ```
 edit → commit → git push    →    ~11 min    →    live at chat.lotusguild.org
 ```
 CI (`.gitea/workflows/ci.yml`) also runs a gitleaks secret scan, builds and smoke-tests the Docker image (`docker build`, boot + security-header checks against `docker-nginx.conf`), and dependency updates are proposed weekly by Renovate (`.gitea/workflows/renovate.yml`, config in `renovate.json`).
@@ -4,9 +4,9 @@
  "allowCustomHomeservers": true,
  "featuredCommunities": {
    "openAsDefault": false,
-    "spaces": [],
+    "spaces": ["!-1ZBnAH-JiCOV8MGSKN77zDGTuI3pgSdy8Unu_DrDyc", "#homelab:codestorm.net"],
-    "rooms": [],
+    "rooms": ["#jellyfin:matrix.org"],
-    "servers": []
+    "servers": ["matrixrooms.info"]
  },
  "hashRouter": {
    "enabled": false,
@@ -1,6 +1,21 @@
 # more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
 cinny.domain.tld {
  root * /path/to/cinny/dist
-  try_files {path} / index.html
+  # [Gitea #155] PWA share target: the service worker answers this POST; if it
  # isn't controlling the page yet, land on /share instead of a 405.
  redir /share-target /share 303
  try_files {path} /index.html
  file_server
  # Security headers (generic; add a Content-Security-Policy suited to your
  # homeserver + any embedded services). Caddy serves HTTPS automatically, so
  # HSTS is delivered over TLS.
  header {
    X-Frame-Options SAMEORIGIN
    X-Content-Type-Options nosniff
    Referrer-Policy strict-origin-when-cross-origin
    Strict-Transport-Security "max-age=63072000; includeSubDomains"
    Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()"
  }
 }
@@ -3,6 +3,7 @@
 ## Insert wasm type into nginx mime.types file so they load correctly.
 `/etc/nginx/mime.types`:
 ```
 types {
 ..
@@ -17,6 +17,22 @@ server {
    listen [::]:443 ssl;
    server_name cinny.domain.tld;
    # Security headers (generic; add a Content-Security-Policy suited to your
    # homeserver + any embedded services). NOTE: nginx does not inherit
    # server-level add_header into a location that sets its own add_header.
    add_header X-Frame-Options SAMEORIGIN always;
    add_header X-Content-Type-Options nosniff always;
    add_header Referrer-Policy strict-origin-when-cross-origin always;
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains" always;
    add_header Permissions-Policy "accelerometer=(), autoplay=(self), camera=(self), display-capture=(self), encrypted-media=(self), fullscreen=(self), geolocation=(self), gyroscope=(), magnetometer=(), microphone=(self), midi=(), payment=(), usb=()" always;
    # [Gitea #155] PWA share target. The service worker normally answers this
    # POST itself; if it isn't controlling the page yet, land on /share
    # (the shared files are lost, but nothing 405s).
    location = /share-target {
        return 303 /share;
    }
    location / {
        root /opt/cinny/dist/;
@@ -39,6 +39,7 @@ services:
 ```
 ### 1a. MAS `config.yaml` — the parts that matter
 After `config generate` (which fills in `secrets.keys` + `encryption`), set:
 ```yaml
@@ -48,18 +49,19 @@ http:
 database:
  uri: postgresql://synapse:pw@postgres/synapse
 matrix:
-  homeserver: localhost          # the server_name
+  homeserver: localhost # the server_name
  endpoint: http://synapse:8008/
-  secret: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"
+  secret: 'REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN'
 clients:
-  - client_id: "0000000000000000000SYNAPSE"
+  - client_id: '0000000000000000000SYNAPSE'
    client_auth_method: client_secret_basic
-    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"
+    client_secret: 'REPLACE_WITH_A_SHARED_CLIENT_SECRET'
-passwords:               # so you can create a local test account in the MAS UI
+passwords: # so you can create a local test account in the MAS UI
  enabled: true
 ```
 ### 1b. Synapse `homeserver.yaml` — delegate auth to MAS
 See `synapse-msc3861.yaml` in this folder; the key block is:
 ```yaml
@@ -67,17 +69,18 @@ experimental_features:
  msc3861:
    enabled: true
    issuer: http://localhost:8090/
-    client_id: "0000000000000000000SYNAPSE"
+    client_id: '0000000000000000000SYNAPSE'
    client_auth_method: client_secret_basic
-    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"   # == MAS clients[].client_secret
+    client_secret: 'REPLACE_WITH_A_SHARED_CLIENT_SECRET' # == MAS clients[].client_secret
-    admin_token: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"  # == MAS matrix.secret
+    admin_token: 'REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN' # == MAS matrix.secret
-    account_management_url: "http://localhost:8090/account"
+    account_management_url: 'http://localhost:8090/account'
 ```
 Create a test user via the MAS UI (`http://localhost:8090/`) or
 `docker compose exec mas mas-cli manage register-user`.
 Sanity check discovery (the client relies on this):
 ```bash
 curl -s http://localhost:8008/.well-known/matrix/client | jq '."m.authentication"'
 # -> { "issuer": "http://localhost:8090/", "account": "http://localhost:8090/account" }
@@ -108,5 +111,6 @@ See **section N** of `../../LOTUS_TESTING.md` for the actual pass/fail steps
 revocation, account-management link, and the non-OIDC-regression check).
 ## Files here
 - `synapse-msc3861.yaml` — the Synapse experimental-features delta.
 - `config.local.json` — the Lotus `public/config.json` override.
@@ -5,11 +5,11 @@ experimental_features:
  msc3861:
    enabled: true
    issuer: http://localhost:8090/
-    client_id: "0000000000000000000SYNAPSE"
+    client_id: '0000000000000000000SYNAPSE'
    client_auth_method: client_secret_basic
-    client_secret: "REPLACE_WITH_A_SHARED_CLIENT_SECRET"
+    client_secret: 'REPLACE_WITH_A_SHARED_CLIENT_SECRET'
-    admin_token: "REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN"
+    admin_token: 'REPLACE_WITH_A_LONG_SHARED_ADMIN_TOKEN'
-    account_management_url: "http://localhost:8090/account"
+    account_management_url: 'http://localhost:8090/account'
 # With msc3861 enabled, Synapse disables its own password/SSO login and advertises
 # `m.authentication` in /.well-known/matrix/client — which is exactly what the
@@ -2,6 +2,42 @@ server {
  listen 80;
  listen [::]:80;
  # ── Gitea #95 / #44 — shipped image had no security headers at all.
  # `always` so these are sent on error responses too, not just 200s.
  #
  # Content-Security-Policy, directive by directive:
  #   default-src 'self'          baseline: same-origin unless a directive below opens it up
  #   script-src  'self' 'wasm-unsafe-eval'
  #                                app code is same-origin only; 'wasm-unsafe-eval' is required
  #                                for the wasm modules used for E2EE crypto and audio denoise
  #   style-src   'self' 'unsafe-inline'
  #                                vanilla-extract (the app's CSS-in-JS) emits inline <style>,
  #                                so 'unsafe-inline' is required — no remote stylesheets needed
  #   img-src     * data: blob:   avatars/media/previews come from whichever homeserver or
  #                                media repo the user points the client at — not knowable
  #                                ahead of time — plus data: URIs and blob: for local previews
  #   media-src   * blob:         same reasoning as img-src, for audio/video attachments
  #   connect-src *                the Matrix homeserver is user-chosen at runtime, so this
  #                                can't be pinned to a fixed origin
  #   worker-src  'self' blob:    service worker + blob: web workers (crypto/denoise) are
  #                                same-origin or created from in-memory blobs, never remote
  #   frame-src   ...             the rich link-preview embeds in
  #                                src/app/utils/videoEmbed.ts, one entry per provider:
  #                                YouTube, Vimeo, Dailymotion, Streamable, Twitch, Spotify,
  #                                SoundCloud, Apple Music, Tidal, Mixcloud, Deezer,
  #                                Instagram, Reddit, Bluesky, Loom, Kick, TikTok, Steam —
  #                                plus 'self' (no first-party iframes today, cheap to allow)
  #   object-src  'none'          no <object>/<embed> plugin content is used anywhere
  #   base-uri    'self'          blocks a <base> tag injection from redirecting relative URLs
  #   frame-ancestors 'none'      this app must never be framed by another site (clickjacking)
  #
  # Shipped config — verify against chat.lotusguild.org's live headers before
  # enabling this in the production nginx config; this file is currently only
  # exercised by the CI `docker` smoke-test job, not by the live deploy path.
  add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; media-src * blob:; connect-src *; worker-src 'self' blob:; frame-src 'self' https://www.youtube-nocookie.com https://player.vimeo.com https://geo.dailymotion.com https://streamable.com https://clips.twitch.tv https://player.twitch.tv https://open.spotify.com https://w.soundcloud.com https://embed.music.apple.com https://embed.tidal.com https://www.mixcloud.com https://widget.deezer.com https://www.instagram.com https://embed.reddit.com https://embed.bsky.app https://www.loom.com https://player.kick.com https://www.tiktok.com https://store.steampowered.com; object-src 'none'; base-uri 'self'; frame-ancestors 'none'" always;
  add_header Referrer-Policy "no-referrer" always;
  add_header X-Content-Type-Options "nosniff" always;
  location / {
    root /usr/share/nginx/html;
@@ -0,0 +1,125 @@
 import { test, expect, Page } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
 import {
  createRoom,
  hsReachable,
  loginUI,
  openRoom,
  ensureUser,
  sendText,
  uniq,
  TestUser,
 } from './localHs';
 // [Gitea #222] Machine-checkable accessibility on every push. Two parts:
 //   1. axe-core over the main surfaces, failing on critical/serious findings.
 //      Colour-contrast is reported but not gated: several hits are generated
 //      avatar colours and portal false positives (see the issue for the list).
 //   2. Accessibility-tree snapshots of the composer, message menu, thread
 //      panel and settings nav, so a lost name/role/live-region shows up as a
 //      diff. Update deliberately with `npx playwright test e2e/a11y --update-snapshots`.
 // A real screen-reader pass still needs a human.
 const TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
 async function auditPage(page: Page, label: string) {
  const results = await new AxeBuilder({ page }).withTags(TAGS).analyze();
  const describe = (v: (typeof results.violations)[number]) =>
    `[${v.impact}] ${v.id}: ${v.help}\n${v.nodes
      .slice(0, 5)
      .map((n) => `    ${n.html.replace(/\s+/g, ' ').slice(0, 140)}`)
      .join('\n')}`;
  const contrast = results.violations.filter((v) => v.id === 'color-contrast');
  if (contrast.length) {
    // eslint-disable-next-line no-console
    console.log(`axe ${label}: contrast (not gated)\n${contrast.map(describe).join('\n')}`);
  }
  const gated = results.violations.filter(
    (v) => v.id !== 'color-contrast' && (v.impact === 'critical' || v.impact === 'serious'),
  );
  expect(gated.map(describe), `axe ${label}: critical/serious findings`).toEqual([]);
 }
 test.describe('accessibility', () => {
  test('login page passes axe @webkit', async ({ page }) => {
    await page.goto('/');
    await expect(page.getByLabel('Username or email')).toBeVisible();
    await auditPage(page, 'login');
  });
  test.describe('signed in', () => {
    let alice: TestUser;
    let room: string;
    test.beforeAll(async () => {
      test.skip(!(await hsReachable()), 'no local homeserver');
      alice = await ensureUser(uniq('e2e_a11y_'));
      room = await createRoom(alice, 'A11y Room');
      const root = await sendText(alice, room, 'thread root for a11y');
      await sendText(alice, room, 'a reply', {
        'm.relates_to': {
          rel_type: 'm.thread',
          event_id: root,
          is_falling_back: true,
          'm.in_reply_to': { event_id: root },
        },
      });
    });
    test.beforeEach(async ({ page }) => {
      await page.setViewportSize({ width: 1400, height: 850 });
      await loginUI(page, alice);
      await openRoom(page, room);
      await expect(page.getByText('thread root for a11y')).toBeVisible();
    });
    test('room timeline + composer', async ({ page }) => {
      await auditPage(page, 'room');
      await expect(page.locator('[data-slate-editor]').first()).toMatchAriaSnapshot({
        name: 'composer-editor.aria.yml',
      });
      await expect(page.getByRole('button', { name: 'Send message' })).toMatchAriaSnapshot({
        name: 'composer-send.aria.yml',
      });
    });
    test('message options menu', async ({ page }) => {
      const msg = page.locator('[data-message-item]', { hasText: 'thread root for a11y' });
      await msg.hover();
      await msg.getByRole('button', { name: 'More options' }).click();
      const menu = page.locator('[data-message-menu]').first();
      await expect(menu).toBeVisible();
      await auditPage(page, 'message menu');
      await expect(menu).toMatchAriaSnapshot({ name: 'message-menu.aria.yml' });
    });
    test('thread panel', async ({ page }) => {
      await page
        .locator('[data-message-item]', { hasText: 'thread root for a11y' })
        .getByText(/1 reply/)
        .click();
      await expect(page.locator('[data-slate-editor]')).toHaveCount(2);
      await auditPage(page, 'thread panel');
      await expect(page.getByRole('complementary').first()).toMatchAriaSnapshot({
        name: 'thread-panel.aria.yml',
      });
    });
    test('user settings', async ({ page }) => {
      await page.getByRole('button', { name: 'User Settings' }).click();
      const dialog = page.getByRole('dialog').first();
      await expect(dialog).toBeVisible();
      await auditPage(page, 'settings');
      await expect(dialog.getByRole('navigation').first()).toMatchAriaSnapshot({
        name: 'settings-nav.aria.yml',
      });
    });
    test('room settings', async ({ page }) => {
      await page.getByRole('button', { name: 'More Options' }).first().click();
      await page.getByText('Room Settings', { exact: true }).click();
      await expect(page.getByRole('dialog').first()).toBeVisible();
      await auditPage(page, 'room settings');
    });
  });
 });
@@ -0,0 +1,2 @@
 - textbox "Send a message...":
    - paragraph: Send a message...
@@ -0,0 +1,2 @@
 - button "Send message":
    - img
@@ -0,0 +1,39 @@
 - button "Add Reaction":
    - text: ''
    - img
 - button "Reply":
    - text: ''
    - img
 - button "Forward":
    - text: ''
    - img
 - button "Bookmark Message":
    - text: ''
    - img
 - button "Remind Me":
    - text: ''
    - img
 - button "Edit Message":
    - text: ''
    - img
 - button "Read Receipts":
    - text: ''
    - img
 - button "Copy Text":
    - text: ''
    - img
 - button "Translate":
    - text: ''
    - img
 - button "Copy Link":
    - text: ''
    - img
 - button "Copy Lotus Link":
    - text: ''
    - img
 - button "Pin Message":
    - text: ''
    - img
 - button "Delete":
    - text: ''
    - img
@@ -0,0 +1,22 @@
 - navigation "Settings sections":
    - button "General" [pressed]:
        - img
        - paragraph: General
    - button "Account":
        - img
        - paragraph: Account
    - button "Notifications":
        - img
        - paragraph: Notifications
    - button "Devices":
        - img
        - paragraph: Devices
    - button "Emojis & Stickers":
        - img
        - paragraph: Emojis & Stickers
    - button "Developer Tools":
        - img
        - paragraph: Developer Tools
    - button "About":
        - img
        - paragraph: About
@@ -0,0 +1,31 @@
 - complementary "Thread":
    - paragraph: Thread
    - paragraph: /A11y Room · started by e2e_a11y_\w+, .+/
    - button "Thread notifications":
        - img
    - button "Close thread":
        - img
    - log "Thread timeline":
        - article:
            - button /e2e_a11y_\w+, open profile/:
                - img
            - button /e2e_a11y_\w+/
            - time: /\d+:\d+ (AM|PM)/
            - text: thread root for a11y
        - paragraph: 1 reply
        - article:
            - button /e2e_a11y_\w+, open profile/:
                - img
            - button /e2e_a11y_\w+/
            - time: /\d+:\d+ (AM|PM)/
            - text: a reply
    - button "More actions":
        - img
    - textbox "Send a message...":
        - paragraph: Send a message...
    - button "Insert sticker":
        - img
    - button "Insert emoji":
        - img
    - button "Send message":
        - img
@@ -0,0 +1,101 @@
 import { test, expect } from '@playwright/test';
 import { collectConsole } from './helpers';
 // Tier 1 — boot smoke (Gitea #90). Runs against the built dist/ served by
 // `vite preview` (see playwright.config.ts webServer). No homeserver needed.
 test.describe('boot', () => {
  test('client boots to the login screen without errors @webkit @ios', async ({ page }) => {
    const consoleLog = collectConsole(page);
    await page.goto('/');
    // The auth page is what an unauthenticated visitor lands on.
    await expect(page).toHaveURL(/\/login\//);
    await expect(page.getByLabel('Username or email')).toBeVisible();
    await expect(page.getByLabel('Password', { exact: true })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
    // The React root rendered something (a blank #root is the classic
    // "bundle built but doesn't run" failure).
    const rootChildren = await page.locator('#root > *').count();
    expect(rootChildren, '#root should have rendered children').toBeGreaterThan(0);
    expect(consoleLog.unexpected(), 'unexpected console/page errors during boot').toEqual([]);
  });
  test('service worker script is served and registers @webkit @ios', async ({ page }) => {
    const swResponse = await page.request.get('/sw.js');
    expect(swResponse.status(), 'GET /sw.js').toBe(200);
    expect(swResponse.headers()['content-type'] ?? '').toMatch(/javascript/);
    await page.goto('/');
    await expect(page.getByLabel('Username or email')).toBeVisible();
    // src/index.tsx registers sw.js on load; wait for the registration to
    // exist (localhost counts as a secure context so this works in CI).
    const registered = await page.evaluate(async () => {
      if (!('serviceWorker' in navigator)) return 'unsupported';
      const deadline = Date.now() + 15_000;
      while (Date.now() < deadline) {
        // eslint-disable-next-line no-await-in-loop
        const reg = await navigator.serviceWorker.getRegistration();
        if (reg) return 'registered';
        // eslint-disable-next-line no-await-in-loop
        await new Promise((r) => {
          setTimeout(r, 250);
        });
      }
      return 'timeout';
    });
    expect(registered).toBe('registered');
  });
  test('bundled Element Call loads in a frame', async ({ page }) => {
    const consoleLog = collectConsole(page);
    // Any EC asset that fails to come back (wrong base path, missing chunk)
    // is the regression this test exists to catch.
    const failedEcRequests: string[] = [];
    page.on('response', (res) => {
      if (res.url().includes('/public/element-call/') && res.status() >= 400) {
        failedEcRequests.push(`${res.status()} ${res.url()}`);
      }
    });
    page.on('requestfailed', (req) => {
      if (req.url().includes('/public/element-call/')) {
        failedEcRequests.push(`${req.failure()?.errorText ?? 'failed'} ${req.url()}`);
      }
    });
    // Same-origin host page so the iframe is served exactly as the client
    // embeds it.
    await page.goto('/');
    await expect(page.getByLabel('Username or email')).toBeVisible();
    const ecResponse = await page.request.get('/public/element-call/index.html');
    expect(ecResponse.status(), 'GET /public/element-call/index.html').toBe(200);
    await page.evaluate(() => {
      const frame = document.createElement('iframe');
      frame.id = 'e2e-ec-frame';
      frame.src = '/public/element-call/index.html';
      frame.style.width = '800px';
      frame.style.height = '600px';
      document.body.appendChild(frame);
    });
    const frame = page.frameLocator('#e2e-ec-frame');
    // EC mounts into its own #root; rendering anything at all proves the
    // bundle resolved its assets from the /public/element-call/ base.
    await expect(frame.locator('#root > *').first()).toBeAttached({ timeout: 30_000 });
    // Let EC finish its initial render/requests before inspecting the logs.
    await page.waitForTimeout(2_000);
    expect(failedEcRequests, 'Element Call asset requests that failed').toEqual([]);
    // Loaded bare (no widget params / no homeserver) EC runs in standalone
    // mode and logs a caught React error about its missing config — that is
    // console noise, not a broken bundle. Uncaught page errors are still
    // fatal, and so is anything the boot test would reject on the host page.
    expect(consoleLog.pageErrors, 'uncaught page errors while loading Element Call').toEqual([]);
  });
 });
@@ -0,0 +1,201 @@
 import { test, expect, Page, Request } from '@playwright/test';
 import { collectConsole, generateJpeg } from './helpers';
 // Tier 2 — E2EE composer smoke (Gitea #90). Needs a real homeserver account
 // that supports `m.login.password`, supplied via env (CI secrets, see
 // LOTUS_TESTING.md). Skips cleanly when unset so the boot tier still gates CI.
 //
 //   E2E_HOMESERVER  server name as typed in the login page, e.g. matrix.example.org
 //   E2E_USER        localpart or full MXID
 //   E2E_PASSWORD    password
 //
 // Every run logs in as a fresh device (fresh browser context), so the account
 // accumulates one device per run — use a throwaway test account.
 const HOMESERVER = process.env.E2E_HOMESERVER;
 const USER = process.env.E2E_USER;
 const PASSWORD = process.env.E2E_PASSWORD;
 const HAS_CREDENTIALS = Boolean(HOMESERVER && USER && PASSWORD);
 type SentEvent = { url: string; body: Record<string, unknown> };
 /** Records every `PUT .../send/<type>/<txn>` the client makes. */
 function recordSentEvents(page: Page): SentEvent[] {
  const sent: SentEvent[] = [];
  page.on('request', (req: Request) => {
    if (
      req.method() !== 'PUT' ||
      !/\/_matrix\/client\/[^/]+\/rooms\/[^/]+\/send\//.test(req.url())
    ) {
      return;
    }
    let body: Record<string, unknown> = {};
    try {
      body = JSON.parse(req.postData() ?? '{}');
    } catch {
      // leave empty; the assertion below will surface it
    }
    sent.push({ url: req.url(), body });
  });
  return sent;
 }
 const eventTypeOf = (url: string): string =>
  decodeURIComponent(url.match(/\/send\/([^/]+)\//)?.[1] ?? '');
 test.describe('E2EE composer', () => {
  test.skip(!HAS_CREDENTIALS, 'needs E2E_HOMESERVER / E2E_USER / E2E_PASSWORD');
  // The three scenarios build on one another (login → room → messages), so
  // share a single page and run them in order.
  test.describe.configure({ mode: 'serial' });
  test.setTimeout(120_000);
  let page: Page;
  let sentEvents: SentEvent[];
  let consoleLog: ReturnType<typeof collectConsole>;
  let roomUrl: string;
  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();
    consoleLog = collectConsole(page);
    sentEvents = recordSentEvents(page);
  });
  test.afterAll(async () => {
    await page?.close();
  });
  test('logs in with a password and reaches the client', async () => {
    await page.goto(`/login/${encodeURIComponent(HOMESERVER as string)}/`);
    await page.getByLabel('Username or email').fill(USER as string);
    await page.getByLabel('Password', { exact: true }).fill(PASSWORD as string);
    await page.getByRole('button', { name: 'Login' }).click();
    // Leaving /login/ means the session was stored and the client mounted.
    await expect(page).not.toHaveURL(/\/login\//, { timeout: 60_000 });
    // The client shell mounts at /home/ (or the last-visited space) once the
    // session is restored and initial sync starts.
    await expect(page).toHaveURL(/\/(home|direct|explore|inbox|!|#)/, { timeout: 60_000 });
    await expect(page.locator('#root > *').first()).toBeAttached();
    expect(consoleLog.pageErrors, 'uncaught page errors during login').toEqual([]);
  });
  test('creates a private encrypted room and sends a text message', async () => {
    const roomName = `e2e-smoke-${Date.now()}`;
    const createRoomRequest = page.waitForRequest(
      (req) => req.method() === 'POST' && /\/_matrix\/client\/[^/]+\/createRoom/.test(req.url()),
    );
    await page.goto('/home/create/');
    const form = page.locator('form').filter({ has: page.locator('input[name="nameInput"]') });
    await expect(form).toBeVisible();
    await form.locator('input[name="nameInput"]').fill(roomName);
    // Default access is Private (or Restricted, which also allows E2EE); the
    // encryption switch lives in the "End-to-End Encryption" setting tile.
    const encryptionSwitch = form
      .getByText('End-to-End Encryption', { exact: true })
      .locator('xpath=ancestor::div[.//*[@role="switch"]][1]')
      .getByRole('switch');
    await expect(encryptionSwitch).toBeVisible();
    if ((await encryptionSwitch.getAttribute('aria-checked')) !== 'true') {
      await encryptionSwitch.click();
    }
    await expect(encryptionSwitch).toHaveAttribute('aria-checked', 'true');
    await form.getByRole('button', { name: 'Create' }).click();
    // The createRoom request itself must ask for encryption up front.
    const createBody = JSON.parse((await createRoomRequest).postData() ?? '{}') as {
      initial_state?: { type: string; content?: { algorithm?: string } }[];
    };
    const encryptionState = createBody.initial_state?.find((s) => s.type === 'm.room.encryption');
    expect(encryptionState?.content?.algorithm, 'createRoom initial_state m.room.encryption').toBe(
      'm.megolm.v1.aes-sha2',
    );
    // Landed in the new room.
    await expect(page).toHaveURL(/\/home\/!/, { timeout: 30_000 });
    roomUrl = page.url();
    await expect(page.getByText(roomName, { exact: true }).first()).toBeVisible({
      timeout: 30_000,
    });
    const text = `hello from playwright ${Date.now()}`;
    const composer = page.getByRole('textbox', { name: 'Send a message...' });
    await expect(composer).toBeVisible();
    await composer.click();
    await composer.fill(text);
    await composer.press('Enter');
    await expect(page.getByText(text, { exact: true })).toBeVisible({ timeout: 30_000 });
    const messageSends = sentEvents.filter((e) => eventTypeOf(e.url).startsWith('m.room.'));
    expect(messageSends.length, 'at least one room event sent').toBeGreaterThan(0);
    for (const e of messageSends) {
      expect(eventTypeOf(e.url), `event type for ${e.url}`).toBe('m.room.encrypted');
      expect(e.body).toHaveProperty('ciphertext');
      expect(e.body).not.toHaveProperty('body');
      expect(JSON.stringify(e.body)).not.toContain(text);
    }
    expect(consoleLog.pageErrors, 'uncaught page errors while sending text').toEqual([]);
  });
  test('attaches a compressed image and it is sent encrypted', async () => {
    await expect(page).toHaveURL(roomUrl);
    const fileName = `lotus-e2e-${Date.now()}.jpg`;
    const jpeg = await generateJpeg(page);
    const sentBefore = sentEvents.length;
    // The composer opens a detached <input type=file> via selectFile(); the
    // file chooser event is the hook Playwright gives us for that.
    const fileChooser = page.waitForEvent('filechooser');
    await page.getByRole('button', { name: 'Attach file' }).click();
    await (await fileChooser).setFiles({ name: fileName, mimeType: 'image/jpeg', buffer: jpeg });
    // Upload board: tick "Compress image before uploading", then Send.
    const compressSwitch = page
      .getByText('Compress image before uploading', { exact: true })
      .locator('xpath=ancestor::div[.//*[@role="switch"]][1]')
      .getByRole('switch');
    await expect(compressSwitch).toBeVisible({ timeout: 30_000 });
    if ((await compressSwitch.getAttribute('aria-checked')) !== 'true') {
      await compressSwitch.click();
    }
    await expect(compressSwitch).toHaveAttribute('aria-checked', 'true');
    // compressImage() runs asynchronously once ticked; wait for it to settle
    // so the Send picks up the compressed result.
    await expect(page.getByText('compressing…')).toHaveCount(0, { timeout: 30_000 });
    await page.getByRole('button', { name: 'Send', exact: true }).click();
    // The timeline shows the image (alt/title = file body; compression
    // renames to .jpg which our name already is).
    const image = page.locator(`img[alt="${fileName}"]`);
    const viewButton = page.getByRole('button', { name: 'View', exact: true });
    await expect(image.or(viewButton).first()).toBeVisible({ timeout: 60_000 });
    if (!(await image.count())) {
      // Media auto-load disabled — click through and wait for the image.
      await viewButton.first().click();
    }
    await expect(image.first()).toBeVisible({ timeout: 60_000 });
    // Every room event sent for the image was encrypted: no plaintext
    // m.room.message with a `url`/`file`/`body`.
    const newSends = sentEvents
      .slice(sentBefore)
      .filter((e) => eventTypeOf(e.url).startsWith('m.room.'));
    expect(newSends.length, 'image produced at least one room event').toBeGreaterThan(0);
    for (const e of newSends) {
      expect(eventTypeOf(e.url), `event type for ${e.url}`).toBe('m.room.encrypted');
      expect(e.body).toHaveProperty('ciphertext');
      expect(e.body).not.toHaveProperty('url');
      expect(e.body).not.toHaveProperty('file');
      expect(e.body).not.toHaveProperty('body');
      expect(JSON.stringify(e.body)).not.toContain('mxc://');
    }
    expect(consoleLog.pageErrors, 'uncaught page errors while sending image').toEqual([]);
  });
 });
@@ -0,0 +1,87 @@
 import { Page } from '@playwright/test';
 // Console noise that is expected on a clean boot and must not fail the smoke
 // test. Keep this list short and specific — every entry should name a known,
 // understood source.
 const BENIGN_CONSOLE_PATTERNS: RegExp[] = [
  // README: after login you may see a 404 for a missing avatar thumbnail —
  // "not a login failure". Also covers the generic resource-404 console line.
  /_matrix\/(client|media)\/v\d+\/(media\/)?thumbnail/i,
  /Failed to load resource: the server responded with a status of 404/i,
  // The login page probes `POST /_matrix/client/v3/register` to learn whether
  // registration is open; the homeserver answers 401 + UIA flows by design.
  /Failed to load resource: the server responded with a status of 401/i,
  // Homeserver discovery pings can fail on a runner with no outbound network.
  /\/\.well-known\/matrix\/client/i,
  /Failed to fetch|NetworkError|ERR_NAME_NOT_RESOLVED|ERR_INTERNET_DISCONNECTED/i,
  // Tier 3 (local homeserver named "localhost"): the client's well-known
  // autodiscovery probes https://localhost/, which is either not listening
  // (CI) or a self-signed dev server (local calls stack).
  /ERR_CONNECTION_REFUSED|ERR_CERT_AUTHORITY_INVALID|ERR_SSL_PROTOCOL_ERROR/i,
  // WebKit's spellings of the same discovery failures (#221).
  /Unacceptable TLS certificate|Could not connect to|Connection refused|TypeError: Load failed/i,
  // Also a fetch cut short by our own navigation (e.g. the crypto wasm while
  // the test moves from /home to a room) — WebKit words that the same way.
  /due to access control checks/i,
  // React devtools hint in production bundles.
  /Download the React DevTools/i,
 ];
 export type ConsoleCollector = {
  errors: string[];
  pageErrors: string[];
  /** Errors not matched by the benign allowlist. */
  unexpected: () => string[];
 };
 /**
 * Records console.error lines and uncaught page errors for the given page.
 * Attach BEFORE navigating so nothing emitted during boot is missed.
 */
 export function collectConsole(page: Page): ConsoleCollector {
  const errors: string[] = [];
  const pageErrors: string[] = [];
  page.on('console', (msg) => {
    if (msg.type() === 'error') errors.push(msg.text());
  });
  page.on('pageerror', (err) => {
    pageErrors.push(err.message);
  });
  return {
    errors,
    pageErrors,
    // WebKit surfaces handled fetch failures (well-known probes) as page
    // errors rather than console lines, so the allowlist applies to both.
    unexpected: () => [
      ...pageErrors
        .filter((m) => !BENIGN_CONSOLE_PATTERNS.some((re) => re.test(m)))
        .map((m) => `pageerror: ${m}`),
      ...errors.filter((m) => !BENIGN_CONSOLE_PATTERNS.some((re) => re.test(m))),
    ],
  };
 }
 /**
 * Generates a small JPEG in the browser (canvas.toBlob) and returns its bytes.
 * JPEG rather than PNG so the composer's "Compress image" path actually
 * re-encodes (compressImage() deliberately skips PNG to preserve alpha).
 */
 export async function generateJpeg(page: Page, size = 96): Promise<Buffer> {
  const dataUrl = await page.evaluate((px) => {
    const canvas = document.createElement('canvas');
    canvas.width = px;
    canvas.height = px;
    const ctx = canvas.getContext('2d');
    if (!ctx) throw new Error('canvas 2d context unavailable');
    const grad = ctx.createLinearGradient(0, 0, px, px);
    grad.addColorStop(0, '#7c3aed');
    grad.addColorStop(1, '#f59e0b');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, px, px);
    ctx.fillStyle = '#fff';
    ctx.font = `${Math.floor(px / 4)}px sans-serif`;
    ctx.fillText('e2e', px / 8, px / 2);
    return canvas.toDataURL('image/jpeg', 0.95);
  }, size);
  return Buffer.from(dataUrl.split(',')[1], 'base64');
 }
@@ -0,0 +1,335 @@
 import { test, expect, devices } from '@playwright/test';
 import {
  HS,
  api,
  createRoom,
  enc,
  ensureUser,
  hsReachable,
  joinRoom,
  loginUI,
  openRoom,
  sendText,
  uniq,
  TestUser,
 } from './localHs';
 import { collectConsole } from './helpers';
 // Tier 3 — regression suite against the job's own Synapse (Gitea #220).
 // Each test seeds what it needs through the CS API and drives the built
 // client; nothing here touches a real deployment.
 test.describe('local homeserver regression', () => {
  let alice: TestUser;
  let bob: TestUser;
  test.beforeAll(async () => {
    test.skip(!(await hsReachable()), `no local homeserver at ${HS} (set E2E_LOCAL_HS)`);
    alice = await ensureUser(uniq('e2e_alice_'));
    bob = await ensureUser(uniq('e2e_bob_'));
  });
  test('logs in, opens a room, sends and receives @webkit @ios', async ({ page }) => {
    const console_ = collectConsole(page);
    const room = await createRoom(alice, 'Regression Room', { invite: [bob.userId] });
    await joinRoom(bob, room);
    await sendText(bob, room, 'hello from bob');
    await loginUI(page, alice);
    await openRoom(page, room);
    await expect(page.getByText('hello from bob')).toBeVisible();
    await page.locator('[data-slate-editor]').first().click();
    await page.keyboard.type('hello from alice');
    await page.keyboard.press('Enter');
    await expect(page.getByText('hello from alice')).toBeVisible();
    await expect
      .poll(
        async () =>
          (
            await api<{ chunk: { content: { body: string } }[] }>(
              'GET',
              `/_matrix/client/v3/rooms/${enc(room)}/messages?dir=b&limit=1`,
              bob.token,
            )
          ).chunk[0]?.content.body,
      )
      .toBe('hello from alice');
    expect(console_.unexpected()).toEqual([]);
  });
  test('your own message scrolls into view even after scrolling up (#212)', async ({ page }) => {
    const room = await createRoom(alice, 'Scroll Room');
    await Array.from({ length: 40 }).reduce<Promise<unknown>>(
      (chain, _, i) => chain.then(() => sendText(alice, room, `filler ${i}`)),
      Promise.resolve(),
    );
    await loginUI(page, alice);
    await openRoom(page, room);
    await page.mouse.move(600, 350);
    await page.mouse.wheel(0, -600);
    await expect(page.getByRole('button', { name: /Jump to Latest/ })).toBeVisible();
    await page.locator('[data-slate-editor]').first().click();
    await page.keyboard.type('sent while scrolled up');
    await page.keyboard.press('Enter');
    await expect(page.getByText('sent while scrolled up')).toBeInViewport();
    await expect(page.getByRole('button', { name: /Jump to Latest/ })).toHaveCount(0);
  });
  test('/kick failure is reported, not swallowed (#216)', async ({ page }) => {
    const room = await createRoom(alice, 'Kick Room', { invite: [bob.userId] });
    await joinRoom(bob, room);
    await loginUI(page, bob);
    await openRoom(page, room);
    const editor = page.locator('[data-slate-editor]').first();
    await editor.click();
    await page.keyboard.type('/kick', { delay: 40 });
    await page.keyboard.press('Tab'); // accept the command chip
    await page.keyboard.type(` ${alice.userId}`, { delay: 20 });
    await page.keyboard.press('Enter');
    await expect(page.getByText(/Could not kick .*You cannot kick/)).toBeVisible();
  });
  test('upload failure shows a plain sentence, never the raw MatrixError (#213)', async ({
    page,
  }) => {
    const room = await createRoom(alice, 'Upload Room');
    await loginUI(page, alice);
    await openRoom(page, room);
    await page.route(/\/_matrix\/media\/v3\/upload/, (route) =>
      route.fulfill({
        status: 413,
        contentType: 'application/json',
        body: JSON.stringify({ errcode: 'M_TOO_LARGE', error: 'nope' }),
      }),
    );
    const chooser = page.waitForEvent('filechooser');
    await page.getByRole('button', { name: 'Attach file' }).first().click();
    await (
      await chooser
    ).setFiles({
      name: 'pic.png',
      mimeType: 'image/png',
      buffer: Buffer.from(
        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
        'base64',
      ),
    });
    const send = page.getByRole('button', { name: /^Send$/ });
    if (await send.count()) await send.first().click();
    else await page.getByRole('button', { name: 'Send message' }).click();
    await expect(page.getByText(/This file is larger than the server allows/)).toBeVisible();
    await expect(page.getByText(/MatrixError|_matrix\/media/)).toHaveCount(0);
  });
  test('forwarded message carries its provenance header', async ({ page }) => {
    const src = await createRoom(bob, 'Source Room', { invite: [alice.userId] });
    const dst = await createRoom(alice, 'Destination Room');
    await joinRoom(alice, src);
    await sendText(bob, src, 'the original message');
    await loginUI(page, alice);
    await openRoom(page, src);
    const msg = page.locator('[data-message-item]', { hasText: 'the original message' }).first();
    await msg.hover();
    await msg.getByRole('button', { name: 'More options' }).click();
    await page.getByText('Forward', { exact: true }).click();
    const search = page.getByPlaceholder('Search rooms…');
    await search.fill('Destination Room');
    await page.locator('button', { hasText: 'Destination Room' }).first().click();
    await page.getByRole('button', { name: /^Send to 1 room/ }).click();
    await expect(page.getByText(/Forwarded to/)).toBeVisible();
    await openRoom(page, dst);
    await expect(page.getByText(/Forwarded from .* in Source Room/)).toBeVisible();
    await expect(page.getByText('the original message')).toBeVisible();
  });
  test('thread panel: opens from the chip and yields the member drawer at 1400px (#218) @webkit', async ({
    browser,
  }) => {
    const ctx = await browser.newContext({ viewport: { width: 1400, height: 850 } });
    const page = await ctx.newPage();
    const room = await createRoom(alice, 'Thread Room');
    const root = await sendText(alice, room, 'thread root');
    await sendText(alice, room, 'a reply', {
      'm.relates_to': {
        rel_type: 'm.thread',
        event_id: root,
        is_falling_back: true,
        'm.in_reply_to': { event_id: root },
      },
    });
    await loginUI(page, alice);
    await openRoom(page, room);
    await page
      .locator('[data-message-item]', { hasText: 'thread root' })
      .getByText(/1 reply/)
      .click();
    await expect(page.locator('[data-slate-editor]')).toHaveCount(2);
    const widths = await page
      .locator('[data-slate-editor]')
      .evaluateAll((els) => els.map((e) => e.getBoundingClientRect().width));
    expect(Math.min(...widths)).toBeGreaterThan(120);
    await ctx.close();
  });
  test('a thread I started keeps its unread replies while I view the room (#217)', async ({
    page,
  }) => {
    const room = await createRoom(alice, 'Thread Unread Room', { invite: [bob.userId] });
    await joinRoom(bob, room);
    const inThread = (root: string) => ({
      'm.relates_to': {
        rel_type: 'm.thread',
        event_id: root,
        is_falling_back: true,
        'm.in_reply_to': { event_id: root },
      },
    });
    const root = await sendText(alice, room, 'my thread root');
    await loginUI(page, alice);
    await openRoom(page, room);
    // While the room is open and at the bottom: a thread reply, then a newer
    // main-timeline message. Neither may clear the thread without opening it.
    await sendText(bob, room, 'reply in your thread', inThread(root));
    await sendText(bob, room, 'newer main message');
    await expect(page.getByText('newer main message')).toBeVisible();
    const chip = page
      .locator('[data-message-item]', { hasText: 'my thread root' })
      .getByRole('button', { name: /1 reply/ });
    const threadUnread = async () => {
      // not_types varies so Synapse's sync response cache can't serve a stale answer.
      const filter = {
        room: {
          rooms: [room],
          timeline: { limit: 1, unread_thread_notifications: true, not_types: [uniq('x.')] },
        },
      };
      const sync = await api<{
        rooms: {
          join: Record<string, { unread_thread_notifications?: Record<string, unknown> }>;
        };
      }>(
        'GET',
        `/_matrix/client/v3/sync?timeout=0&filter=${enc(JSON.stringify(filter))}`,
        alice.token,
      );
      return root in (sync.rooms.join[room]?.unread_thread_notifications ?? {});
    };
    await page.waitForTimeout(2000); // let any receipt the room view would send go out
    expect(await threadUnread()).toBe(true);
    await expect(chip).toHaveAccessibleName(/unread replies/);
    await chip.click();
    await expect.poll(threadUnread).toBe(false);
  });
  test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
    const room = await createRoom(alice, 'Lightbox Room');
    const png = Buffer.from(
      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
      'base64',
    );
    const up = await fetch(`${HS}/_matrix/media/v3/upload?filename=a.png`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${alice.token}`, 'Content-Type': 'image/png' },
      body: png,
    }).then((r) => r.json() as Promise<{ content_uri: string }>);
    await api(
      'PUT',
      `/_matrix/client/v3/rooms/${enc(room)}/send/m.room.message/img1`,
      alice.token,
      {
        msgtype: 'm.image',
        body: 'a.png',
        url: up.content_uri,
        info: { mimetype: 'image/png', size: png.length, w: 1, h: 1 },
      },
    );
    await loginUI(page, alice);
    await openRoom(page, room);
    await page.locator('[data-message-item] img[alt="a.png"]').click();
    const viewer = page.getByRole('dialog', { name: 'Media viewer' });
    await expect(viewer).toBeVisible();
    await expect(viewer.getByText('1 / 1')).toBeVisible();
    await page.keyboard.press('Escape');
    await expect(viewer).toHaveCount(0);
  });
  test('warns when the local clock is far off the server (#158)', async ({ page }) => {
    const room = await createRoom(alice, 'Skew Room', { invite: [bob.userId] });
    await joinRoom(bob, room);
    await page.clock.install({ time: Date.now() + 14 * 60 * 1000 });
    await loginUI(page, alice);
    await openRoom(page, room);
    for (let i = 0; i < 4; i += 1) {
      // eslint-disable-next-line no-await-in-loop
      await sendText(bob, room, `tick ${i}`);
      // eslint-disable-next-line no-await-in-loop
      await page.waitForTimeout(500);
    }
    await expect(page.getByText(/clock is .*14 minutes ahead of the server/)).toBeVisible();
    await page.getByRole('button', { name: 'Dismiss for 24 h' }).click();
    await expect(page.getByText(/clock is .*ahead of the server/)).toHaveCount(0);
  });
  test('status save survives the presence rate limit (#226)', async ({ page }) => {
    let lastOk = 0;
    await page.route(/\/presence\/[^/]+\/status/, (route) => {
      const now = Date.now();
      if (now - lastOk < 10_000) {
        return route.fulfill({
          status: 429,
          contentType: 'application/json',
          body: JSON.stringify({
            errcode: 'M_LIMIT_EXCEEDED',
            error: 'Too Many Requests',
            retry_after_ms: 10_000 - (now - lastOk),
          }),
        });
      }
      lastOk = now;
      return route.continue();
    });
    await loginUI(page, alice);
    await page
      .locator('button', { hasText: new RegExp(`^${alice.localpart[0]}$`) })
      .first()
      .click();
    await page.getByText('Account', { exact: true }).first().click();
    const input = page.getByLabel('Status message');
    const status = uniq('status ');
    await input.fill(status);
    await input.locator('xpath=ancestor::form[1]').getByRole('button', { name: 'Save' }).click();
    await expect(page.getByText(/Failed to save status/)).toHaveCount(0);
    await expect
      .poll(
        async () =>
          (
            await api<{ status_msg?: string }>(
              'GET',
              `/_matrix/client/v3/presence/${enc(alice.userId)}/status`,
              alice.token,
            )
          ).status_msg,
        { timeout: 30_000 },
      )
      .toBe(status);
  });
  test('touch: long-press opens the message action sheet (#166)', async ({ browser }) => {
    const ctx = await browser.newContext({ ...devices['Pixel 7'] });
    const page = await ctx.newPage();
    const room = await createRoom(alice, 'Touch Room');
    await sendText(alice, room, 'press and hold me');
    await loginUI(page, alice);
    await openRoom(page, room);
    const msg = page.locator('[data-message-item]', { hasText: 'press and hold me' });
    const box = (await msg.boundingBox())!;
    const cdp = await ctx.newCDPSession(page);
    const x = box.x + 100;
    const y = box.y + box.height / 2;
    await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [{ x, y }] });
    await page.waitForTimeout(700);
    await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] });
    const sheet = page.getByRole('dialog', { name: 'Message actions' });
    await expect(sheet).toBeVisible();
    await expect(sheet.getByText('Reply', { exact: true })).toBeVisible();
    await ctx.close();
  });
 });
@@ -0,0 +1,114 @@
 import { Page, expect } from '@playwright/test';
 /**
 * Tier 3 (Gitea #220): regression tests against a throwaway Synapse the job
 * starts itself (`scripts/dev-homeserver.sh start`). No prod secrets. Set
 * E2E_LOCAL_HS (default http://localhost:8008) — the spec skips when the
 * server isn't reachable.
 */
 export const HS = process.env.E2E_LOCAL_HS || 'http://localhost:8008';
 export const PASSWORD = 'password123';
 export const enc = encodeURIComponent;
 export async function hsReachable(): Promise<boolean> {
  try {
    const res = await fetch(`${HS}/_matrix/client/versions`);
    return res.ok;
  } catch {
    return false;
  }
 }
 export async function api<T = Record<string, unknown>>(
  method: string,
  path: string,
  token?: string,
  body?: unknown,
 ): Promise<T> {
  const res = await fetch(`${HS}${path}`, {
    method,
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
    },
    body: body === undefined ? undefined : JSON.stringify(body),
  });
  return (await res.json()) as T;
 }
 export type TestUser = { localpart: string; userId: string; token: string };
 /** Registers (open registration) or logs in a test user. */
 export async function ensureUser(localpart: string): Promise<TestUser> {
  const reg = await api<{ user_id?: string; access_token?: string }>(
    'POST',
    '/_matrix/client/v3/register',
    undefined,
    { username: localpart, password: PASSWORD, auth: { type: 'm.login.dummy' } },
  );
  if (reg.access_token && reg.user_id) {
    return { localpart, userId: reg.user_id, token: reg.access_token };
  }
  const login = await api<{ user_id: string; access_token: string }>(
    'POST',
    '/_matrix/client/v3/login',
    undefined,
    {
      type: 'm.login.password',
      identifier: { type: 'm.id.user', user: localpart },
      password: PASSWORD,
    },
  );
  return { localpart, userId: login.user_id, token: login.access_token };
 }
 export async function createRoom(
  owner: TestUser,
  name: string,
  opts: { invite?: string[]; preset?: string } = {},
 ): Promise<string> {
  const res = await api<{ room_id: string }>('POST', '/_matrix/client/v3/createRoom', owner.token, {
    name,
    preset: opts.preset ?? 'public_chat',
    invite: opts.invite,
  });
  return res.room_id;
 }
 export async function joinRoom(user: TestUser, roomId: string): Promise<void> {
  await api('POST', `/_matrix/client/v3/rooms/${enc(roomId)}/join`, user.token, {});
 }
 let txn = 0;
 export async function sendText(
  user: TestUser,
  roomId: string,
  body: string,
  extra: Record<string, unknown> = {},
 ): Promise<string> {
  txn += 1;
  const res = await api<{ event_id: string }>(
    'PUT',
    `/_matrix/client/v3/rooms/${enc(roomId)}/send/m.room.message/e2e${Date.now()}_${txn}`,
    user.token,
    { msgtype: 'm.text', body, ...extra },
  );
  return res.event_id;
 }
 /** Password login through the UI against the local homeserver. */
 export async function loginUI(page: Page, user: TestUser): Promise<void> {
  await page.goto(`/login/${enc(HS)}/`);
  await page.getByLabel('Username or email').fill(user.localpart);
  await page.getByLabel('Password', { exact: true }).fill(PASSWORD);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.waitForURL(/\/home/, { timeout: 60_000 });
 }
 export async function openRoom(page: Page, roomId: string): Promise<void> {
  await page.goto(`/home/${enc(roomId)}`);
  await expect(page.locator('[data-slate-editor]').first()).toBeVisible({ timeout: 30_000 });
 }
 export const uniq = (prefix: string): string =>
  `${prefix}${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
@@ -0,0 +1,14 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true,
    "lib": ["ES2022", "DOM"],
    "types": ["node"]
  },
  "include": ["./**/*.ts", "../playwright.config.ts"]
 }
@@ -25,7 +25,7 @@ export default [
  tsPlugin.configs['flat/eslint-recommended'],
  ...tsPlugin.configs['flat/recommended'],
  reactPlugin.configs.flat.recommended,
-  reactHooksPlugin.configs.flat['recommended'],
+  reactHooksPlugin.configs.flat.recommended,
  // Register jsx-a11y plugin (rules selectively enabled below)
  { plugins: { 'jsx-a11y': jsxA11yPlugin } },
  // airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
@@ -115,6 +115,26 @@ export default [
      'jsx-a11y/media-has-caption': 'off',
      'jsx-a11y/no-noninteractive-element-interactions': 'off',
      'jsx-a11y/alt-text': 'off',
      // A11y regression gate (P3-4). A CURATED set — correctness rules that catch
      // real WCAG gaps (missing accessible names, malformed ARIA) without
      // flooding on the pre-existing clickable-div patterns. The heavier
      // interaction rules (no-static-element-interactions,
      // click-events-have-key-events) are a separate cleanup and stay OFF.
      'jsx-a11y/aria-props': 'error',
      'jsx-a11y/aria-proptypes': 'error',
      'jsx-a11y/aria-role': ['error', { ignoreNonDOM: true }],
      'jsx-a11y/aria-unsupported-elements': 'error',
      'jsx-a11y/role-has-required-aria-props': 'error',
      'jsx-a11y/role-supports-aria-props': 'error',
      'jsx-a11y/no-redundant-roles': 'error',
      'jsx-a11y/anchor-has-content': 'error',
      'jsx-a11y/heading-has-content': 'error',
      'jsx-a11y/label-has-associated-control': ['error', { assert: 'either', depth: 5 }],
      // NOT enabled: control-has-associated-label. This repo labels most inputs
      // with folds `<Text as="label" htmlFor>` — a component the rule's static
      // analysis can't see as a <label>, producing false positives on correctly
      // labeled controls. The genuinely-unlabeled controls it surfaced (sliders,
      // file input, media players, notes) were fixed directly with aria-label.
    },
  },
  {
@@ -123,4 +143,17 @@ export default [
      'no-undef': 'off',
    },
  },
  {
    // Test files commonly define several small mock/fake classes and named
    // function expressions used as constructor mocks (e.g.
    // `setGlobal('AudioWorkletNode', function AudioWorkletNode(){})`), which must
    // NOT be rewritten to arrows (arrows aren't constructable). Relax the
    // stylistic class/callback rules here.
    files: ['**/*.test.ts', '**/*.test.tsx'],
    rules: {
      'max-classes-per-file': 'off',
      'lines-between-class-members': 'off',
      'prefer-arrow-callback': 'off',
    },
  },
 ];
@@ -27,9 +27,6 @@
    <meta name="theme-color" content="#000000" />
    <meta name="color-scheme" content="dark light" />
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/fonts/custom-fonts.css" />
    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
@@ -1,22 +1,24 @@
 {
  "name": "lotus-chat",
-  "version": "4.12.3-lotus",
+  "version": "4.12.7-lotus",
  "description": "Lotus Chat — Matrix client for Lotus Guild",
  "main": "index.js",
  "type": "module",
  "engines": {
-    "node": ">=16.0.0"
+    "node": ">=20.0.0"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "npm run check:eslint && npm run check:prettier",
-    "check:eslint": "eslint src/*",
+    "check:eslint": "eslint src/* --max-warnings 36",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
    "typecheck": "tsc --noEmit",
    "test": "node --import tsx --test $(find src -name '*.test.ts')",
    "test:e2e": "playwright test",
    "test:e2e:install": "playwright install chromium webkit",
    "prepare": "husky",
    "commit": "git-cz",
    "postinstall": "node scripts/patch-folds.mjs",
@@ -49,7 +51,6 @@
    "@tanstack/react-query": "5.100.13",
    "@tanstack/react-query-devtools": "5.100.13",
    "@tanstack/react-virtual": "3.13.25",
    "@types/dompurify": "3.2.0",
    "@workadventure/noise-suppression": "0.0.4",
    "await-to-js": "3.0.0",
    "badwords-list": "2.0.1-4",
@@ -61,7 +62,6 @@
    "dayjs": "1.11.20",
    "deepfilternet3-noise-filter": "1.2.1",
    "domhandler": "6.0.1",
    "dompurify": "3.4.5",
    "emojibase": "17.0.0",
    "emojibase-data": "17.0.0",
    "file-saver": "2.0.5",
@@ -76,13 +76,17 @@
    "immer": "11.1.8",
    "is-hotkey": "0.2.0",
    "jotai": "2.20.0",
    "jsqr": "1.4.0",
    "katex": "0.16.47",
    "linkify-react": "4.3.3",
    "linkifyjs": "4.3.3",
-    "matrix-js-sdk": "41.6.0-rc.0",
+    "matrix-js-sdk": "41.7.0",
-    "matrix-widget-api": "1.17.0",
+    "matrix-widget-api": "1.18.0",
    "millify": "6.1.0",
-    "pdfjs-dist": "5.7.284",
+    "pdfjs-dist": "6.3.289",
    "prismjs": "1.30.0",
    "qrcode": "1.5.4",
    "qrcode.react": "4.2.0",
    "react": "19.2.6",
    "react-aria": "3.48.0",
    "react-blurhash": "0.3.0",
@@ -92,24 +96,29 @@
    "react-google-recaptcha": "3.1.0",
    "react-i18next": "17.0.8",
    "react-range": "1.10.0",
-    "react-router-dom": "7.15.1",
+    "react-router-dom": "7.18.3",
-    "sanitize-html": "2.17.4",
+    "sanitize-html": "2.17.7",
    "slate": "0.124.1",
    "slate-dom": "0.124.1",
    "slate-history": "0.113.1",
    "slate-react": "0.124.2",
    "styled-components": "6.4.2",
-    "ua-parser-js": "2.0.10"
+    "ua-parser-js": "2.0.10",
    "workbox-precaching": "7.4.1"
  },
  "devDependencies": {
-    "@lotusguild/element-call-embedded": "0.20.1-lotus.1",
+    "@axe-core/playwright": "4.13.0",
    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
    "@playwright/test": "1.63.0",
    "@rollup/plugin-inject": "5.0.5",
    "@rollup/plugin-wasm": "6.2.2",
    "@types/chroma-js": "3.1.2",
    "@types/file-saver": "2.0.7",
    "@types/is-hotkey": "0.1.10",
    "@types/katex": "0.16.8",
    "@types/node": "25.9.1",
    "@types/prismjs": "1.26.6",
    "@types/qrcode": "1.5.6",
    "@types/react": "19.2.15",
    "@types/react-dom": "19.2.3",
    "@types/react-google-recaptcha": "2.1.9",
@@ -141,7 +150,8 @@
  },
  "overrides": {
    "@giphy/js-util": {
-      "dompurify": ">=3.3.4"
+      "dompurify": ">=3.3.4",
      "uuid": ">=11.1.1"
    },
    "js-cookie": ">=3.0.6"
  }
@@ -0,0 +1,44 @@
 import { defineConfig, devices } from '@playwright/test';
 // Playwright smoke tests (Gitea #90). Two tiers live under e2e/:
 //   - boot.spec.ts           always runs; serves the built dist/ via `vite preview`
 //                            and checks the client actually boots in a real browser.
 //   - e2ee-composer.spec.ts  skips itself unless E2E_HOMESERVER/E2E_USER/E2E_PASSWORD
 //                            are set (CI secrets — see LOTUS_TESTING.md).
 // `npm run build` must have produced dist/ before `npm run test:e2e`.
 const PORT = 4173;
 const BASE_URL = `http://localhost:${PORT}/`;
 export default defineConfig({
  testDir: './e2e',
  timeout: 60_000,
  expect: { timeout: 15_000 },
  fullyParallel: false,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 1 : 0,
  workers: 1,
  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : [['list']],
  outputDir: 'test-results',
  use: {
    baseURL: BASE_URL,
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
    ...devices['Desktop Chrome'],
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    // [Gitea #221] WebKit as the Safari/iOS proxy. It runs the subset tagged
    // @webkit / @ios (boot, composer round-trip, thread panel, lightbox): it
    // catches WebKit-only breakage (CSS, dvh, IndexedDB, media decode) that
    // Chromium emulation can't, but does not emulate the iOS keyboard or the
    // Home-Screen install flow.
    { name: 'webkit', use: { ...devices['Desktop Safari'] }, grep: /@webkit/ },
    { name: 'iphone', use: { ...devices['iPhone 14'] }, grep: /@ios/ },
  ],
  webServer: {
    command: `npx vite preview --port ${PORT} --strictPort`,
    url: BASE_URL,
    reuseExistingServer: !process.env.CI,
    timeout: 60_000,
  },
 });
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4xD-IQ.woff2</code> was not found on this server.  <ins>That’s all we know.</ins>
@@ -49,3 +49,25 @@
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* VT323 (OFL) for the Lotus Terminal theme — was Google Fonts (Gitea #214) */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/VT323-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
 }
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/VT323-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@@ -11,64 +11,80 @@
  "theme_color": "#980000",
  "icons": [
    {
-      "src": "./res/android/android-chrome-36x36.png",
+      "src": "./public/res/android/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-48x48.png",
+      "src": "./public/res/android/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-72x72.png",
+      "src": "./public/res/android/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-96x96.png",
+      "src": "./public/res/android/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-144x144.png",
+      "src": "./public/res/android/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-192x192.png",
+      "src": "./public/res/android/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-256x256.png",
+      "src": "./public/res/android/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-384x384.png",
+      "src": "./public/res/android/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
-      "src": "./res/android/android-chrome-512x512.png",
+      "src": "./public/res/android/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
-      "src": "./res/android/maskable-192x192.png",
+      "src": "./public/res/android/maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
-      "src": "./res/android/maskable-512x512.png",
+      "src": "./public/res/android/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "categories": ["social", "communication", "productivity"],
  "share_target": {
    "action": "./share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "files",
          "accept": ["image/*", "video/*", "audio/*", "application/pdf", "text/plain"]
        }
      ]
    }
  },
  "shortcuts": [
    {
      "name": "New Message",
@@ -77,7 +93,7 @@
      "url": "/",
      "icons": [
        {
-          "src": "res/android/android-chrome-96x96.png",
+          "src": "public/res/android/android-chrome-96x96.png",
          "sizes": "96x96"
        }
      ]
@@ -0,0 +1,25 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "schedule": ["before 6am on monday"],
  "packageRules": [
    {
      "matchPackagePatterns": ["^matrix-js-sdk"],
      "groupName": "matrix-js-sdk"
    },
    {
      "matchPackagePatterns": ["^@lotusguild/"],
      "groupName": "@lotusguild packages"
    },
    {
      "matchPackageNames": ["@lotusguild/element-call-embedded"],
      "matchUpdateTypes": ["major"],
      "enabled": false
    },
    {
      "matchCategories": ["security"],
      "groupName": "security updates",
      "automerge": false
    }
  ]
 }
@@ -0,0 +1,148 @@
 #!/usr/bin/env node
 // Boot-check (Gitea #92): after `npm run build`, nothing actually loaded the
 // built dist/ — a build that produces a broken bundle (bad base path, a 500
 // from an asset, a malformed config.json) still went green. This script
 // serves dist/ the same way production does (vite preview) and makes a
 // handful of real HTTP requests against it, so a broken bundle fails CI
 // instead of surfacing after deploy.
 //
 // No Playwright here: playwright-core is not a project dependency (only the
 // browser binary caches happen to be present on this machine), so we don't
 // depend on it being installed. Plain fetch is enough to catch the class of
 // bug this check exists for — a page/asset/config that doesn't come back.
 import { spawn } from 'node:child_process';
 const PORT = 4173;
 const HOST = '127.0.0.1';
 const BASE_URL = `http://${HOST}:${PORT}`;
 const BOOT_TIMEOUT_MS = 30_000;
 function log(msg) {
  console.log(`[boot-check] ${msg}`);
 }
 function waitForPort(url, timeoutMs) {
  const deadline = Date.now() + timeoutMs;
  const attempt = async () => {
    try {
      const res = await fetch(url, { method: 'GET' });
      return res;
    } catch {
      return null;
    }
  };
  return new Promise((resolve, reject) => {
    const poll = async () => {
      const res = await attempt();
      if (res) {
        resolve();
        return;
      }
      if (Date.now() > deadline) {
        reject(new Error(`Timed out waiting for ${url} to come up`));
        return;
      }
      setTimeout(poll, 300);
    };
    poll();
  });
 }
 async function assert(condition, message) {
  if (!condition) {
    throw new Error(`Assertion failed: ${message}`);
  }
  log(`ok: ${message}`);
 }
 async function main() {
  const preview = spawn(
    'npx',
    ['vite', 'preview', '--port', String(PORT), '--strictPort', '--host', HOST],
    { stdio: ['ignore', 'pipe', 'pipe'] },
  );
  let previewOutput = '';
  preview.stdout.on('data', (d) => (previewOutput += d.toString()));
  preview.stderr.on('data', (d) => (previewOutput += d.toString()));
  const cleanup = () => {
    if (!preview.killed) {
      preview.kill('SIGTERM');
    }
  };
  process.on('exit', cleanup);
  process.on('SIGINT', () => {
    cleanup();
    process.exit(1);
  });
  process.on('SIGTERM', () => {
    cleanup();
    process.exit(1);
  });
  try {
    await waitForPort(BASE_URL, BOOT_TIMEOUT_MS);
    // 1. index page loads and contains the SPA mount point.
    const indexRes = await fetch(`${BASE_URL}/`);
    await assert(indexRes.status === 200, `GET / returns 200 (got ${indexRes.status})`);
    const indexHtml = await indexRes.text();
    await assert(indexHtml.includes('<div id="root"'), 'GET / contains <div id="root"');
    // 2. runtime config is valid JSON.
    const configRes = await fetch(`${BASE_URL}/config.json`);
    await assert(
      configRes.status === 200,
      `GET /config.json returns 200 (got ${configRes.status})`,
    );
    const configText = await configRes.text();
    let configJson;
    try {
      configJson = JSON.parse(configText);
    } catch (err) {
      throw new Error(`GET /config.json is not valid JSON: ${err.message}`);
    }
    await assert(
      typeof configJson === 'object' && configJson !== null,
      '/config.json parses to an object',
    );
    // 3. the main JS entry referenced from index.html actually loads.
    const scriptMatch = indexHtml.match(/<script[^>]+type="module"[^>]+src="([^"]+)"/);
    await assert(!!scriptMatch, 'index.html references a module script entry');
    const mainScriptUrl = new URL(scriptMatch[1], BASE_URL).toString();
    const scriptRes = await fetch(mainScriptUrl);
    await assert(
      scriptRes.status === 200,
      `GET ${scriptMatch[1]} returns 200 (got ${scriptRes.status})`,
    );
    const scriptContentType = scriptRes.headers.get('content-type') || '';
    await assert(
      /javascript/.test(scriptContentType),
      `GET ${scriptMatch[1]} has a JS content-type (got "${scriptContentType}")`,
    );
    // 4. Element Call widget bundle is present.
    const callRes = await fetch(`${BASE_URL}/public/element-call/index.html`);
    await assert(
      callRes.status === 200,
      `GET /public/element-call/index.html returns 200 (got ${callRes.status})`,
    );
    log('all checks passed');
  } finally {
    cleanup();
  }
 }
 main()
  .catch((err) => {
    console.error(`[boot-check] FAILED: ${err.message}`);
    process.exitCode = 1;
  })
  .finally(() => {
    // The killed preview server's stdio pipes can keep the event loop alive
    // briefly; force the process down promptly with whatever exit code was set.
    process.exit(process.exitCode ?? 0);
  });
@@ -0,0 +1,5 @@
 {
  "$comment": "Gitea #96. Budgets are seeded from the dist/assets gzip sizes on the tree at seed time, +10% headroom. Regenerate deliberately (not just to silence a failure) when a real feature addition grows the bundle: measure the new gzip sizes and bump these with the same +10% margin.",
  "totalGzipBytes": 1731120,
  "largestChunkGzipBytes": 358317
 }
@@ -0,0 +1,97 @@
 #!/usr/bin/env node
 // Bundle size budget (Gitea #96). The CI "Report bundle sizes" step printed
 // numbers with nothing to compare them against, so a bundle could balloon
 // silently. This script compares dist/assets gzip sizes against a small
 // checked-in budget (scripts/bundle-budget.json) and prints the same report.
 //
 // Mode is passed via argv: `pull_request` fails the build over budget,
 // anything else (e.g. `push`) only warns — a push has already merged, so
 // blocking it can't prevent the regression, only delay the deploy of an
 // otherwise-good commit; the pull_request gate is where this should be caught.
 import { appendFileSync, readFileSync, readdirSync, statSync } from 'node:fs';
 import { gzipSync } from 'node:zlib';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const mode = process.argv[2] || 'push';
 const distAssetsDir = path.join(__dirname, '..', 'dist', 'assets');
 const budgetPath = path.join(__dirname, 'bundle-budget.json');
 function formatKb(bytes) {
  return `${(bytes / 1024).toFixed(1)} kB`;
 }
 function main() {
  const budget = JSON.parse(readFileSync(budgetPath, 'utf-8'));
  const jsFiles = readdirSync(distAssetsDir)
    .filter((f) => f.endsWith('.js') && !f.endsWith('.map'))
    .sort();
  if (jsFiles.length === 0) {
    console.error(
      `[check-bundle-size] No .js files found in ${distAssetsDir} — did the build run?`,
    );
    process.exitCode = 1;
    return;
  }
  const rows = jsFiles.map((name) => {
    const filePath = path.join(distAssetsDir, name);
    const size = statSync(filePath).size;
    const gzipSize = gzipSync(readFileSync(filePath)).length;
    return { name, size, gzipSize };
  });
  const totalGzipBytes = rows.reduce((sum, r) => sum + r.gzipSize, 0);
  const largest = rows.reduce((max, r) => (r.gzipSize > max.gzipSize ? r : max), rows[0]);
  const summaryLines = [
    '### Bundle sizes',
    '',
    '| File | Size | Gzip |',
    '|------|------|------|',
    ...rows.map((r) => `| ${r.name} | ${formatKb(r.size)} | ${formatKb(r.gzipSize)} |`),
    '',
    `**Total gzip:** ${formatKb(totalGzipBytes)} (budget ${formatKb(budget.totalGzipBytes)})`,
    `**Largest chunk gzip:** ${largest.name} — ${formatKb(largest.gzipSize)} (budget ${formatKb(
      budget.largestChunkGzipBytes,
    )})`,
  ];
  const summaryText = summaryLines.join('\n');
  console.log(summaryText);
  if (process.env.GITHUB_STEP_SUMMARY) {
    // Gitea Actions/act_runner honors the same GITHUB_STEP_SUMMARY convention.
    appendFileSync(process.env.GITHUB_STEP_SUMMARY, `${summaryText}\n`);
  }
  const overBudget = [];
  if (totalGzipBytes > budget.totalGzipBytes) {
    overBudget.push(
      `total gzip ${formatKb(totalGzipBytes)} exceeds budget ${formatKb(budget.totalGzipBytes)}`,
    );
  }
  if (largest.gzipSize > budget.largestChunkGzipBytes) {
    overBudget.push(
      `largest chunk (${largest.name}) gzip ${formatKb(largest.gzipSize)} exceeds budget ${formatKb(
        budget.largestChunkGzipBytes,
      )}`,
    );
  }
  if (overBudget.length > 0) {
    const message = `[check-bundle-size] Over budget: ${overBudget.join('; ')}`;
    if (mode === 'pull_request') {
      console.error(message);
      process.exitCode = 1;
    } else {
      console.warn(`${message} (warning only on "${mode}")`);
    }
  } else {
    console.log('[check-bundle-size] Within budget.');
  }
 }
 main();
@@ -0,0 +1,139 @@
 #!/usr/bin/env bash
 # Local throwaway Synapse for driving the real UI (Playwright / a browser)
 # against a homeserver you control — open registration, no rate limits,
 # SQLite, media served. Everything lives in .dev-homeserver/ (gitignored).
 #
 #   scripts/dev-homeserver.sh start    # install (first run) + start on :8008
 #   scripts/dev-homeserver.sh calls    # + LiveKit SFU, JWT issuer, voice-limit guard, https well-known
 #   scripts/dev-homeserver.sh stop
 #   scripts/dev-homeserver.sh reset    # wipe the database and media
 #   python3 scripts/dev-seed.py 400    # alice/bob + "Busy Room" with images (+ "Voice Lounge" call room)
 #
 # Calls: `calls` downloads livekit-server (v1.13.7 release binary) into
 # .dev-homeserver/, runs it on :7880 with key devkey, a minimal lk-jwt-service
 # clone (scripts/dev-lk-jwt.py, :8071), the real voice-limit-guard from the
 # sibling matrix repo in front of it (:8070, needs ../matrix checked out and an
 # admin user — dev-seed makes alice one), and a self-signed https server on
 # :443 serving /.well-known/matrix/client with the LiveKit focus (the client
 # autodiscovers the server NAME, not :8008). Drive it with Playwright using
 # --use-fake-device-for-media-stream and ignoreHTTPSErrors.
 #
 # Then `npm start` and log in at http://127.0.0.1:5173/login/http%3A%2F%2Flocalhost%3A8008/
 # as alice / password123.
 set -euo pipefail
 ROOT="$(cd "$(dirname "$0")/.." && pwd)"
 DIR="$ROOT/.dev-homeserver"
 VENV="$DIR/venv"
 CFG="$DIR/homeserver.yaml"
 PIDFILE="$DIR/synapse.pid"
 install() {
  mkdir -p "$DIR"
  if [ ! -x "$VENV/bin/python" ]; then
    python3 -m venv --without-pip "$VENV"
    curl -sS https://bootstrap.pypa.io/get-pip.py -o "$DIR/get-pip.py"
    "$VENV/bin/python" "$DIR/get-pip.py" -q
    "$VENV/bin/pip" install -q "matrix-synapse[url-preview]"
  fi
  if [ ! -f "$CFG" ]; then
    (cd "$DIR" && "$VENV/bin/python" -m synapse.app.homeserver \
      --server-name localhost --config-path homeserver.yaml --generate-config --report-stats=no >/dev/null)
    # the generated listener only serves `client`; add media + open the door
    python3 - "$CFG" <<'PY'
 import sys, re
 p = sys.argv[1]; s = open(p).read()
 s = s.replace("      - client\n", "      - client\n      - media\n      - federation\n", 1)
 s += """
 enable_registration: true
 enable_registration_without_verification: true
 rc_message: { per_second: 1000, burst_count: 10000 }
 rc_registration: { per_second: 1000, burst_count: 10000 }
 rc_login: { address: { per_second: 1000, burst_count: 10000 }, account: { per_second: 1000, burst_count: 10000 }, failed_attempts: { per_second: 1000, burst_count: 10000 } }
 rc_joins: { local: { per_second: 1000, burst_count: 10000 }, remote: { per_second: 1000, burst_count: 10000 } }
 rc_presence: { per_user: { per_second: 1000, burst_count: 10000 } }
 max_upload_size: 50M
 suppress_key_server_warning: true
 # URL previews (embed facades use the homeserver's cached thumbnail)
 url_preview_enabled: true
 url_preview_ip_range_blacklist: ['127.0.0.0/8', '10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16', '100.64.0.0/10', '169.254.0.0/16', '::1/128', 'fe80::/10', 'fc00::/7']
 # scheduled messages (MSC4140 delayed events) + MatrixRTC transports (MSC4143) + room summaries (MSC3266)
 max_event_delay_duration: 24h
 experimental_features:
  msc4140_enabled: true
  msc4143_enabled: true
  msc3266_enabled: true
  msc4133_enabled: true
 matrix_rtc:
  transports:
    - type: livekit
      livekit_service_url: http://127.0.0.1:8070
 """
 open(p, "w").write(s)
 PY
  fi
 }
 start() {
  install
  if [ -f "$PIDFILE" ] && kill -0 "$(cat "$PIDFILE")" 2>/dev/null; then
    echo "already running (pid $(cat "$PIDFILE"))"; return
  fi
  (cd "$DIR" && setsid nohup "$VENV/bin/python" -m synapse.app.homeserver --config-path homeserver.yaml \
    > synapse.log 2>&1 < /dev/null & echo $! > "$PIDFILE")
  for _ in $(seq 1 40); do
    sleep 1
    curl -sf http://127.0.0.1:8008/_matrix/client/versions >/dev/null && { echo "synapse up on http://localhost:8008"; return; }
  done
  echo "synapse did not come up — see $DIR/synapse.log" >&2; exit 1
 }
 stop() {
  if [ -f "$PIDFILE" ]; then kill "$(cat "$PIDFILE")" 2>/dev/null || true; rm -f "$PIDFILE"; echo stopped; fi
  for f in "$DIR"/calls-*.pid; do [ -f "$f" ] && { kill "$(cat "$f")" 2>/dev/null || true; rm -f "$f"; }; done
 }
 calls() {
  start
  local LK="$DIR/livekit-server"
  if [ ! -x "$LK" ]; then
    curl -sL "https://github.com/livekit/livekit/releases/download/v1.13.7/livekit_1.13.7_linux_amd64.tar.gz" | tar xz -C "$DIR" livekit-server
  fi
  cat > "$DIR/livekit.yaml" <<'YAML'
 port: 7880
 bind_addresses: ["127.0.0.1"]
 rtc:
  tcp_port: 7881
  port_range_start: 50000
  port_range_end: 50100
  use_external_ip: false
  node_ip: 127.0.0.1
 keys:
  devkey: devsecretdevsecretdevsecretdevsecret
 room:
  auto_create: true
 YAML
  local bg
  bg() { local name="$1"; shift; ( setsid nohup "$@" > "$DIR/calls-$name.log" 2>&1 < /dev/null & echo $! > "$DIR/calls-$name.pid" ); }
  bg livekit "$LK" --config "$DIR/livekit.yaml"
  bg jwt env PORT=8071 LIVEKIT_KEY=devkey LIVEKIT_SECRET=devsecretdevsecretdevsecretdevsecret LIVEKIT_URL=ws://127.0.0.1:7880 SYNAPSE_API=http://127.0.0.1:8008 python3 "$ROOT/scripts/dev-lk-jwt.py"
  if [ ! -f "$DIR/wk.crt" ]; then openssl req -x509 -newkey rsa:2048 -nodes -keyout "$DIR/wk.key" -out "$DIR/wk.crt" -days 365 -subj "/CN=localhost" 2>/dev/null; fi
  bg wellknown env CERT="$DIR/wk.crt" KEY="$DIR/wk.key" python3 "$ROOT/scripts/dev-wellknown.py"
  local GUARD="$ROOT/../matrix/livekit/voice-limit-guard.py"
  local TOKEN_FILE="$DIR/admin.token"
  if [ -f "$GUARD" ] && [ -f "$TOKEN_FILE" ]; then
    bg guard env GUARD_BIND_HOST=127.0.0.1 GUARD_BIND_PORT=8070 GUARD_UPSTREAM=http://127.0.0.1:8071 LIVEKIT_API=http://127.0.0.1:7880 LIVEKIT_KEY=devkey LIVEKIT_SECRET=devsecretdevsecretdevsecretdevsecret SYNAPSE_API=http://127.0.0.1:8008 MATRIX_TOKEN="$(cat "$TOKEN_FILE")" python3 "$GUARD"
  else
    echo "voice-limit-guard not started (need ../matrix checkout and $TOKEN_FILE from dev-seed.py); pointing the focus straight at the issuer"
    bg guard env PORT=8070 LIVEKIT_KEY=devkey LIVEKIT_SECRET=devsecretdevsecretdevsecretdevsecret LIVEKIT_URL=ws://127.0.0.1:7880 SYNAPSE_API=http://127.0.0.1:8008 python3 "$ROOT/scripts/dev-lk-jwt.py"
  fi
  sleep 2
  echo "calls stack up: livekit :7880, jwt :8071, guard :8070, well-known https://localhost/.well-known/matrix/client"
 }
 case "${1:-}" in
  start) start ;;
  calls) calls ;;
  stop) stop ;;
  reset) stop; rm -f "$DIR"/homeserver.db* ; rm -rf "$DIR/media_store"; echo "database wiped"; ;;
  *) echo "usage: $0 start|stop|reset" >&2; exit 2 ;;
 esac
@@ -0,0 +1,52 @@
 #!/usr/bin/env python3
 """Minimal lk-jwt-service clone for local testing.
 POST /sfu/get {room, openid_token{access_token, matrix_server_name}, device_id}
 -> validates the OpenID token against Synapse (federation openid/userinfo),
    mints a LiveKit JWT for identity "<user_id>:<device_id>" and returns {url, jwt}.
 """
 import base64, hashlib, hmac, json, os, time, urllib.parse, urllib.request
 from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
 PORT = int(os.environ.get("PORT", "8071"))
 LK_KEY = os.environ.get("LIVEKIT_KEY", "devkey")
 LK_SECRET = os.environ.get("LIVEKIT_SECRET", "devsecretdevsecretdevsecretdevsecret")
 LK_URL = os.environ.get("LIVEKIT_URL", "ws://127.0.0.1:7880")
 SYNAPSE = os.environ.get("SYNAPSE_API", "http://127.0.0.1:8008")
 def b64(b): return base64.urlsafe_b64encode(b).rstrip(b"=").decode()
 def jwt(payload):
    h = b64(json.dumps({"alg": "HS256", "typ": "JWT"}).encode()); p = b64(json.dumps(payload).encode())
    sig = b64(hmac.new(LK_SECRET.encode(), f"{h}.{p}".encode(), hashlib.sha256).digest())
    return f"{h}.{p}.{sig}"
 def userinfo(access_token):
    q = urllib.parse.urlencode({"access_token": access_token})
    with urllib.request.urlopen(f"{SYNAPSE}/_matrix/federation/v1/openid/userinfo?{q}", timeout=5) as r:
        return json.load(r)["sub"]
 class H(BaseHTTPRequestHandler):
    def _cors(self):
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header("Access-Control-Allow-Headers", "*")
        self.send_header("Access-Control-Allow-Methods", "POST, OPTIONS")
    def do_OPTIONS(self):
        self.send_response(204); self._cors(); self.end_headers()
    def do_POST(self):
        n = int(self.headers.get("Content-Length") or 0)
        data = json.loads(self.rfile.read(n) or b"{}")
        room = data.get("room") or data.get("room_id") or ""
        oid = data.get("openid_token") or {}
        try:
            user = userinfo(oid.get("access_token", ""))
        except Exception as e:  # noqa
            self.send_response(401); self._cors(); self.end_headers(); self.wfile.write(json.dumps({"errcode": "M_LOOKUP_FAILED", "error": str(e)}).encode()); return
        identity = f"{user}:{data.get('device_id', '')}"
        now = int(time.time())
        token = jwt({"iss": LK_KEY, "sub": identity, "name": user, "nbf": now - 10, "exp": now + 3600,
                     "video": {"room": room, "roomJoin": True, "roomCreate": True, "canPublish": True, "canSubscribe": True, "canPublishData": True}})
        body = json.dumps({"url": LK_URL, "jwt": token}).encode()
        self.send_response(200); self._cors(); self.send_header("Content-Type", "application/json"); self.send_header("Content-Length", str(len(body))); self.end_headers(); self.wfile.write(body)
        print(f"issued {identity} room={room}", flush=True)
    def log_message(self, *a): pass
 ThreadingHTTPServer(("127.0.0.1", PORT), H).serve_forever()
@@ -0,0 +1,82 @@
 #!/usr/bin/env python3
 """Seed the local dev homeserver (scripts/dev-homeserver.sh) with two users,
 a busy unencrypted room and a voice room: alice + bob, "Busy Room" (N
 messages, one image every 10th), "Voice Lounge" (org.matrix.msc3417.call with
 the call-member power level Lotus applies). Makes alice a server admin (the
 voice-limit guard reads room state through the admin API) and writes her
 token to .dev-homeserver/admin.token for `dev-homeserver.sh calls`.
 Idempotent for the users; every run creates new rooms.
    python3 scripts/dev-seed.py [N=400]
 """
 import json, os, sqlite3, struct, sys, time, urllib.error, urllib.parse, urllib.request, zlib
 HS = "http://127.0.0.1:8008"
 PASSWORD = "password123"
 def req(method, path, data=None, token=None, raw=None, ctype="application/json"):
    headers = {"Content-Type": ctype}
    if token:
        headers["Authorization"] = f"Bearer {token}"
    body = raw if raw is not None else (json.dumps(data).encode() if data is not None else None)
    r = urllib.request.Request(HS + path, data=body, headers=headers, method=method)
    return json.load(urllib.request.urlopen(r))
 def register_or_login(user):
    try:
        return req("POST", "/_matrix/client/v3/register",
                   {"username": user, "password": PASSWORD, "auth": {"type": "m.login.dummy"}})
    except urllib.error.HTTPError:
        return req("POST", "/_matrix/client/v3/login",
                   {"type": "m.login.password", "identifier": {"type": "m.id.user", "user": user}, "password": PASSWORD})
 def png(w, h, rgb):
    raw = b"".join(b"\x00" + bytes(rgb) * w for _ in range(h))
    def chunk(t, d):
        return struct.pack(">I", len(d)) + t + d + struct.pack(">I", zlib.crc32(t + d) & 0xFFFFFFFF)
    return (b"\x89PNG\r\n\x1a\n" + chunk(b"IHDR", struct.pack(">IIBBBBB", w, h, 8, 2, 0, 0, 0))
            + chunk(b"IDAT", zlib.compress(raw)) + chunk(b"IEND", b""))
 def main():
    n = int(sys.argv[1]) if len(sys.argv) > 1 else 400
    alice, bob = register_or_login("alice"), register_or_login("bob")
    ta, tb = alice["access_token"], bob["access_token"]
    room = req("POST", "/_matrix/client/v3/createRoom",
               {"name": "Busy Room", "preset": "public_chat", "visibility": "public"}, ta)["room_id"]
    req("POST", f"/_matrix/client/v3/join/{urllib.parse.quote(room)}", {}, tb)
    txn = int(time.time() * 1000)
    for i in range(n):
        tok = ta if i % 2 == 0 else tb
        if i % 10 == 0:
            data = png(64, 48, ((i * 37) % 256, (i * 91) % 256, (i * 17) % 256))
            up = req("POST", f"/_matrix/media/v3/upload?filename=img{i}.png", token=tok, raw=data, ctype="image/png")
            content = {"msgtype": "m.image", "body": f"img{i}.png", "url": up["content_uri"],
                       "info": {"mimetype": "image/png", "w": 64, "h": 48, "size": len(data)}}
        else:
            content = {"msgtype": "m.text", "body": f"message #{i}"}
        txn += 1
        req("PUT", f"/_matrix/client/v3/rooms/{urllib.parse.quote(room)}/send/m.room.message/{txn}", content, tok)
    voice = req("POST", "/_matrix/client/v3/createRoom", {
        "name": "Voice Lounge", "preset": "public_chat",
        "creation_content": {"type": "org.matrix.msc3417.call"},
        "initial_state": [{"type": "org.matrix.msc3401.call", "state_key": "", "content": {}}],
        "power_level_content_override": {"events": {"org.matrix.msc3401.call.member": 0}},
    }, ta)["room_id"]
    req("POST", f"/_matrix/client/v3/join/{urllib.parse.quote(voice)}", {}, tb)
    # admin flag for the guard (takes effect for tokens issued after a Synapse restart-free
    # cache miss; the guard only needs it for the admin state API)
    here = os.path.dirname(os.path.abspath(__file__))
    db = os.path.join(here, "..", ".dev-homeserver", "homeserver.db")
    if os.path.exists(db):
        c = sqlite3.connect(db); c.execute("UPDATE users SET admin=1 WHERE name=?", (alice["user_id"],)); c.commit(); c.close()
        with open(os.path.join(here, "..", ".dev-homeserver", "admin.token"), "w") as f:
            f.write(ta)
    print(json.dumps({"room": room, "voice_room": voice, "alice": alice["user_id"], "bob": bob["user_id"], "count": n}))
 if __name__ == "__main__":
    main()
@@ -0,0 +1,15 @@
 #!/usr/bin/env python3
 """Self-signed https server on :443 serving the client well-known with the
 LiveKit focus for the local calls stack (see scripts/dev-homeserver.sh calls)."""
 import http.server, os, ssl, json
 BODY = json.dumps({"m.homeserver": {"base_url": "http://localhost:8008"}, "org.matrix.msc4143.rtc_foci": [{"type": "livekit", "livekit_service_url": "http://127.0.0.1:8070"}]}).encode()
 class H(http.server.BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path.startswith('/.well-known/matrix/client'):
            self.send_response(200); self.send_header('Content-Type','application/json'); self.send_header('Access-Control-Allow-Origin','*'); self.send_header('Content-Length',str(len(BODY))); self.end_headers(); self.wfile.write(BODY)
        else:
            self.send_response(404); self.end_headers()
    def log_message(self,*a): pass
 srv = http.server.ThreadingHTTPServer(('127.0.0.1', 443), H)
 ctx = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER); ctx.load_cert_chain(os.environ.get('CERT', 'wk.crt'), os.environ.get('KEY', 'wk.key')); srv.socket = ctx.wrap_socket(srv.socket, server_side=True)
 srv.serve_forever()
@@ -0,0 +1,48 @@
 #!/usr/bin/env python3
 """Build static picker thumbnails for avatar decorations.
 The decorations are animated APNGs (~1 MB each). The settings picker shows
 static WebP thumbnails instead and only loads the animated file on hover,
 focus or selection, so browsing the catalog costs a few MB, not hundreds.
 Usage: python3 scripts/makeDecorationThumbs.py <dir-of-slug.png> <out-dir>
 Then upload <out-dir>/*.webp to `${DECORATION_CDN}/thumbs/`.
 A missing thumbnail is harmless: the picker falls back to the full PNG.
 Requires Pillow (pip install pillow).
 """
 import sys
 from pathlib import Path
 from PIL import Image, ImageSequence
 SIZE = 144  # 2x the 72px picker cell
 def best_frame(im: Image.Image) -> Image.Image:
    # Many animations start (or loop through) an empty frame, so pick the frame
    # with the most visible pixels rather than frame 0.
    best, best_score = None, -1
    frames = list(ImageSequence.Iterator(im))
    step = max(1, len(frames) // 24)
    for frame in frames[::step]:
        rgba = frame.convert('RGBA')
        score = sum(rgba.getchannel('A').histogram()[33:])
        if score > best_score:
            best, best_score = rgba, score
    return best
 def main(src: str, out: str) -> None:
    out_dir = Path(out)
    out_dir.mkdir(parents=True, exist_ok=True)
    for png in sorted(Path(src).glob('*.png')):
        with Image.open(png) as im:
            thumb = best_frame(im).resize((SIZE, SIZE), Image.LANCZOS)
        thumb.save(out_dir / f'{png.stem}.webp', 'WEBP', quality=82, method=6)
 if __name__ == '__main__':
    if len(sys.argv) != 3:
        sys.exit(__doc__)
    main(sys.argv[1], sys.argv[2])
@@ -4,28 +4,56 @@ import { join, dirname } from 'path';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const foldsPath = join(__dirname, '../node_modules/folds/dist/index.js');
 const foldsPkgPath = join(__dirname, '../node_modules/folds/package.json');
 // Context lines around the target, not just the single `children: src(filled)`
 // expression, so a coincidental match elsewhere in the bundle (e.g. some other
 // `src(filled)` call) can't be mistaken for the Icon component we're patching.
 // This is still string matching, not an AST edit, but the extra context makes
 // an accidental match far less likely (Gitea #55).
 const original = ['      ...props,', '      ref,', '      children: src(filled)', '    }'].join(
  '\n',
 );
 const patched = [
  '      ...props,',
  '      ref,',
  '      children: typeof src === "function" ? src(filled) : null',
  '    }',
 ].join('\n');
 function foldsVersion() {
  try {
    return JSON.parse(readFileSync(foldsPkgPath, 'utf8')).version ?? 'unknown';
  } catch {
    return 'unknown';
  }
 }
 try {
-  let content = readFileSync(foldsPath, 'utf8');
+  const content = readFileSync(foldsPath, 'utf8');
  // Defensive guard: if src is not a function, render null instead of crashing
  const original = 'children: src(filled)';
  const patched = 'children: typeof src === "function" ? src(filled) : null';
  if (content.includes(patched)) {
    // Already patched (e.g. re-running postinstall, or a fresh checkout that
    // already has a patched node_modules cache) — no-op, exit 0.
    console.log('folds patch already applied.');
  } else if (content.includes(original)) {
-    content = content.replace(original, patched);
+    writeFileSync(foldsPath, content.replace(original, patched), 'utf8');
    writeFileSync(foldsPath, content, 'utf8');
    console.log('Applied defensive Icon src guard to folds.');
  } else {
-    // Genuine "patch could not be applied" case: the target string is gone
+    // Genuine "patch could not be applied" case: neither the original nor the
-    // (folds renamed/restructured it) AND it isn't already patched. Fail hard
+    // patched form was found, meaning folds changed the Icon implementation.
-    // so the postinstall hook / CI breaks loudly instead of silently shipping
+    // Fail loudly so the postinstall hook / CI breaks instead of silently
-    // an unpatched folds (which crashes at render with "src is not a function").
+    // shipping an unpatched folds (which crashes at render with "src is not a
    // function"). See cinny #210 (build hygiene notes) for
    // context on why this is a direct node_modules patch rather than
    // patch-package.
    console.error('ERROR: folds Icon patch target not found.');
    console.error(`  folds version installed: ${foldsVersion()}`);
    console.error(`  Expected to find (surrounding context):\n${original}`);
    console.error(
-      'ERROR: folds Icon patch target not found - folds may have updated. ' +
+      '  folds likely changed its Icon implementation. Update the patch target ' +
-        'Update the patch target string in scripts/patch-folds.mjs before building.',
+        'in scripts/patch-folds.mjs (see cinny #210 ' +
        '-> patch-folds.mjs entry) before building.',
    );
    process.exit(1);
  }
@@ -103,9 +103,38 @@ missing.forEach((r) => console.log(`  Removing (HTTP ${r.status}): ${r.slug}`));
 const missingSet = new Set(missing.map((r) => r.slug));
 // Remove individual entries for missing slugs
-let updated = catalog.replace(/^[ \t]*\{ slug: '([^']+)', name: .+\},?\r?\n/gm, (match, slug) =>
+const removedSlugs = new Set();
-  missingSet.has(slug) ? '' : match,
+let updated = catalog.replace(/^[ \t]*\{ slug: '([^']+)', name: .+\},?\r?\n/gm, (match, slug) => {
-);
+  if (!missingSet.has(slug)) return match;
  removedSlugs.add(slug);
  return '';
 });
 // Regex-based removal is brittle: if the catalog is reformatted (different
 // indentation, line-wrapped entries, etc.) the pattern above can silently
 // match zero entries while HTTP probing still reports slugs missing. Verify
 // every slug we intended to remove actually got matched — otherwise abort
 // without writing, so a formatting change fails loudly instead of leaving
 // stale/dead entries in the catalog (see Gitea #88).
 const unmatched = [...missingSet].filter((slug) => !removedSlugs.has(slug));
 if (unmatched.length > 0) {
  console.error(
    `Aborting: expected to remove ${missingSet.size} entr${missingSet.size === 1 ? 'y' : 'ies'} ` +
      `but only matched ${removedSlugs.size}. The catalog's formatting may have changed and the ` +
      `parser in scripts/syncDecorations.mjs needs updating. Refusing to write a partial result.`,
  );
  console.error(`  Unmatched slugs: ${unmatched.join(', ')}`);
  process.exit(1);
 }
 if (removedSlugs.size === 0) {
  // We already exited above when `missing.length === 0`, so reaching here
  // with zero removals despite `missing.length > 0` means the diff between
  // "expected" and "actual" itself is broken — fail rather than proceed.
  console.error(
    'Aborting: no entries were matched for removal despite missing slugs. Refusing to write.',
  );
  process.exit(1);
 }
 // Drop category blocks that now have an empty decorations array
 updated = updated.replace(
@@ -118,6 +147,6 @@ updated = updated.replace(/\n{3,}/g, '\n\n');
 writeFileSync(catalogPath, updated, 'utf8');
 console.log(
-  `\nDone. Removed ${missing.length} entr${missing.length === 1 ? 'y' : 'ies'} from the catalog.`,
+  `\nDone. Removed ${removedSlugs.size} entr${removedSlugs.size === 1 ? 'y' : 'ies'} from the catalog.`,
 );
 console.log('Review with: git diff src/app/features/lotus/avatarDecorations.ts');
@@ -213,6 +213,7 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
          <Text size="L400">Account Data</Text>
          <Input
            variant="SurfaceVariant"
            aria-label="Account data type"
            size="400"
            radii="300"
            readOnly
@@ -26,6 +26,7 @@ import {
  RoomEvent,
 } from 'matrix-js-sdk';
 import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
 import { MatrixRTCSessionEvent } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import {
  CallEmbedContextProvider,
@@ -33,18 +34,29 @@ import {
  useCallHangupEvent,
  useCallJoined,
  useCallThemeSync,
  useCallMemberSoundSync,
  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { CallEmbed, useCallControlState } from '../plugins/call';
+import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
 import { hangupCallAndWait } from '../plugins/call/hangup';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 import { useMatrixClient } from '../hooks/useMatrixClient';
-import { previewRingtone, startRingtone } from '../utils/ringtones';
+import { previewRingtone, startRingtone, unlockRingtoneAudio } from '../utils/ringtones';
 import { useCallMembersChange, useCallSession } from '../hooks/useCall';
 import { useCallJoinLeaveSounds } from '../hooks/useCallJoinLeaveSounds';
 import { useCallPolicyRevokedToast } from '../hooks/useCallPolicyRevokedToast';
 import { useCallEndedToast } from '../hooks/useCallEndedToast';
 import { useCallRejoin } from '../hooks/useCallRejoin';
 import { usePttHaptics } from '../hooks/usePttHaptics';
 import { useScreenshareNotices } from '../hooks/useScreenshareNotices';
 import { useCallAnnouncements } from '../hooks/useCallAnnouncements';
 import { useMutedTalkWarning } from '../hooks/useMutedTalkWarning';
 import { callAnnouncementAtom } from '../state/callAnnouncement';
 import { SrOnly } from '../features/call-status/styles.css';
 import { useCallHotkeys } from '../hooks/useCallHotkeys';
 import { useAfkAutoMute } from '../hooks/useAfkAutoMute';
 import { useCallQuality } from '../hooks/useCallQuality';
 import { useRemoteAllMuted } from '../hooks/useCallSpeakers';
 import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
@@ -56,16 +68,21 @@ import { useRoomNavigate } from '../hooks/useRoomNavigate';
 import { getChatBg } from '../features/lotus/chatBackground';
 import { ExitFullscreenIcon, FullscreenIcon } from '../features/call/Controls';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useReducedMotion } from '../hooks/useReducedMotion';
 import { useSetting } from '../state/hooks/settings';
 import { useCallPreferences } from '../state/hooks/callPreferences';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getStateEvents, getMemberDisplayName } from '../utils/room';
+import { getStateEvent, getStateEvents, getMemberName } from '../utils/room';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
 import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
 import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
 import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
 const PIP_MIN_W = 200;
@@ -107,9 +124,17 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
  const rtcSupported = webRTCSupported();
  const canAnswer = livekitSupported && rtcSupported;
  const { room } = info;
  // [Gitea #135] Answer follows cameraOnJoin: say so, and offer the audio-only
  // alternative, rather than putting the user on video without warning.
  const [cameraOnJoinPref] = useSetting(settingsAtom, 'cameraOnJoin');
  const willAnswerWithCamera = info.intent === 'video' && !!cameraOnJoinPref;
  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
  const [ringtoneId] = useSetting(settingsAtom, 'ringtoneId');
  // Gitea #28 — don't ring during quiet hours / DND / Focus Assist / snooze. The
  // call can still be answered from this overlay; only the audible ring is
  // skipped.
  const quiet = useNotificationsQuiet();
  const roomName = useRoomName(room);
  const roomAvatar = useRoomAvatar(room, dm);
@@ -131,10 +156,10 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
  );
  useEffect(() => {
-    if (info.notificationType !== 'ring') return undefined;
+    if (info.notificationType !== 'ring' || quiet) return undefined;
    const stop = startRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
    return stop;
-  }, [info.notificationType, ringtoneId, ringtoneVolume]);
+  }, [info.notificationType, ringtoneId, ringtoneVolume, quiet]);
  useEffect(() => {
    const remaining = info.senderTs + info.lifetime - Date.now();
@@ -157,12 +182,18 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
            escapeDeactivates: false,
          }}
        >
-          <Dialog style={{ maxWidth: toRem(324) }}>
+          <Dialog
            style={{ maxWidth: toRem(324) }}
            // #187: the overlay had no role or name, so a screen reader landed
            // on an unlabelled button with no hint that a call was ringing.
            // Match the in-call banner (role="alert" + label).
            role="alertdialog"
            aria-modal="true"
            aria-label={`Incoming ${info.intent === 'video' ? 'video' : 'voice'} call from ${getMemberName(info.room, info.sender) ?? info.sender}`}
          >
            <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
              <Text size="T200" align="Center">
-                {getMemberDisplayName(info.room, info.sender) ??
+                {getMemberName(info.room, info.sender)}
                  getMxIdLocalPart(info.sender) ??
                  info.sender}
              </Text>
              <Box direction="Column" gap="500" alignItems="Center">
                <Box shrink="No">
@@ -201,15 +232,14 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                </Text>
              )}
              {!webRTCSupported() && (
-                <Text
+                <CallsUnavailableMessage roomId={room.roomId} actionLabel="Answer in browser" />
                  style={{ margin: 'auto', color: color.Critical.Main }}
                  size="L400"
                  align="Center"
                >
                  Your browser does not support WebRTC, which is required for calling.
                </Text>
              )}
              <Box direction="Column" gap="300">
                {willAnswerWithCamera && (
                  <Text size="T200" align="Center" priority="300">
                    Answering turns your camera on.
                  </Text>
                )}
                <Button
                  style={{ flexGrow: 1 }}
                  variant="Success"
@@ -226,9 +256,25 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                  disabled={!canAnswer}
                >
                  <Text as="span" size="B400">
-                    Answer
+                    {willAnswerWithCamera ? 'Answer with camera' : 'Answer'}
                  </Text>
                </Button>
                {willAnswerWithCamera && (
                  <Button
                    style={{ flexGrow: 1 }}
                    variant="Success"
                    fill="Soft"
                    size="400"
                    radii="400"
                    onClick={() => onAnswer(room, false)}
                    before={<Icon size="200" src={Icons.Phone} filled />}
                    disabled={!canAnswer}
                  >
                    <Text as="span" size="B400">
                      Answer without camera
                    </Text>
                  </Button>
                )}
                <Button
                  style={{ flexGrow: 1 }}
                  variant={dm ? 'Critical' : 'Secondary'}
@@ -270,9 +316,14 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
  const useAuthentication = useMediaAuthentication();
  const { room } = info;
  const isVideo = info.intent === 'video';
  const [cameraOnJoinPref] = useSetting(settingsAtom, 'cameraOnJoin');
  const bannerCameraOn = isVideo && !!cameraOnJoinPref;
  const [ringtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
  const [ringtoneId] = useSetting(settingsAtom, 'ringtoneId');
  // Gitea #28 — no ping during quiet hours / DND / Focus Assist / snooze; the
  // banner itself still shows so the call can be answered.
  const quiet = useNotificationsQuiet();
  const roomName = useRoomName(room);
  const roomAvatar = useRoomAvatar(room, dm);
@@ -299,11 +350,11 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
  // ringtone settings while the banner is showing.
  const pingedRef = useRef<string | undefined>(undefined);
  useEffect(() => {
-    if (info.notificationType !== 'ring') return;
+    if (info.notificationType !== 'ring' || quiet) return;
    if (pingedRef.current === info.refEventId) return;
    pingedRef.current = info.refEventId;
    previewRingtone(ringtoneId, Math.max(0, Math.min(1, ringtoneVolume / 100)));
-  }, [info.notificationType, info.refEventId, ringtoneId, ringtoneVolume]);
+  }, [info.notificationType, info.refEventId, ringtoneId, ringtoneVolume, quiet]);
  useEffect(() => {
    const remaining = info.senderTs + info.lifetime - Date.now();
@@ -315,8 +366,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
    return () => clearTimeout(id);
  }, [info.senderTs, info.lifetime, onIgnore]);
-  const callerName =
+  const callerName = getMemberName(info.room, info.sender);
    getMemberDisplayName(info.room, info.sender) ?? getMxIdLocalPart(info.sender) ?? info.sender;
  return (
    <Box
@@ -366,7 +416,7 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
          </Text>
        </Box>
      </Box>
-      <Box gap="200">
+      <Box gap="200" wrap="Wrap">
        <Button
          style={{ flexGrow: 1 }}
          variant="Success"
@@ -375,11 +425,27 @@ function IncomingCallBanner({ dm, info, onIgnore, onAnswer, onReject }: Incoming
          radii="300"
          onClick={() => onAnswer(room, isVideo)}
          before={<Icon size="100" src={isVideo ? Icons.VideoCamera : Icons.Phone} filled />}
          title={bannerCameraOn ? 'Answering turns your camera on' : undefined}
        >
          <Text as="span" size="B300">
-            Answer
+            {bannerCameraOn ? 'Answer with camera' : 'Answer'}
          </Text>
        </Button>
        {bannerCameraOn && (
          <Button
            style={{ flexGrow: 1 }}
            variant="Success"
            fill="Soft"
            size="300"
            radii="300"
            onClick={() => onAnswer(room, false)}
            before={<Icon size="100" src={Icons.Phone} filled />}
          >
            <Text as="span" size="B300">
              Answer without camera
            </Text>
          </Button>
        )}
        <Button
          style={{ flexGrow: 1 }}
          variant={dm ? 'Critical' : 'Secondary'}
@@ -412,6 +478,19 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
  const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
  const startCall = useCallStart(dm);
  const setCallEmbed = useSetAtom(callEmbedAtom);
  const { microphone, sound } = useCallPreferences();
  const [cameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');
  // C-L6: handleTimelineEvent awaits decryption before calling setState; guard
  // against the component unmounting during that await.
  const mountedRef = useRef(true);
  useEffect(
    () => () => {
      mountedRef.current = false;
    },
    [],
  );
  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
    async (event, room, toStartOfTimeline, removed, data) => {
@@ -427,6 +506,9 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
        await event.getDecryptionPromise();
      }
      // C-L6: bail if we unmounted while awaiting decryption above.
      if (!mountedRef.current) return;
      // Caller-side: a participant declined a call we're hosting in this room.
      // Without this the caller's UI keeps "ringing" until the notification
      // lifetime expires, with no indication the callee said no.
@@ -439,8 +521,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
          decliner !== mx.getSafeUserId() &&
          callEmbed?.roomId === room.roomId
        ) {
-          const declinerName =
+          const declinerName = getMemberName(room, decliner);
            getMemberDisplayName(room, decliner) ?? getMxIdLocalPart(decliner) ?? decliner;
          setToast({
            id: `rtc-decline-${event.getId() ?? decliner}`,
            displayName: declinerName,
@@ -463,8 +544,16 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
      const sender = event.getSender();
      const content = event.getContent<IRTCNotificationContent>();
      // Trust the caller's sender_ts only when it's within 20s of the server's
      // timestamp in EITHER direction. A fast caller clock made a fresh invite
      // look expired-in-the-future; a SLOW one left sender_ts in the past so
      // `Date.now() >= senderTs + lifetime` hid/dismissed the ring for a
      // genuinely fresh invite (COR-3). Fall back to the server ts on large skew.
      const senderTs =
-        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
+        typeof content.sender_ts === 'number' &&
        Math.abs(content.sender_ts - event.getTs()) <= 20000
          ? content.sender_ts
          : event.getTs();
      const lifetime = Math.min(content.lifetime, 120000);
      const notificationType = content.notification_type;
      const relation =
@@ -528,13 +617,62 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
    setCallInfo(undefined);
  }, []);
  // [Gitea #161] Stop ringing here when the call was handled ELSEWHERE:
  //  - answered on another of our devices (our own m.call.member appears),
  //  - declined on another of our devices (our own RTCDecline for this ring),
  //  - the caller hung up before we picked up (nobody left in the session).
  // Without this every other device kept ringing for the full lifetime.
  useEffect(() => {
    if (!callInfo) return undefined;
    const { room, refEventId } = callInfo;
    const myUserId = mx.getSafeUserId();
    const dismiss = () =>
      setCallInfo((current) => (current?.refEventId === refEventId ? undefined : current));
    const session = mx.matrixRTC.getRoomSession(room);
    const checkMemberships = () => {
      const { memberships } = session;
      if (memberships.some((m) => m.sender === myUserId))
        dismiss(); // answered elsewhere
      else if (memberships.length === 0) dismiss(); // caller gone
    };
    const onTimeline: EventTimelineSetHandlerMap[RoomEvent.Timeline] = (
      event,
      eventRoom,
      _s,
      _r,
      data,
    ) => {
      if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
      if (event.getType() === EventType.RTCDecline && event.getSender() === myUserId) {
        const related = event.getRelation()?.event_id;
        if (!related || related === refEventId) dismiss(); // declined elsewhere
      }
    };
    session.on(MatrixRTCSessionEvent.MembershipsChanged, checkMemberships);
    mx.on(RoomEvent.Timeline, onTimeline);
    // The caller's membership may not have arrived yet when the ring starts —
    // only treat "empty" as hung-up after it has had a moment to sync.
    const settle = setTimeout(checkMemberships, 5000);
    return () => {
      session.off(MatrixRTCSessionEvent.MembershipsChanged, checkMemberships);
      mx.removeListener(RoomEvent.Timeline, onTimeline);
      clearTimeout(settle);
    };
  }, [mx, callInfo]);
  const handleReject = useCallback(
    (room: Room, eventId: string) => {
      // Best-effort: the local UI dismisses regardless (below), but a failed
      // decline used to reject uncaught. Log it instead of surfacing — the caller
      // will time the call out on their side even if our decline never lands.
      mx.sendEvent(room.roomId, EventType.RTCDecline, {
        'm.relates_to': {
          rel_type: RelationType.Reference,
          event_id: eventId,
        },
      }).catch((err) => {
        console.error('Failed to send call decline:', err);
      });
      setCallInfo(undefined);
    },
@@ -542,12 +680,26 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
  );
  const handleAnswer = useCallback(
-    (room: Room, video: boolean) => {
+    async (room: Room, video: boolean) => {
      startCall(room, { microphone: true, video, sound: true });
      setCallInfo(undefined);
      // [Gitea #195] Answering from the in-call banner is the one call-to-call
      // switch path. Disposing the current embed alone leaves our ghost
      // `m.call.member` in the old room for ~17 s (until the delayed leave
      // expires) — hang up explicitly and wait for the membership to clear.
      if (callEmbed?.joined) {
        await hangupCallAndWait(mx, callEmbed);
        // Dispose it ourselves now: its HangupCall echo would otherwise land
        // after startCall() and clear the NEW embed from the atom.
        setCallEmbed(undefined);
      }
      // Honour cameraOnJoin and the persisted mic/sound preferences instead of
      // forcing camera+mic+sound on — every other join path does this, and
      // Answer was skipping it, publishing the camera with no prescreen.
      // (PTT's forceAudioOff is applied downstream inside useCallStart.)
      startCall(room, { microphone, video: cameraOnJoin && video, sound });
      navigateRoom(room.roomId);
    },
-    [startCall, navigateRoom],
+    [startCall, navigateRoom, microphone, sound, cameraOnJoin, callEmbed, mx, setCallEmbed],
  );
  if (!callInfo) return null;
@@ -579,11 +731,38 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
  );
 }
-function CallUtils({ embed }: { embed: CallEmbed }) {
+// [Gitea #168] Lives outside the embed so "Call ended" is still announced.
 function CallAnnouncementRegion() {
  const announcement = useAtomValue(callAnnouncementAtom);
  return (
    <span className={SrOnly} role="status" aria-live="polite" aria-atomic="true">
      {announcement}
    </span>
  );
 }
 function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
  const setCallEmbed = useSetAtom(callEmbedAtom);
-  useCallMemberSoundSync(embed);
+  // [Gitea #9] PTT/deafen hotkeys and AFK auto-mute are bound here, for the
  // embed's whole lifetime, rather than in CallControls (which only renders
  // while the call room is selected) — so they keep working in PiP and behind
  // the mobile in-call chat. Both are gated on `joined`.
  useCallHotkeys(embed, joined);
  useAfkAutoMute(joined ? embed : undefined);
  useCallJoinLeaveSounds(embed);
  useCallPolicyRevokedToast(embed, joined);
  useCallEndedToast(embed);
  useScreenshareNotices(embed);
  // [Gitea #43] The in-frame screenshare button follows the same room policy
  // as the host bar's (hidden where the server would refuse the share).
  const { allowScreenshare } = useRoomCallPolicy(embed.room);
  useEffect(() => {
    embed.control.setFrameScreenshareAllowed(allowScreenshare);
  }, [embed, allowScreenshare]);
  usePttHaptics();
  useCallAnnouncements(embed, joined);
  useMutedTalkWarning(embed, joined);
  useCallThemeSync(embed);
  useCallQuality(embed);
  useCallHangupEvent(
@@ -593,6 +772,22 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
    }, [setCallEmbed]),
  );
  // [Gitea #58] Warn before an accidental tab close/reload drops the user out
  // of a live call. Only armed while actually joined, and torn down on
  // hangup/dispose since this effect re-runs when `joined` flips back to false.
  useEffect(() => {
    if (!joined) return undefined;
    const onBeforeUnload = (event: BeforeUnloadEvent) => {
      event.preventDefault();
      // Legacy browsers require returnValue to be set to show the prompt.
      event.returnValue = '';
    };
    window.addEventListener('beforeunload', onBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', onBeforeUnload);
    };
  }, [joined]);
  return null;
 }
@@ -662,6 +857,12 @@ function PipMuteOverlay({ callEmbed }: { callEmbed: CallEmbed }) {
 type CallEmbedProviderProps = {
  children?: ReactNode;
 };
 /** [Gitea #118] Heartbeat + rejoin after a crash/restart; needs the embed container mounted. */
 function CallRejoin({ callEmbed, joined }: { callEmbed?: CallEmbed; joined: boolean }) {
  useCallRejoin(callEmbed, joined);
  return null;
 }
 export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const callEmbed = useAtomValue(callEmbedAtom);
  const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
@@ -676,23 +877,51 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const callActive = callEmbed && joined;
  const callVisible = inCallRoom && callActive && !chatOnlyView;
  const pipMode = callActive && !inCallRoom;
  const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
  const { navigateRoom } = useRoomNavigate();
  const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
-  // Sync pip mode into CallControl so it can adjust behavior accordingly
+  // C-L3 — prime the ringtone AudioContext on the first user gesture of the
  // session so the first incoming-call ring isn't silent (a fresh context stays
  // suspended until a gesture, and an incoming ring has none of its own).
  useEffect(() => {
-    if (!callEmbed) return;
+    const prime = () => {
-    callEmbed.control.setPipMode(!!pipMode);
+      unlockRingtoneAudio();
-  }, [pipMode, callEmbed]);
+      window.removeEventListener('pointerdown', prime);
      window.removeEventListener('keydown', prime);
    };
    window.addEventListener('pointerdown', prime, { once: true, passive: true });
    window.addEventListener('keydown', prime, { once: true, passive: true });
    return () => {
      window.removeEventListener('pointerdown', prime);
      window.removeEventListener('keydown', prime);
    };
  }, []);
  // When entering pip with screenshare active (or screenshare starts while in pip),
  // enable spotlight so the screenshare fills the pip window.
  // When screenshare ends, release the spotlight we auto-enabled.
  const pipAutoSpotlightRef = React.useRef(false);
  useEffect(() => {
-    if (!pipMode || !callEmbed) return;
+    if (!callEmbed) {
-    if (pipScreenshare) {
+      // The embed (and its spotlight) is torn down with the call; drop the latch
      // so a stale ref can't act on the next call's fresh embed.
      pipAutoSpotlightRef.current = false;
      return;
    }
    // Spotlight is wanted only while in pip with an active screenshare. Release
    // it when EITHER ends — including leaving pip (returning to the call room).
    // The release must not sit behind a `!pipMode` early-return, or a
    // screenshare→pip→back sequence leaves the auto-enabled spotlight stuck on
    // with pipAutoSpotlightRef latched true. The ref gates release so we only
    // ever undo a spotlight we turned on (never one the user set).
    // NB: `control.spotlight` is read below but deliberately NOT a dependency —
    // this effect reacts to pip/screenshare *intent*, not to spotlight changes.
    // Adding it as a dep would re-run on every manual spotlight toggle and fight
    // the user.
    const wantSpotlight = pipMode && pipScreenshare;
    if (wantSpotlight) {
      if (!callEmbed.control.spotlight) {
        callEmbed.control.toggleSpotlight();
        pipAutoSpotlightRef.current = true;
@@ -706,9 +935,10 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const theme = useTheme();
  const isDark = theme.kind === ThemeKind.Dark;
  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
  const reduced = useReducedMotion();
  const wallpaperStyle = React.useMemo(
-    () => getChatBg(chatBackground, isDark),
+    () => getChatBg(chatBackground, isDark, reduced),
-    [chatBackground, isDark],
+    [chatBackground, isDark, reduced],
  );
  const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
@@ -1082,9 +1312,11 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  return (
    <CallEmbedContextProvider value={callEmbed}>
-      {callEmbed && <CallUtils embed={callEmbed} />}
+      {callEmbed && <CallUtils embed={callEmbed} joined={joined} />}
      <CallAnnouncementRegion />
      <CallEmbedRefContextProvider value={callEmbedRef}>
        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
        <CallRejoin callEmbed={callEmbed} joined={joined} />
        {children}
      </CallEmbedRefContextProvider>
      <div
@@ -1096,7 +1328,15 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
          left: 0,
          width: '100%',
          height: '50%',
-          ...(callVisible && !pipMode ? wallpaperStyle : {}),
+          // [Gitea #224] The fork renders EC transparent (lotusTransparent) so the
          // wallpaper shows through the full-size embed; in PiP the thing behind
          // the frame is whatever room you navigated to, so give it an opaque
          // surface instead of letting the timeline bleed through the tiles.
          ...(pipMode
            ? { background: color.Surface.Container }
            : callVisible
              ? wallpaperStyle
              : {}),
        }}
        ref={callEmbedRef}
      >
@@ -1119,6 +1359,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                zIndex: 1,
                background: 'transparent',
                cursor: 'grab',
                // [Gitea #43] The call's "Share your screen?" prompt is drawn
                // inside the frame: let the click reach its Share button.
                pointerEvents: pipPromptOpen ? 'none' : undefined,
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'flex-end',
@@ -0,0 +1,114 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
  Box,
  Button,
  Checkbox,
  Dialog,
  Header,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Text,
  config,
 } from 'folds';
 import { invokeTauri, isTauri, tauriInvoke, useTauriEvent } from '../hooks/useTauri';
 import { useModalStyle } from '../hooks/useModalStyle';
 /**
 * cinny-desktop #5: the first time the window is closed, ask whether Lotus Chat
 * should keep running in the tray (calls, messages, notifications) or quit —
 * and, in the same moment, whether it should start when you sign in. Asked
 * once; changeable in Settings → General. The native side sends
 * `lotus-close-requested` only while the choice is still "ask", and never
 * during a call (a call always goes to the tray).
 */
 export function CloseBehaviorPrompt() {
  const [open, setOpen] = useState(false);
  const [launchOnLogin, setLaunchOnLogin] = useState(false);
  const modalStyle = useModalStyle(420);
  // Tells the native side we're listening (see get_close_behavior).
  useEffect(() => {
    if (!isTauri()) return;
    tauriInvoke()?.('get_close_behavior').catch(() => undefined);
  }, []);
  useTauriEvent('lotus-close-requested', () => setOpen(true));
  const choose = useCallback(
    (value: 'tray' | 'quit') => {
      if (launchOnLogin) invokeTauri('plugin:autostart|enable');
      setOpen(false);
      invokeTauri('resolve_close_request', { value });
    },
    [launchOnLogin],
  );
  if (!open) return null;
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: '#close-behavior-keep',
            // Dismissing without choosing keeps the window open; the next close
            // asks again.
            onDeactivate: () => setOpen(false),
            clickOutsideDeactivates: true,
          }}
        >
          <Dialog
            variant="Surface"
            role="dialog"
            aria-modal="true"
            aria-labelledby="close-behavior-title"
            aria-describedby="close-behavior-body"
            style={modalStyle}
          >
            <Header
              style={{
                padding: `0 ${config.space.S400}`,
                borderBottomWidth: config.borderWidth.B300,
              }}
              variant="Surface"
              size="500"
            >
              <Text as="h2" size="H4" id="close-behavior-title">
                Keep Lotus Chat running?
              </Text>
            </Header>
            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
              <Text priority="400" id="close-behavior-body">
                Lotus Chat can keep running in the system tray when you close this window, so
                messages, notifications and calls still reach you. Open it again from the tray icon.
              </Text>
              <Box as="label" alignItems="Center" gap="200" style={{ cursor: 'pointer' }}>
                <Checkbox
                  size="300"
                  variant="Primary"
                  checked={launchOnLogin}
                  onClick={(e: React.MouseEvent<HTMLInputElement>) =>
                    setLaunchOnLogin(e.currentTarget.checked)
                  }
                />
                <Text size="T300">Start Lotus Chat when I sign in to my computer</Text>
              </Box>
              <Box direction="Column" gap="200">
                <Button id="close-behavior-keep" variant="Primary" onClick={() => choose('tray')}>
                  <Text size="B400">Keep running in the tray</Text>
                </Button>
                <Button variant="Secondary" fill="Soft" onClick={() => choose('quit')}>
                  <Text size="B400">Quit when I close the window</Text>
                </Button>
              </Box>
              <Text size="T200" priority="300">
                You can change this in Settings → General.
              </Text>
            </Box>
          </Dialog>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
 }
@@ -0,0 +1,168 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
  Box,
  Button,
  Dialog,
  Header,
  Icon,
  Icons,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Text,
  config,
 } from 'folds';
 import {
  EventStatus,
  HttpApiEvent,
  HttpApiEventHandlerMap,
  MatrixEvent,
  Room,
  RoomEvent,
  RoomEventHandlerMap,
 } from 'matrix-js-sdk';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { failedForConsent, safeConsentUri } from '../utils/consent';
 // After "Later", don't re-open for every background retry; the next send the
 // user makes after this window explains again.
 const SNOOZE_MS = 10_000;
 /**
 * A homeserver with a consent requirement (e.g. Synapse's user_consent) blocks
 * sending until its terms are accepted, answering 403 M_CONSENT_NOT_GIVEN with a `consent_uri`. Without
 * this the message just shows "Failed to send". The SDK emits
 * HttpApiEvent.NoConsent for every such response; we explain why, link to the
 * acceptance page, and offer to resend what was blocked once accepted.
 */
 export function ConsentRequiredPrompt() {
  const mx = useMatrixClient();
  const [consentUri, setConsentUri] = useState<string>();
  const [open, setOpen] = useState(false);
  const [opened, setOpened] = useState(false);
  const [blockedCount, setBlockedCount] = useState(0);
  const snoozedUntil = useRef(0);
  const blocked = useRef(new Map<MatrixEvent, Room>());
  const modalStyle = useModalStyle(440);
  const server = mx.getDomain() ?? 'Your homeserver';
  useEffect(() => {
    const onNoConsent: HttpApiEventHandlerMap[HttpApiEvent.NoConsent] = (_message, uri) => {
      const safe = safeConsentUri(uri);
      if (safe) setConsentUri(safe);
      if (Date.now() >= snoozedUntil.current) setOpen(true);
    };
    const onLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (event, room) => {
      if (failedForConsent(event)) blocked.current.set(event, room);
      else if (!blocked.current.delete(event)) return;
      setBlockedCount(blocked.current.size);
    };
    mx.on(HttpApiEvent.NoConsent, onNoConsent);
    mx.on(RoomEvent.LocalEchoUpdated, onLocalEcho);
    return () => {
      mx.removeListener(HttpApiEvent.NoConsent, onNoConsent);
      mx.removeListener(RoomEvent.LocalEchoUpdated, onLocalEcho);
    };
  }, [mx]);
  const review = useCallback(() => {
    if (!consentUri) return;
    window.open(consentUri, '_blank', 'noopener,noreferrer');
    setOpened(true);
  }, [consentUri]);
  const retry = useCallback(() => {
    setOpen(false);
    setOpened(false);
    const pending = Array.from(blocked.current.entries());
    blocked.current.clear();
    setBlockedCount(0);
    pending.forEach(([event, room]) => {
      if (event.status === EventStatus.NOT_SENT) mx.resendEvent(event, room);
    });
  }, [mx]);
  const later = useCallback(() => {
    snoozedUntil.current = Date.now() + SNOOZE_MS;
    setOpen(false);
  }, []);
  if (!open) return null;
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: '#consent-review',
            fallbackFocus: '#consent-later',
            onDeactivate: later,
            clickOutsideDeactivates: true,
            escapeDeactivates: true,
          }}
        >
          <Dialog
            variant="Surface"
            role="alertdialog"
            aria-modal="true"
            aria-labelledby="consent-title"
            aria-describedby="consent-body"
            style={modalStyle}
          >
            <Header
              style={{
                padding: `0 ${config.space.S400}`,
                borderBottomWidth: config.borderWidth.B300,
              }}
              variant="Surface"
              size="500"
            >
              <Text as="h2" size="H4" id="consent-title">
                Accept the terms to keep chatting
              </Text>
            </Header>
            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
              <Box id="consent-body" direction="Column" gap="200">
                <Text priority="400">
                  Your message wasn&apos;t sent. <b>{server}</b> requires you to review and accept
                  its terms of service before you can send messages.
                </Text>
                <Text priority="400">
                  {consentUri
                    ? 'Nothing you sent is lost: accept the terms, then come back here and retry.'
                    : 'Your homeserver didn’t include a link to its terms. Contact its administrator, or accept them in another Matrix app, then retry.'}
                </Text>
              </Box>
              <Box direction="Column" gap="200">
                {consentUri && (
                  <Button
                    id="consent-review"
                    variant={opened ? 'Secondary' : 'Primary'}
                    fill={opened ? 'Soft' : 'Solid'}
                    onClick={review}
                    after={<Icon size="100" src={Icons.External} />}
                  >
                    <Text size="B400">Review and accept</Text>
                  </Button>
                )}
                <Button
                  variant={opened ? 'Primary' : 'Secondary'}
                  fill={opened ? 'Solid' : 'Soft'}
                  onClick={retry}
                >
                  <Text size="B400">
                    {blockedCount > 0 ? "I've accepted — retry sending" : "I've accepted"}
                  </Text>
                </Button>
                <Button id="consent-later" variant="Secondary" fill="None" onClick={later}>
                  <Text size="B400">Later</Text>
                </Button>
              </Box>
            </Box>
          </Dialog>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
 }
@@ -1,10 +1,11 @@
 import {
  ShowQrCodeCallbacks,
  ShowSasCallbacks,
  VerificationPhase,
  VerificationRequest,
  Verifier,
 } from 'matrix-js-sdk/lib/crypto-api';
-import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
+import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
 import {
@@ -27,11 +28,13 @@ import {
  useVerificationRequestPhase,
  useVerificationRequestReceived,
  useVerifierCancel,
  useVerifierShowReciprocateQr,
  useVerifierShowSas,
 } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { QrScanner } from './QrScanner';
 const DialogHeaderStyles: CSSProperties = {
  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -97,32 +100,6 @@ function VerificationAccept({ onAccept }: VerificationAcceptProps) {
  );
 }
 function VerificationWaitStart() {
  const { t } = useTranslation();
  return (
    <Box direction="Column" gap="400">
      <Text>{t('Organisms.DeviceVerification.request_accepted')}</Text>
      <WaitingMessage message={t('Organisms.DeviceVerification.waiting_response')} />
    </Box>
  );
 }
 type VerificationStartProps = {
  onStart: () => Promise<void>;
 };
 function AutoVerificationStart({ onStart }: VerificationStartProps) {
  const { t } = useTranslation();
  useEffect(() => {
    onStart();
  }, [onStart]);
  return (
    <Box direction="Column" gap="400">
      <WaitingMessage message={t('Organisms.DeviceVerification.starting_emoji')} />
    </Box>
  );
 }
 function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
  const { t } = useTranslation();
  const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
@@ -237,6 +214,124 @@ function VerificationCanceled({ onClose }: VerificationCanceledProps) {
  );
 }
 function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    // Byte-mode so the raw verification bytes round-trip (a string value would
    // mangle high bytes via UTF-8). The QR library is loaded on demand.
    import('qrcode')
      .then(({ default: QRCode }) =>
        QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
          width: 220,
          margin: 2,
          color: { dark: '#000000', light: '#ffffff' },
        }),
      )
      .catch(() => undefined);
  }, [data]);
  return (
    <Box justifyContent="Center">
      <canvas ref={canvasRef} style={{ borderRadius: config.radii.R300 }} />
    </Box>
  );
 }
 type VerificationReadyProps = {
  request: VerificationRequest;
  onStartSas: () => void;
  onScanned: (bytes: Uint8ClampedArray) => void;
 };
 function VerificationReady({ request, onStartSas, onScanned }: VerificationReadyProps) {
  const [myQr, setMyQr] = useState<Uint8ClampedArray>();
  const [scanning, setScanning] = useState(false);
  const canShowMine = request.otherPartySupportsMethod(VerificationMethod.ScanQrCode);
  const canScanTheirs = request.otherPartySupportsMethod(VerificationMethod.ShowQrCode);
  useEffect(() => {
    if (!canShowMine) return;
    request
      .generateQRCode()
      .then((bytes) => {
        if (bytes) setMyQr(bytes);
      })
      .catch(() => undefined);
  }, [request, canShowMine]);
  if (scanning) {
    return <QrScanner onScan={onScanned} onCancel={() => setScanning(false)} />;
  }
  return (
    <Box direction="Column" gap="400">
      {myQr && (
        <Box direction="Column" gap="200">
          <Text size="T300">Scan this code with your other device to verify.</Text>
          <QrCodeImage data={myQr} />
        </Box>
      )}
      <Box direction="Column" gap="200">
        {canScanTheirs && (
          <Button variant="Primary" fill="Solid" onClick={() => setScanning(true)}>
            <Text size="B400">Scan their QR code</Text>
          </Button>
        )}
        <Button variant="Secondary" fill="Soft" onClick={onStartSas}>
          <Text size="B400">Verify with emoji instead</Text>
        </Button>
      </Box>
    </Box>
  );
 }
 type ReciprocateVerificationProps = {
  verifier: Verifier;
  onCancel: () => void;
 };
 function ReciprocateVerification({ verifier, onCancel }: ReciprocateVerificationProps) {
  const [qrCallbacks, setQrCallbacks] = useState<ShowQrCodeCallbacks>();
  const [confirmState, confirm] = useAsyncCallback(
    useCallback(async () => qrCallbacks?.confirm(), [qrCallbacks]),
  );
  useVerifierShowReciprocateQr(verifier, setQrCallbacks);
  useVerifierCancel(verifier, onCancel);
  const confirming =
    confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
  // The showing side gets ShowReciprocateQr callbacks after the other device
  // scans; the scanning side never does (it already called verify()) and just
  // waits for completion.
  if (!qrCallbacks) {
    return (
      <Box direction="Column" gap="400">
        <WaitingMessage message="Verifying…" />
      </Box>
    );
  }
  return (
    <Box direction="Column" gap="400">
      <Text>The other device scanned this code. Confirm it now shows as verified.</Text>
      <Box direction="Column" gap="200">
        <Button variant="Primary" fill="Soft" onClick={confirm} disabled={confirming}>
          <Text size="B400">Confirm</Text>
        </Button>
        <Button
          variant="Primary"
          fill="Soft"
          onClick={() => qrCallbacks.cancel()}
          disabled={confirming}
        >
          <Text size="B400">Cancel</Text>
        </Button>
      </Box>
    </Box>
  );
 }
 type DeviceVerificationProps = {
  request: VerificationRequest;
  onExit: () => void;
@@ -256,21 +351,40 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
  const handleStart = useCallback(async () => {
    await request.startVerification(VerificationMethod.Sas);
  }, [request]);
  const handleScanned = useCallback(
    async (bytes: Uint8ClampedArray) => {
      try {
        const verifier = await request.scanQRCode(bytes);
        await verifier.verify();
      } catch {
        // A bad/mismatched scan cancels the request; the Cancelled phase renders.
      }
    },
    [request],
  );
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#deviceverification-dialog-1',
            clickOutsideDeactivates: false,
            escapeDeactivates: false,
          }}
        >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
            id="deviceverification-dialog-1"
            role="dialog"
            aria-modal="true"
            aria-labelledby="deviceverification-dialog-1-title"
            tabIndex={-1}
            variant="Surface"
            style={modalStyle}
          >
            <Header style={DialogHeaderStyles} variant="Surface" size="500">
              <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="deviceverification-dialog-1-title" as="h2" size="H4">
                  Device Verification
                </Text>
              </Box>
@@ -290,15 +404,20 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
                ) : (
                  <VerificationAccept onAccept={handleAccept} />
                ))}
-              {phase === VerificationPhase.Ready &&
+              {phase === VerificationPhase.Ready && (
-                (request.initiatedByMe ? (
+                <VerificationReady
-                  <AutoVerificationStart onStart={handleStart} />
+                  request={request}
-                ) : (
+                  onStartSas={handleStart}
-                  <VerificationWaitStart />
+                  onScanned={handleScanned}
-                ))}
+                />
              )}
              {phase === VerificationPhase.Started &&
                (request.verifier ? (
-                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
+                  request.chosenMethod === VerificationMethod.Reciprocate ? (
                    <ReciprocateVerification verifier={request.verifier} onCancel={handleCancel} />
                  ) : (
                    <SasVerification verifier={request.verifier} onCancel={handleCancel} />
                  )
                ) : (
                  <VerificationUnexpected
                    message="Unexpected Error! Verification is started but verifier is missing."
@@ -13,13 +13,13 @@ import {
  color,
  Spinner,
 } from 'folds';
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
 import { useSaveFile } from '../hooks/useSaveFile';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
-import { copyToClipboard } from '../utils/dom';
+import { useSensitiveCopy } from '../hooks/useSensitiveCopy';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { clearSecretStorageKeys } from '../../client/secretStorageKeys';
 import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
@@ -230,16 +230,16 @@ type RecoveryKeyDisplayProps = {
 };
 function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
  const [show, setShow] = useState(false);
  const saveFile = useSaveFile();
-  const handleCopy = () => {
+  // [Gitea #156] The key leaves the clipboard again after 60 s, visibly.
-    copyToClipboard(recoveryKey);
+  const { copy: handleCopy, secondsLeft } = useSensitiveCopy(recoveryKey);
  };
  const handleDownload = () => {
    const blob = new Blob([recoveryKey], {
      type: 'text/plain;charset=us-ascii',
    });
-    FileSaver.saveAs(blob, 'recovery-key.txt');
+    saveFile(blob, 'recovery-key.txt');
  };
  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
@@ -271,8 +271,10 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
        </Box>
      </Box>
      <Box direction="Column" gap="200">
-        <Button onClick={handleCopy}>
+        <Button onClick={handleCopy} aria-live="polite">
-          <Text size="B400">Copy</Text>
+          <Text size="B400">
            {secondsLeft !== null ? `Copied · clears in ${secondsLeft} s` : 'Copy'}
          </Text>
        </Button>
        <Button onClick={handleDownload} fill="Soft">
          <Text size="B400">Download</Text>
@@ -291,7 +293,15 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
    const modalStyle = useModalStyle(480);
    return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
        id="deviceverificationsetup-dialog-1"
        role="dialog"
        aria-modal="true"
        aria-labelledby="deviceverificationsetup-dialog-1-title"
        tabIndex={-1}
        ref={ref}
        style={modalStyle}
      >
        <Header
          style={{
            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -301,7 +311,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
          size="500"
        >
          <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-1-title" as="h2" size="H4">
              Setup Device Verification
            </Text>
          </Box>
@@ -329,7 +339,15 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
    const modalStyle = useModalStyle(480);
    return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
        id="deviceverificationsetup-dialog-2"
        role="dialog"
        aria-modal="true"
        aria-labelledby="deviceverificationsetup-dialog-2-title"
        tabIndex={-1}
        ref={ref}
        style={modalStyle}
      >
        <Header
          style={{
            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -339,7 +357,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
          size="500"
        >
          <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-2-title" as="h2" size="H4">
              Reset Device Verification
            </Text>
          </Box>
@@ -1,12 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useAtom } from 'jotai';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
 import { Box, color, config } from 'folds';
 import { TapToSendBar } from './tap-to-send/TapToSendBar';
 import { useRecentTouch } from '../hooks/useRecentTouch';
 import { useElementSizeObserver } from '../hooks/useElementSizeObserver';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { addRecentGif, RecentGif, recentGifsAtom } from '../state/recentGifs';
 const PICKER_WIDTH = 312;
 const PICKER_WIDTH_CSS = `min(${PICKER_WIDTH}px, calc(100vw - 16px))`;
 type GifPickerInnerProps = {
  onSelect: (url: string, width: number, height: number) => void;
@@ -14,24 +20,165 @@ type GifPickerInnerProps = {
  lotusTerminal: boolean;
 };
 // Small monospace section header matching the picker's `// GIF_SEARCH` treatment
 // (lotusTerminal) / a muted label otherwise.
 const RECENT_LABEL_ID = 'gif-picker-recent-label';
 function SectionLabel({
  text,
  lotusTerminal,
  id,
 }: {
  text: string;
  lotusTerminal: boolean;
  id?: string;
 }) {
  if (lotusTerminal) {
    return (
      <div
        id={id}
        style={{
          padding: '4px 2px',
          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
          fontSize: '10px',
          fontWeight: 700,
          letterSpacing: '0.1em',
          color: 'var(--lt-accent-orange)',
          userSelect: 'none',
        }}
      >
        {`// ${text.toUpperCase()}`}
      </div>
    );
  }
  return (
    <div
      id={id}
      style={{
        padding: '2px 2px 4px',
        fontSize: '11px',
        fontWeight: 600,
        color: color.Surface.OnContainer,
        opacity: 0.6,
        userSelect: 'none',
      }}
    >
      {text}
    </div>
  );
 }
 function RecentGifs({
  recents,
  lotusTerminal,
  onPick,
 }: {
  recents: RecentGif[];
  lotusTerminal: boolean;
  onPick: (gif: RecentGif) => void;
 }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <SectionLabel text="Recent" lotusTerminal={lotusTerminal} id={RECENT_LABEL_ID} />
      <div
        role="group"
        aria-labelledby={RECENT_LABEL_ID}
        style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}
      >
        {recents.map((g, i) => (
          <button
            key={g.url}
            type="button"
            aria-label={`Send recent GIF ${i + 1} of ${recents.length}`}
            onClick={() => onPick(g)}
            style={{
              padding: 0,
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              height: 72,
              borderRadius: lotusTerminal ? '4px' : '8px',
              overflow: 'hidden',
            }}
          >
            {/* A still preview (falls back to the animated url for pre-existing
                recents) so the Recent row doesn't autoplay many GIFs at once. */}
            <img
              src={g.previewUrl ?? g.url}
              alt=""
              loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </button>
        ))}
      </div>
    </div>
  );
 }
 function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
-  const { fetchGifs, searchKey } = React.useContext(SearchContext);
+  const { fetchGifs, searchKey, term } = React.useContext(SearchContext);
  const [recents, setRecents] = useAtom(recentGifsAtom);
  const sendGif = useCallback(
    (gif: RecentGif) => {
      const { url, width, height, previewUrl } = gif;
      setRecents((prev) => addRecentGif(prev, { url, width, height, previewUrl }));
      onSelect(gif.url, gif.width, gif.height);
      requestClose();
    },
    [onSelect, requestClose, setRecents],
  );
  // [Gitea #147] Touch: first tap parks the GIF in a preview bar, second tap
  // (or Send) sends. Mouse/keyboard/screen reader: one step, as before.
  const containerRef = useRef<HTMLDivElement>(null);
  const { wasTouch } = useRecentTouch(containerRef);
  const [pending, setPending] = useState<(RecentGif & { title?: string }) | undefined>();
  const pick = useCallback(
    (gif: RecentGif & { title?: string }) => {
      if (wasTouch() && pending?.url !== gif.url) {
        setPending(gif);
        return;
      }
      setPending(undefined);
      sendGif(gif);
    },
    [wasTouch, pending, sendGif],
  );
  const handleClick = useCallback(
    (gif: IGif, e: React.SyntheticEvent) => {
      e.preventDefault();
      const r = gif.images.downsized ?? gif.images.original;
-      const { url } = r;
+      const previewUrl =
-      const width = Number(r.width) || 200;
+        gif.images.fixed_width_small_still?.url ??
-      const height = Number(r.height) || 200;
+        gif.images.downsized_still?.url ??
-      onSelect(url, width, height);
+        gif.images.original_still?.url;
-      requestClose();
+      pick({
        url: r.url,
        width: Number(r.width) || 200,
        height: Number(r.height) || 200,
        previewUrl,
        title: gif.title,
      });
    },
-    [onSelect, requestClose],
+    [pick],
  );
  const showRecents = recents.length > 0 && !(term ?? '').trim();
  // The container is min(312px, 100vw-16); feed the Grid the live pixel width
  // (minus the inner 8px padding on each side) so it doesn't overflow a phone
  // narrower than 312px with a fixed 296px grid.
  const [gridWidth, setGridWidth] = useState(PICKER_WIDTH - 16);
  useElementSizeObserver(
    useCallback(() => containerRef.current, []),
    useCallback((w) => setGridWidth(Math.max(1, Math.floor(w) - 16)), []),
  );
  return (
-    <Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
+    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }} ref={containerRef}>
      {lotusTerminal && (
        <div
          style={{
@@ -53,13 +200,27 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
          <SearchBar />
        </div>
      </Box>
      {pending && (
        <TapToSendBar
          previewUrl={pending.previewUrl ?? pending.url}
          label={pending.title || 'GIF'}
          onSend={() => {
            setPending(undefined);
            sendGif(pending);
          }}
          onCancel={() => setPending(undefined)}
        />
      )}
      <div
        style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}
      >
        {showRecents && (
          <RecentGifs recents={recents} lotusTerminal={lotusTerminal} onPick={pick} />
        )}
        <Grid
          key={searchKey}
          fetchGifs={fetchGifs}
-          width={PICKER_WIDTH - 16}
+          width={gridWidth}
          columns={2}
          gutter={4}
          onGifClick={handleClick}
@@ -79,6 +240,13 @@ type GifPickerProps = {
 export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const [gifPickerEnabled] = useSetting(settingsAtom, 'gifPickerEnabled');
  // Searches (and every keystroke) go straight to Giphy's API, so the picker
  // is opt-in (Settings → Messages) and must not render or fetch until then.
  if (!gifPickerEnabled) {
    return null;
  }
  const containerStyle = lotusTerminal
    ? {
@@ -88,7 +256,7 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
        overflow: 'hidden',
        boxShadow:
          '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
-        width: `${PICKER_WIDTH}px`,
+        width: PICKER_WIDTH_CSS,
      }
    : {
        background: color.Surface.Container,
@@ -96,14 +264,14 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
        borderRadius: config.radii.R400,
        overflow: 'hidden',
        boxShadow: color.Other.Shadow,
-        width: `${PICKER_WIDTH}px`,
+        width: PICKER_WIDTH_CSS,
      };
  return (
    <FocusTrap
      focusTrapOptions={{
        initialFocus: false,
-        returnFocusOnDeactivate: false,
+        returnFocusOnDeactivate: true,
        onDeactivate: requestClose,
        clickOutsideDeactivates: true,
        allowOutsideClick: true,
@@ -30,7 +30,7 @@ export const ImageOverlay = as<'div', ImageOverlayProps>(
          <Modal
            className={ModalWide}
            size="500"
-            onContextMenu={(evt: any) => evt.stopPropagation()}
+            onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
          >
            {renderViewer({
              src,
@@ -1,7 +1,10 @@
 import React, { forwardRef, useCallback } from 'react';
 import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
 import { useAtom } from 'jotai';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { logoutClient } from '../../client/initMatrix';
 import { callEmbedAtom } from '../state/callEmbed';
 import { hangupCallAndWait } from '../plugins/call/hangup';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { useCrossSigningActive } from '../hooks/useCrossSigning';
@@ -11,6 +14,11 @@ import {
  VerificationStatus,
 } from '../hooks/useDeviceVerificationStatus';
 /**
 * Ask Element Call to hang up and wait (bounded) until our own MatrixRTC
 * membership has actually been removed from the room, so the leave reaches
 * the homeserver before the client is stopped and the token is revoked.
 */
 type LogoutDialogProps = {
  handleClose: () => void;
 };
@@ -26,16 +34,34 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
      mx.getDeviceId() ?? undefined,
    );
    const [callEmbed, setCallEmbed] = useAtom(callEmbedAtom);
    const [logoutState, logout] = useAsyncCallback<void, Error, []>(
      useCallback(async () => {
        // [Gitea #29] Logging out mid-call must hang up first, or the MatrixRTC
        // membership (expires: 4 h) stays behind as a ghost participant and
        // everyone else sees you "in call" until it times out.
        if (callEmbed && callEmbed.joined && !callEmbed.disposed) {
          await hangupCallAndWait(mx, callEmbed);
          setCallEmbed(undefined);
        }
        await logoutClient(mx);
-      }, [mx]),
+      }, [mx, callEmbed, setCallEmbed]),
    );
    const ongoingLogout = logoutState.status === AsyncStatus.Loading;
    return (
-      <Dialog variant="Surface" ref={ref} style={modalStyle}>
+      <Dialog
        id="logoutdialog-dialog-1"
        role="dialog"
        aria-modal="true"
        aria-labelledby="logoutdialog-dialog-1-title"
        tabIndex={-1}
        variant="Surface"
        ref={ref}
        style={modalStyle}
      >
        <Header
          style={{
            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -45,7 +71,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
          size="500"
        >
          <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="logoutdialog-dialog-1-title" as="h2" size="H4">
              Logout
            </Text>
          </Box>
@@ -24,6 +24,8 @@ export function Modal500({ requestClose, children }: Modal500Props) {
          <Modal
            size="500"
            variant="Background"
            role="dialog"
            aria-modal="true"
            // On mobile expand to fill the viewport. On desktop fall back to the
            // folds `size="500"` width (~50rem) — overriding maxWidth here would
            // squish the two-pane settings layout.
@@ -19,7 +19,7 @@ import {
  config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import FileSaver from 'file-saver';
+import { useSaveFile } from '../../hooks/useSaveFile';
 import * as css from './PdfViewer.css';
 import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { useZoom } from '../../hooks/useZoom';
@@ -36,6 +36,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
  ({ className, name, src, requestClose, ...props }, ref) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const scrollRef = useRef<HTMLDivElement>(null);
    const saveFile = useSaveFile();
    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
@@ -76,7 +77,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
    }, [docState, pageNo, zoom]);
    const handleDownload = () => {
-      FileSaver.saveAs(src, name);
+      saveFile(src, name);
    };
    const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -0,0 +1,111 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, Button, color, config, Text } from 'folds';
 type QrScannerProps = {
  onScan: (bytes: Uint8ClampedArray) => void;
  onCancel: () => void;
 };
 // Camera QR scanner. Decodes frames with jsQR and hands back the raw byte
 // segment (`result.binaryData`) — Matrix QR verification needs the raw bytes,
 // not a decoded string, so the string-only `BarcodeDetector` can't be used.
 // jsQR is loaded on demand: it is large and only needed while scanning.
 export function QrScanner({ onScan, onCancel }: QrScannerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [error, setError] = useState<string>();
  const doneRef = useRef(false);
  useEffect(() => {
    let stream: MediaStream | undefined;
    let raf = 0;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    let decode: typeof import('jsqr').default | undefined;
    const tick = () => {
      const video = videoRef.current;
      if (
        decode &&
        !doneRef.current &&
        video &&
        ctx &&
        video.readyState === video.HAVE_ENOUGH_DATA
      ) {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const result = decode(image.data, image.width, image.height);
        if (result && result.binaryData.length > 0) {
          doneRef.current = true;
          onScan(new Uint8ClampedArray(result.binaryData));
          return;
        }
      }
      raf = requestAnimationFrame(tick);
    };
    (async () => {
      try {
        const [lib, media] = await Promise.all([
          import('jsqr'),
          navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }),
        ]);
        decode = lib.default;
        stream = media;
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
          await videoRef.current.play();
        }
        raf = requestAnimationFrame(tick);
      } catch {
        setError(
          'Could not access the camera. Grant camera permission, or verify with emojis instead.',
        );
      }
    })();
    return () => {
      doneRef.current = true;
      cancelAnimationFrame(raf);
      stream?.getTracks().forEach((track) => track.stop());
    };
  }, [onScan]);
  if (error) {
    return (
      <Box direction="Column" gap="400">
        <Text style={{ color: color.Critical.Main }} size="T300">
          {error}
        </Text>
        <Button variant="Secondary" fill="Soft" onClick={onCancel}>
          <Text size="B400">Back</Text>
        </Button>
      </Box>
    );
  }
  return (
    <Box direction="Column" gap="400" alignItems="Center">
      <Text size="T300" align="Center">
        Point your camera at the QR code shown on your other device.
      </Text>
      <video
        ref={videoRef}
        muted
        playsInline
        style={{
          width: '100%',
          maxWidth: 280,
          borderRadius: config.radii.R400,
          background: '#000',
        }}
      >
        <track kind="captions" />
      </video>
      <Button variant="Secondary" fill="Soft" onClick={onCancel}>
        <Text size="B400">Cancel</Text>
      </Button>
    </Box>
  );
 }
@@ -1,8 +1,8 @@
 import React from 'react';
-import { MsgType } from 'matrix-js-sdk';
+import { MatrixEvent, MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
-import { config } from 'folds';
+import { config, Text } from 'folds';
 import {
  AudioContent,
  DownloadFile,
@@ -11,6 +11,7 @@ import {
  MAudio,
  MBadEncrypted,
  MEmote,
  MessageEditedContent,
  MFile,
  MImage,
  MLocation,
@@ -25,13 +26,37 @@ import {
  VerificationRequestContent,
  VideoContent,
 } from './message';
 import { DiffToken } from '../utils/wordDiff';
 import { EditDiffContext } from './message/content/EditDiffContext';
 import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
 import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
-import { IImageContent } from '../../types/matrix/common';
+import { IAudioContent, IFileContent, IImageContent } from '../../types/matrix/common';
 // Audio is frequently sent as m.file (bridges/other clients, or when the browser
 // reported a non-audio/* mime on upload). Detect that so we can play it inline
 // like m.audio instead of showing only a download button.
 const AUDIO_EXT_MIME: Record<string, string> = {
  mp3: 'audio/mpeg',
  m4a: 'audio/mp4',
  aac: 'audio/aac',
  oga: 'audio/ogg',
  ogg: 'audio/ogg',
  opus: 'audio/ogg',
  wav: 'audio/wav',
  flac: 'audio/flac',
  weba: 'audio/webm',
 };
 const resolveInlineAudioMime = (content: IFileContent): string | undefined => {
  const mime = content.info?.mimetype;
  if (typeof mime === 'string' && mime.startsWith('audio')) return mime;
  const name = content.filename ?? content.body ?? '';
  const ext = name.split('.').pop()?.toLowerCase();
  return ext ? AUDIO_EXT_MIME[ext] : undefined;
 };
 type RenderMessageContentProps = {
  displayName: string;
@@ -47,8 +72,21 @@ type RenderMessageContentProps = {
  linkifyOpts: Opts;
  outlineAttachment?: boolean;
  eventId?: string;
  /** [Gitea #219] Open the room's shared media lightbox at this event. */
  onOpenImageViewer?: () => void;
  /** [Gitea #159] The event, for the undecryptable placeholder's reason + retry. */
  mEvent?: MatrixEvent;
  /** [Gitea #144] Word diff of the last edit, shown on "(edited)" hover. */
  editDiff?: DiffToken[];
 };
-export function RenderMessageContent({
+export function RenderMessageContent({ editDiff, ...props }: RenderMessageContentProps) {
  return (
    <EditDiffContext.Provider value={editDiff}>
      <RenderMessageContentBody {...props} />
    </EditDiffContext.Provider>
  );
 }
 function RenderMessageContentBody({
  displayName,
  msgType,
  ts,
@@ -62,9 +100,14 @@ export function RenderMessageContent({
  linkifyOpts,
  outlineAttachment,
  eventId,
-}: RenderMessageContentProps) {
+  onOpenImageViewer,
  mEvent,
 }: Omit<RenderMessageContentProps, 'editDiff'>) {
  const renderUrlsPreview = (urls: string[]) => {
-    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
+    // Cap previews per message so a link-dump doesn't spawn dozens of preview
    // fetches + iframes at once. De-dupe first: a message linking the same URL
    // twice would otherwise render sibling cards with identical React keys.
    const filteredUrls = [...new Set(urls.filter((url) => !testMatrixTo(url)))].slice(0, 6);
    if (filteredUrls.length === 0) return undefined;
    return (
      <UrlPreviewHolder>
@@ -95,6 +138,15 @@ export function RenderMessageContent({
        />
      );
    }
    // No caption, but the media was edited (e.g. a caption was removed): keep the
    // "(edited)" affordance so Edit History stays reachable.
    if (edited) {
      return (
        <Text style={{ marginTop: config.space.S200 }} size="T200">
          <MessageEditedContent onEditHistoryClick={onEditHistoryClick} />
        </Text>
      );
    }
    return null;
  };
@@ -206,6 +258,7 @@ export function RenderMessageContent({
              autoPlay={mediaAutoLoad}
              renderImage={(p) => <Image {...p} loading="lazy" />}
              renderViewer={(p) => <ImageViewer {...p} />}
              onOpenViewer={onOpenImageViewer}
            />
          )}
          outlined={outlineAttachment}
@@ -276,6 +329,29 @@ export function RenderMessageContent({
  }
  if (msgType === MsgType.File) {
    // If an m.file is actually audio, play it inline (like m.audio) instead of
    // only offering a download. MAudio falls back to renderFile if playback fails.
    const audioMime = resolveInlineAudioMime(getContent<IFileContent>());
    if (audioMime) {
      const fileContent = getContent<IFileContent>();
      const audioContent = {
        ...fileContent,
        info: { ...(fileContent.info ?? {}), mimetype: audioMime },
      } as unknown as IAudioContent;
      return (
        <>
          <MAudio
            content={audioContent}
            renderAsFile={renderFile}
            renderAudioContent={(props) => (
              <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
            )}
            outlined={outlineAttachment}
          />
          {renderCaption()}
        </>
      );
    }
    return renderFile();
  }
@@ -284,7 +360,7 @@ export function RenderMessageContent({
  }
  if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
+    return <MBadEncrypted mEvent={mEvent} />;
  }
  if (msgType === 'm.key.verification.request') {
@@ -6,24 +6,42 @@ import { useMatrixClient } from '../hooks/useMatrixClient';
 import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
 import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
-export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
+// MSC3266 returns canonical_alias at runtime, but the SDK's RoomSummary type
 // Omit<>s it — add it back so callers can use it.
 export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>> & {
  canonical_alias?: string;
 };
 export type RoomSummaryState = { loading: boolean; error: unknown };
 type RoomSummaryLoaderProps = {
  roomIdOrAlias: string;
-  children: (roomSummary?: IRoomSummary) => ReactNode;
+  /**
   * Resident servers to route the summary request through. REQUIRED for a room
   * the local homeserver isn't already in (the exact case a preview exists for) —
   * without it the summary comes back sparse or 404s.
   */
  via?: string[];
  children: (roomSummary: IRoomSummary | undefined, state: RoomSummaryState) => ReactNode;
 };
-export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
+export function RoomSummaryLoader({ roomIdOrAlias, via, children }: RoomSummaryLoaderProps) {
  const mx = useMatrixClient();
-  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
+  const fetchSummary = useCallback(
    () => mx.getRoomSummary(roomIdOrAlias, via),
    [mx, roomIdOrAlias, via],
  );
-  const { data } = useQuery({
+  const { data, isLoading, error } = useQuery({
-    queryKey: [roomIdOrAlias, `summary`],
+    // `via` is part of the key so a no-via failure isn't reused once we have servers.
    queryKey: [roomIdOrAlias, 'summary', via ?? []],
    queryFn: fetchSummary,
    retry: 1,
    staleTime: 5 * 60 * 1000,
  });
-  return children(data);
+  return children(data, { loading: isLoading, error });
 }
 export function LocalRoomSummaryLoader({
@@ -0,0 +1,29 @@
 import { useTauriCallPower } from '../hooks/useTauriCallPower';
 import { useTauriJumpList } from '../hooks/useTauriJumpList';
 import { useTauriThumbbar } from '../hooks/useTauriThumbbar';
 import { useTauriTaskbarProgress } from '../hooks/useTauriTaskbarProgress';
 import { useTauriSmtc } from '../hooks/useTauriSmtc';
 import { useTauriNetwork } from '../hooks/useTauriNetwork';
 import { useTauriToastActions } from '../hooks/useTauriToastActions';
 import { useTauriFocusAssist } from '../hooks/useTauriFocusAssist';
 import { useTauriDnd } from '../hooks/useTauriDnd';
 /**
 * Mounts the client-scoped native desktop feature hooks (call/room aware). Each
 * `useTauri*` hook no-ops in the browser (guards on `isTauri`), so this is safe
 * to render unconditionally. Rendered once by `ClientNonUIFeatures`. App-level
 * desktop features (window chrome) live in `App.tsx` instead, so they work
 * before login.
 */
 export function TauriDesktopFeatures(): null {
  useTauriCallPower(); // P5-46 no-sleep during calls
  useTauriJumpList(); // P5-36 Windows jump list of recent rooms
  useTauriThumbbar(); // P5-44 taskbar thumbnail toolbar (mute/deafen/end)
  useTauriTaskbarProgress(); // cinny-desktop #10 upload progress on the taskbar button
  useTauriSmtc(); // P5-43 system media transport controls
  useTauriNetwork(); // P5-49 network-change awareness → sync retry
  useTauriToastActions(); // P5-41/35 rich toast click → open room, quick reply → send
  useTauriFocusAssist(); // P5-56 Windows Focus Assist → DND suppression atom
  useTauriDnd(); // P6-1 tray "Do Not Disturb" → notification suppression atom
  return null;
 }
@@ -0,0 +1,127 @@
 import { Box, config, Icon, Icons, IconSrc, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 import { ThreadNotificationMode } from '../utils/threadNotifications';
 import { useSetThreadNotificationMode } from '../hooks/useThreadNotifications';
 import { AsyncStatus } from '../hooks/useAsyncCallback';
 export const getThreadNotificationModeIcon = (mode?: ThreadNotificationMode): IconSrc => {
  if (mode === ThreadNotificationMode.Mute) return Icons.BellMute;
  if (mode === ThreadNotificationMode.MentionsOnly) return Icons.BellPing;
  if (mode === ThreadNotificationMode.All) return Icons.BellRing;
  return Icons.Bell;
 };
 const useThreadNotificationModes = (): ThreadNotificationMode[] =>
  useMemo(
    () => [
      ThreadNotificationMode.Default,
      ThreadNotificationMode.All,
      ThreadNotificationMode.MentionsOnly,
      ThreadNotificationMode.Mute,
    ],
    [],
  );
 const useThreadNotificationModeStr = (): Record<ThreadNotificationMode, string> =>
  useMemo(
    () => ({
      [ThreadNotificationMode.Default]: 'Default (participating)',
      [ThreadNotificationMode.All]: 'All replies',
      [ThreadNotificationMode.MentionsOnly]: 'Mentions only',
      [ThreadNotificationMode.Mute]: 'Mute',
    }),
    [],
  );
 type ThreadNotificationModeSwitcherProps = {
  roomId: string;
  threadId: string;
  value?: ThreadNotificationMode;
  children: (
    handleOpen: MouseEventHandler<HTMLButtonElement>,
    opened: boolean,
    changing: boolean,
  ) => ReactNode;
 };
 export function ThreadNotificationModeSwitcher({
  roomId,
  threadId,
  value = ThreadNotificationMode.Default,
  children,
 }: ThreadNotificationModeSwitcherProps) {
  const modes = useThreadNotificationModes();
  const modeToStr = useThreadNotificationModeStr();
  const { modeState, setMode } = useSetThreadNotificationMode(roomId, threadId);
  const changing = modeState.status === AsyncStatus.Loading;
  const [menuCords, setMenuCords] = useState<RectCords>();
  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    setMenuCords(evt.currentTarget.getBoundingClientRect());
  };
  const handleClose = () => {
    setMenuCords(undefined);
  };
  const handleSelect = (mode: ThreadNotificationMode) => {
    if (changing) return;
    setMode(mode);
    handleClose();
  };
  return (
    <PopOut
      anchor={menuCords}
      offset={5}
      position="Bottom"
      align="End"
      content={
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: handleClose,
            clickOutsideDeactivates: true,
            isKeyForward: (evt: KeyboardEvent) =>
              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
            escapeDeactivates: stopPropagation,
          }}
        >
          <Menu>
            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
              {modes.map((mode) => (
                <MenuItem
                  key={mode}
                  size="300"
                  variant="Surface"
                  aria-pressed={mode === value}
                  radii="300"
                  disabled={changing}
                  onClick={() => handleSelect(mode)}
                  before={
                    <Icon
                      size="100"
                      src={getThreadNotificationModeIcon(mode)}
                      filled={mode === value}
                    />
                  }
                >
                  <Text size="T300">
                    {mode === value ? <b>{modeToStr[mode]}</b> : modeToStr[mode]}
                  </Text>
                </MenuItem>
              ))}
            </Box>
          </Menu>
        </FocusTrap>
      }
    >
      {children(handleOpenMenu, !!menuCords, changing)}
    </PopOut>
  );
 }
@@ -1,5 +1,19 @@
 import React from 'react';
-import { Menu, PopOut, toRem } from 'folds';
+import {
  Box,
  Header,
  Icon,
  IconButton,
  Icons,
  Menu,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  PopOut,
  config,
  toRem,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
 import { UserRoomProfile } from './user-profile';
@@ -8,6 +22,20 @@ import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
 import { stopPropagation } from '../utils/keyboard';
 import { SpaceProvider } from '../hooks/useSpace';
 import { RoomProvider } from '../hooks/useRoom';
 import { ScreenSize, useScreenSize } from '../hooks/useScreenSize';
 // Matches useModalStyle's mobile branch: fill the phone screen with internal
 // scroll so tall profiles (moderation actions, device list, notes) are fully
 // reachable — the anchored 340px popout below can't scroll and clipped them.
 const MOBILE_FULLSCREEN = {
  width: '100%',
  height: '100%',
  maxWidth: '100%',
  maxHeight: '100%',
  borderRadius: 0,
  display: 'flex',
  flexDirection: 'column',
 } as const;
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
  const { roomId, spaceId, userId, cords, position } = state;
@@ -15,32 +43,69 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
  const getRoom = useGetRoom(allJoinedRooms);
  const room = getRoom(roomId);
  const space = spaceId ? getRoom(spaceId) : undefined;
  const screenSize = useScreenSize();
  const close = useCloseUserRoomProfile();
  if (!room) return null;
  const profile = (
    <SpaceProvider value={space ?? null}>
      <RoomProvider value={room}>
        <UserRoomProfile userId={userId} />
      </RoomProvider>
    </SpaceProvider>
  );
  const focusTrapOptions = {
    initialFocus: false,
    onDeactivate: close,
    clickOutsideDeactivates: true,
    escapeDeactivates: stopPropagation,
  };
  // On phones, render as a full-screen scrollable modal instead of an anchored,
  // fixed-width, unscrollable popout.
  if (screenSize === ScreenSize.Mobile) {
    return (
      <Overlay open backdrop={<OverlayBackdrop />}>
        <OverlayCenter>
          <FocusTrap focusTrapOptions={focusTrapOptions}>
            <Modal
              id="user-profile-dialog"
              role="dialog"
              aria-modal="true"
              aria-label="User profile"
              tabIndex={-1}
              size="500"
              style={MOBILE_FULLSCREEN}
            >
              {/* Full-screen covers the backdrop (no tap-to-dismiss) and the
                  profile has no self-close, so provide an explicit close. */}
              <Header size="600" style={{ flexShrink: 0, paddingRight: config.space.S200 }}>
                <Box grow="Yes" />
                <IconButton size="300" radii="300" onClick={close} aria-label="Close">
                  <Icon src={Icons.Cross} />
                </IconButton>
              </Header>
              <Box grow="Yes" style={{ overflow: 'hidden auto' }}>
                {profile}
              </Box>
            </Modal>
          </FocusTrap>
        </OverlayCenter>
      </Overlay>
    );
  }
  return (
    <PopOut
      anchor={cords}
      position={position ?? 'Top'}
      align="Start"
      content={
-        <FocusTrap
+        <FocusTrap focusTrapOptions={focusTrapOptions}>
-          focusTrapOptions={{
+          <Menu style={{ width: toRem(340) }}>{profile}</Menu>
            initialFocus: false,
            onDeactivate: close,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Menu style={{ width: toRem(340) }}>
            <SpaceProvider value={space ?? null}>
              <RoomProvider value={room}>
                <UserRoomProfile userId={userId} />
              </RoomProvider>
            </SpaceProvider>
          </Menu>
        </FocusTrap>
      }
    />
@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { MobileTouchTarget } from '../styles/mobile.css';
-type RecorderState = 'idle' | 'recording' | 'preview';
+type RecorderState = 'idle' | 'recording' | 'paused' | 'preview';
 interface VoiceRecorderProps {
  onSend: (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => void;
@@ -41,11 +42,15 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const streamRef = useRef<MediaStream | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const audioCtxRef = useRef<AudioContext | null>(null);
  const rawSamplesRef = useRef<number[]>([]);
-  const startTimeRef = useRef<number>(0);
+  // Active-recording duration excluding paused time: accumulated ms from prior
  // segments + (now - segmentStart) for the current segment.
  const accumulatedMsRef = useRef<number>(0);
  const segmentStartRef = useRef<number>(0);
  const animFrameRef = useRef<number>(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -54,18 +59,67 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  const previewAudioRef = useRef<HTMLAudioElement | null>(null);
  const [previewPlaying, setPreviewPlaying] = useState(false);
-  const stopAll = useCallback(() => {
+  // Start the waveform (rAF) + duration (interval) meters against the live
  // analyser. Reused by startRecording and resumeRecording.
  const startMeters = useCallback(() => {
    const analyser = analyserRef.current;
    if (!analyser) return;
    // Guard against ever running two loops.
    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
    if (timerRef.current) clearInterval(timerRef.current);
    const buf = new Uint8Array(analyser.frequencyBinCount);
    const tick = () => {
      if (!analyserRef.current) return;
      analyserRef.current.getByteFrequencyData(buf);
      const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
      rawSamplesRef.current.push(avg);
      setWaveformBars((prev) => [...prev.slice(1), Math.round((avg / 255) * 100)]);
      animFrameRef.current = requestAnimationFrame(tick);
    };
    animFrameRef.current = requestAnimationFrame(tick);
    timerRef.current = setInterval(() => {
      setDurationMs(accumulatedMsRef.current + (Date.now() - segmentStartRef.current));
    }, 100);
  }, []);
  // Stop the meters (rAF + interval) without tearing down the audio graph, so a
  // paused recording can resume.
  const stopMeters = useCallback(() => {
    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  }, []);
  // Release the microphone. The mic tracks are independent of the MediaRecorder
  // and the AudioContext — neither mr.stop() nor audioCtx.close() releases them —
  // so they must be stopped explicitly (else the OS mic indicator stays on).
  const stopStream = useCallback(() => {
    streamRef.current?.getTracks().forEach((t) => t.stop());
    streamRef.current = null;
  }, []);
  const stopAll = useCallback(() => {
    stopMeters();
    if (audioCtxRef.current) {
      audioCtxRef.current.close();
      audioCtxRef.current = null;
    }
    analyserRef.current = null;
-  }, []);
+  }, [stopMeters]);
  useEffect(
    () => () => {
      // Unmounting mid-recording/pause must release the mic — stopAll() only
      // closes the AudioContext and cancels the meters, not the mic tracks.
      const mr = mediaRecorderRef.current;
      if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
        mr.ondataavailable = null;
        mr.onstop = null;
        mr.stop();
      }
      stopStream();
      stopAll();
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    },
@@ -83,9 +137,11 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
      const mr = new MediaRecorder(stream, { mimeType });
      mediaRecorderRef.current = mr;
      streamRef.current = stream;
      chunksRef.current = [];
      rawSamplesRef.current = [];
-      startTimeRef.current = Date.now();
+      accumulatedMsRef.current = 0;
      segmentStartRef.current = Date.now();
      const audioCtx = new AudioContext();
      audioCtxRef.current = audioCtx;
@@ -95,24 +151,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
      source.connect(analyser);
      analyserRef.current = analyser;
-      const buf = new Uint8Array(analyser.frequencyBinCount);
+      startMeters();
      const tick = () => {
        if (!analyserRef.current) return;
        analyserRef.current.getByteFrequencyData(buf);
        const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
        rawSamplesRef.current.push(avg);
        setWaveformBars((prev) => {
          const next = [...prev.slice(1), Math.round((avg / 255) * 100)];
          return next;
        });
        animFrameRef.current = requestAnimationFrame(tick);
      };
      animFrameRef.current = requestAnimationFrame(tick);
      timerRef.current = setInterval(() => {
        setDurationMs(Date.now() - startTimeRef.current);
      }, 100);
      mr.ondataavailable = (e) => {
        if (e.data.size > 0) chunksRef.current.push(e.data);
@@ -120,8 +159,8 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
      mr.onstop = () => {
        stream.getTracks().forEach((t) => t.stop());
        streamRef.current = null;
        const blob = new Blob(chunksRef.current, { type: mimeType });
        previewDurationRef.current = Date.now() - startTimeRef.current;
        setPreviewBlob(blob);
        setPreviewUrl((prev) => {
          if (prev) URL.revokeObjectURL(prev);
@@ -135,33 +174,59 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
    } catch {
      onError?.('Microphone access denied');
    }
-  }, [onError]);
+  }, [onError, startMeters]);
  const pauseRecording = useCallback(() => {
    const mr = mediaRecorderRef.current;
    if (mr?.state !== 'recording') return;
    accumulatedMsRef.current += Date.now() - segmentStartRef.current;
    setDurationMs(accumulatedMsRef.current);
    stopMeters();
    mr.pause();
    setState('paused');
  }, [stopMeters]);
  const resumeRecording = useCallback(() => {
    const mr = mediaRecorderRef.current;
    if (mr?.state !== 'paused') return;
    segmentStartRef.current = Date.now();
    mr.resume();
    startMeters();
    setState('recording');
  }, [startMeters]);
  const stopRecording = useCallback(() => {
    const mr = mediaRecorderRef.current;
    const activeMs = mr?.state === 'recording' ? Date.now() - segmentStartRef.current : 0;
    previewDurationRef.current = accumulatedMsRef.current + activeMs;
    stopAll();
-    if (mediaRecorderRef.current?.state === 'recording') {
+    if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
-      mediaRecorderRef.current.stop();
+      mr.stop();
    }
  }, [stopAll]);
  const cancelRecording = useCallback(() => {
    stopAll();
    const mr = mediaRecorderRef.current;
-    if (mr?.state === 'recording') {
+    if (mr && (mr.state === 'recording' || mr.state === 'paused')) {
      mr.ondataavailable = null;
      // onstop (which would release the mic) is cleared, so release it here.
      mr.onstop = null;
      mr.stop();
    }
    stopStream();
    setPreviewBlob(null);
    setPreviewUrl((prev) => {
      if (prev) URL.revokeObjectURL(prev);
      return null;
    });
    rawSamplesRef.current = [];
    accumulatedMsRef.current = 0;
    segmentStartRef.current = 0;
    setWaveformBars(Array(WAVEFORM_BARS).fill(0));
    setDurationMs(0);
    setState('idle');
-  }, [stopAll]);
+  }, [stopAll, stopStream]);
  const sendVoice = useCallback(() => {
    if (!previewBlob) return;
@@ -175,6 +240,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  if (state === 'idle') {
    return (
      <IconButton
        className={MobileTouchTarget}
        onClick={startRecording}
        aria-label="Record voice message"
        variant="SurfaceVariant"
@@ -182,21 +248,24 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
        radii="300"
        title="Record voice message"
      >
-        <Icon src={Icons.Mic} size="100" />
+        <Icon src={Icons.Mic} />
      </IconButton>
    );
  }
-  if (state === 'recording') {
+  if (state === 'recording' || state === 'paused') {
    const paused = state === 'paused';
    return (
      <Box
-        data-voice-recorder="recording"
+        data-voice-recorder={paused ? 'paused' : 'recording'}
        alignItems="Center"
        gap="200"
        style={{
          background: color.SurfaceVariant.Container,
          borderRadius: config.radii.R300,
          padding: `${toRem(4)} ${toRem(8)}`,
          maxWidth: '100%',
          minWidth: 0,
        }}
      >
        <Box
@@ -207,11 +276,15 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
            borderRadius: '50%',
            background: lotusTerminal ? 'var(--lt-accent-orange)' : color.Critical.Main,
            flexShrink: 0,
-            animation: 'pttLivePulse 900ms ease-in-out infinite',
+            // Pulse only while actively recording; hold steady (dimmed) when paused.
            animation: paused ? 'none' : 'pttLivePulse 900ms ease-in-out infinite',
            opacity: paused ? 0.5 : 1,
          }}
        />
        <Text
          size="T200"
          role="timer"
          aria-label={`${paused ? 'Paused' : 'Recording'}, duration ${formatDuration(durationMs)}`}
          style={{
            minWidth: toRem(32),
            fontVariantNumeric: 'tabular-nums',
@@ -230,7 +303,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
          data-voice-waveform
          alignItems="Center"
          gap="100"
-          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 0 }}
+          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 1, minWidth: 0 }}
        >
          {waveformBars.map((h, i) => (
            <div
@@ -245,16 +318,29 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
            />
          ))}
        </Box>
        <IconButton
          onClick={paused ? resumeRecording : pauseRecording}
          aria-label={paused ? 'Resume recording' : 'Pause recording'}
          variant="SurfaceVariant"
          fill="Soft"
          size="300"
          radii="300"
          title={paused ? 'Resume' : 'Pause'}
          style={{ flexShrink: 0 }}
        >
          <Icon src={paused ? Icons.Play : Icons.Pause} size="100" />
        </IconButton>
        <IconButton
          onClick={stopRecording}
-          aria-label="Stop recording"
+          aria-label="Finish recording"
          variant="Primary"
          fill="Soft"
          size="300"
          radii="300"
-          title="Stop recording"
+          title="Finish"
          style={{ flexShrink: 0 }}
        >
-          <Icon src={Icons.Pause} size="100" />
+          <Icon src={Icons.Check} size="100" />
        </IconButton>
        <IconButton
          onClick={cancelRecording}
@@ -263,6 +349,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
          size="300"
          radii="300"
          title="Cancel"
          style={{ flexShrink: 0 }}
        >
          <Icon src={Icons.Cross} size="100" />
        </IconButton>
@@ -282,7 +369,12 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
    >
      {previewUrl && (
        <>
-          <audio ref={previewAudioRef} src={previewUrl} onEnded={() => setPreviewPlaying(false)} />
+          <audio
            ref={previewAudioRef}
            src={previewUrl}
            onEnded={() => setPreviewPlaying(false)}
            aria-hidden="true"
          />
          <IconButton
            onClick={() => {
              const audio = previewAudioRef.current;
@@ -291,7 +383,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                audio.pause();
                setPreviewPlaying(false);
              } else {
-                audio.play();
+                audio.play().catch(() => setPreviewPlaying(false));
                setPreviewPlaying(true);
              }
            }}
@@ -0,0 +1,100 @@
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Box, Overlay, OverlayBackdrop, config, color, toRem } from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 type ActionSheetProps = {
  open: boolean;
  onClose: () => void;
  'aria-label'?: string;
  children: ReactNode;
 };
 /**
 * [Gitea #166] A bottom sheet for touch screens: slides up from the bottom,
 * swipe-down or backdrop tap dismisses. Content is whatever the caller
 * renders (quick reactions + a folds Menu, for message actions).
 */
 export function ActionSheet({
  open,
  onClose,
  children,
  'aria-label': ariaLabel,
 }: ActionSheetProps) {
  const [dragY, setDragY] = useState(0);
  const startY = useRef<number | null>(null);
  // The long-press that opened us ends with a touchend/click that lands
  // "outside" the sheet — ignore outside clicks for the first moments.
  const openedAt = useRef(Date.now());
  const onTouchStart = useCallback((evt: React.TouchEvent) => {
    startY.current = evt.touches[0]?.clientY ?? null;
  }, []);
  const onTouchMove = useCallback((evt: React.TouchEvent) => {
    if (startY.current === null) return;
    const dy = (evt.touches[0]?.clientY ?? startY.current) - startY.current;
    setDragY(Math.max(0, dy));
  }, []);
  const onTouchEnd = useCallback(() => {
    const dismiss = dragY > 80;
    startY.current = null;
    setDragY(0);
    if (dismiss) onClose();
  }, [dragY, onClose]);
  if (!open) return null;
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <FocusTrap
        focusTrapOptions={{
          initialFocus: false,
          onDeactivate: onClose,
          clickOutsideDeactivates: () => Date.now() - openedAt.current > 600,
          escapeDeactivates: stopPropagation,
        }}
      >
        <Box
          role="dialog"
          aria-modal
          aria-label={ariaLabel}
          direction="Column"
          style={{
            position: 'fixed',
            left: 0,
            right: 0,
            bottom: 0,
            maxHeight: '75vh',
            background: color.Surface.Container,
            color: color.Surface.OnContainer,
            borderTopLeftRadius: toRem(16),
            borderTopRightRadius: toRem(16),
            boxShadow: '0 -8px 32px rgba(0,0,0,0.35)',
            paddingBottom: 'env(safe-area-inset-bottom)',
            transform: dragY ? `translateY(${dragY}px)` : undefined,
            transition: dragY ? undefined : 'transform 120ms ease-out',
            overflow: 'hidden',
          }}
          onTouchStart={onTouchStart}
          onTouchMove={onTouchMove}
          onTouchEnd={onTouchEnd}
          onTouchCancel={onTouchEnd}
        >
          <Box justifyContent="Center" shrink="No" style={{ padding: config.space.S200 }}>
            <div
              aria-hidden
              style={{
                width: toRem(36),
                height: toRem(4),
                borderRadius: toRem(2),
                background: color.Surface.ContainerLine,
              }}
            />
          </Box>
          <Box direction="Column" style={{ overflowY: 'auto' }}>
            {children}
          </Box>
        </Box>
      </FocusTrap>
    </Overlay>
  );
 }
@@ -0,0 +1 @@
 export * from './ActionSheet';
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useAvatarDecoration } from '../../hooks/useAvatarDecoration';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { decorationUrl } from '../../features/lotus/avatarDecorations';
 const DEFAULT_INSET = 8;
@@ -16,8 +17,14 @@ export function AvatarDecoration({
  inset = DEFAULT_INSET,
 }: AvatarDecorationProps) {
  const slug = useAvatarDecoration(userId);
  const reducedMotion = useReducedMotion();
-  if (!slug) {
+  // Decorations are animated APNGs with no static asset to freeze to, so honor
  // prefers-reduced-motion by not rendering the animation at all (consistent
  // with the rest of the theming stack — chat backgrounds / seasonal overlays —
  // which all suppress motion under this preference; also avoids dozens of live
  // APNGs animating in scrolling mobile lists).
  if (!slug || reducedMotion) {
    return <>{children}</>;
  }
@@ -31,6 +38,10 @@ export function AvatarDecoration({
    >
      {children}
      <img
        // Force a fresh element per slug so a recycled node whose previous slug
        // 404'd (and was hidden in onError) can't leak `display:none` onto a
        // valid decoration.
        key={slug}
        src={decorationUrl(slug)}
        style={{
          position: 'absolute',
@@ -48,6 +59,9 @@ export function AvatarDecoration({
        aria-hidden="true"
        loading="lazy"
        decoding="async"
        onLoad={(e) => {
          (e.currentTarget as HTMLImageElement).style.removeProperty('display');
        }}
        onError={(e) => {
          (e.currentTarget as HTMLImageElement).style.display = 'none';
        }}
@@ -78,11 +78,14 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
  return (
    <Box shrink="No" direction="Column" gap="100">
-      <Text size="L400">Address (Optional)</Text>
+      <Text as="label" htmlFor="create-room-alias" size="L400">
        Address (Optional)
      </Text>
      <Text size="T200" priority="300">
        Pick an unique address to make it discoverable.
      </Text>
      <Input
        id="create-room-alias"
        ref={aliasInputRef}
        onChange={handleAliasChange}
        before={
@@ -8,6 +8,7 @@ import {
 } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { sendStateEvent } from '../../utils/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { getMxIdServer } from '../../utils/matrix';
 import { CreateRoomAccess } from './types';
@@ -150,9 +151,10 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
  const result = await mx.createRoom(options);
  if (data.parent) {
-    await mx.sendStateEvent(
+    await sendStateEvent(
      mx,
      data.parent.roomId,
-      StateEvent.SpaceChild as any,
+      StateEvent.SpaceChild,
      {
        auto_join: false,
        suggested: false,
@@ -19,6 +19,15 @@ export const EditorOptions = style([
  },
 ]);
 // The composer's before | editable | after row. It must NOT wrap: folds'
 // Scroll (the editable's wrapper) is `width: 100%`, so a wrapping row always
 // breaks into three stacked lines (before / editable / after) — the "wonky"
 // phone composer. Narrow viewports keep one row by collapsing the secondary
 // buttons behind the "+" overflow instead (RoomInput `compact`).
 export const EditorInputRow = style({
  minWidth: 0,
 });
 export const EditorTextareaScroll = style({});
 export const EditorTextarea = style([
@@ -27,6 +36,20 @@ export const EditorTextarea = style([
    flexGrow: 1,
    height: '100%',
    padding: `${toRem(13)} ${toRem(1)}`,
    '@media': {
      // Phone-width composer rows carry 44px touch targets (MobileTouchTarget),
      // so the row is 60px instead of 48px; pad the text to keep it level with
      // the buttons instead of hugging the top of the row. Only when the row
      // actually has before/after buttons (not the edit-message editor).
      '(max-width: 750px)': {
        selectors: {
          [`${EditorTextareaScroll}:not(:only-child) &`]: {
            paddingTop: toRem(19),
            paddingBottom: toRem(19),
          },
        },
      },
    },
    selectors: {
      [`${EditorTextareaScroll}:first-child &`]: {
        paddingLeft: toRem(13),
@@ -44,7 +67,9 @@ export const EditorTextarea = style([
 export const EditorPlaceholderContainer = style([
  DefaultReset,
  {
-    opacity: config.opacity.Placeholder,
+    // [Gitea #222] folds' Placeholder opacity (0.5) lands at ~2.3:1 on the
    // composer surface; P300 keeps it visibly secondary at AA contrast.
    opacity: config.opacity.P300,
    pointerEvents: 'none',
    userSelect: 'none',
  },
@@ -56,6 +81,13 @@ export const EditorPlaceholderTextVisual = style([
    display: 'block',
    paddingTop: toRem(13),
    paddingLeft: toRem(1),
    '@media': {
      '(max-width: 750px)': {
        selectors: {
          [`${EditorTextareaScroll}:not(:only-child) &`]: { paddingTop: toRem(19) },
        },
      },
    },
  },
 ]);
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,2 @@`
							`- textbox "Send a message...":`
							`- paragraph: Send a message...`