feat(calls): toast the fork's screenshare reminders (EC #39 )

io.lotus.screenshare_notice → "Screen sharing stopped — the shared window was closed.", "Your screen share is showing nothing — the shared window may be minimised or hidden.", and a sticky "Still sharing?" after 30 min with nobody else in the call (fork ≥ 0.25.0-lotus.12). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
ci: debounce the desktop build trigger to one bump per hour (matrix #9 )
2026-09-20 15:51:59 -04:00 · 2026-09-20 15:39:55 -04:00 · 2026-09-20 15:38:14 -04:00 · 2026-09-20 15:35:54 -04:00 · 2026-09-20 15:32:32 -04:00 · 2026-09-20 15:31:47 -04:00
240 changed files with 10511 additions and 1217 deletions
@@ -132,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"
@@ -238,6 +254,8 @@ jobs:
  #                 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.
@@ -273,8 +291,11 @@ jobs:
            sleep $((attempt * 15))
          done

-      - name: Install Playwright Chromium
-        run: npx playwright install --with-deps chromium
+      # [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
@@ -282,6 +303,21 @@ jobs:
          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:
@@ -289,3 +325,7 @@ jobs:
          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
@@ -349,15 +349,16 @@ so a stock EC config is byte-for-byte upstream behavior.

 **Active (cinny drives them today):**

-| #   | 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. |
-| #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**                                                  |
-| #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                                                                       |
+| #    | 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.                                               |
+| #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**                                                                                                |
+| #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                                                                                                                     |
+| 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                                                       |
 | ----- | -------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
@@ -365,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.
@@ -1179,6 +1182,14 @@ Links you paste, send, edit, or merely _see_ lose ad/analytics identifiers — `

 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.
@@ -79,7 +79,7 @@ Fork = `LotusGuild/element-call` (branch `lotus`, upstream base **v0.25.0** sinc

 **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.3`, 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.3`) → `npm install` → build. Manual fallback: `pnpm run build:embedded && cd embedded/web && npm version <ver> --no-git-tag-version && npm publish`.
+**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.11`, 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.11`) → `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):

@@ -19,6 +19,8 @@ python3 scripts/dev-seed.py 400     # alice + bob, "Busy Room": 400 messages, an
 npm start                           # Vite on :5173
 ```

+**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.
+
 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)
@@ -47,12 +49,17 @@ Everything else in the guide (calls, screen readers, desktop/Tauri, chat backgro

 ## Playwright smoke test (Gitea #90) — `npm run test:e2e`

-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). Two tiers:
+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:

-| 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://` |
+| 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 |
+
+**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.
+
+**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.

 **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):

@@ -196,7 +196,7 @@ The dev server defaults to **port 8080** (`vite.config.js`); if 8080 is already
 ### 🔱 Element Call fork ("Lotus Call") — LIVE

 Voice/video channels embed **Element Call**, which is now our **self-built fork**
-(`@lotusguild/element-call-embedded` `0.25.0-lotus.3`, upstream base v0.25.0, source at
+(`@lotusguild/element-call-embedded` `0.25.0-lotus.11`, 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.
@@ -1,6 +1,10 @@
 # more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
 cinny.domain.tld {
  root * /path/to/cinny/dist
+  # [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

@@ -26,6 +26,13 @@ server {
    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/;

@@ -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
+    - 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
@@ -5,7 +5,7 @@ import { collectConsole } from './helpers';
 // `vite preview` (see playwright.config.ts webServer). No homeserver needed.

 test.describe('boot', () => {
-  test('client boots to the login screen without errors', async ({ page }) => {
+  test('client boots to the login screen without errors @webkit @ios', async ({ page }) => {
    const consoleLog = collectConsole(page);

    await page.goto('/');
@@ -24,7 +24,7 @@ test.describe('boot', () => {
    expect(consoleLog.unexpected(), 'unexpected console/page errors during boot').toEqual([]);
  });

-  test('service worker script is served and registers', async ({ page }) => {
+  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/);
@@ -14,6 +14,15 @@ const BENIGN_CONSOLE_PATTERNS: RegExp[] = [
  // 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,
 ];
@@ -41,8 +50,12 @@ export function collectConsole(page: Page): ConsoleCollector {
  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.map((m) => `pageerror: ${m}`),
+      ...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))),
    ],
  };
@@ -0,0 +1,285 @@
+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('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)}`;
@@ -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" />

@@ -80,7 +80,8 @@
        "workbox-precaching": "7.4.1"
      },
      "devDependencies": {
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.3",
+        "@axe-core/playwright": "4.13.0",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.11",
        "@playwright/test": "1.63.0",
        "@rollup/plugin-inject": "5.0.5",
        "@rollup/plugin-wasm": "6.2.2",
@@ -172,6 +173,19 @@
        "@babel/runtime": "^7.0.0"
      }
    },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.13.0.tgz",
+      "integrity": "sha512-6YLx+kxXu5GJceG4ozFg+33a2EMTdjYwWGloJ3sb9Kta5pp+ZNS53uxGVog5JetIY8s++P5UrtX+cri+u0VAVg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.13.0"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.29.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -2681,9 +2695,9 @@
      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
    },
    "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.3",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.3/element-call-embedded-0.25.0-lotus.3.tgz",
-      "integrity": "sha512-UjOi8DXosVjBeVb5SiPNFApJSI9gggpU67xAUn0EWevD3oj9wQFhtjdMkxGbhnQ7B9r6QEUivDGWsBpsfKe0/w==",
+      "version": "0.25.0-lotus.11",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.11/element-call-embedded-0.25.0-lotus.11.tgz",
+      "integrity": "sha512-wLsVsEBLZ4UjhAdLhhk5BmAap1kZ4x8KKirOm2Ie+DbtM34GCv30oUFmQnUmVdO4by3EQAmNK+v+vYyIwq4DOg==",
      "dev": true
    },
    "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -4847,10 +4861,11 @@
      }
    },
    "node_modules/axe-core": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
-      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.13.0.tgz",
+      "integrity": "sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==",
      "dev": true,
+      "license": "MPL-2.0",
      "engines": {
        "node": ">=4"
      }
@@ -12,13 +12,13 @@
    "build": "vite build",
    "preview": "vite preview",
    "lint": "npm run check:eslint && npm run check:prettier",
-    "check:eslint": "eslint src/* --max-warnings 68",
+    "check:eslint": "eslint src/* --max-warnings 49",
    "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",
+    "test:e2e:install": "playwright install chromium webkit",
    "prepare": "husky",
    "commit": "git-cz",
    "postinstall": "node scripts/patch-folds.mjs",
@@ -107,7 +107,8 @@
    "workbox-precaching": "7.4.1"
  },
  "devDependencies": {
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.3",
+    "@axe-core/playwright": "4.13.0",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.11",
    "@playwright/test": "1.63.0",
    "@rollup/plugin-inject": "5.0.5",
    "@rollup/plugin-wasm": "6.2.2",
@@ -25,7 +25,16 @@ export default defineConfig({
    trace: 'retain-on-failure',
    ...devices['Desktop Chrome'],
  },
-  projects: [{ name: 'chromium', use: { ...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,
@@ -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;
+}
@@ -69,6 +69,22 @@
    }
  ],
  "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",
@@ -4,9 +4,19 @@
 # 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
+#   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.
@@ -23,7 +33,7 @@ install() {
    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
+    "$VENV/bin/pip" install -q "matrix-synapse[url-preview]"
  fi
  if [ ! -f "$CFG" ]; then
    (cd "$DIR" && "$VENV/bin/python" -m synapse.app.homeserver \
@@ -32,7 +42,7 @@ install() {
    python3 - "$CFG" <<'PY'
 import sys, re
 p = sys.argv[1]; s = open(p).read()
-s = s.replace("      - client\n", "      - client\n      - media\n", 1)
+s = s.replace("      - client\n", "      - client\n      - media\n      - federation\n", 1)
 s += """
 enable_registration: true
 enable_registration_without_verification: true
@@ -43,6 +53,20 @@ rc_joins: { local: { per_second: 1000, burst_count: 10000 }, remote: { per_secon
 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
@@ -65,10 +89,50 @@ start() {

 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 ;;
@@ -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()
@@ -1,11 +1,15 @@
 #!/usr/bin/env python3
-"""Seed the local dev homeserver (scripts/dev-homeserver.sh) with two users
-and a busy unencrypted room: alice + bob, "Busy Room", N messages, one image
-every 10th message. Idempotent for the users; every run creates a new room.
+"""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, struct, sys, time, urllib.error, urllib.parse, urllib.request, zlib
+import json, os, sqlite3, struct, sys, time, urllib.error, urllib.parse, urllib.request, zlib

 HS = "http://127.0.0.1:8008"
 PASSWORD = "password123"
@@ -56,7 +60,22 @@ def main():
            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)
-    print(json.dumps({"room": room, "alice": alice["user_id"], "bob": bob["user_id"], "count": n}))
+    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__":
@@ -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()
@@ -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,27 @@ 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 { 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, 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';
@@ -112,6 +122,10 @@ 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');
@@ -217,6 +231,11 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                </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"
@@ -233,9 +252,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'}
@@ -277,6 +312,8 @@ 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');
@@ -375,7 +412,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"
@@ -384,11 +421,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'}
@@ -421,6 +474,7 @@ 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');

@@ -559,6 +613,50 @@ 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
@@ -578,16 +676,26 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
  );

  const handleAnswer = useCallback(
-    (room: Room, video: boolean) => {
+    async (room: Room, video: boolean) => {
+      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 });
-      setCallInfo(undefined);
      navigateRoom(room.roomId);
    },
-    [startCall, navigateRoom, microphone, sound, cameraOnJoin],
+    [startCall, navigateRoom, microphone, sound, cameraOnJoin, callEmbed, mx, setCallEmbed],
  );

  if (!callInfo) return null;
@@ -619,6 +727,16 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
  );
 }

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

@@ -628,8 +746,13 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
  // the mobile in-call chat. Both are gated on `joined`.
  useCallHotkeys(embed, joined);
  useAfkAutoMute(joined ? embed : undefined);
-  useCallMemberSoundSync(embed);
  useCallJoinLeaveSounds(embed);
+  useCallPolicyRevokedToast(embed, joined);
+  useCallEndedToast(embed);
+  useScreenshareNotices(embed);
+  usePttHaptics();
+  useCallAnnouncements(embed, joined);
+  useMutedTalkWarning(embed, joined);
  useCallThemeSync(embed);
  useCallQuality(embed);
  useCallHangupEvent(
@@ -724,6 +847,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>;
@@ -1173,8 +1302,10 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  return (
    <CallEmbedContextProvider value={callEmbed}>
      {callEmbed && <CallUtils embed={callEmbed} joined={joined} />}
+      <CallAnnouncementRegion />
      <CallEmbedRefContextProvider value={callEmbedRef}>
        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
+        <CallRejoin callEmbed={callEmbed} joined={joined} />
        {children}
      </CallEmbedRefContextProvider>
      <div
@@ -1186,7 +1317,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}
      >
@@ -19,7 +19,7 @@ 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';
@@ -232,9 +232,8 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
  const [show, setShow] = useState(false);
  const saveFile = useSaveFile();

-  const handleCopy = () => {
-    copyToClipboard(recoveryKey);
-  };
+  // [Gitea #156] The key leaves the clipboard again after 60 s, visibly.
+  const { copy: handleCopy, secondsLeft } = useSensitiveCopy(recoveryKey);

  const handleDownload = () => {
    const blob = new Blob([recoveryKey], {
@@ -272,8 +271,10 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
        </Box>
      </Box>
      <Box direction="Column" gap="200">
-        <Button onClick={handleCopy}>
-          <Text size="B400">Copy</Text>
+        <Button onClick={handleCopy} aria-live="polite">
+          <Text size="B400">
+            {secondsLeft !== null ? `Copied · clears in ${secondsLeft} s` : 'Copy'}
+          </Text>
        </Button>
        <Button onClick={handleDownload} fill="Soft">
          <Text size="B400">Download</Text>
@@ -4,6 +4,8 @@ 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';
@@ -120,13 +122,31 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne

  const sendGif = useCallback(
    (gif: RecentGif) => {
-      setRecents((prev) => addRecentGif(prev, gif));
+      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();
@@ -135,14 +155,15 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
        gif.images.fixed_width_small_still?.url ??
        gif.images.downsized_still?.url ??
        gif.images.original_still?.url;
-      sendGif({
+      pick({
        url: r.url,
        width: Number(r.width) || 200,
        height: Number(r.height) || 200,
        previewUrl,
+        title: gif.title,
      });
    },
-    [sendGif],
+    [pick],
  );

  const showRecents = recents.length > 0 && !(term ?? '').trim();
@@ -150,7 +171,6 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
  // The container is min(312px, 100vw-16); feed the Grid the live pixel width
  // (minus the inner 8px padding on each side) so it doesn't overflow a phone
  // narrower than 312px with a fixed 296px grid.
-  const containerRef = useRef<HTMLDivElement>(null);
  const [gridWidth, setGridWidth] = useState(PICKER_WIDTH - 16);
  useElementSizeObserver(
    useCallback(() => containerRef.current, []),
@@ -180,11 +200,22 @@ 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={sendGif} />
+          <RecentGifs recents={recents} lotusTerminal={lotusTerminal} onPick={pick} />
        )}
        <Grid
          key={searchKey}
@@ -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,10 +34,19 @@ 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;
@@ -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.
@@ -1,5 +1,5 @@
 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, Text } from 'folds';
@@ -26,6 +26,8 @@ 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';
@@ -70,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,
@@ -85,7 +100,9 @@ export function RenderMessageContent({
  linkifyOpts,
  outlineAttachment,
  eventId,
-}: RenderMessageContentProps) {
+  onOpenImageViewer,
+  mEvent,
+}: Omit<RenderMessageContentProps, 'editDiff'>) {
  const renderUrlsPreview = (urls: string[]) => {
    // 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
@@ -241,6 +258,7 @@ export function RenderMessageContent({
              autoPlay={mediaAutoLoad}
              renderImage={(p) => <Image {...p} loading="lazy" />}
              renderViewer={(p) => <ImageViewer {...p} />}
+              onOpenViewer={onOpenImageViewer}
            />
          )}
          outlined={outlineAttachment}
@@ -342,7 +360,7 @@ export function RenderMessageContent({
  }

  if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
+    return <MBadEncrypted mEvent={mEvent} />;
  }

  if (msgType === 'm.key.verification.request') {
@@ -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';
@@ -67,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',
  },
@@ -23,7 +23,13 @@ import { CustomElement } from './slate';
 import * as css from './Editor.css';
 import { toggleKeyboardShortcut } from './keyboard';

-const initialValue: CustomElement[] = [
+// One FRESH value per editor instance. slate-react keys its node→path weak
+// maps by node object identity, so a module-level constant shared by every
+// <Slate> (main composer + thread composer + message editor) makes the second
+// mount hijack the first editor's nodes and the first editor throws "Unable to
+// find the path for Slate node" on its next render — the app-wide crash when
+// opening a thread on a pristine composer (Gitea #165 / #184).
+const createInitialValue = (): CustomElement[] => [
  {
    type: BlockType.Paragraph,
    children: [{ text: '' }],
@@ -92,6 +98,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
    },
    ref,
  ) => {
+    const [initialValue] = useState(createInitialValue);
    const renderElement = useCallback(
      (props: RenderElementProps) => <RenderElement {...props} />,
      [],
@@ -65,3 +65,27 @@ test('no math conversion inside a code block', () => {
 test('a message with no math is unchanged', () => {
  assert.equal(toMatrixCustomHTML(txt('just hello'), OPTS), 'just hello');
 });
+
+// Gitea #184 O3 — markdown mode: fences and backtick spans typed as plain
+// paragraphs are literal too (the block markdown parser only sees the fence
+// after the lines are joined, so math must be skipped while serialising them).
+const MD_OPTS = { ...OPTS, allowInlineMarkdown: true, allowBlockMarkdown: true };
+
+test('markdown: no math conversion inside a typed ``` fence', () => {
+  const paragraphs = [
+    el(BlockType.Paragraph, [txt('```')]),
+    el(BlockType.Paragraph, [txt('$x$ literal')]),
+    el(BlockType.Paragraph, [txt('```')]),
+    el(BlockType.Paragraph, [txt('after $y$')]),
+  ];
+  const out = toMatrixCustomHTML(paragraphs, MD_OPTS);
+  assert.ok(out.includes('<pre'), 'fence became a code block');
+  assert.ok(out.includes('$x$ literal'), 'code block content stays literal');
+  assert.ok(out.includes('data-mx-maths="y"'), 'math after the fence still converts');
+});
+
+test('markdown: no math conversion inside a backtick span, math outside still converts', () => {
+  const out = toMatrixCustomHTML(el(BlockType.Paragraph, [txt('use `$x$` and $y$')]), MD_OPTS);
+  assert.ok(/<code[^>]*>\$x\$<\/code>/.test(out), 'backtick span stays literal');
+  assert.ok(out.includes('data-mx-maths="y"'));
+});
@@ -36,6 +36,18 @@ const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
  // applied inside inline code. Non-math text recurses with allowMath off so it
  // still gets the normal marks + inline-markdown treatment.
  if (opts.allowMath && !node.code) {
+    // Markdown inline code spans (`…`) are literal too: apply math only to the
+    // text between them (Gitea #184 O3 — `$x$` inside backticks stayed math).
+    if (opts.allowInlineMarkdown && /`[^`]*`/.test(node.text)) {
+      return node.text
+        .split(/(`+[^`]*`+)/)
+        .map((part) =>
+          part.startsWith('`')
+            ? textToCustomHtml({ ...node, text: part }, { ...opts, allowMath: false })
+            : textToCustomHtml({ ...node, text: part }, opts),
+        )
+        .join('');
+    }
    const segments = splitMathSegments(node.text);
    if (segments.some((seg) => seg.type !== 'text')) {
      return segments
@@ -128,12 +140,20 @@ export const toMatrixCustomHTML = (
  opts: OutputOptions,
 ): string => {
  let markdownLines = '';
+  // Inside a markdown ``` fence every line is literal: no `$…$` math conversion
+  // (the fence is only recognised by parseBlockMD after the lines are joined,
+  // which is too late — Gitea #184 O3).
+  let inFence = false;
  const parseNode = (n: Descendant, index: number, targetNodes: Descendant[]) => {
    if (opts.allowBlockMarkdown && 'type' in n && n.type === BlockType.Paragraph) {
+      const isFenceLine = /^\s*```/.test(toPlainText(n, false));
+      const literal = inFence || isFenceLine;
+      if (isFenceLine) inFence = !inFence;
      const line = toMatrixCustomHTML(n, {
        ...opts,
        allowInlineMarkdown: false,
        allowBlockMarkdown: false,
+        allowMath: opts.allowMath && !literal,
      })
        .replace(/<br\/>$/, '\n')
        .replace(/^(\\*)&gt;/, '$1>');
@@ -31,6 +31,8 @@ import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { addRecentSticker, recentStickersAtom } from '../../state/recentStickers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRecentTouch } from '../../hooks/useRecentTouch';
+import { TapToSendBar } from '../tap-to-send/TapToSendBar';
 import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
 import { getEmoticonSearchStr } from '../../plugins/utils';
 import {
@@ -52,7 +54,7 @@ import {
  EmojiGroup,
  EmojiBoardLayout,
 } from './components';
-import { EmojiBoardTab, EmojiType } from './types';
+import { EmojiBoardTab, EmojiItemInfo, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';

 const RECENT_GROUP_ID = 'recent_group';
@@ -518,10 +520,27 @@ export function EmojiBoard({
  });
  const vItems = virtualizer.getVirtualItems();

+  // [Gitea #147] Touch: first tap on a sticker parks it in a preview bar,
+  // second tap (or the bar's Send) sends. Mouse/keyboard/screen reader: one step.
+  const { wasTouch } = useRecentTouch(contentScrollRef);
+  const [pendingSticker, setPendingSticker] = useState<EmojiItemInfo | undefined>();
+  const stickerUseAuthentication = useMediaAuthentication();
+  const sendSticker = (info: EmojiItemInfo, close: boolean) => {
+    onStickerSelect?.(info.data, info.shortcode, info.label);
+    setRecentStickers((prev) =>
+      addRecentSticker(prev, { url: info.data, shortcode: info.shortcode, body: info.label }),
+    );
+    setPendingSticker(undefined);
+    if (close) requestClose();
+  };
+
  const handleGroupItemClick: MouseEventHandler = (evt) => {
    const targetEl = targetFromEvent(evt.nativeEvent, 'button');
    const emojiInfo = targetEl && getEmojiItemInfo(targetEl);
-    if (!emojiInfo) return;
+    if (!emojiInfo) {
+      if (pendingSticker) setPendingSticker(undefined);
+      return;
+    }

    if (emojiInfo.type === EmojiType.Emoji) {
      onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
@@ -533,14 +552,12 @@ export function EmojiBoard({
      onCustomEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
    }
    if (emojiInfo.type === EmojiType.Sticker) {
-      onStickerSelect?.(emojiInfo.data, emojiInfo.shortcode, emojiInfo.label);
-      setRecentStickers((prev) =>
-        addRecentSticker(prev, {
-          url: emojiInfo.data,
-          shortcode: emojiInfo.shortcode,
-          body: emojiInfo.label,
-        }),
-      );
+      if (wasTouch() && pendingSticker?.data !== emojiInfo.data) {
+        setPendingSticker(emojiInfo);
+        return;
+      }
+      sendSticker(emojiInfo, !evt.altKey && !evt.shiftKey);
+      return;
    }
    if (!evt.altKey && !evt.shiftKey) requestClose();
  };
@@ -670,7 +687,18 @@ export function EmojiBoard({
            {tab === EmojiBoardTab.Sticker && groups.length === 0 && <NoStickerPacks />}
          </EmojiGroupHolder>
        </Box>
-        <Preview previewAtom={previewAtom} />
+        {pendingSticker && tab === EmojiBoardTab.Sticker ? (
+          <TapToSendBar
+            previewUrl={
+              mxcUrlToHttp(mx, pendingSticker.data, stickerUseAuthentication) ?? undefined
+            }
+            label={pendingSticker.label}
+            onSend={() => sendSticker(pendingSticker, true)}
+            onCancel={() => setPendingSticker(undefined)}
+          />
+        ) : (
+          <Preview previewAtom={previewAtom} />
+        )}
      </EmojiBoardLayout>
    </FocusTrap>
  );
@@ -24,32 +24,19 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { today, yesterday, timeHourMinute, timeMon, timeDay, timeYear } from '../../utils/time';
+import { TimestampPrefs, formatTimestamp } from '../../utils/formatTimestamp';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';

-function formatReadTs(ts: number, hour24Clock: boolean): string {
-  const timeStr = timeHourMinute(ts, hour24Clock);
-  if (today(ts)) return `Today at ${timeStr}`;
-  if (yesterday(ts)) return `Yesterday at ${timeStr}`;
-  const sameYear = timeYear(ts) === timeYear(Date.now());
-  return sameYear
-    ? `${timeMon(ts)} ${timeDay(ts)} at ${timeStr}`
-    : `${timeMon(ts)} ${timeDay(ts)} ${timeYear(ts)} at ${timeStr}`;
-}
+const formatReadTs = (ts: number, prefs: TimestampPrefs): string => formatTimestamp(ts, prefs);

 type EventReaderItemProps = {
  room: Room;
  readerId: string;
-  hour24Clock: boolean;
+  prefs: TimestampPrefs;
  lotusTerminal: boolean;
  onSelect: React.MouseEventHandler<HTMLButtonElement>;
 };
-function EventReaderItem({
-  room,
-  readerId,
-  hour24Clock,
-  lotusTerminal,
-  onSelect,
-}: EventReaderItemProps) {
+function EventReaderItem({ room, readerId, prefs, lotusTerminal, onSelect }: EventReaderItemProps) {
  const { name, avatarUrl } = useMemberAvatar(room, readerId, 100, 100);
  const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;

@@ -86,7 +73,7 @@ function EventReaderItem({
                : undefined
            }
          >
-            {formatReadTs(receiptTs, hour24Clock)}
+            {formatReadTs(receiptTs, prefs)}
          </Text>
        )}
      </Box>
@@ -106,7 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
    const latestEventReaders = useRoomEventReaders(room, eventId).filter((id) => id !== myUserId);
    const openProfile = useOpenUserRoomProfile();
    const space = useSpaceOptionally();
-    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const { prefs } = useTimestampFormatter();
    const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

    return (
@@ -157,7 +144,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                  key={readerId}
                  room={room}
                  readerId={readerId}
-                  hour24Clock={hour24Clock}
+                  prefs={prefs}
                  lotusTerminal={lotusTerminal}
                  onSelect={(event) => {
                    openProfile(
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
@@ -27,12 +27,37 @@ export const ImageViewer = as<'div', ImageViewerProps>(
      saveFile(fileContent, alt);
    };

+    // [Gitea #164] Same keyboard model as the gallery lightbox: + / = zoom
+    // in, - zoom out, 0 reset; double-click toggles 1× ↔ 2×. The root takes
+    // focus on open so those keys (and Escape, handled by the modal) work
+    // immediately instead of only after clicking inside the viewer.
+    const rootRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      rootRef.current?.focus({ preventScroll: true });
+    }, []);
+    const handleKeyDown = (evt: React.KeyboardEvent) => {
+      if (evt.key === '+' || evt.key === '=') zoomIn();
+      else if (evt.key === '-') zoomOut();
+      else if (evt.key === '0') setZoom(1);
+      else return;
+      evt.preventDefault();
+    };
+
    return (
      <Box
        className={classNames(css.ImageViewer, className)}
        direction="Column"
+        role="dialog"
+        aria-modal
+        aria-label={alt || 'Image viewer'}
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
        {...props}
-        ref={ref}
+        ref={(node: HTMLDivElement | null) => {
+          rootRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }}
      >
        <Header className={css.ImageViewerHeader} size="400">
          <Box grow="Yes" alignItems="Center" gap="200">
@@ -116,6 +141,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
            alt={alt}
            onMouseDown={onMouseDown}
            onTouchStart={onTouchStart}
+            onDoubleClick={() => setZoom(zoom === 1 ? 2 : 1)}
          />
        </Box>
      </Box>
@@ -33,6 +33,7 @@ import {
 import { Room } from 'matrix-js-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
+import { QRCodeSVG } from 'qrcode.react';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
 import {
@@ -237,13 +238,25 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                    borderBottom: `1px solid ${color.Surface.ContainerLine}`,
                  }}
                >
-                  <img
-                    src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(inviteUrl)}`}
-                    alt="QR code for room invite link"
-                    width={180}
-                    height={180}
-                    style={{ display: 'block', borderRadius: config.radii.R300 }}
-                  />
+                  {/* Generated locally (qrcode.react) like RoomShareInvite — the
+                      old api.qrserver.com <img> leaked the room link to a third
+                      party and is blocked by the prod CSP img-src anyway
+                      (Gitea #192). White quiet-zone so it scans on any theme. */}
+                  <Box
+                    style={{
+                      padding: config.space.S200,
+                      background: '#ffffff',
+                      borderRadius: config.radii.R300,
+                      lineHeight: 0,
+                    }}
+                  >
+                    <QRCodeSVG
+                      value={inviteUrl}
+                      size={164}
+                      level="M"
+                      title="QR code for room invite link"
+                    />
+                  </Box>
                  <Text
                    size="T200"
                    style={{ opacity: 0.6, wordBreak: 'break-all', textAlign: 'center' }}
@@ -0,0 +1,67 @@
+import React, { MouseEventHandler } from 'react';
+import { Box, Icon, Icons, Text, as, toRem } from 'folds';
+import { MatrixClient } from 'matrix-js-sdk';
+import classNames from 'classnames';
+import * as css from './Reply.css';
+import { ForwardedMeta } from '../../features/room/message/forwardContent';
+import { getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { formatTimestamp } from '../../utils/formatTimestamp';
+
+type ForwardedHeaderProps = {
+  mx: MatrixClient;
+  meta: ForwardedMeta;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  /** Present when the viewer can open the original (they are in the source room). */
+  onJump?: MouseEventHandler;
+};
+
+/**
+ * "↪ Forwarded · from <sender> in <room> · <time>" — the provenance line above
+ * a forwarded message (Gitea: forwards used to look like the forwarder's own
+ * words). Renders in the same visual slot and style as a reply quote so it
+ * reads as message context, not as content.
+ */
+export const ForwardedHeader = as<'div', ForwardedHeaderProps>(
+  ({ mx, meta, hour24Clock, dateFormatString, onJump, className, ...props }, ref) => {
+    const sourceRoom = meta.room_id ? mx.getRoom(meta.room_id) : null;
+    const senderName =
+      (sourceRoom && getMemberDisplayName(sourceRoom, meta.sender)) ??
+      mx.getUser(meta.sender)?.displayName ??
+      getMxIdLocalPart(meta.sender) ??
+      meta.sender;
+    const ts = meta.origin_server_ts;
+    const when = formatTimestamp(ts, { hour24Clock, dateFormatString });
+    const canJump = !!sourceRoom && !!onJump;
+
+    return (
+      <Box
+        as={canJump ? 'button' : 'div'}
+        className={classNames(css.Reply, className)}
+        alignItems="Center"
+        gap="100"
+        onClick={canJump ? onJump : undefined}
+        title={canJump ? 'Jump to the original message' : undefined}
+        aria-label={`Forwarded from ${senderName}${sourceRoom ? ` in ${sourceRoom.name}` : ''}, ${when}`}
+        {...props}
+        ref={ref}
+      >
+        <Box alignItems="Center" gap="100" shrink="No" style={{ maxWidth: toRem(420) }}>
+          <Icon size="100" src={Icons.ArrowGoRight} />
+          <Text size="T300" priority="300" truncate>
+            Forwarded from <b>{senderName}</b>
+            {sourceRoom ? (
+              <>
+                {' in '}
+                <b>{sourceRoom.name}</b>
+              </>
+            ) : null}
+            {' · '}
+            {when}
+          </Text>
+        </Box>
+      </Box>
+    );
+  },
+);
@@ -1,7 +1,11 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
-import { IContent } from 'matrix-js-sdk';
+import { IContent, MatrixEvent } from 'matrix-js-sdk';
+import { useSetAtom } from 'jotai';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { settingsRequestAtom } from '../../state/settingsRequest';
+import { describeDecryptionFailure } from '../../utils/decryptionReason';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
 import { MessageTextBody } from './layout';
@@ -42,14 +46,31 @@ type CollapsibleBodyProps = {
  eventId?: string;
  children: ReactNode;
 };
+// [Gitea #152] Messages the user expanded this session. The timeline unmounts
+// rows as they scroll away, so component state alone forgot the choice;
+// module-scoped (never persisted) survives remounts and clears on reload.
+const expandedMessages = new Set<string>();
+
 function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
  const bodyRef = useRef<HTMLDivElement>(null);
  const [needsCollapse, setNeedsCollapse] = useState(false);
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsedState] = useState(
+    () => !(eventId && expandedMessages.has(eventId)),
+  );
+  const setCollapsed = (next: boolean | ((c: boolean) => boolean)) => {
+    setCollapsedState((c) => {
+      const value = typeof next === 'function' ? next(c) : next;
+      if (eventId) {
+        if (value) expandedMessages.delete(eventId);
+        else expandedMessages.add(eventId);
+      }
+      return value;
+    });
+  };

  // Reset collapsed state when the event changes (new message)
  useEffect(() => {
-    setCollapsed(true);
+    setCollapsedState(!(eventId && expandedMessages.has(eventId)));
    setNeedsCollapse(false);
  }, [eventId]);

@@ -120,11 +141,59 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
  );
 }

-export function MBadEncrypted() {
+type MBadEncryptedProps = {
+  mEvent?: MatrixEvent;
+};
+/**
+ * [Gitea #159] The undecryptable placeholder says WHY and offers the one
+ * action that fixes it (set up key backup / verify this session / retry).
+ * The raw SDK code stays in the tooltip for support.
+ */
+export function MBadEncrypted({ mEvent }: MBadEncryptedProps) {
+  const mx = useMatrixClient();
+  const requestSettings = useSetAtom(settingsRequestAtom);
+  const [retrying, setRetrying] = useState(false);
+  const code = mEvent?.decryptionFailureReason ?? null;
+  const reason = describeDecryptionFailure(code);
+
+  const handleAction = async () => {
+    if (reason.action === 'setup-backup' || reason.action === 'verify-session') {
+      requestSettings('devices');
+      return;
+    }
+    if (reason.action === 'retry' && mEvent) {
+      setRetrying(true);
+      try {
+        await mx.decryptEventIfNeeded(mEvent, { forceRedecryptIfUntrusted: true });
+      } catch {
+        // still undecryptable — the placeholder re-renders with the current reason
+      } finally {
+        setRetrying(false);
+      }
+    }
+  };
+
  return (
-    <Text>
-      <MessageBadEncryptedContent />
-    </Text>
+    <Box direction="Column" gap="100" alignItems="Start">
+      <Text>
+        <MessageBadEncryptedContent title={code ?? undefined} />
+      </Text>
+      <Text size="T200" priority="300">
+        {reason.text}
+      </Text>
+      {reason.action !== 'none' && (
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          onClick={handleAction}
+          disabled={retrying}
+        >
+          <Text size="B300">{retrying ? 'Retrying…' : reason.actionLabel}</Text>
+        </Button>
+      )}
+    </Box>
  );
 }

@@ -8,6 +8,7 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
+import { ReplyMediaThumb, hasReplyMedia } from './ReplyMediaThumb';
 import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
 import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
@@ -143,9 +144,12 @@ export const Reply = as<'div', ReplyProps>(
              <i>Original message not available</i>
            </Text>
          ) : (
-            <Text size="T300" truncate>
-              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
-            </Text>
+            <Box alignItems="Center" gap="200" style={{ minWidth: 0 }}>
+              {hasReplyMedia(replyEvent) && <ReplyMediaThumb mEvent={replyEvent} />}
+              <Text size="T300" truncate>
+                {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+              </Text>
+            </Box>
          )}
        </ReplyLayout>
      </Box>
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Icon, Icons, config, toRem } from 'folds';
+import { MatrixEvent, MsgType } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useDecryptedMediaUrl } from '../../hooks/useDecryptedMediaUrl';
+import { getThumbMxc } from '../../utils/mediaThumb';
+import { MessageEvent } from '../../../types/matrix/room';
+
+const SIZE = 36;
+
+/** Whether a reply quote for this event should carry a thumbnail. */
+export const hasReplyMedia = (mEvent: MatrixEvent | null | undefined): boolean => {
+  if (!mEvent || mEvent.isRedacted()) return false;
+  if (mEvent.getType() === MessageEvent.Sticker) return true;
+  const msgtype = mEvent.getContent().msgtype;
+  return msgtype === MsgType.Image || msgtype === MsgType.Video;
+};
+
+/**
+ * [Gitea #151] 36 px thumbnail in a reply quote for an image/video/sticker.
+ * Uses the event's own thumbnail (decrypting it for E2EE media), never the
+ * full-size file.
+ */
+export function ReplyMediaThumb({ mEvent }: { mEvent: MatrixEvent }) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const content = mEvent.getContent();
+  const isVideo = content.msgtype === MsgType.Video;
+  const thumbMxc = getThumbMxc(mEvent);
+  const info = content.info as Record<string, unknown> | undefined;
+  const encInfo = content.file
+    ? ((info?.thumbnail_file as typeof content.file | undefined) ?? content.file)
+    : undefined;
+  const mimeType =
+    (info?.thumbnail_info as { mimetype?: string } | undefined)?.mimetype ??
+    (info?.mimetype as string | undefined);
+  const media = useDecryptedMediaUrl(mx, thumbMxc, encInfo, useAuthentication, mimeType);
+
+  return (
+    <span
+      aria-hidden
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: toRem(SIZE),
+        height: toRem(SIZE),
+        flexShrink: 0,
+        borderRadius: config.radii.R300,
+        overflow: 'hidden',
+        background: 'rgba(127, 127, 127, 0.15)',
+      }}
+    >
+      {media.status === 'ok' ? (
+        <img
+          src={media.url}
+          alt=""
+          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+        />
+      ) : (
+        <Icon size="100" src={isVideo ? Icons.Play : Icons.Photo} />
+      )}
+      {isVideo && media.status === 'ok' && (
+        <Icon
+          size="50"
+          src={Icons.Play}
+          filled
+          style={{ position: 'absolute', color: 'white', filter: 'drop-shadow(0 0 2px black)' }}
+        />
+      )}
+    </span>
+  );
+}
@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { formatTimestamp } from '../../utils/formatTimestamp';

 export type TimeProps = {
  compact?: boolean;
@@ -12,8 +12,8 @@ export type TimeProps = {
 /**
 * Renders a formatted timestamp, supporting compact and full display modes.
 *
- * Displays the time in hour:minute format if the message is from today, yesterday, or if `compact` is true.
- * For older messages, it shows the date and time.
+ * `compact` always shows the clock time; otherwise the shared `formatTimestamp`
+ * rules apply (today → time, yesterday/this week → day word + time, else date + time).
 *
 * @param {number} ts - The timestamp to display.
 * @param {boolean} [compact=false] - If true, always show only the time.
@@ -23,18 +23,7 @@ export type TimeProps = {
 */
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
-    const formattedTime = timeHourMinute(ts, hour24Clock);
-
-    let time = '';
-    if (compact) {
-      time = formattedTime;
-    } else if (today(ts)) {
-      time = formattedTime;
-    } else if (yesterday(ts)) {
-      time = `Yesterday ${formattedTime}`;
-    } else {
-      time = `${timeDayMonYear(ts, dateFormatString)} ${formattedTime}`;
-    }
+    const time = formatTimestamp(ts, { hour24Clock, dateFormatString }, compact ? 'time' : 'auto');

    return (
      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+import { DiffToken } from '../../../utils/wordDiff';
+
+/** [Gitea #144] Word diff of the message's last edit, for the "(edited)" hover. */
+export const EditDiffContext = createContext<DiffToken[] | undefined>(undefined);
+export const useEditDiff = () => useContext(EditDiffContext);
@@ -1,5 +1,20 @@
-import { Box, Icon, Icons, Text, as, color, config } from 'folds';
-import React from 'react';
+import {
+  Box,
+  Icon,
+  Icons,
+  PopOut,
+  RectCords,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  as,
+  color,
+  config,
+} from 'folds';
+import React, { useEffect, useState } from 'react';
+import { useLongPress } from '../../../hooks/useLongPress';
+import { DiffToken, countChanges } from '../../../utils/wordDiff';
+import { useEditDiff } from './EditDiffContext';

 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
 const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
@@ -66,29 +81,157 @@ export const MessageVerificationRequestContent = as<'div', { children?: never }>
  ),
 );

+const editDiffStyle: React.CSSProperties = {
+  maxWidth: '40ch',
+  whiteSpace: 'pre-wrap',
+  overflowWrap: 'anywhere',
+  maxHeight: '12lh',
+  overflow: 'hidden',
+};
+
+/** The last edit as a word diff: removed words struck, added words bold. */
+export function EditDiffBody({ tokens, hint }: { tokens: DiffToken[]; hint: string }) {
+  const { added, removed } = countChanges(tokens);
+  return (
+    <Box direction="Column" gap="100" style={editDiffStyle}>
+      <Text size="T200" priority="300">
+        Last edit
+        {added > 0 && ` · +${added}`}
+        {removed > 0 && ` · −${removed}`}
+      </Text>
+      <Text as="span" size="T300" dir="auto">
+        {tokens.map((t, i) => {
+          if (t.op === 'add')
+            return (
+              <ins key={i} style={{ textDecoration: 'none', fontWeight: 'bold' }}>
+                {t.text}
+              </ins>
+            );
+          if (t.op === 'del')
+            return (
+              <del key={i} style={{ opacity: config.opacity.P300 }}>
+                {t.text}
+              </del>
+            );
+          return <React.Fragment key={i}>{t.text}</React.Fragment>;
+        })}
+      </Text>
+      <Text size="T200" priority="300">
+        {hint}
+      </Text>
+    </Box>
+  );
+}
+
+const editedButtonStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+};
+
+/**
+ * "(edited)" label. With an edit-history handler it is a button that opens
+ * the viewer; when the surrounding message also provides a last-edit diff
+ * (see `EditDiffContext`) hover/focus shows it as a tooltip and a touch
+ * long-press shows it as a popout. [Gitea #144]
+ */
 export const MessageEditedContent = as<
  'span',
  { children?: never; onEditHistoryClick?: () => void }
->(({ onEditHistoryClick, ...props }, ref) =>
-  onEditHistoryClick ? (
+>(({ onEditHistoryClick, ...props }, ref) => {
+  const diff = useEditDiff();
+  const [pressAnchor, setPressAnchor] = useState<RectCords | undefined>();
+  const { coarse, handlers, suppressContextMenu } = useLongPress((x, y) => {
+    if (diff) setPressAnchor({ x, y, width: 1, height: 1 });
+  });
+
+  useEffect(() => {
+    if (!pressAnchor) return undefined;
+    const close = () => setPressAnchor(undefined);
+    const t = window.setTimeout(close, 6000);
+    window.addEventListener('touchstart', close, { passive: true });
+    window.addEventListener('scroll', close, { passive: true, capture: true });
+    return () => {
+      window.clearTimeout(t);
+      window.removeEventListener('touchstart', close);
+      window.removeEventListener('scroll', close, { capture: true });
+    };
+  }, [pressAnchor]);
+
+  if (!onEditHistoryClick) {
+    return (
+      <Text as="span" size="T200" priority="300" {...props} ref={ref}>
+        {' (edited)'}
+      </Text>
+    );
+  }
+
+  const button = (tipRef?: React.RefCallback<HTMLElement>) => (
+    <button
+      ref={tipRef}
+      type="button"
+      onClick={() => {
+        if (suppressContextMenu.current) return;
+        onEditHistoryClick();
+      }}
+      onContextMenu={(evt) => {
+        if (suppressContextMenu.current) evt.preventDefault();
+      }}
+      {...handlers}
+      // Keep the message's own long-press (action sheet) from firing too.
+      onTouchStart={(evt) => {
+        evt.stopPropagation();
+        handlers.onTouchStart?.(evt);
+      }}
+      aria-label={diff ? 'View edit history — hover for the last change' : 'View edit history'}
+      style={editedButtonStyle}
+    >
+      <Text as="span" size="T200" priority="300">
+        {' (edited)'}
+      </Text>
+    </button>
+  );
+
+  return (
    <span ref={ref} {...(props as React.HTMLAttributes<HTMLSpanElement>)}>
-      <button
-        type="button"
-        onClick={onEditHistoryClick}
-        aria-label="View edit history"
-        style={{ cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}
-      >
-        <Text as="span" size="T200" priority="300">
-          {' (edited)'}
-        </Text>
-      </button>
+      {diff ? (
+        <TooltipProvider
+          position="Top"
+          align="Start"
+          delay={300}
+          tooltip={
+            <Tooltip>
+              <EditDiffBody
+                tokens={diff}
+                hint={coarse ? 'Tap for full history' : 'Click for full history'}
+              />
+            </Tooltip>
+          }
+        >
+          {(tipRef) => button(tipRef)}
+        </TooltipProvider>
+      ) : (
+        button()
+      )}
+      {diff && pressAnchor && (
+        <PopOut
+          anchor={pressAnchor}
+          position="Top"
+          align="Start"
+          content={
+            <Tooltip>
+              <EditDiffBody
+                tokens={diff}
+                hint={coarse ? 'Tap for full history' : 'Click for full history'}
+              />
+            </Tooltip>
+          }
+        />
+      )}
    </span>
-  ) : (
-    <Text as="span" size="T200" priority="300" {...props} ref={ref}>
-      {' (edited)'}
-    </Text>
-  ),
-);
+  );
+});

 type TranslatedStatus = 'downloading' | 'translating' | 'done' | 'error';

@@ -114,7 +114,7 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
              <Modal
                className={ModalWide}
                size="500"
-                onContextMenu={(evt: any) => evt.stopPropagation()}
+                onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
              >
                {renderViewer({
                  name: body,
@@ -203,7 +203,7 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
              <Modal
                className={ModalWide}
                size="500"
-                onContextMenu={(evt: any) => evt.stopPropagation()}
+                onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
              >
                {renderViewer({
                  name: body,
@@ -59,6 +59,9 @@ export type ImageContentProps = {
  spoilerReason?: string;
  renderViewer: (props: RenderViewerProps) => ReactNode;
  renderImage: (props: RenderImageProps) => ReactNode;
+  // [Gitea #219] When given, a click opens THIS instead of the built-in
+  // viewer — the room timeline hands it to the shared media lightbox.
+  onOpenViewer?: () => void;
 };
 export const ImageContent = as<'div', ImageContentProps>(
  (
@@ -74,6 +77,7 @@ export const ImageContent = as<'div', ImageContentProps>(
      spoilerReason,
      renderViewer,
      renderImage,
+      onOpenViewer,
      ...props
    },
    ref,
@@ -139,7 +143,7 @@ export const ImageContent = as<'div', ImageContentProps>(
                <Modal
                  className={ModalWide}
                  size="500"
-                  onContextMenu={(evt: any) => evt.stopPropagation()}
+                  onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
                >
                  {renderViewer({
                    src: srcState.data,
@@ -182,7 +186,7 @@ export const ImageContent = as<'div', ImageContentProps>(
              src: srcState.data,
              onLoad: handleLoad,
              onError: handleError,
-              onClick: () => setViewer(true),
+              onClick: () => (onOpenViewer ? onOpenViewer() : setViewer(true)),
              tabIndex: 0,
            })}
          </Box>
@@ -8,3 +8,4 @@ export * from './Time';
 export * from './MsgTypeRenderers';
 export * from './FileHeader';
 export * from './RenderBody';
+export * from './ForwardedHeader';
@@ -9,16 +9,35 @@ export const NavItem = as<
  {
    highlight?: boolean;
  } & css.RoomSelectorVariants
->(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
-  <AsNavItem
-    className={classNames(css.NavItem({ variant, radii }), className)}
-    data-highlight={highlight}
-    {...props}
-    ref={ref}
-  >
-    {children}
-  </AsNavItem>
-));
+>(
+  (
+    {
+      as: AsNavItem = 'div',
+      className,
+      highlight,
+      variant,
+      radii,
+      children,
+      'aria-selected': selected,
+      ...props
+    },
+    ref,
+  ) => (
+    // [Gitea #222] Callers pass `aria-selected`, but that attribute is only
+    // valid on option/tab/row roles; on a plain div axe flags it as critical.
+    // Keep the prop for callers and styling, expose the state as aria-current.
+    <AsNavItem
+      className={classNames(css.NavItem({ variant, radii }), className)}
+      data-highlight={highlight}
+      data-selected={selected === true || selected === 'true' ? true : undefined}
+      aria-current={selected === true || selected === 'true' ? 'page' : undefined}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </AsNavItem>
+  ),
+);

 export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
  ({ className, ...props }, ref) => (
@@ -69,7 +69,7 @@ const NavItemBase = style({
    [`&:has(.${NavLink}:active)`]: {
      backgroundColor: ContainerActive,
    },
-    '&[aria-selected=true]': {
+    '&[data-selected=true]': {
      backgroundColor: ContainerActive,
    },
    [`&:has(.${NavLink}:focus-visible)`]: {
@@ -19,15 +19,13 @@ import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useRoomAvatar, useLocalRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { InviteUserPrompt } from '../invite-user-prompt';
 import { RoomTopicViewer } from '../room-topic-viewer';
 import { stopPropagation } from '../../utils/keyboard';
@@ -68,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
    useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]),
  );

-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const { format } = useTimestampFormatter();

  return (
    <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
@@ -135,7 +133,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
            <Text size="T200" priority="300">
              {'Created by '}
              <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
+              {` on ${format(ts, 'dateTime')}`}
            </Text>
          )}
        </Box>
@@ -1,21 +1,49 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom } from '../../state/settings';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { zIndices } from '../../styles/zIndex';
 import { SeasonTheme } from './types';
 import { resolveSeasonTheme } from './seasonSchedule';
-import { HalloweenOverlay } from './themes/Halloween';
-import { ChristmasOverlay } from './themes/Christmas';
-import { NewYearOverlay } from './themes/NewYear';
-import { AutumnOverlay } from './themes/Autumn';
-import { AprilFoolsOverlay } from './themes/AprilFools';
-import { LunarNewYearOverlay } from './themes/LunarNewYear';
-import { ValentinesOverlay } from './themes/Valentines';
-import { StPatricksOverlay } from './themes/StPatricks';
-import { EarthDayOverlay } from './themes/EarthDay';
-import { DeepSpaceOverlay } from './themes/DeepSpace';
-import { ArcadeOverlay } from './themes/Arcade';
+
+// [Gitea #167] Each overlay (its particles + keyframes) is its own chunk,
+// fetched only when that season is active or previewed in Settings — the
+// date/override decision stays in the main bundle.
+const lazyOverlay = (load: () => Promise<{ default: React.ComponentType<{ reduced: boolean }> }>) =>
+  React.lazy(load);
+const HalloweenOverlay = lazyOverlay(() =>
+  import('./themes/Halloween').then((m) => ({ default: m.HalloweenOverlay })),
+);
+const ChristmasOverlay = lazyOverlay(() =>
+  import('./themes/Christmas').then((m) => ({ default: m.ChristmasOverlay })),
+);
+const NewYearOverlay = lazyOverlay(() =>
+  import('./themes/NewYear').then((m) => ({ default: m.NewYearOverlay })),
+);
+const AutumnOverlay = lazyOverlay(() =>
+  import('./themes/Autumn').then((m) => ({ default: m.AutumnOverlay })),
+);
+const AprilFoolsOverlay = lazyOverlay(() =>
+  import('./themes/AprilFools').then((m) => ({ default: m.AprilFoolsOverlay })),
+);
+const LunarNewYearOverlay = lazyOverlay(() =>
+  import('./themes/LunarNewYear').then((m) => ({ default: m.LunarNewYearOverlay })),
+);
+const ValentinesOverlay = lazyOverlay(() =>
+  import('./themes/Valentines').then((m) => ({ default: m.ValentinesOverlay })),
+);
+const StPatricksOverlay = lazyOverlay(() =>
+  import('./themes/StPatricks').then((m) => ({ default: m.StPatricksOverlay })),
+);
+const EarthDayOverlay = lazyOverlay(() =>
+  import('./themes/EarthDay').then((m) => ({ default: m.EarthDayOverlay })),
+);
+const DeepSpaceOverlay = lazyOverlay(() =>
+  import('./themes/DeepSpace').then((m) => ({ default: m.DeepSpaceOverlay })),
+);
+const ArcadeOverlay = lazyOverlay(() =>
+  import('./themes/Arcade').then((m) => ({ default: m.ArcadeOverlay })),
+);

 // SeasonTheme + the date-window logic now live in leaf modules (single source
 // of truth, shared with the settings UI). Re-exported here for existing
@@ -69,7 +97,7 @@ function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: bool
        overflow: 'hidden',
      }}
    >
-      {buildOverlayContent(theme, reduced)}
+      <Suspense fallback={null}>{buildOverlayContent(theme, reduced)}</Suspense>
    </div>
  );
 }
@@ -94,7 +122,7 @@ export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
        containerType: 'inline-size',
      }}
    >
-      {buildOverlayContent(theme, true)}
+      <Suspense fallback={null}>{buildOverlayContent(theme, true)}</Suspense>
    </div>
  );
 }
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useId, useRef } from 'react';
 import { Box, Text } from 'folds';
 import { BreakWord } from '../../styles/Text.css';

@@ -10,12 +10,35 @@ type SettingTileProps = {
  children?: ReactNode;
 };
 export function SettingTile({ title, description, before, after, children }: SettingTileProps) {
+  const titleId = useId();
+  const afterRef = useRef<HTMLDivElement>(null);
+
+  // [Gitea #185] The control in `after` is almost always an icon-only Switch
+  // (or a bare select/input) whose only visible label is this tile's title.
+  // Point it at the title so screen readers announce "Show Notifications,
+  // switch, on" instead of "switch, on". Explicit labels are left alone.
+  useEffect(() => {
+    if (!title || !afterRef.current) return;
+    afterRef.current
+      .querySelectorAll<HTMLElement>('[role="switch"], input, select, textarea, [role="combobox"]')
+      .forEach((el) => {
+        if (el.hasAttribute('aria-label') || el.hasAttribute('aria-labelledby')) return;
+        if (
+          el.tagName === 'INPUT' &&
+          el.id &&
+          afterRef.current?.querySelector(`label[for="${el.id}"]`)
+        )
+          return;
+        el.setAttribute('aria-labelledby', titleId);
+      });
+  });
+
  return (
    <Box alignItems="Center" gap="300">
      {before && <Box shrink="No">{before}</Box>}
      <Box grow="Yes" direction="Column" gap="100">
        {title && (
-          <Text className={BreakWord} size="T300">
+          <Text id={titleId} className={BreakWord} size="T300">
            {title}
          </Text>
        )}
@@ -26,7 +49,11 @@ export function SettingTile({ title, description, before, after, children }: Set
        )}
        {children}
      </Box>
-      {after && <Box shrink="No">{after}</Box>}
+      {after && (
+        <Box shrink="No" ref={afterRef}>
+          {after}
+        </Box>
+      )}
    </Box>
  );
 }
@@ -0,0 +1,125 @@
+import React, { MouseEvent, ReactNode, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  color,
+  config,
+} from 'folds';
+import { stopPropagation } from '../../utils/keyboard';
+import { LinkSafety } from '../../utils/linkSafety';
+
+type SuspiciousLinkProps = {
+  href: string;
+  safety: LinkSafety;
+  anchorProps: Record<string, unknown>;
+  children: ReactNode;
+};
+
+/**
+ * [Gitea #122] A link whose visible text names a different site than its
+ * destination (or whose destination is a punycode host) opens a small
+ * confirm instead of navigating straight away. Honest links never see this.
+ */
+export function SuspiciousLink({ href, safety, anchorProps, children }: SuspiciousLinkProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = (evt: MouseEvent) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    setOpen(true);
+  };
+  const proceed = () => {
+    setOpen(false);
+    window.open(href, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <>
+      <a
+        {...anchorProps}
+        href={href}
+        onClick={handleClick}
+        data-lotus-suspicious-link
+        title={`Goes to ${safety.realHost}`}
+      >
+        {children}
+      </a>
+      {open && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setOpen(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Dialog variant="Surface" style={{ maxWidth: 440 }}>
+                <Header
+                  style={{
+                    padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                    borderBottomWidth: config.borderWidth.B300,
+                  }}
+                  variant="Surface"
+                  size="500"
+                >
+                  <Box grow="Yes">
+                    <Text as="h2" size="H4">
+                      This link doesn&apos;t go where it says
+                    </Text>
+                  </Box>
+                  <IconButton
+                    size="300"
+                    onClick={() => setOpen(false)}
+                    radii="300"
+                    aria-label="Close"
+                  >
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                </Header>
+                <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+                  <Text>
+                    {safety.shownHost ? (
+                      <>
+                        It shows <b>{safety.shownHost}</b> but goes to{' '}
+                        <b style={{ color: color.Critical.Main }}>{safety.realHost}</b>.
+                      </>
+                    ) : (
+                      <>
+                        It goes to <b style={{ color: color.Critical.Main }}>{safety.realHost}</b>.
+                      </>
+                    )}
+                    {safety.punycode &&
+                      ' The destination uses look-alike (internationalised) characters in its name.'}
+                  </Text>
+                  <Text size="T200" priority="300" style={{ wordBreak: 'break-all' }}>
+                    {href}
+                  </Text>
+                  <Box gap="200" justifyContent="End">
+                    <Button variant="Secondary" fill="Soft" onClick={() => setOpen(false)}>
+                      <Text size="B400">Cancel</Text>
+                    </Button>
+                    <Button variant="Critical" onClick={proceed}>
+                      <Text size="B400">Open anyway</Text>
+                    </Button>
+                  </Box>
+                </Box>
+              </Dialog>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </>
+  );
+}
@@ -0,0 +1 @@
+export * from './SuspiciousLink';
@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { Box, Button, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
+
+type TapToSendBarProps = {
+  previewUrl?: string;
+  label: string;
+  onSend: () => void;
+  onCancel: () => void;
+};
+
+/**
+ * [Gitea #147] Fat-finger guard for touch screens: the first tap on a sticker
+ * or GIF parks it here with a preview; "Send" (or a second tap on the same
+ * item) sends it.
+ */
+export function TapToSendBar({ previewUrl, label, onSend, onCancel }: TapToSendBarProps) {
+  const liveRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    liveRef.current?.focus?.();
+  }, [label]);
+
+  return (
+    <Box
+      ref={liveRef}
+      role="status"
+      aria-live="polite"
+      tabIndex={-1}
+      shrink="No"
+      alignItems="Center"
+      gap="300"
+      style={{
+        margin: `0 ${config.space.S300} ${config.space.S200}`,
+        padding: config.space.S200,
+        borderRadius: config.radii.R400,
+        backgroundColor: color.SurfaceVariant.Container,
+        color: color.SurfaceVariant.OnContainer,
+        outline: 'none',
+      }}
+    >
+      {previewUrl && (
+        <img
+          src={previewUrl}
+          alt=""
+          style={{
+            width: toRem(40),
+            height: toRem(40),
+            objectFit: 'contain',
+            borderRadius: config.radii.R300,
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
+        <Text size="T200" priority="300">
+          Tap again to send
+        </Text>
+        <Text size="T300" truncate>
+          {label}
+        </Text>
+      </Box>
+      <Button size="300" variant="Primary" fill="Solid" radii="300" onClick={onSend}>
+        <Text size="B300">Send</Text>
+      </Button>
+      <IconButton
+        size="300"
+        variant="SurfaceVariant"
+        radii="300"
+        onClick={onCancel}
+        aria-label="Cancel"
+      >
+        <Icon size="100" src={Icons.Cross} />
+      </IconButton>
+    </Box>
+  );
+}
@@ -6,6 +6,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { TUploadContent } from '../../utils/matrix';
 import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
+import { describeUploadError } from '../../utils/uploadError';

 type CompactUploadCardRendererProps = {
  isEncrypted?: boolean;
@@ -91,7 +92,7 @@ export function CompactUploadCardRenderer({
          )}
          {upload.status === UploadStatus.Error && (
            <UploadCardError>
-              <Text size="T200">{upload.error.message}</Text>
+              <Text size="T200">{describeUploadError(upload.error, allowSize)}</Text>
            </UploadCardError>
          )}
          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
@@ -24,6 +24,7 @@ import {
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
+import { describeUploadError } from '../../utils/uploadError';
 import { compressImage, formatFileSize, isCompressible } from '../../utils/imageCompression';

 type PreviewImageProps = {
@@ -282,6 +283,12 @@ type UploadCardRendererProps = {
  setMetadata: (fileItem: TUploadItem, metadata: TUploadMetadata) => void;
  onRemove: (file: TUploadContent) => void;
  onComplete?: (upload: UploadSuccess) => void;
+  /** [Gitea #129] Focus the caption field on mount (single image into an empty composer). */
+  autoFocusCaption?: boolean;
+  /** Enter in the caption field: send the board (and any composer text). */
+  onCaptionSubmit?: () => void;
+  /** Escape in the caption field: hand focus back to the composer. */
+  onCaptionEscape?: () => void;
 };
 export function UploadCardRenderer({
  isEncrypted,
@@ -289,6 +296,9 @@ export function UploadCardRenderer({
  setMetadata,
  onRemove,
  onComplete,
+  autoFocusCaption,
+  onCaptionSubmit,
+  onCaptionEscape,
 }: UploadCardRendererProps) {
  const mx = useMatrixClient();
  const mediaConfig = useMediaConfig();
@@ -378,9 +388,27 @@ export function UploadCardRenderer({
              size="300"
              radii="300"
              style={{ marginTop: config.space.S200, width: '100%' }}
+              autoFocus={autoFocusCaption}
+              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+                  onCaptionSubmit?.();
+                } else if (e.key === 'Escape') {
+                  e.preventDefault();
+                  onCaptionEscape?.();
+                }
+              }}
            />
          )}
          <CompressionCheckbox fileItem={fileItem} metadata={metadata} setMetadata={setMetadata} />
+          {metadata.metadataStripped && (
+            <Box alignItems="Center" gap="100" style={{ marginTop: config.space.S100 }}>
+              <Icon size="50" src={Icons.Shield} style={{ color: color.Success.Main }} />
+              <Text size="T200" priority="300">
+                Photo metadata removed (location, camera, time)
+              </Text>
+            </Box>
+          )}
          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
            <UploadCardProgress sentBytes={0} totalBytes={file.size} />
          )}
@@ -389,7 +417,7 @@ export function UploadCardRenderer({
          )}
          {upload.status === UploadStatus.Error && (
            <UploadCardError>
-              <Text size="T200">{upload.error.message}</Text>
+              <Text size="T200">{describeUploadError(upload.error, allowSize)}</Text>
            </UploadCardError>
          )}
          {upload.status === UploadStatus.Idle && fileSizeExceeded && (
@@ -19,6 +19,7 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { BreakWord, LineClamp2, LineClamp3 } from '../../styles/Text.css';
 import { ModalMobileFull } from '../../styles/Modal.css';
 import { UserPresence } from '../../hooks/useUserPresence';
+import { describeLastActive } from '../../utils/lastActive';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { AvatarDecoration } from '../avatar-decoration/AvatarDecoration';
 import { ImageViewer } from '../image-viewer';
@@ -87,7 +88,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
                <Modal
                  size="500"
                  className={ModalMobileFull}
-                  onContextMenu={(evt: any) => evt.stopPropagation()}
+                  onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
                >
                  <ImageViewer
                    src={viewAvatar}
@@ -110,6 +111,8 @@ type UserHeroNameProps = {
  status?: string;
  pronouns?: string;
  timezone?: string;
+  /** [Gitea #150] Presence for the "Active now / Last active …" line. */
+  presence?: UserPresence;
 };
 export function UserHeroName({
  displayName,
@@ -117,7 +120,9 @@ export function UserHeroName({
  status,
  pronouns,
  timezone,
+  presence,
 }: UserHeroNameProps) {
+  const lastActive = describeLastActive(presence);
  const username = getMxIdLocalPart(userId);
  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
  const localTimeInfo = useLocalTime(timezone, !hour24Clock);
@@ -158,6 +163,13 @@ export function UserHeroName({
          </Text>
        </Box>
      )}
+      {lastActive && (
+        <Box alignItems="Center" gap="100" style={{ marginTop: '1px', overflow: 'hidden' }}>
+          <Text size="T200" style={{ opacity: 0.6 }}>
+            {lastActive}
+          </Text>
+        </Box>
+      )}
      {status && (
        <Box alignItems="Center" gap="100" style={{ marginTop: '2px', overflow: 'hidden' }}>
          <Text
@@ -6,9 +6,7 @@ import { SettingTile } from '../setting-tile';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
-import { timeDayMonYear, timeHourMinute } from '../../utils/time';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';

 type UserKickAlertProps = {
  reason?: string;
@@ -16,11 +14,8 @@ type UserKickAlertProps = {
  ts?: number;
 };
 export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+  const { format } = useTimestampFormatter();
+  const when = ts ? format(ts) : undefined;

  return (
    <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
@@ -28,11 +23,7 @@ export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
        <Box direction="Column" gap="200">
          <Box gap="200" justifyContent="SpaceBetween">
            <Text size="L400">Kicked User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
+            {when && <Text size="T200">{when}</Text>}
          </Box>
          <Box direction="Column">
            {kickedBy && (
@@ -66,11 +57,8 @@ type UserBanAlertProps = {
 export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
  const mx = useMatrixClient();
  const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+  const { format } = useTimestampFormatter();
+  const when = ts ? format(ts) : undefined;

  const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
    useCallback(async () => {
@@ -86,11 +74,7 @@ export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBan
        <Box direction="Column" gap="200">
          <Box gap="200" justifyContent="SpaceBetween">
            <Text size="L400">Banned User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
+            {when && <Text size="T200">{when}</Text>}
          </Box>
          <Box direction="Column">
            {bannedBy && (
@@ -141,11 +125,8 @@ type UserInviteAlertProps = {
 export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
  const mx = useMatrixClient();
  const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
+  const { format } = useTimestampFormatter();
+  const when = ts ? format(ts) : undefined;

  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
    useCallback(async () => {
@@ -161,11 +142,7 @@ export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: User
        <Box direction="Column" gap="200">
          <Box gap="200" justifyContent="SpaceBetween">
            <Text size="L400">Invited User</Text>
-            {time && date && (
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
+            {when && <Text size="T200">{when}</Text>}
          </Box>
          <Box direction="Column">
            {invitedBy && (
@@ -371,6 +371,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
              displayName={displayName}
              userId={userId}
              status={presence?.status}
+              presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
              pronouns={extProfile.pronouns}
              timezone={extProfile.timezone}
            />
@@ -35,19 +35,8 @@ import { nameInitials } from '../../utils/common';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { stopPropagation } from '../../utils/keyboard';
 import * as css from './BookmarksPanel.css';
-
-function formatTimeAgo(ts: number): string {
-  const diff = Date.now() - ts;
-  const minutes = Math.floor(diff / 60_000);
-  if (minutes < 1) return 'just now';
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days === 1) return 'yesterday';
-  if (days < 7) return `${days}d ago`;
-  return new Date(ts).toLocaleDateString();
-}
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
+import { formatRelativeAge } from '../../utils/formatTimestamp';

 // Remember the last-chosen sort across panel opens (the panel unmounts on close).
 // getOnInit reads localStorage synchronously at init so the persisted sort is
@@ -110,7 +99,8 @@ function BookmarkItem({ bookmark, onJump, onRemove, preview, senderName }: Bookm
    : undefined;
  // Prefer a live-resolved author name, then the stored snapshot.
  const author = senderName ?? bookmark.senderName;
-  const timeAgo = formatTimeAgo(bookmark.savedAt);
+  const { prefs } = useTimestampFormatter();
+  const timeAgo = formatRelativeAge(bookmark.savedAt, prefs);

  return (
    <Box
@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  config,
+  toRem,
+} from 'folds';
+import { CallEmbed } from '../../plugins/call';
+import { MobileTouchTarget } from '../../styles/mobile.css';
+import { stopPropagation } from '../../utils/keyboard';
+
+/** Output selection needs setSinkId; Firefox/Safari/Android Chrome lack it. */
+export const audioOutputSelectable = (): boolean =>
+  typeof HTMLMediaElement !== 'undefined' &&
+  'setSinkId' in HTMLMediaElement.prototype &&
+  typeof navigator !== 'undefined' &&
+  !!navigator.mediaDevices?.enumerateDevices;
+
+type OutputDevice = { id: string; label: string };
+
+/**
+ * [Gitea #119] Speaker button in the call bar: a small menu of audio outputs
+ * (headset ↔ speakers) without opening Settings. The choice goes to the fork
+ * as io.lotus.set_audio_output; the fork's own picker is unreachable here
+ * because the embed hides Element Call's footer.
+ */
+export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disabled?: boolean }) {
+  const [anchor, setAnchor] = useState<RectCords>();
+  const [devices, setDevices] = useState<OutputDevice[]>([]);
+  const [selected, setSelected] = useState<string | undefined>(embed.control.audioOutputId);
+
+  const refresh = useCallback(async () => {
+    try {
+      const all = await navigator.mediaDevices.enumerateDevices();
+      setDevices(
+        all
+          .filter((d) => d.kind === 'audiooutput')
+          .map((d, i) => ({ id: d.deviceId, label: d.label || `Output ${i + 1}` })),
+      );
+    } catch {
+      setDevices([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!anchor) return undefined;
+    refresh();
+    navigator.mediaDevices.addEventListener('devicechange', refresh);
+    return () => navigator.mediaDevices.removeEventListener('devicechange', refresh);
+  }, [anchor, refresh]);
+
+  const choose = (id: string) => {
+    embed.control.setAudioOutput(id);
+    setSelected(id);
+    setAnchor(undefined);
+  };
+
+  return (
+    <PopOut
+      anchor={anchor}
+      position="Top"
+      align="Center"
+      offset={6}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            // The list is enumerated after the menu opens; until then the only
+            // tabbable node is the menu itself.
+            fallbackFocus: '#call-audio-output-menu',
+            onDeactivate: () => setAnchor(undefined),
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu
+            id="call-audio-output-menu"
+            tabIndex={-1}
+            style={{ maxWidth: toRem(280), width: '100vw' }}
+            aria-label="Audio output"
+          >
+            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+              {devices.length === 0 && (
+                <Text size="T200" priority="300" style={{ padding: config.space.S200 }}>
+                  No audio outputs found.
+                </Text>
+              )}
+              {devices.map((d) => {
+                const isSelected = selected ? d.id === selected : d.id === 'default';
+                return (
+                  <MenuItem
+                    key={d.id}
+                    size="300"
+                    radii="300"
+                    role="menuitemradio"
+                    aria-checked={isSelected}
+                    after={isSelected ? <Icon size="100" src={Icons.Check} /> : undefined}
+                    onClick={() => choose(d.id)}
+                  >
+                    <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                      {d.label}
+                    </Text>
+                  </MenuItem>
+                );
+              })}
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <TooltipProvider
+        position="Top"
+        tooltip={
+          <Tooltip>
+            <Text size="T200">Audio output</Text>
+          </Tooltip>
+        }
+      >
+        {(tipRef) => (
+          <IconButton
+            ref={tipRef}
+            variant="Surface"
+            fill="Soft"
+            radii="300"
+            size="300"
+            className={MobileTouchTarget}
+            outlined
+            disabled={disabled}
+            aria-label="Audio output"
+            aria-haspopup="menu"
+            aria-expanded={!!anchor}
+            onClick={(e) => setAnchor(e.currentTarget.getBoundingClientRect())}
+          >
+            <Icon size="100" src={Icons.VolumeHigh} />
+          </IconButton>
+        )}
+      </TooltipProvider>
+    </PopOut>
+  );
+}
@@ -8,6 +8,7 @@ import { callEmbedAtom } from '../../state/callEmbed';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
 import { ScreenshareConfirm } from '../call/ScreenshareConfirm';
+import { AudioOutputButton, audioOutputSelectable } from './AudioOutputButton';

 type MicrophoneButtonProps = {
  enabled: boolean;
@@ -230,6 +231,9 @@ export function CallControl({
          onToggle={() => callEmbed.control.toggleSound()}
          disabled={!callJoined}
        />
+        {!compact && audioOutputSelectable() && (
+          <AudioOutputButton embed={callEmbed} disabled={!callJoined} />
+        )}
        {!compact && (showCamera || showScreenshare) && <StatusDivider />}
        {showCamera && (
          <VideoButton enabled={video} onToggle={handleVideoToggle} disabled={!callJoined} />
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, Spinner } from 'folds';
+import { Box, Spinner, Text, color } from 'folds';
+import { useAtomValue } from 'jotai';
 import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
 import * as css from './styles.css';
@@ -14,6 +15,8 @@ import { CallEmbed } from '../../plugins/call/CallEmbed';
 import { useCallJoined } from '../../hooks/useCallEmbed';
 import { useCallSpeakers } from '../../hooks/useCallSpeakers';
 import { MemberSpeaking } from './MemberSpeaking';
+import { clockSkewAtom } from '../../state/clockSkew';
+import { describeSkewVsServer } from '../../utils/clockSkew';

 type CallStatusProps = {
  callEmbed: CallEmbed;
@@ -26,6 +29,8 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
  const screenSize = useScreenSize();
  const callJoined = useCallJoined(callEmbed);
  const speakers = useCallSpeakers(callEmbed);
+  // [Gitea #158] Same warning as the top banner, where the user is looking during a call.
+  const clockSkew = useAtomValue(clockSkewAtom);

  const compact = screenSize === ScreenSize.Mobile;

@@ -51,6 +56,19 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
          {!compact && (
            <>
              <CallRoomName room={room} />
+              {clockSkew.warning && clockSkew.skewMs !== null && (
+                <>
+                  <StatusDivider />
+                  <Text
+                    size="T200"
+                    truncate
+                    style={{ color: color.Warning.Main }}
+                    title="Fix your computer's clock — calls and encryption depend on it"
+                  >
+                    Clock {describeSkewVsServer(clockSkew.skewMs)} — calls will fail
+                  </Text>
+                </>
+              )}
              {speakers.size > 0 && (
                <>
                  <StatusDivider />
@@ -41,7 +41,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
      className={css.CallMemberCard}
      variant="SurfaceVariant"
      radii="500"
-      onClick={(evt: any) =>
+      onClick={(evt: React.MouseEvent) =>
        openUserProfile(
          room.roomId,
          undefined,
@@ -0,0 +1,294 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Box,
+  Button,
+  Checkbox,
+  color,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useAtomValue, useSetAtom, useStore } from 'jotai';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useRoom } from '../../../hooks/useRoom';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useModalStyle } from '../../../hooks/useModalStyle';
+import { stopPropagation } from '../../../utils/keyboard';
+import { toastQueueAtom } from '../../../state/toast';
+import {
+  cancelRedactJob,
+  clearRedactJob,
+  hydrateRedactJob,
+  redactJobsAtom,
+  runRedactJob,
+} from '../../../state/redactOwnMessagesJob';
+import { collectOwnEventIds } from '../../../utils/redactOwnMessages';
+
+const TYPE_TO_CONFIRM_ABOVE = 50;
+
+type ConfirmDialogProps = {
+  onStart: (leaveAfter: boolean) => void;
+  requestClose: () => void;
+};
+
+/**
+ * Scan first (live count), then confirm with the number — typing the room name
+ * for > 50 — and an optional "leave the room afterwards".
+ */
+function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const modalStyle = useModalStyle(480);
+  const [count, setCount] = useState<number | null>(null);
+  const [scanError, setScanError] = useState<string>();
+  const [typed, setTyped] = useState('');
+  const [leaveAfter, setLeaveAfter] = useState(false);
+
+  useEffect(() => {
+    const ctrl = new AbortController();
+    setCount(null);
+    collectOwnEventIds(mx, room.roomId, mx.getSafeUserId(), (n) => setCount(n), ctrl.signal)
+      .then((ids) => setCount(ids.length))
+      .catch((e) => {
+        if (!ctrl.signal.aborted) setScanError(e instanceof Error ? e.message : String(e));
+      });
+    return () => ctrl.abort();
+  }, [mx, room.roomId]);
+
+  const scanning = count === null && !scanError;
+  const needsTyping = (count ?? 0) > TYPE_TO_CONFIRM_ABOVE;
+  const roomName = room.name ?? room.roomId;
+  const canStart =
+    !scanning && !scanError && (count ?? 0) > 0 && (!needsTyping || typed.trim() === roomName);
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: requestClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog variant="Surface" style={modalStyle}>
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text as="h2" size="H4">
+                  Delete all your messages
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              {scanning && (
+                <Box alignItems="Center" gap="200">
+                  <Spinner size="200" />
+                  <Text>
+                    Counting your messages in <b>{roomName}</b>…{' '}
+                    {count ? `${Number(count).toLocaleString()} so far` : ''}
+                  </Text>
+                </Box>
+              )}
+              {scanError && (
+                <Text style={{ color: color.Critical.Main }}>
+                  Couldn&apos;t count your messages: {scanError}
+                </Text>
+              )}
+              {!scanning && !scanError && (
+                <>
+                  <Text>
+                    Redact <b>{(count ?? 0).toLocaleString()}</b> messages you sent in{' '}
+                    <b>{roomName}</b>? This cannot be undone. Redactions are visible to others as
+                    &ldquo;message deleted&rdquo;, and files you uploaded stay on the server until
+                    an admin purges them.
+                  </Text>
+                  {needsTyping && (
+                    <Box direction="Column" gap="100">
+                      <Text size="L400">Type the room name to confirm</Text>
+                      <Input
+                        variant="Background"
+                        size="400"
+                        radii="300"
+                        value={typed}
+                        onChange={(e) => setTyped(e.currentTarget.value)}
+                        placeholder={roomName}
+                        aria-label="Room name confirmation"
+                      />
+                    </Box>
+                  )}
+                  <Box as="label" alignItems="Center" gap="200">
+                    <Checkbox
+                      variant="Critical"
+                      checked={leaveAfter}
+                      onClick={() => setLeaveAfter((v) => !v)}
+                      aria-label="Leave the room afterwards"
+                    />
+                    <Text>Leave the room afterwards</Text>
+                  </Box>
+                </>
+              )}
+              <Box gap="200" justifyContent="End">
+                <Button variant="Secondary" fill="Soft" onClick={requestClose}>
+                  <Text size="B400">Cancel</Text>
+                </Button>
+                <Button variant="Critical" disabled={!canStart} onClick={() => onStart(leaveAfter)}>
+                  <Text size="B400">Delete {count ? count.toLocaleString() : ''} messages</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
+/**
+ * [Gitea #169] Room Settings tile: "Your messages in this room" with a
+ * Delete all… flow. The job runs outside React (closing settings is fine),
+ * shows its progress here, persists so a reload can resume, and toasts when done.
+ */
+export function DeleteMyMessages() {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const store = useStore();
+  const setToast = useSetAtom(toastQueueAtom);
+  const jobs = useAtomValue(redactJobsAtom);
+  const job = jobs[room.roomId];
+  const [confirm, setConfirm] = useState(false);
+
+  // A reload mid-job: offer to resume.
+  useEffect(() => {
+    if (!jobs[room.roomId]) hydrateRedactJob(store, room.roomId);
+  }, [store, room.roomId, jobs]);
+
+  const start = useCallback(
+    (leaveAfter: boolean, resume?: boolean) => {
+      setConfirm(false);
+      const resumeState = resume ? jobs[room.roomId] : undefined;
+      const name = room.name ?? room.roomId;
+      runRedactJob(
+        store,
+        mx,
+        room.roomId,
+        {
+          leaveAfter,
+          onDone: (s) =>
+            setToast({
+              id: `redact-done-${room.roomId}`,
+              displayName: 'Lotus Chat',
+              body: `Deleted ${s.redacted.toLocaleString()} of your messages in ${name}${s.skipped ? ` (${s.skipped} already gone)` : ''}.`,
+              roomName: name,
+              roomId: room.roomId,
+            }),
+        },
+        resumeState,
+      );
+    },
+    [store, mx, room, jobs, setToast],
+  );
+
+  const running = job && (job.phase === 'collecting' || job.phase === 'redacting');
+  const total = job ? job.redacted + job.skipped + job.pending.length : 0;
+  const done = job ? job.redacted + job.skipped : 0;
+
+  let status: React.ReactNode = 'Redact everything you sent here — no moderator needed.';
+  if (job?.phase === 'collecting') status = `Counting… ${job.found.toLocaleString()} found`;
+  else if (job?.phase === 'redacting')
+    status = `Deleting… ${done.toLocaleString()} / ${total.toLocaleString()}`;
+  else if (job?.phase === 'error')
+    status = `Stopped: ${job.error}. ${job.pending.length} left — you can resume.`;
+  else if (job?.phase === 'cancelled' && job.pending.length > 0)
+    status = `Cancelled with ${job.pending.length.toLocaleString()} left — you can resume.`;
+  else if (job?.phase === 'done') status = `Deleted ${job.redacted.toLocaleString()} messages.`;
+
+  const resumable = job && !running && job.pending.length > 0;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Your messages in this room"
+        description={status}
+        after={
+          <Box gap="200">
+            {running && (
+              <Button
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                onClick={() => cancelRedactJob(room.roomId)}
+              >
+                <Text size="B300">Cancel</Text>
+              </Button>
+            )}
+            {resumable && (
+              <>
+                <Button
+                  size="300"
+                  variant="Critical"
+                  fill="Soft"
+                  radii="300"
+                  onClick={() => start(job.leaveAfter, true)}
+                >
+                  <Text size="B300">Resume</Text>
+                </Button>
+                <Button
+                  size="300"
+                  variant="Secondary"
+                  fill="None"
+                  radii="300"
+                  onClick={() => clearRedactJob(store, room.roomId)}
+                >
+                  <Text size="B300">Discard</Text>
+                </Button>
+              </>
+            )}
+            {!running && !resumable && (
+              <Button
+                size="300"
+                variant="Critical"
+                fill="Soft"
+                radii="300"
+                onClick={() => setConfirm(true)}
+              >
+                <Text size="B300">Delete all…</Text>
+              </Button>
+            )}
+          </Box>
+        }
+      />
+      {confirm && (
+        <ConfirmDialog onStart={(leave) => start(leave)} requestClose={() => setConfirm(false)} />
+      )}
+    </SequenceCard>
+  );
+}
@@ -40,10 +40,15 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { StateEvent } from '../../../../types/matrix/room';
 import { sendStateEvent } from '../../../utils/room';
+import { describeRoomVisibility } from '../../../utils/roomVisibilityLine';
+import { useStateEvent } from '../../../hooks/useStateEvent';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useObjectURL } from '../../../hooks/useObjectURL';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
+import { stripImageMetadata as stripImageMetadata_ } from '../../../utils/stripImageMetadata';
 import { useFilePicker } from '../../../hooks/useFilePicker';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
@@ -138,7 +143,19 @@ export function RoomProfileEdit({
    return undefined;
  }, [imageFile]);

-  const pickFile = useFilePicker(setImageFile, false);
+  // [Gitea #109] Avatars go through the same metadata strip as messages.
+  const [stripImageMetadata] = useSetting(settingsAtom, 'stripImageMetadata');
+  const pickFile = useFilePicker(
+    useCallback(
+      (file: File) => {
+        (stripImageMetadata ? stripImageMetadata_(file) : Promise.resolve({ file })).then((r) =>
+          setImageFile(r.file),
+        );
+      },
+      [stripImageMetadata],
+    ),
+    false,
+  );

  const handleRemoveUpload = useCallback(() => {
    setImageFile(undefined);
@@ -419,6 +436,14 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
  const name = useRoomName(room);
  const topic = useRoomTopic(room);
  const joinRule = useRoomJoinRule(room);
+  // [Gitea #133] One line, no controls: encryption · join rule · history.
+  const historyVisibilityEvent = useStateEvent(room, StateEvent.RoomHistoryVisibility);
+  const visibilityLine = describeRoomVisibility({
+    encrypted: room.hasEncryptionStateEvent(),
+    joinRule: joinRule?.join_rule,
+    historyVisibility: historyVisibilityEvent?.getContent<{ history_visibility?: string }>()
+      .history_visibility,
+  });

  const canEditAvatar = permissions.stateEvent(StateEvent.RoomAvatar, mx.getSafeUserId());
  const canEditName = permissions.stateEvent(StateEvent.RoomName, mx.getSafeUserId());
@@ -459,6 +484,9 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
                <Text className={BreakWord} size="H5">
                  {name ?? 'Unknown'}
                </Text>
+                <Text size="T200" priority="300" className={BreakWord}>
+                  {visibilityLine}
+                </Text>
                {topic && (
                  <Text className={classNames(BreakWord, LineClamp3)} size="T200">
                    {topic.format === 'org.matrix.custom.html' &&
@@ -65,6 +65,7 @@ export function RoomVoiceLimit({ permissions }: RoomVoiceLimitProps) {
            <Input
              key={maxUsers}
              name="limitInput"
+              aria-label="Voice channel participant limit"
              defaultValue={maxUsers}
              type="number"
              min={0}
@@ -9,3 +9,4 @@ export * from './RoomRetention';
 export * from './RoomShareInvite';
 export * from './RoomUpgrade';
 export * from './RoomVoiceLimit';
+export * from './DeleteMyMessages';
@@ -52,6 +52,7 @@ import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';

 const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
  useMemo(
@@ -74,6 +75,7 @@ type EncryptedRoomCachePanelProps = {
 };
 function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelProps) {
  const mx = useMatrixClient();
+  const { format } = useTimestampFormatter();
  const [loadingRooms, setLoadingRooms] = useState<Set<string>>(new Set());

  const encryptedRooms = useMemo(
@@ -140,7 +142,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
              </Text>
              <Text size="T200" priority="300">
                {msgEvents.length > 0
-                  ? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
+                  ? `${msgEvents.length} messages cached · oldest: ${format(oldest!.getTs(), 'date')}`
                  : 'No messages cached yet'}
              </Text>
            </Box>
@@ -246,8 +248,15 @@ export function MessageSearch({
  const [cacheVersion, setCacheVersion] = useState(0);
  const handleCacheLoaded = useCallback(() => setCacheVersion((v) => v + 1), []);
  // Explicit wipe of the persistent on-disk index, then re-run the merge.
+  // After a clear, the active search re-runs (cacheVersion) and would persist
+  // the in-memory rows straight back — skip that one write so "Clear cached
+  // index" actually leaves the disk empty until the next new search.
+  const skipPersistOnceRef = useRef(false);
  const handleClearSearchCache = useCallback(() => {
-    clearSearchCache().then(() => setCacheVersion((v) => v + 1));
+    clearSearchCache().then(() => {
+      skipPersistOnceRef.current = true;
+      setCacheVersion((v) => v + 1);
+    });
  }, []);

  // The rooms actually in scope for this search (mirrors server-side logic)
@@ -277,12 +286,15 @@ export function MessageSearch({
      return undefined;
    }
    let cancelled = false;
+    const persist = !skipPersistOnceRef.current;
+    skipPersistOnceRef.current = false;
    searchLocalMessages({
      term: msgSearchParams.term ?? '',
      roomIds: localSearchRooms,
      senders: msgSearchParams.senders,
      fromTs: msgSearchParams.fromTs,
      toTs: msgSearchParams.toTs,
+      persist,
    }).then((result) => {
      if (!cancelled) setLocalResult(result);
    });
@@ -18,6 +18,12 @@ export type LocalSearchParams = {
  /** Optional date-range filter (ms). Applied to both memory and cached rows. */
  fromTs?: number;
  toTs?: number;
+  /**
+   * Set false to run the scan without writing it back to IndexedDB — used
+   * right after "Clear cached index" so the clear is not undone by the
+   * re-run of the active search (Gitea #184 O4).
+   */
+  persist?: boolean;
 };

 export type LocalSearchResult = {
@@ -149,6 +155,7 @@ export const useLocalMessageSearch = () => {
      senders,
      fromTs,
      toTs,
+      persist = true,
    }: LocalSearchParams): Promise<LocalSearchResult> => {
      const trimmedTerm = term.trim();
      const senderSet = senders && senders.length > 0 ? new Set(senders) : null;
@@ -302,7 +309,7 @@ export const useLocalMessageSearch = () => {
        // Fire-and-forget persist of freshly scanned rows + coverage.
        // saveRoomIndex swallows all errors internally, so a floating promise
        // here can never reject.
-        if (cacheEnabled && rowsToPersist.length > 0) {
+        if (cacheEnabled && persist && rowsToPersist.length > 0) {
          saveRoomIndex(roomId, rowsToPersist);
        }
      }
@@ -23,6 +23,7 @@ import {
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
+  color,
  config,
  PopOut,
  toRem,
@@ -30,18 +31,29 @@ import {
  RectCords,
  Badge,
  Spinner,
+  Tooltip,
+  TooltipProvider,
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import dayjs from 'dayjs';
-import isToday from 'dayjs/plugin/isToday';
-import isYesterday from 'dayjs/plugin/isYesterday';
+import {
+  isSectionTag,
+  listSectionNames,
+  sectionName,
+  sectionTag,
+  validateSectionName,
+} from '../../utils/roomSections';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl, getStateEvent } from '../../utils/room';
+import {
+  getDirectRoomAvatarUrl,
+  getMemberName,
+  getRoomAvatarUrl,
+  getStateEvent,
+} from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
@@ -90,29 +102,11 @@ import { MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { webRTCSupported } from '../../utils/rtc';
 import { useRoomLatestRenderedEvent } from '../../hooks/useRoomLatestRenderedEvent';
 import { EmojiBoard } from '../../components/emoji-board';
-
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
+import { formatShortAge } from '../../utils/formatTimestamp';

 const PREVIEW_MAX_CHARS = 48;

-function formatDmTimestamp(ts: number): string {
-  const d = dayjs(ts);
-  const now = dayjs();
-  const diffMinutes = now.diff(d, 'minute');
-  if (diffMinutes < 60) {
-    return `${diffMinutes < 1 ? 0 : diffMinutes}m`;
-  }
-  const diffHours = now.diff(d, 'hour');
-  if (diffHours < 24) {
-    return `${diffHours}h`;
-  }
-  if (d.isYesterday()) {
-    return 'Yesterday';
-  }
-  return d.format('D MMM');
-}
-
 type RenameRoomDialogProps = {
  room: Room;
  onClose: () => void;
@@ -291,6 +285,14 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(

    const [invitePrompt, setInvitePrompt] = useState(false);
    const [muteMenuAnchor, setMuteMenuAnchor] = useState<RectCords>();
+    // [Gitea #108] "Add to section" submenu: existing u.* sections + new one.
+    const [sectionMenuAnchor, setSectionMenuAnchor] = useState<RectCords>();
+    const [newSectionName, setNewSectionName] = useState('');
+    const [newSectionError, setNewSectionError] = useState<string>();
+    const sectionNames = useMemo(() => listSectionNames(mx), [mx]);
+    const roomSections = Object.keys(room.tags ?? {})
+      .filter(isSectionTag)
+      .map(sectionName);
    const isServerNotice = room.getType() === 'm.server_notice';

    const isFavorite = !!room.tags?.['m.favourite'];
@@ -330,6 +332,25 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
      requestClose();
    };

+    const handleToggleSection = (name: string) => {
+      const tag = sectionTag(name);
+      const op = room.tags?.[tag]
+        ? mx.deleteRoomTag(room.roomId, tag)
+        : mx.setRoomTag(room.roomId, tag, { order: 0.5 });
+      op.catch(notifyTagFailure);
+      requestClose();
+    };
+
+    const handleNewSection = (evt: React.FormEvent) => {
+      evt.preventDefault();
+      const error = validateSectionName(newSectionName, sectionNames);
+      if (error) {
+        setNewSectionError(error);
+        return;
+      }
+      handleToggleSection(newSectionName.trim());
+    };
+
    const markedUnread = useAtomValue(markedUnreadAtom).has(room.roomId);

    const handleMarkAsRead = () => {
@@ -512,6 +533,97 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
              {isLowPriority ? 'Remove from Low Priority' : 'Add to Low Priority'}
            </Text>
          </MenuItem>
+          <PopOut
+            anchor={sectionMenuAnchor}
+            position="Right"
+            align="Start"
+            offset={4}
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setSectionMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu style={{ maxWidth: toRem(220), width: '100vw' }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                    {sectionNames.map((name) => {
+                      const inSection = roomSections.includes(name);
+                      return (
+                        <MenuItem
+                          key={name}
+                          size="300"
+                          radii="300"
+                          role="menuitemcheckbox"
+                          aria-checked={inSection}
+                          after={inSection ? <Icon size="100" src={Icons.Check} /> : undefined}
+                          onClick={() => handleToggleSection(name)}
+                        >
+                          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                            {name}
+                          </Text>
+                        </MenuItem>
+                      );
+                    })}
+                    {sectionNames.length > 0 && <Line variant="Surface" size="300" />}
+                    <Box
+                      as="form"
+                      direction="Column"
+                      gap="100"
+                      onSubmit={handleNewSection}
+                      style={{ padding: config.space.S100 }}
+                    >
+                      <Input
+                        size="300"
+                        variant="Background"
+                        radii="300"
+                        placeholder="New section…"
+                        aria-label="New section name"
+                        value={newSectionName}
+                        onChange={(e) => {
+                          setNewSectionName(e.currentTarget.value);
+                          setNewSectionError(undefined);
+                        }}
+                        after={
+                          <IconButton
+                            type="submit"
+                            size="300"
+                            radii="300"
+                            variant="Background"
+                            aria-label="Create section"
+                          >
+                            <Icon size="100" src={Icons.Plus} />
+                          </IconButton>
+                        }
+                      />
+                      {newSectionError && (
+                        <Text size="T200" style={{ color: color.Critical.Main }}>
+                          {newSectionError}
+                        </Text>
+                      )}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <MenuItem
+              size="300"
+              after={<Icon size="100" src={Icons.ChevronRight} />}
+              radii="300"
+              aria-pressed={!!sectionMenuAnchor}
+              aria-haspopup="menu"
+              onClick={(e) => setSectionMenuAnchor(e.currentTarget.getBoundingClientRect())}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                {roomSections.length > 0
+                  ? `Sections: ${roomSections.join(', ')}`
+                  : 'Add to Section'}
+              </Text>
+            </MenuItem>
+          </PopOut>
          <MenuItem
            onClick={handleInvite}
            variant="Primary"
@@ -639,6 +751,7 @@ function RoomNavItem_({

  const roomName = useLocalRoomName(room);
  const hasLocalName = useHasLocalRoomName(room.roomId);
+  const { prefs } = useTimestampFormatter();

  // Whether this room has an unsent message draft. selectAtom maps to a boolean
  // so the row only re-renders when that flips (the draft atom itself is written
@@ -670,7 +783,7 @@ function RoomNavItem_({
    }
    if (!body) return null;
    const preview = body.length > PREVIEW_MAX_CHARS ? `${body.slice(0, PREVIEW_MAX_CHARS)}…` : body;
-    return { preview, time: formatDmTimestamp(ts) };
+    return { preview, time: formatShortAge(ts, prefs) };
  })();

  const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
@@ -690,6 +803,14 @@ function RoomNavItem_({
  const optionsVisible = hover || !!menuAnchor;
  const callSession = useCallSession(room);
  const callMembers = useCallMembers(callSession);
+  const liveNames = useMemo(() => {
+    const names = Array.from(
+      new Set(callMembers.map((m) => m.sender).filter((u): u is string => !!u)),
+    ).map((u) => getMemberName(room, u));
+    const shown = names.slice(0, 6);
+    const more = names.length - shown.length;
+    return more > 0 ? `${shown.join(', ')} and ${more} more` : shown.join(', ');
+  }, [callMembers, room]);
  const startCall = useCallStart(direct);
  const callEmbed = useCallEmbed();
  // [Gitea #30] Same voice-limit check the call prescreen uses, so the sidebar
@@ -853,11 +974,32 @@ function RoomNavItem_({
              />
            )}
            {callMembers.length > 0 && (
-              <Badge variant="Critical" fill="Solid" size="400">
-                <Text as="span" size="L400" truncate>
-                  {callMembers.length} Live
-                </Text>
-              </Badge>
+              // [Gitea #157] The count alone doesn't tell you whether it's your
+              // squad — name the people on hover/focus (long-press on touch).
+              <TooltipProvider
+                position="Right"
+                delay={300}
+                tooltip={
+                  <Tooltip>
+                    <Text size="T200">{liveNames}</Text>
+                  </Tooltip>
+                }
+              >
+                {(tipRef) => (
+                  <Badge
+                    ref={tipRef}
+                    variant="Critical"
+                    fill="Solid"
+                    size="400"
+                    tabIndex={0}
+                    aria-label={`${callMembers.length} in call: ${liveNames}`}
+                  >
+                    <Text as="span" size="L400" truncate>
+                      {callMembers.length} Live
+                    </Text>
+                  </Badge>
+                )}
+              </TooltipProvider>
            )}
          </Box>
        </NavItemContent>
@@ -9,6 +9,8 @@ import {
  createDetachedTimelineSet,
  createTypesFilter,
 } from '../../utils/detachedTimeline';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
+import { formatRelativeAge } from '../../utils/formatTimestamp';

 // ── Types ─────────────────────────────────────────────────────────────────────

@@ -27,20 +29,6 @@ type StateEventType = (typeof STATE_EVENT_TYPES)[number];

 // ── Timestamp formatting ──────────────────────────────────────────────────────

-function formatRelativeTs(ts: number): string {
-  const diff = Date.now() - ts;
-  if (diff < 60000) return 'just now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  const d = new Date(ts);
-  const sameYear = d.getFullYear() === new Date().getFullYear();
-  return d.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    ...(sameYear ? {} : { year: 'numeric' }),
-  });
-}
-
 // ── Event description ─────────────────────────────────────────────────────────

 function getDisplayName(mx: ReturnType<typeof useMatrixClient>, userId: string): string {
@@ -296,6 +284,7 @@ type LogEntryProps = {
 };

 function LogEntry({ ev, desc }: LogEntryProps) {
+  const { prefs } = useTimestampFormatter();
  return (
    <Box
      alignItems="Center"
@@ -326,7 +315,7 @@ function LogEntry({ ev, desc }: LogEntryProps) {
          {desc.text}
        </Text>
        <Text size="T200" priority="300">
-          {formatRelativeTs(ev.getTs())}
+          {formatRelativeAge(ev.getTs(), prefs)}
        </Text>
      </Box>
    </Box>
@@ -9,21 +9,10 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { getMemberAvatarMxc, getMemberName } from '../../utils/room';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { UserAvatar } from '../../components/user-avatar';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';

 // ── Helpers ───────────────────────────────────────────────────────────────────

-function formatDate(ts: number): string {
-  return new Date(ts).toLocaleDateString(undefined, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
-}
-
-function formatUpdatedAt(ts: number): string {
-  return new Date(ts).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
-}
-
 // Throttle window for re-computing stats on new timeline events - avoids
 // re-running every heatmap/list computation on every single incoming message
 // during a burst.
@@ -74,6 +63,7 @@ type RoomInsightsProps = {
 };

 export function RoomInsights({ requestClose }: RoomInsightsProps) {
+  const { format } = useTimestampFormatter();
  const mx = useMatrixClient();
  const room = useRoom();
  const useAuthentication = useMediaAuthentication();
@@ -234,11 +224,11 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                  </Text>
                  {stats.oldestTs !== null && stats.newestTs !== null && (
                    <Text size="T200" priority="300">
-                      from {formatDate(stats.oldestTs)} to {formatDate(stats.newestTs)}
+                      from {format(stats.oldestTs, 'date')} to {format(stats.newestTs, 'date')}
                    </Text>
                  )}
                  <Text size="T200" priority="300">
-                    Last updated {formatUpdatedAt(lastUpdated)}
+                    Last updated {format(lastUpdated, 'time')}
                  </Text>
                </Box>
                <Box shrink="No">
@@ -15,6 +15,7 @@ import {
  RoomRetention,
  RoomShareInvite,
  RoomUpgrade,
+  DeleteMyMessages,
  RoomVoiceLimit,
 } from '../../common-settings/general';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
@@ -79,6 +80,10 @@ export function General({ requestClose }: GeneralProps) {
                <Text size="L400">Advanced Options</Text>
                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Privacy</Text>
+                <DeleteMyMessages />
+              </Box>
            </Box>
          </PageContent>
        </Scroll>
@@ -17,7 +17,7 @@ import {
  color,
  config,
 } from 'folds';
-import { MatrixClient, MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
+import { MatrixEvent, MsgType, Room } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
 import { useNearViewport } from '../../hooks/useNearViewport';
@@ -26,7 +26,8 @@ import { usePan, Pan } from '../../hooks/usePan';
 import { IEncryptedFile, IImageInfo, IThumbnailContent } from '../../../types/matrix/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../utils/matrix';
+import { useDecryptedMediaUrl } from '../../hooks/useDecryptedMediaUrl';
+import { getThumbMxc } from '../../utils/mediaThumb';
 import { AudioContent, FileDownloadButton } from '../../components/message';
 import { MediaControl } from '../../components/media';
 import { getBlobSafeMimeType, mimeTypeToExt } from '../../utils/mimeTypes';
@@ -35,6 +36,8 @@ import { useRoomMediaTimeline } from '../../hooks/useRoomMediaTimeline';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { stopPropagation } from '../../utils/keyboard';
 import * as css from './MediaGallery.css';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
+import { formatRelativeAge } from '../../utils/formatTimestamp';

 type GalleryTab = 'image' | 'video' | 'file' | 'audio';

@@ -54,81 +57,8 @@ const TAB_MSGTYPES: Record<GalleryTab, MsgType> = {

 // ── Decrypt hook ──────────────────────────────────────────────────────────────

-type DecryptState = { status: 'loading' } | { status: 'ok'; url: string } | { status: 'error' };
-
-function useDecryptedMediaUrl(
-  mx: MatrixClient,
-  mxcUrl: string | undefined,
-  encInfo: IEncryptedFile | undefined,
-  useAuthentication: boolean,
-  mimeType?: string,
-  enabled = true,
-): DecryptState {
-  const [state, setState] = useState<DecryptState>({ status: 'loading' });
-  const prevBlobUrl = useRef<string | null>(null);
-
-  useEffect(() => {
-    if (!enabled) return undefined;
-    if (!mxcUrl) {
-      setState({ status: 'error' });
-      return;
-    }
-    let cancelled = false;
-    setState({ status: 'loading' });
-
-    const run = async () => {
-      const httpUrl = mxcUrlToHttp(mx, mxcUrl, useAuthentication);
-      if (!httpUrl) throw new Error('bad url');
-      if (encInfo) {
-        const blob = await downloadEncryptedMedia(httpUrl, (buf) =>
-          decryptFile(buf, mimeType ?? 'application/octet-stream', encInfo),
-        );
-        const blobUrl = URL.createObjectURL(blob);
-        if (cancelled) {
-          URL.revokeObjectURL(blobUrl);
-          return;
-        }
-        if (prevBlobUrl.current) URL.revokeObjectURL(prevBlobUrl.current);
-        prevBlobUrl.current = blobUrl;
-        setState({ status: 'ok', url: blobUrl });
-      } else {
-        setState({ status: 'ok', url: httpUrl });
-      }
-    };
-
-    run().catch(() => {
-      if (!cancelled) setState({ status: 'error' });
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [mx, mxcUrl, encInfo, useAuthentication, mimeType, enabled]);
-
-  useEffect(
-    () => () => {
-      if (prevBlobUrl.current) URL.revokeObjectURL(prevBlobUrl.current);
-    },
-    [],
-  );
-
-  return state;
-}
-
 // ── Helpers ───────────────────────────────────────────────────────────────────

-function formatRelativeDate(ts: number): string {
-  const diff = Date.now() - ts;
-  const mins = Math.floor(diff / 60000);
-  if (mins < 2) return 'Just now';
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(diff / 3600000);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(diff / 86400000);
-  if (days < 7) return `${days}d ago`;
-  return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-}
-
 function formatBytes(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -164,16 +94,10 @@ function getSenderName(room: Room, userId: string): string {
 // the grid and the lightbox must use this so their positional indices stay in
 // lockstep — otherwise a tile skipped for lack of a thumb would shift the
 // lightbox and open the wrong media.
-function getThumbMxc(mEvent: MatrixEvent): string | undefined {
-  const c = mEvent.getContent();
-  const isEnc = !!c.file;
-  const info: (IImageInfo & IThumbnailContent) | undefined = c.info;
-  return isEnc ? (info?.thumbnail_file?.url ?? c.file?.url) : (info?.thumbnail_url ?? c.url);
-}

 // ── Lightbox ──────────────────────────────────────────────────────────────────

-type LightboxItem = {
+export type LightboxItem = {
  mxcUrl: string;
  encInfo?: IEncryptedFile;
  mimeType?: string;
@@ -184,6 +108,35 @@ type LightboxItem = {
  eventId: string;
 };

+/**
+ * Images + videos of a media timeline as lightbox slots. Shared with the
+ * timeline's viewer (#219) so both open the same items in the same order.
+ */
+export function toLightboxItems(room: Room, events: MatrixEvent[]): LightboxItem[] {
+  return events
+    .filter((ev) => {
+      const c = ev.getContent();
+      if (c.msgtype !== MsgType.Image && c.msgtype !== MsgType.Video) return false;
+      // Match the grid's guard exactly: tiles without a thumb are not rendered,
+      // so they must not occupy a lightbox slot either.
+      return !!getThumbMxc(ev);
+    })
+    .map((ev) => {
+      const c = ev.getContent();
+      const isEnc = !!c.file;
+      return {
+        mxcUrl: c.file?.url ?? c.url ?? '',
+        encInfo: isEnc ? c.file : undefined,
+        mimeType: c.info?.mimetype,
+        msgtype: c.msgtype as MsgType.Image | MsgType.Video,
+        body: c.body ?? '',
+        sender: getSenderName(room, ev.getSender() ?? ''),
+        ts: ev.getTs(),
+        eventId: ev.getId() ?? '',
+      };
+    });
+}
+
 function LightboxMedia({
  item,
  useAuthentication,
@@ -280,7 +233,7 @@ function LightboxMedia({
  );
 }

-function Lightbox({
+export function Lightbox({
  items,
  initialIndex,
  useAuthentication,
@@ -294,6 +247,7 @@ function Lightbox({
  onJump: (eventId: string) => void;
 }) {
  const [index, setIndex] = useState(initialIndex);
+  const { format } = useTimestampFormatter();

  const item = items[index];
  const isImage = item?.msgtype === MsgType.Image;
@@ -302,6 +256,7 @@ function Lightbox({
  // Pan is only active for a zoomed-in image; usePan resets its offset when this
  // flips false (i.e. back to 1x, on navigation, or on a video).
  const { pan, cursor, onMouseDown, onTouchStart } = usePan(isImage && zoom !== 1);
+  const dialogRef = useRef<HTMLDivElement>(null);
  const toggleZoom = useCallback(() => setZoom((z) => (z === 1 ? 2 : 1)), [setZoom]);

  // Reset zoom when navigating to another item (and thus pan, via usePan).
@@ -336,22 +291,23 @@ function Lightbox({

  if (!item) return null;

-  const dateStr = new Date(item.ts).toLocaleDateString(undefined, {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  });
+  const dateStr = format(item.ts, 'date');

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <FocusTrap
        focusTrapOptions={{
-          initialFocus: false,
+          // Focus the dialog itself on open: with `initialFocus: false` focus
+          // stayed on the gallery tile behind the overlay, so ←/→/Esc/+/-
+          // (handled by onKeyDown below) did nothing until the user clicked
+          // inside the viewer (Gitea #164).
+          initialFocus: () => dialogRef.current ?? false,
          clickOutsideDeactivates: false,
          escapeDeactivates: false,
        }}
      >
        <div
+          ref={dialogRef}
          role="dialog"
          aria-modal
          aria-label="Media viewer"
@@ -579,7 +535,8 @@ function GalleryTile({
    mimeType,
    nearViewport,
  );
-  const relDate = formatRelativeDate(ts);
+  const { prefs } = useTimestampFormatter();
+  const relDate = formatRelativeAge(ts, prefs);

  return (
    <div className={css.GalleryTileWrap}>
@@ -689,6 +646,7 @@ type MediaGalleryProps = {
 };

 export function MediaGallery({ room, onClose }: MediaGalleryProps) {
+  const { prefs } = useTimestampFormatter();
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const { navigateRoom } = useRoomNavigate();
@@ -759,28 +717,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
  }, [canLoadMore, loading, handleLoadMore]);

  // Lightbox items (images + videos, flat)
-  const lightboxItems: LightboxItem[] = events
-    .filter((ev) => {
-      const c = ev.getContent();
-      if (c.msgtype !== MsgType.Image && c.msgtype !== MsgType.Video) return false;
-      // Match the grid's guard exactly: tiles without a thumb are not rendered,
-      // so they must not occupy a lightbox slot either.
-      return !!getThumbMxc(ev);
-    })
-    .map((ev) => {
-      const c = ev.getContent();
-      const isEnc = !!c.file;
-      return {
-        mxcUrl: c.file?.url ?? c.url ?? '',
-        encInfo: isEnc ? c.file : undefined,
-        mimeType: c.info?.mimetype,
-        msgtype: c.msgtype as MsgType.Image | MsgType.Video,
-        body: c.body ?? '',
-        sender: getSenderName(room, ev.getSender() ?? ''),
-        ts: ev.getTs(),
-        eventId: ev.getId() ?? '',
-      };
-    });
+  const lightboxItems: LightboxItem[] = toLightboxItems(room, events);

  // Per-tab counts for the tab labels (single pass over the loaded media)
  const tabCounts = useMemo(() => {
@@ -1026,7 +963,7 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
                      if (!url) return null;
                      const body: string = c.body || 'Voice message';
                      const sender = getSenderName(room, mEvent.getSender() ?? '');
-                      const relDate = formatRelativeDate(mEvent.getTs());
+                      const relDate = formatRelativeAge(mEvent.getTs(), prefs);
                      // Sanitize the mimetype the way MAudio does (e.g. application/ogg →
                      // audio/ogg) so the decrypted blob actually plays.
                      const mimeType = getBlobSafeMimeType(c.info?.mimetype ?? 'audio/ogg');
@@ -31,6 +31,8 @@ import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 import { useSetAtom } from 'jotai';
+import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { Membership } from '../../../types/matrix/room';

@@ -79,6 +81,8 @@ type MemberDrawerHeaderProps = {
 };
 function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const setMobileMembers = useSetAtom(mobileMembersPanelAtom);
+  const screenSize = useScreenSizeContext();

  return (
    <Header className={css.MembersDrawerHeader} variant="Background" size="600">
@@ -104,7 +108,10 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
                ref={triggerRef}
                variant="Background"
                aria-label="Close member list"
-                onClick={() => setPeopleDrawer(false)}
+                onClick={() => {
+                  if (screenSize === ScreenSize.Mobile) setMobileMembers(false);
+                  else setPeopleDrawer(false);
+                }}
              >
                <Icon src={Icons.Cross} />
              </IconButton>
@@ -2,14 +2,16 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { MediaGallery } from './MediaGallery';
 import { mediaGalleryAtom } from '../../state/mediaGallery';
 import { WidgetsPanel } from './widgets/WidgetsPanel';
 import { widgetsPanelAtom } from '../../state/widgetsPanel';
+import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
@@ -46,6 +48,7 @@ export function Room() {
  const galleryOpen = useAtomValue(mediaGalleryAtom);
  const setGalleryOpen = useSetAtom(mediaGalleryAtom);
  const widgetsOpen = useAtomValue(widgetsPanelAtom);
+  const [mobileMembersOpen, setMobileMembersOpen] = useAtom(mobileMembersPanelAtom);
  const setWidgetsOpen = useSetAtom(widgetsPanelAtom);
  const threadsListOpen = useAtomValue(threadsListAtom);
  const setThreadsListOpen = useSetAtom(threadsListAtom);
@@ -146,10 +149,22 @@ export function Room() {
    threadsListOpen &&
    !activeThreadId &&
    (isDesktop || (!galleryOpen && !widgetsOpen));
+  // Desktop: the persisted drawer preference. Mobile: a transient panel the
+  // user opened from the header menu (never the desktop default).
+  // [Gitea #218] Three right-hand columns (timeline + thread/gallery/widgets
+  // panel + member drawer) don't fit under ~1500 px — both composers shrank to
+  // a few characters. Like Element, the member drawer yields to the content
+  // panel on narrower desktops and comes back when it closes.
+  const narrowDesktop = useMediaQuery('(max-width: 1500px)');
+  const contentPanelOpen = showThreadPanel || showGallery || showWidgets || showThreadsList;
  const showMembers =
    !callView &&
-    isDrawer &&
-    (isDesktop || (!activeThreadId && !galleryOpen && !widgetsOpen && !threadsListOpen));
+    (isDesktop
+      ? isDrawer && !(narrowDesktop && contentPanelOpen)
+      : mobileMembersOpen && !activeThreadId && !galleryOpen && !widgetsOpen && !threadsListOpen);
+
+  // Leaving a room on a phone closes its member panel.
+  useEffect(() => () => setMobileMembersOpen(false), [room.roomId, setMobileMembersOpen]);

  return (
    <PowerLevelsContextProvider value={powerLevels}>
@@ -95,7 +95,8 @@ import {
  createUploadFamilyObserverAtom,
 } from '../../state/upload';
 import { getImageUrlBlob, loadImageElement } from '../../utils/dom';
-import { safeFile } from '../../utils/mimeTypes';
+import { filesToUploadItems } from '../../utils/uploadItems';
+import { ReplyMediaThumb, hasReplyMedia } from '../../components/message/ReplyMediaThumb';
 import { fulfilledPromiseSettledResult } from '../../utils/common';
 import { useSetting } from '../../state/hooks/settings';
 import { useAlive } from '../../hooks/useAlive';
@@ -113,7 +114,14 @@ import {
 } from './msgContent';
 import { getMemberName, getMentionContent, trimReplyFromBody } from '../../utils/room';
 import { CommandAutocomplete } from './CommandAutocomplete';
-import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
+import {
+  Command,
+  CommandError,
+  SHRUG,
+  TABLEFLIP,
+  UNFLIP,
+  useCommands,
+} from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
 import { ReplyLayout, ThreadIndicator } from '../../components/message';
@@ -150,6 +158,13 @@ const EmojiBoard = React.lazy(() =>
 );

 /** [Gitea #37] Debounce for persisting the composer draft while typing. */
+/** [Gitea #129] Same picked file, allowing for re-wrapped File objects. */
+const isAutoFocusTarget = (file: TUploadContent, target: File | undefined): boolean =>
+  !!target &&
+  file instanceof File &&
+  file.name === target.name &&
+  file.lastModified === target.lastModified;
+
 const DRAFT_PERSIST_DEBOUNCE_MS = 500;

 interface RoomInputProps {
@@ -162,10 +177,21 @@ interface RoomInputProps {
  // message" handler). Threads pass a distinct name so the main timeline's handler
  // doesn't fire for the thread composer, and vice-versa.
  editableName?: string;
+  // [Gitea #218] Force the one-row "+ | input | emoji | send" layout regardless
+  // of viewport — the 360 px thread panel can't fit the full toolbar.
+  compactLayout?: boolean;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
  (
-    { editor, fileDropContainerRef, roomId, room, threadRootId, editableName = 'RoomInput' },
+    {
+      editor,
+      fileDropContainerRef,
+      roomId,
+      room,
+      threadRootId,
+      editableName = 'RoomInput',
+      compactLayout = false,
+    },
    ref,
  ) => {
    const mx = useMatrixClient();
@@ -207,6 +233,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(draftKey));
    const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(draftKey));
    const replyUserID = replyDraft?.userId;
+    // [Gitea #151] The quoted event, for a media thumbnail in the draft preview.
+    const replyDraftEvent = replyDraft ? room.findEventById(replyDraft.eventId) : undefined;

    const powerLevelTags = usePowerLevelTags(room, powerLevels);
    const creatorsTag = useRoomCreatorsTag();
@@ -232,6 +260,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
      selectedFiles.map((f) => f.file),
    );
    const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers | undefined>(undefined);
+    // [Gitea #129] The file whose caption input should take focus once its card mounts.
+    // (Matched by name + mtime: the metadata strip and safeFile may re-wrap the File.)
+    const autoFocusCaptionRef = useRef<File | undefined>(undefined);

    const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);

@@ -247,7 +278,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    // ten controls inline and clips the Send button behind the editor's
    // overflow:hidden. Touch-sized (44px) targets stay UA-gated: a narrow
    // desktop window still has a mouse.
-    const compact = isMobile || screenSize === ScreenSize.Mobile;
+    const compact = isMobile || screenSize === ScreenSize.Mobile || compactLayout;
    const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
    // Both gates on purpose: the class covers phone-width viewports (matches
    // VoiceMessageRecorder's idle button, which lives in the same row), the
@@ -261,6 +292,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const [gifPickerEnabled] = useSetting(settingsAtom, 'gifPickerEnabled');
    // [Gitea #103] Privacy: drop tracking params from links on paste and on send.
    const [stripTracking] = useSetting(settingsAtom, 'stripTrackingParams');
+    const [stripImageMetadata] = useSetting(settingsAtom, 'stripImageMetadata');
    const showGif = (composerToolbarButtons?.showGif ?? true) && gifPickerEnabled;
    const showLocation = composerToolbarButtons?.showLocation ?? true;
    const showPoll = composerToolbarButtons?.showPoll ?? true;
@@ -357,39 +389,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const handleFiles = useCallback(
      async (files: File[]) => {
        setUploadBoard(true);
-        const safeFiles = files.map(safeFile);
-        const fileItems: TUploadItem[] = [];
-
-        if (room.hasEncryptionStateEvent()) {
-          const encryptFiles = fulfilledPromiseSettledResult(
-            await Promise.allSettled(safeFiles.map((f) => encryptFile(f))),
-          );
-          encryptFiles.forEach((ef) =>
-            fileItems.push({
-              ...ef,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            }),
-          );
-        } else {
-          safeFiles.forEach((f) =>
-            fileItems.push({
-              file: f,
-              originalFile: f,
-              encInfo: undefined,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            }),
-          );
-        }
+        // [Gitea #129] One image into an empty composer: land in its caption
+        // field so "here's the bug" is one motion (Enter sends, Esc returns).
+        const focusCaption =
+          files.length === 1 && files[0].type.startsWith('image/') && isEmptyEditor(editor);
        setSelectedFiles({
          type: 'PUT',
-          item: fileItems,
+          item: await filesToUploadItems(room, files, stripImageMetadata),
        });
+        if (focusCaption) autoFocusCaptionRef.current = files[0];
      },
-      [setSelectedFiles, room],
+      [setSelectedFiles, room, stripImageMetadata, editor],
    );
    const pickFile = useFilePicker(handleFiles, true);
    const handleFilePaste = useFilePasteHandler(handleFiles);
@@ -665,16 +675,16 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
        const commandContent = commands[commandName as Command];
        if (commandContent) {
          // Fire-and-forget by design (the editor resets immediately for UX), but
-          // surface a rejection instead of failing silently. NOTE: /kick and /ban
-          // route through rateLimitedActions (utils/matrix.ts), whose to() helper
-          // swallows non-429 errors, so those two commands can still resolve even
-          // when the underlying kick/ban failed — this catch only covers errors
-          // that actually reject out of exe().
+          // surface a rejection instead of failing silently. /kick and /ban
+          // throw a CommandError whose message already names who and why
+          // (#216); anything else gets the generic sentence.
          commandContent.exe(plainText).catch((err) => {
            console.error(`Failed to run /${commandName} command:`, err);
            setToast(
              createErrorToast(
-                `The /${commandName} command failed. Please try again.`,
+                err instanceof CommandError
+                  ? err.message
+                  : `The /${commandName} command failed. Please try again.`,
                Icons.Warning,
                'Command failed',
              ),
@@ -1042,6 +1052,12 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                        fileItem={fileItem}
                        setMetadata={handleFileMetadata}
                        onRemove={handleRemoveUpload}
+                        autoFocusCaption={isAutoFocusTarget(
+                          fileItem.originalFile,
+                          autoFocusCaptionRef.current,
+                        )}
+                        onCaptionSubmit={submit}
+                        onCaptionEscape={() => ReactEditor.focus(editor)}
                      />
                    ))}
                </UploadBoardContent>
@@ -1167,9 +1183,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                        </Text>
                      }
                    >
-                      <Text size="T300" truncate>
-                        {trimReplyFromBody(replyDraft.body)}
-                      </Text>
+                      <Box alignItems="Center" gap="200" style={{ minWidth: 0 }}>
+                        {replyDraftEvent && hasReplyMedia(replyDraftEvent) && (
+                          <ReplyMediaThumb mEvent={replyDraftEvent} />
+                        )}
+                        <Text size="T300" truncate>
+                          {trimReplyFromBody(replyDraft.body)}
+                        </Text>
+                      </Box>
                    </ReplyLayout>
                  </Box>
                </Box>
@@ -1321,12 +1342,20 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                  {(gifOpen: boolean, setGifOpen) => (
                    <PopOut
                      offset={16}
-                      alignOffset={-44}
+                      // [Gitea #147] In the compact overflow row the GIF button sits
+                      // near the left edge; end-aligning a 312px picker to it pushed
+                      // most of it off-screen. Anchor to the row instead.
+                      alignOffset={compact ? 0 : -44}
                      position="Top"
                      align="End"
                      anchor={
                        gifOpen
-                          ? (gifBtnRef.current?.getBoundingClientRect() ?? undefined)
+                          ? ((compact
+                              ? gifBtnRef.current?.closest('#composer-more-actions')
+                              : gifBtnRef.current
+                            )?.getBoundingClientRect() ??
+                            gifBtnRef.current?.getBoundingClientRect() ??
+                            undefined)
                          : undefined
                      }
                      content={
@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { MatrixEvent, Room } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRoomMediaTimeline } from '../../hooks/useRoomMediaTimeline';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { Lightbox, toLightboxItems } from './MediaGallery';
+
+// How many media pages to walk back looking for the clicked event before
+// settling for a single-item viewer.
+const MAX_SEARCH_PAGES = 6;
+
+type RoomMediaLightboxProps = {
+  room: Room;
+  eventId: string;
+  onClose: () => void;
+};
+
+/**
+ * [Gitea #219] The room timeline's image viewer is the gallery lightbox,
+ * opened at the clicked event: same dark backdrop, sender + date, 1/N counter,
+ * ←/→ across the room's media, zoom keys, download and "jump to message".
+ *
+ * Items come from the same detached media timeline the gallery uses (#163).
+ * It starts at the live end, so an older image may not be loaded yet: we page
+ * back a bounded number of times looking for it and meanwhile show the clicked
+ * image on its own, so the viewer never waits on the network to open.
+ */
+export function RoomMediaLightbox({ room, eventId, onClose }: RoomMediaLightboxProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const { navigateRoom } = useRoomNavigate();
+  const { events, loadMore, loading, canLoadMore } = useRoomMediaTimeline(mx, room);
+
+  const items = useMemo(() => toLightboxItems(room, events), [room, events]);
+  const index = items.findIndex((it) => it.eventId === eventId);
+
+  const pagesRef = useRef(0);
+  useEffect(() => {
+    if (index !== -1 || loading || !canLoadMore || pagesRef.current >= MAX_SEARCH_PAGES) return;
+    pagesRef.current += 1;
+    loadMore();
+  }, [index, loading, canLoadMore, loadMore]);
+
+  // Until the event is in the loaded window, show just the clicked media.
+  const fallbackItems = useMemo(() => {
+    const ev: MatrixEvent | undefined = room.findEventById(eventId) ?? undefined;
+    return ev ? toLightboxItems(room, [ev]) : [];
+  }, [room, eventId]);
+
+  const handleJump = useCallback(
+    (id: string) => {
+      onClose();
+      navigateRoom(room.roomId, id);
+    },
+    [onClose, navigateRoom, room.roomId],
+  );
+
+  const found = index !== -1;
+  const shownItems = found ? items : fallbackItems;
+  if (shownItems.length === 0) return null;
+  return (
+    <Lightbox
+      // Remount when the full list arrives so the index and zoom reset cleanly.
+      key={found ? 'room' : 'single'}
+      items={shownItems}
+      initialIndex={found ? index : 0}
+      useAuthentication={useAuthentication}
+      onClose={onClose}
+      onJump={handleJump}
+    />
+  );
+}
@@ -14,10 +14,12 @@ import {
  Direction,
  EventTimeline,
  EventTimelineSet,
+  EventType,
  EventTimelineSetHandlerMap,
  IContent,
  MatrixClient,
  MatrixEvent,
+  MsgType,
  RelationType,
  Room,
  RoomEvent,
@@ -53,10 +55,12 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
 import { useAlive } from '../../hooks/useAlive';
 import { editableActiveElement, scrollToBottom } from '../../utils/dom';
+import { getForwardedMeta } from './message/forwardContent';
 import {
  DefaultPlaceholder,
  CompactPlaceholder,
  Reply,
+  ForwardedHeader,
  MessageBase,
  MessageUnsupportedContent,
  Time,
@@ -86,6 +90,12 @@ import {
  isMembershipChanged,
  reactionOrEditEvent,
 } from '../../utils/room';
+import { getLastEditDiff } from '../../utils/editDiff';
+import { tick } from '../../utils/haptics';
+import { GroupCandidate, GroupPlan, planMediaGroups } from '../../utils/mediaGroups';
+import { MediaGroupGrid, RegroupChip } from './message/MediaGroupGrid';
+import { Lightbox, toLightboxItems } from './MediaGallery';
+import { getThumbMxc } from '../../utils/mediaThumb';
 import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
@@ -101,7 +111,8 @@ import { markAsRead } from '../../utils/notifications';
 import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
-import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
+import { inSameDay, minuteDifference } from '../../utils/time';
+import { formatDayDivider } from '../../utils/formatTimestamp';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
 import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
@@ -113,6 +124,7 @@ import { RetentionContent, isExpired } from '../../utils/retention';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
+import { RoomMediaLightbox } from './RoomMediaLightbox';
 import { Image } from '../../components/media';
 import { ImageViewer } from '../../components/image-viewer';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
@@ -175,6 +187,9 @@ export const getFirstLinkedTimeline = (
  return getFirstLinkedTimeline(linkedTm, direction);
 };

+/** [Gitea #137] Galleries the user asked to see as separate messages (keyed by the group's last event id). */
+const separatedGalleries = new Set<string>();
+
 export const getLinkedTimelines = (timeline: EventTimeline): EventTimeline[] => {
  const firstTimeline = getFirstLinkedTimeline(timeline, Direction.Backward);
  const timelines: EventTimeline[] = [];
@@ -464,6 +479,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  // Read positions are computed once in Room.tsx and provided via ReadPositionsContext
  // so both RoomTimeline and ThreadTimeline consume the same value (Gitea #38).
  const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
+  const [hapticFeedback] = useSetting(settingsAtom, 'hapticFeedback');
+  // [Gitea #137] Re-render after "Show separately" (the Set itself is module-level).
+  const [, setSeparatedTick] = useState(0);
  const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
@@ -521,6 +539,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
  const [editId, setEditId] = useState<string>();
  const [editHistoryEvent, setEditHistoryEvent] = useState<MatrixEvent | undefined>();
+  // [Gitea #219] Timeline images open the shared media lightbox at that event.
+  const [lightboxEventId, setLightboxEventId] = useState<string | undefined>();
+  // [Gitea #137] Opened from a gallery grid: the viewer walks that group in send order.
+  const [lightboxGroup, setLightboxGroup] = useState<MatrixEvent[] | undefined>();

  const roomToParents = useAtomValue(roomToParentsAtom);
  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -703,6 +725,34 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          }));
          return;
        }
+        // [Gitea #212] Your OWN new message always comes into view — that is
+        // what pressing Send means — even if the at-bottom flag went stale
+        // (in-place growth like a poll gaining a row briefly pushes the anchor
+        // out of the viewport) or you had scrolled up to read.
+        const ownNewMessage =
+          mEvt.getSender() === mx.getUserId() &&
+          !mEvt.isRelation() &&
+          !mEvt.isRedaction() &&
+          !mEvt.isState() &&
+          mEvt.getType() !== MessageEvent.Reaction;
+        if (ownNewMessage) {
+          if (atLiveEndRef.current) {
+            setAtBottom(true);
+            scrollToBottomRef.current.count += 1;
+            scrollToBottomRef.current.smooth = true;
+            setTimeline((ct) => ({
+              ...ct,
+              range: { start: ct.range.start + 1, end: ct.range.end + 1 },
+            }));
+          } else {
+            // Paginated back into history: jump to the live end like the
+            // "Jump to Latest" button does.
+            setTimeline(getInitialTimeline(room));
+            scrollToBottomRef.current.count += 1;
+            scrollToBottomRef.current.smooth = false;
+          }
+          return;
+        }
        setTimeline((ct) => ({ ...ct }));
        if (!unreadInfo) {
          setUnreadInfo(getRoomUnreadInfo(room));
@@ -865,6 +915,45 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    ),
  );

+  // [Gitea #127] After a jump (reply quote, thread → main, search result) the
+  // reader is stranded far up the history; remember the message that was in
+  // the middle of the viewport and offer "Back to where you were".
+  const [returnPoint, setReturnPoint] = useState<{ eventId: string; at: number } | null>(null);
+  const captureReturnPoint = useCallback(() => {
+    const scroller = scrollRef.current;
+    if (!scroller) return;
+    const mid = scroller.getBoundingClientRect().top + scroller.clientHeight / 2;
+    const items = Array.from(scroller.querySelectorAll<HTMLElement>('[data-message-id]'));
+    const hit =
+      items.find((el) => {
+        const r = el.getBoundingClientRect();
+        return r.top <= mid && r.bottom >= mid;
+      }) ?? items[items.length - 1];
+    const id = hit?.getAttribute('data-message-id');
+    if (id) setReturnPoint({ eventId: id, at: Date.now() });
+  }, []);
+  // Route-driven jumps (thread panel / search / permalink): capture before the
+  // timeline is emptied by the effect below (effects run in declaration order).
+  const prevEventIdRef = useRef(eventId);
+  useEffect(() => {
+    const prev = prevEventIdRef.current;
+    prevEventIdRef.current = eventId;
+    if (eventId && eventId !== prev && prev === undefined) captureReturnPoint();
+  }, [eventId, captureReturnPoint]);
+  // Expire after 20 s.
+  useEffect(() => {
+    if (!returnPoint) return undefined;
+    const t = window.setTimeout(() => setReturnPoint(null), 20_000);
+    return () => window.clearTimeout(t);
+  }, [returnPoint]);
+  const handleReturn = useCallback(() => {
+    if (!returnPoint) return;
+    const target = returnPoint.eventId;
+    setReturnPoint(null);
+    if (eventId) navigateRoom(room.roomId, target);
+    else handleOpenEvent(target, false);
+  }, [returnPoint, eventId, navigateRoom, room.roomId, handleOpenEvent]);
+
  useEffect(() => {
    if (eventId) {
      setTimeline(getEmptyTimeline());
@@ -976,9 +1065,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
    async (evt) => {
      const targetId = evt.currentTarget.getAttribute('data-event-id');
      if (!targetId) return;
+      captureReturnPoint();
      handleOpenEvent(targetId);
    },
-    [handleOpenEvent],
+    [handleOpenEvent, captureReturnPoint],
  );

  const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -1069,13 +1159,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
      const rShortcode =
        shortcode ||
        (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
+      tick('reaction', hapticFeedback);
      mx.sendEvent(
        room.roomId,
        MessageEvent.Reaction as any,
        getReactionContent(targetEventId, key, rShortcode),
      );
    },
-    [mx, room],
+    [mx, room, hapticFeedback],
  );
  const handleEdit = useCallback(
    (editEvtId?: string) => {
@@ -1091,14 +1182,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  const { t } = useTranslation();

  const renderMatrixEvent = useMatrixEventRenderer<
-    [string, MatrixEvent, number, EventTimelineSet, boolean]
+    [
+      string,
+      MatrixEvent,
+      number,
+      EventTimelineSet,
+      boolean,
+      MatrixEvent[] | undefined,
+      string | undefined,
+    ]
  >(
    {
-      [MessageEvent.RoomMessage]: (mEventId, mEvent, item, timelineSet, collapse) => {
+      [MessageEvent.RoomMessage]: (
+        mEventId,
+        mEvent,
+        item,
+        timelineSet,
+        collapse,
+        mediaGroup,
+        regroupId,
+      ) => {
        const reactionRelations = getEventReactions(timelineSet, mEventId);
        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
        const hasReactions = reactions && reactions.length > 0;
        const { replyEventId, threadRootId } = mEvent;
+        const forwardedMeta = getForwardedMeta(mEvent.getContent());
        const highlighted = focusItem?.index === item && focusItem.highlight;

        const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
@@ -1131,19 +1239,30 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            onReactionToggle={handleReactionToggle}
            onEditId={handleEdit}
            reply={
-              replyEventId && (
-                <Reply
-                  room={room}
-                  timelineSet={timelineSet}
-                  replyEventId={replyEventId}
-                  threadRootId={threadRootId}
-                  onClick={handleOpenReply}
-                  onThreadClick={setActiveThreadId}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
-                  legacyUsernameColor={legacyUsernameColor || direct}
-                />
-              )
+              <>
+                {forwardedMeta && (
+                  <ForwardedHeader
+                    mx={mx}
+                    meta={forwardedMeta}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                    onJump={() => navigateRoom(forwardedMeta.room_id, forwardedMeta.event_id)}
+                  />
+                )}
+                {replyEventId && (
+                  <Reply
+                    room={room}
+                    timelineSet={timelineSet}
+                    replyEventId={replyEventId}
+                    threadRootId={threadRootId}
+                    onClick={handleOpenReply}
+                    onThreadClick={setActiveThreadId}
+                    getMemberPowerTag={getMemberPowerTag}
+                    accessibleTagColors={accessiblePowerTagColors}
+                    legacyUsernameColor={legacyUsernameColor || direct}
+                  />
+                )}
+              </>
            }
            reactions={
              <>
@@ -1175,21 +1294,47 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          >
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-            ) : (
-              <RenderMessageContent
-                displayName={senderDisplayName}
-                msgType={mEvent.getContent().msgtype ?? ''}
-                ts={mEvent.getTs()}
-                edited={!!editedEvent}
-                onEditHistoryClick={editedEvent ? () => setEditHistoryEvent(mEvent) : undefined}
-                getContent={getContent}
+            ) : mediaGroup ? (
+              <MediaGroupGrid
+                events={mediaGroup}
                mediaAutoLoad={mediaAutoLoad}
-                urlPreview={showUrlPreview}
-                htmlReactParserOptions={htmlReactParserOptions}
-                linkifyOpts={linkifyOpts}
-                outlineAttachment={messageLayout === MessageLayout.Bubble}
-                eventId={mEventId}
+                onOpen={(id) => {
+                  setLightboxGroup(mediaGroup);
+                  setLightboxEventId(id);
+                }}
+                onShowSeparately={() => {
+                  separatedGalleries.add(mEventId);
+                  setSeparatedTick((n) => n + 1);
+                }}
              />
+            ) : (
+              <>
+                <RenderMessageContent
+                  displayName={senderDisplayName}
+                  msgType={mEvent.getContent().msgtype ?? ''}
+                  ts={mEvent.getTs()}
+                  edited={!!editedEvent}
+                  editDiff={editedEvent ? getLastEditDiff(mEvent, timelineSet) : undefined}
+                  onEditHistoryClick={editedEvent ? () => setEditHistoryEvent(mEvent) : undefined}
+                  getContent={getContent}
+                  mediaAutoLoad={mediaAutoLoad}
+                  urlPreview={showUrlPreview}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                  outlineAttachment={messageLayout === MessageLayout.Bubble}
+                  eventId={mEventId}
+                  onOpenImageViewer={() => setLightboxEventId(mEventId)}
+                  mEvent={mEvent}
+                />
+                {regroupId && (
+                  <RegroupChip
+                    onClick={() => {
+                      separatedGalleries.delete(regroupId);
+                      setSeparatedTick((n) => n + 1);
+                    }}
+                  />
+                )}
+              </>
            )}
          </Message>
        );
@@ -1199,6 +1344,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
        const hasReactions = reactions && reactions.length > 0;
        const { replyEventId, threadRootId } = mEvent;
+        const forwardedMeta = getForwardedMeta(mEvent.getContent());
        const highlighted = focusItem?.index === item && focusItem.highlight;

        return (
@@ -1224,19 +1370,30 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            onReactionToggle={handleReactionToggle}
            onEditId={handleEdit}
            reply={
-              replyEventId && (
-                <Reply
-                  room={room}
-                  timelineSet={timelineSet}
-                  replyEventId={replyEventId}
-                  threadRootId={threadRootId}
-                  onClick={handleOpenReply}
-                  onThreadClick={setActiveThreadId}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
-                  legacyUsernameColor={legacyUsernameColor || direct}
-                />
-              )
+              <>
+                {forwardedMeta && (
+                  <ForwardedHeader
+                    mx={mx}
+                    meta={forwardedMeta}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                    onJump={() => navigateRoom(forwardedMeta.room_id, forwardedMeta.event_id)}
+                  />
+                )}
+                {replyEventId && (
+                  <Reply
+                    room={room}
+                    timelineSet={timelineSet}
+                    replyEventId={replyEventId}
+                    threadRootId={threadRootId}
+                    onClick={handleOpenReply}
+                    onThreadClick={setActiveThreadId}
+                    getMemberPowerTag={getMemberPowerTag}
+                    accessibleTagColors={accessiblePowerTagColors}
+                    legacyUsernameColor={legacyUsernameColor || direct}
+                  />
+                )}
+              </>
            }
            reactions={
              <>
@@ -1296,6 +1453,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                      msgType={mEvent.getContent().msgtype ?? ''}
                      ts={mEvent.getTs()}
                      edited={!!editedEvent}
+                      editDiff={editedEvent ? getLastEditDiff(mEvent, timelineSet) : undefined}
                      onEditHistoryClick={
                        editedEvent ? () => setEditHistoryEvent(mEvent) : undefined
                      }
@@ -1306,6 +1464,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                      linkifyOpts={linkifyOpts}
                      outlineAttachment={messageLayout === MessageLayout.Bubble}
                      eventId={mEventId}
+                      onOpenImageViewer={() => setLightboxEventId(mEventId)}
+                      mEvent={mEvent}
                    />
                  );
                }
@@ -1847,6 +2007,84 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          </Event>
        );
      },
+      // [Gitea #162] A ring (m.rtc.notification) that we neither answered nor
+      // declined, and whose ring window has passed, renders as a local-only
+      // "Missed call from X" line. Derived from events already in the
+      // timeline; nothing is sent. Disappears if our own call membership
+      // follows within the ring window (we picked up).
+      [EventType.RTCNotification]: (mEventId, mEvent, item) => {
+        const senderId = mEvent.getSender() ?? '';
+        if (!senderId || senderId === mx.getUserId()) return null;
+        const content = mEvent.getContent();
+        const mention =
+          content['m.mentions']?.room ||
+          content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
+        if (!mention) return null;
+        const lifetime = Math.min(
+          typeof content.lifetime === 'number' ? content.lifetime : 30000,
+          120000,
+        );
+        const liveEvents = room.getLiveTimeline().getEvents();
+        const memberEventsAfter = liveEvents.filter(
+          (ev) => ev.getType() === StateEvent.GroupCallMemberPrefix && ev.getTs() >= mEvent.getTs(),
+        );
+        // The ring is over once its window lapsed or the caller hung up.
+        const callerEndTs = memberEventsAfter
+          .find((ev) => ev.getSender() === senderId && !ev.getContent().application)
+          ?.getTs();
+        if (callerEndTs === undefined && Date.now() < mEvent.getTs() + lifetime) return null;
+        // "Answered" = our own join between the ring and the caller hanging up
+        // (a later, separate call must not retro-actively answer this one).
+        const windowEnd = Math.min(
+          mEvent.getTs() + lifetime + 60_000,
+          callerEndTs !== undefined ? callerEndTs + 5_000 : Infinity,
+        );
+        const answered = memberEventsAfter.some(
+          (ev) =>
+            ev.getSender() === mx.getUserId() &&
+            ev.getTs() <= windowEnd &&
+            !!ev.getContent().application,
+        );
+        if (answered) return null;
+        const highlighted = focusItem?.index === item && focusItem.highlight;
+        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
+        const timeJSX = (
+          <Time
+            ts={mEvent.getTs()}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        );
+        return (
+          <Event
+            key={mEvent.getId()}
+            data-message-item={item}
+            data-message-id={mEventId}
+            room={room}
+            mEvent={mEvent}
+            highlight={highlighted}
+            messageSpacing={messageSpacing}
+            canDelete={false}
+            hideReadReceipts={hideActivity}
+            showDeveloperTools={showDeveloperTools}
+          >
+            <EventContent
+              messageLayout={messageLayout}
+              time={timeJSX}
+              iconSrc={Icons.PhoneDown}
+              content={
+                <Box grow="Yes" direction="Column">
+                  <Text size="T300" style={{ color: color.Critical.Main }}>
+                    Missed {content['m.call.intent'] === 'video' ? 'video ' : ''}call from{' '}
+                    <b>{senderName}</b>
+                  </Text>
+                </Box>
+              }
+            />
+          </Event>
+        );
+      },
      [StateEvent.GroupCallMemberPrefix]: (mEventId, mEvent, item) => {
        const highlighted = focusItem?.index === item && focusItem.highlight;
        const senderId = mEvent.getSender() ?? '';
@@ -2001,30 +2239,100 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  let isPrevRendered = false;
  let newDivider = false;
  let dayDivider = false;
-  const eventRenderer = (item: number) => {
-    // Perf-5: O(T) → O(log T) via precomputed segments
-    let eventTimeline: EventTimeline | undefined;
-    let baseIndex = 0;
-    {
-      let lo = 0;
-      let hi = timelineSegments.length - 1;
-      while (lo <= hi) {
-        // eslint-disable-next-line no-bitwise
-        const mid = (lo + hi) >>> 1;
-        const [base, len] = timelineSegments[mid];
-        if (item < base) {
-          hi = mid - 1;
-        } else if (item >= base + len) {
-          lo = mid + 1;
-        } else {
-          eventTimeline = timelineSegments[mid][2];
-          baseIndex = base;
-          break;
-        }
+  // Perf-5: O(T) → O(log T) via precomputed segments
+  const resolveItem = (
+    item: number,
+  ): { eventTimeline: EventTimeline; baseIndex: number } | undefined => {
+    let lo = 0;
+    let hi = timelineSegments.length - 1;
+    while (lo <= hi) {
+      // eslint-disable-next-line no-bitwise
+      const mid = (lo + hi) >>> 1;
+      const [base, len] = timelineSegments[mid];
+      if (item < base) {
+        hi = mid - 1;
+      } else if (item >= base + len) {
+        lo = mid + 1;
+      } else {
+        return { eventTimeline: timelineSegments[mid][2], baseIndex: base };
      }
    }
-    if (!eventTimeline) return null;
-    const timelineSet = eventTimeline?.getTimelineSet();
+    return undefined;
+  };
+  const eventAt = (
+    item: number,
+  ): { mEvent: MatrixEvent; timelineSet: EventTimelineSet } | undefined => {
+    const seg = resolveItem(item);
+    if (!seg) return undefined;
+    const mEvent = getTimelineEvent(
+      seg.eventTimeline,
+      getTimelineRelativeIndex(item, seg.baseIndex),
+    );
+    return mEvent ? { mEvent, timelineSet: seg.eventTimeline.getTimelineSet() } : undefined;
+  };
+  // [Gitea #137] Gallery grouping is planned lazily per render pass: the first
+  // media event we meet plans its whole run (looking both ways, so a virtual
+  // window that starts mid-run still agrees), and the plan is reused for the
+  // run's other members.
+  const groupPlans = new Map<number, GroupPlan | null>();
+  const candidateAt = (index: number): GroupCandidate | undefined => {
+    const found = eventAt(index);
+    if (!found) return undefined;
+    const { mEvent: ev, timelineSet } = found;
+    const sender = ev.getSender() ?? '';
+    const base = { sender, ts: ev.getTs(), hasRelation: false, redacted: false, mustEnd: false };
+    if (
+      reactionOrEditEvent(ev) ||
+      ev.getType() === 'm.room.redaction' ||
+      ignoredUsersSet.has(sender)
+    )
+      return { ...base, kind: 'skip' };
+    if (ev.getType() === StateEvent.RoomMember && hideMembershipEvents)
+      return { ...base, kind: 'skip' };
+    const msgtype = ev.getContent().msgtype;
+    const isMedia =
+      ev.getType() === MessageEvent.RoomMessage &&
+      (msgtype === MsgType.Image || msgtype === MsgType.Video) &&
+      !!getThumbMxc(ev);
+    if (!isMedia) return { ...base, kind: 'other' };
+    const id = ev.getId() ?? '';
+    const reactions = getEventReactions(timelineSet, id)?.getSortedAnnotationsByKey();
+    const hasThread =
+      ev.getThread() !== undefined ||
+      ev.getServerAggregatedRelation(RelationType.Thread) !== undefined;
+    return {
+      ...base,
+      kind: 'media',
+      hasRelation: !!ev.getContent()['m.relates_to'],
+      redacted: ev.isRedacted(),
+      mustEnd: (reactions?.length ?? 0) > 0 || hasThread,
+    };
+  };
+  const mediaGroupFor = (
+    item: number,
+  ): { hidden: boolean; events?: MatrixEvent[]; regroup?: string } | undefined => {
+    if (!groupPlans.has(item)) {
+      if (candidateAt(item)?.kind !== 'media') return undefined;
+      const plans = planMediaGroups(candidateAt, item);
+      plans.forEach((plan, index) => groupPlans.set(index, plan));
+      if (!plans.has(item)) groupPlans.set(item, null);
+    }
+    const plan = groupPlans.get(item);
+    if (!plan) return undefined;
+    const lastId = eventAt(plan.members[plan.members.length - 1])?.mEvent.getId() ?? '';
+    if (separatedGalleries.has(lastId))
+      return plan.renders ? { hidden: false, regroup: lastId } : undefined;
+    if (!plan.renders) return { hidden: true };
+    const events = plan.members
+      .map((index) => eventAt(index)?.mEvent)
+      .filter((ev): ev is MatrixEvent => !!ev);
+    return { hidden: false, events };
+  };
+  const eventRenderer = (item: number) => {
+    const resolved = resolveItem(item);
+    if (!resolved) return null;
+    const { eventTimeline, baseIndex } = resolved;
+    const timelineSet = eventTimeline.getTimelineSet();
    const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));
    const mEventId = mEvent?.getId();

@@ -2068,17 +2376,21 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
      prevEvent.getType() === mEvent.getType() &&
      minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;

-    const eventJSX = reactionOrEditEvent(mEvent)
-      ? null
-      : renderMatrixEvent(
-          mEvent.getType(),
-          typeof mEvent.getStateKey() === 'string',
-          mEventId,
-          mEvent,
-          item,
-          timelineSet,
-          collapsed,
-        );
+    const mediaGroup = mediaGroupFor(item);
+    const eventJSX =
+      reactionOrEditEvent(mEvent) || mediaGroup?.hidden
+        ? null
+        : renderMatrixEvent(
+            mEvent.getType(),
+            typeof mEvent.getStateKey() === 'string',
+            mEventId,
+            mEvent,
+            item,
+            timelineSet,
+            collapsed,
+            mediaGroup?.events,
+            mediaGroup?.regroup,
+          );
    prevEvent = mEvent;
    isPrevRendered = !!eventJSX;

@@ -2099,11 +2411,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          <TimelineDivider variant="Surface">
            <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
              <Text size="L400">
-                {(() => {
-                  if (today(mEvent.getTs())) return 'Today';
-                  if (yesterday(mEvent.getTs())) return 'Yesterday';
-                  return timeDayMonthYear(mEvent.getTs());
-                })()}
+                {formatDayDivider(mEvent.getTs(), { hour24Clock, dateFormatString })}
              </Text>
            </Badge>
          </TimelineDivider>
@@ -2242,17 +2550,32 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            <span ref={atBottomAnchorRef} />
          </Box>
        </Scroll>
-        {!atBottom && (
+        {(!atBottom || returnPoint) && (
          <TimelineFloat position="Bottom">
-            <Chip
-              variant="SurfaceVariant"
-              radii="Pill"
-              outlined
-              before={<Icon size="50" src={Icons.ArrowBottom} />}
-              onClick={handleJumpToLatest}
-            >
-              <Text size="L400">Jump to Latest</Text>
-            </Chip>
+            <Box gap="200" alignItems="Center">
+              {returnPoint && (
+                <Chip
+                  variant="Primary"
+                  radii="Pill"
+                  outlined
+                  before={<Icon size="50" src={Icons.ArrowBottom} />}
+                  onClick={handleReturn}
+                >
+                  <Text size="L400">Back to where you were</Text>
+                </Chip>
+              )}
+              {!atBottom && (
+                <Chip
+                  variant="SurfaceVariant"
+                  radii="Pill"
+                  outlined
+                  before={<Icon size="50" src={Icons.ArrowBottom} />}
+                  onClick={handleJumpToLatest}
+                >
+                  <Text size="L400">Jump to Latest</Text>
+                </Chip>
+              )}
+            </Box>
          </TimelineFloat>
        )}
      </Box>
@@ -2263,6 +2586,32 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
          onClose={() => setEditHistoryEvent(undefined)}
        />
      )}
+      {lightboxEventId && lightboxGroup && (
+        <Lightbox
+          items={toLightboxItems(room, lightboxGroup)}
+          initialIndex={Math.max(
+            0,
+            lightboxGroup.findIndex((ev) => ev.getId() === lightboxEventId),
+          )}
+          useAuthentication={useAuthentication}
+          onClose={() => {
+            setLightboxEventId(undefined);
+            setLightboxGroup(undefined);
+          }}
+          onJump={(id) => {
+            setLightboxEventId(undefined);
+            setLightboxGroup(undefined);
+            navigateRoom(room.roomId, id);
+          }}
+        />
+      )}
+      {lightboxEventId && !lightboxGroup && (
+        <RoomMediaLightbox
+          room={room}
+          eventId={lightboxEventId}
+          onClose={() => setLightboxEventId(undefined)}
+        />
+      )}
    </>
  );
 }
@@ -36,7 +36,7 @@ export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstone
        <Text size="T400">{body || 'This room has been replaced and is no longer active.'}</Text>
        {joinState.status === AsyncStatus.Error && (
          <Text style={{ color: color.Critical.Main }} size="T200">
-            {(joinState.error as any)?.message ?? 'Failed to join replacement room!'}
+            {(joinState.error as Error | undefined)?.message ?? 'Failed to join replacement room!'}
          </Text>
        )}
      </Box>
@@ -27,6 +27,8 @@ import {
 import { useAtom } from 'jotai';
 import { useNavigate } from 'react-router-dom';
 import { Room } from 'matrix-js-sdk';
+import { useVoiceChannelFull } from '../../hooks/useVoiceChannelFull';
+import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -75,6 +77,7 @@ import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 import { webRTCSupported } from '../../utils/rtc';
 import { mediaGalleryAtom } from '../../state/mediaGallery';
 import { widgetsPanelAtom } from '../../state/widgetsPanel';
+import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { threadsListAtom } from '../../state/threadsList';
 import { usePendingKnocks } from '../../hooks/usePendingKnocks';
 import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
@@ -105,7 +108,11 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
    const [invitePrompt, setInvitePrompt] = useState(false);
    const [reportRoomOpen, setReportRoomOpen] = useState(false);
    const [bookmarksOpen, setBookmarksOpen] = useAtom(bookmarksPanelAtom);
-    const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+    const [mobileMembers, setMobileMembers] = useAtom(mobileMembersPanelAtom);
+    // [Gitea #165 / #211] Threads list and Widgets had desktop-only header
+    // buttons and no mobile entry point at all.
+    const [threadsList, setThreadsList] = useAtom(threadsListAtom);
+    const [widgets, setWidgets] = useAtom(widgetsPanelAtom);

    const handleMarkAsRead = () => {
      markAsRead(mx, room.roomId, hideActivity);
@@ -196,13 +203,13 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
          {screenSize === ScreenSize.Mobile && (
            <MenuItem
              onClick={() => {
-                setPeopleDrawer(!peopleDrawer);
+                setMobileMembers(!mobileMembers);
                requestClose();
              }}
              size="300"
-              after={<Icon size="100" src={Icons.User} filled={peopleDrawer} />}
+              after={<Icon size="100" src={Icons.User} filled={mobileMembers} />}
              radii="300"
-              aria-pressed={peopleDrawer}
+              aria-pressed={mobileMembers}
            >
              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                Members
@@ -225,6 +232,38 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
              </Text>
            </MenuItem>
          )}
+          {screenSize === ScreenSize.Mobile && (
+            <MenuItem
+              onClick={() => {
+                setThreadsList(!threadsList);
+                requestClose();
+              }}
+              size="300"
+              after={<Icon size="100" src={Icons.Thread} filled={threadsList} />}
+              radii="300"
+              aria-pressed={threadsList}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                Threads
+              </Text>
+            </MenuItem>
+          )}
+          {screenSize === ScreenSize.Mobile && (
+            <MenuItem
+              onClick={() => {
+                setWidgets(!widgets);
+                requestClose();
+              }}
+              size="300"
+              after={<Icon size="100" src={Icons.Category} filled={widgets} />}
+              radii="300"
+              aria-pressed={widgets}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                Widgets
+              </Text>
+            </MenuItem>
+          )}
          {!isServerNotice && (
            <MenuItem
              onClick={handleInvite}
@@ -378,6 +417,54 @@ const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
  },
 );

+/**
+ * [Gitea #134] One small chip that tells members a room's call rules before
+ * they hit the server-side guard: "8/10" when a voice limit is set, a muted
+ * camera glyph when the room is audio-only. Nothing when no rule exists; the
+ * tooltip carries the words. Desktop only (the mobile header is tight).
+ */
+function CallRulesChip({ room }: { room: Room }) {
+  const { current, max } = useVoiceChannelFull(room);
+  const { allowCamera, allowScreenshare } = useRoomCallPolicy(room);
+  const audioOnly = !allowCamera && !allowScreenshare;
+  if (max <= 0 && !audioOnly) return null;
+  const words = [
+    max > 0 ? `Voice limit ${max} (${current} in call)` : undefined,
+    audioOnly ? 'Audio-only room' : undefined,
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  return (
+    <TooltipProvider
+      position="Bottom"
+      offset={4}
+      tooltip={
+        <Tooltip>
+          <Text>{words}</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <Chip
+          ref={triggerRef}
+          variant="Surface"
+          size="400"
+          radii="Pill"
+          aria-label={words}
+          tabIndex={0}
+          before={audioOnly ? <Icon size="50" src={Icons.VideoCameraMute} /> : undefined}
+        >
+          {max > 0 && (
+            <Text size="T200">
+              {current}/{max}
+            </Text>
+          )}
+        </Chip>
+      )}
+    </TooltipProvider>
+  );
+}
+
 function CallButton() {
  const room = useRoom();
  const direct = useIsDirectRoom();
@@ -694,6 +781,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                </FocusTrap>
              }
            />
+            {screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
            {!room.isCallRoom() &&
              livekitSupported &&
              rtcSupported &&
@@ -38,7 +38,12 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
    // a `role="status"` region added to the DOM together with its first text
    // is not reliably announced by some screen readers.
    let typingAnnouncement = '';
-    if (typingNames.length === 1) {
+    if (typingNames.length === 0) {
+      // nobody typing — keep the region mounted but silent (the final `else`
+      // below used to announce "undefined, undefined, undefined and -3
+      // others are typing" on every room load, Gitea #187)
+      typingAnnouncement = '';
+    } else if (typingNames.length === 1) {
      typingAnnouncement = `${typingNames[0]} is typing`;
    } else if (typingNames.length === 2) {
      typingAnnouncement = `${typingNames[0]} and ${typingNames[1]} are typing`;
@@ -17,6 +17,7 @@ import {
  config,
 } from 'folds';
 import { IContent } from 'matrix-js-sdk';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { scheduleMessage } from '../../utils/scheduledMessages';
@@ -101,6 +102,7 @@ export function ScheduleMessageModal({
  };

  // When editing, seed the pickers from the existing send-time; else default to +1h.
+  const { prefs } = useTimestampFormatter();
  const def = initialSendAt ? new Date(initialSendAt) : defaultDate();
  const [dateValue, setDateValue] = useState<string>(() => toLocalDate(def));
  const [timeValue, setTimeValue] = useState<string>(() => toLocalTime(def));
@@ -124,10 +126,10 @@ export function ScheduleMessageModal({
      return;
    }
    setPreview({
-      label: formatFriendlyDateTime(sendAt.getTime()),
+      label: formatFriendlyDateTime(sendAt.getTime(), prefs),
      relative: formatRelativeTime(diffMs),
    });
-  }, [getSendAt]);
+  }, [getSendAt, prefs]);

  useEffect(() => {
    updatePreview();
@@ -6,32 +6,17 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { scheduledMessagesAtom, ScheduledMessage } from '../../state/scheduledMessages';
 import { cancelScheduledMessage, sendScheduledMessageNow } from '../../utils/scheduledMessages';
 import { ScheduleMessageModal } from './ScheduleMessageModal';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
+import { formatFriendlyDateTime } from '../../utils/datetimeInput';

 interface ScheduledMessagesTrayProps {
  roomId: string;
 }

-function formatSendAt(sendAt: number): string {
-  const date = new Date(sendAt);
-  const now = new Date();
-  const isToday =
-    date.getFullYear() === now.getFullYear() &&
-    date.getMonth() === now.getMonth() &&
-    date.getDate() === now.getDate();
-  const tomorrow = new Date(now);
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  const isTomorrow =
-    date.getFullYear() === tomorrow.getFullYear() &&
-    date.getMonth() === tomorrow.getMonth() &&
-    date.getDate() === tomorrow.getDate();
-  const timeStr = date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-  if (isToday) return `Today ${timeStr}`;
-  if (isTomorrow) return `Tomorrow ${timeStr}`;
-  return `${date.toLocaleDateString()} ${timeStr}`;
-}
-
 export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
  const mx = useMatrixClient();
+  const { prefs } = useTimestampFormatter();
+  const formatSendAt = (sendAt: number) => formatFriendlyDateTime(sendAt, prefs);
  const [scheduledMessages, setScheduledMessages] = useAtom(scheduledMessagesAtom);
  const [expanded, setExpanded] = useState(false);
  const [cancelling, setCancelling] = useState<Set<string>>(new Set());
@@ -27,7 +27,8 @@ import { useAlive } from '../../../hooks/useAlive';
 import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEvent } from '../../../../types/matrix/room';
-import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
+import { getToday, getYesterday } from '../../../utils/time';
+import { formatDate, formatTime } from '../../../utils/formatTimestamp';
 import { DatePicker, TimePicker } from '../../../components/time-date';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
@@ -50,6 +51,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
  const [ts, setTs] = useState(() => Date.now());

  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');

  const [timePickerCords, setTimePickerCords] = useState<RectCords>();
  const [datePickerCords, setDatePickerCords] = useState<RectCords>();
@@ -131,7 +133,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
                      after={<Icon size="50" src={Icons.ChevronBottom} />}
                      onClick={handleTimePicker}
                    >
-                      <Text size="B300">{timeHourMinute(ts, hour24Clock)}</Text>
+                      <Text size="B300">{formatTime(ts, { hour24Clock })}</Text>
                    </Chip>
                    <PopOut
                      anchor={timePickerCords}
@@ -172,7 +174,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
                      after={<Icon size="50" src={Icons.ChevronBottom} />}
                      onClick={handleDatePicker}
                    >
-                      <Text size="B300">{timeDayMonthYear(ts)}</Text>
+                      <Text size="B300">{formatDate(ts, { hour24Clock, dateFormatString })}</Text>
                    </Chip>
                    <PopOut
                      anchor={datePickerCords}
@@ -27,7 +27,7 @@ import { useModalStyle } from '../../../hooks/useModalStyle';
 import { sanitizeCustomHtml } from '../../../utils/sanitize';
 import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { timeDayMonYear, timeHourMinute } from '../../../utils/time';
+import { formatTimestamp } from '../../../utils/formatTimestamp';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { diffWords } from '../../../utils/textDiff';
@@ -229,11 +229,7 @@ export function EditHistoryModal({ room, mEvent, onClose }: EditHistoryModalProp
  const initialLoading = historyState.status === AsyncStatus.Loading && edits.length === 0;
  const loadingMore = historyState.status === AsyncStatus.Loading && edits.length > 0;

-  const formatTs = (ts: number): string => {
-    const time = timeHourMinute(ts, hour24Clock);
-    const date = timeDayMonYear(ts, dateFormatString);
-    return `${date} at ${time}`;
-  };
+  const formatTs = (ts: number): string => formatTimestamp(ts, { hour24Clock, dateFormatString });

  const originalContent = getOriginalContent(mEvent);

--- a/Show More
+++ b/Show More