fix(settings): say when GIF search isn't set up instead of a dead switch

The GIF button needs a Giphy key in the client config. Without one (the
desktop app until now), switching "GIF Picker" on did nothing and nothing
said why. With no key the tile now explains it and the switch is disabled;
with a key it is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

.gitea/workflows/ci.yml

@@ -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"
@@ -275,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

LOTUS_REFERENCE.md

@@ -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.9`, 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.9`) → `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.12`, published by CI; the secret is `NPM_PUBLISH_TOKEN`, names starting `GITEA_` are reserved), push `lotus`, then `git push lotus v0.25.0-lotus.1`; the `publish` job builds and publishes to the Gitea registry. Always push (never delete) the annotated `vX.Y.Z-lotus.N` tag for every published version. Then in cinny bump the `@lotusguild/element-call-embedded` pin (currently `0.25.0-lotus.12`) → `npm install` → build. Manual fallback: `pnpm run build:embedded && cd embedded/web && npm version <ver> --no-git-tag-version && npm publish`.
 
 **`io.lotus.*` widget actions** (add new toWidget actions to the enum + `LOTUS_TO_WIDGET_ACTIONS` in `src/lotus/lotusActions.ts`; only send AFTER call-join or a 10s timeout fires):
 

LOTUS_TESTING.md

@@ -57,6 +57,10 @@ Browser-level smoke tests under `e2e/` (config: `playwright.config.ts`). They bo
 | **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):
 
 - `E2E_HOMESERVER` — server name as typed on the login page (e.g. `matrix.example.org`). Must offer `m.login.password`; a next-gen-auth (MAS/OIDC-issuer) server shows only the OIDC button and the tier will fail at the username field.

README.md

@@ -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.9`, upstream base v0.25.0, source at
+(`@lotusguild/element-call-embedded` `0.25.0-lotus.12`, upstream base v0.25.0, source at
 `LotusGuild/element-call`), published to our private Gitea npm registry and served
 same-origin. We no longer depend on the upstream prebuilt bundle, so in-call
 behavior is editable source instead of fragile DOM/widget hacks.

contrib/caddy/caddyfile

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

contrib/nginx/cinny.domain.tld.conf

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

e2e/a11y.spec.ts

@@ -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');
+    });
+  });
+});

e2e/a11y.spec.ts-snapshots/composer-editor.aria.yml

@@ -0,0 +1,2 @@
+- textbox "Send a message...":
+    - paragraph: Send a message...

e2e/a11y.spec.ts-snapshots/composer-send.aria.yml

@@ -0,0 +1,2 @@
+- button "Send message":
+    - img

e2e/a11y.spec.ts-snapshots/message-menu.aria.yml

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

e2e/a11y.spec.ts-snapshots/settings-nav.aria.yml

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

e2e/a11y.spec.ts-snapshots/thread-panel.aria.yml

@@ -0,0 +1,31 @@
+- complementary "Thread":
+    - paragraph: Thread
+    - paragraph: /A11y Room · started by e2e_a11y_\w+, .+/
+    - button "Thread notifications":
+        - img
+    - button "Close thread":
+        - img
+    - log "Thread timeline":
+        - article:
+            - button /e2e_a11y_\w+, open profile/:
+                - img
+            - button /e2e_a11y_\w+/
+            - time: /\d+:\d+ (AM|PM)/
+            - text: thread root for a11y
+        - paragraph: 1 reply
+        - article:
+            - button /e2e_a11y_\w+, open profile/:
+                - img
+            - button /e2e_a11y_\w+/
+            - time: /\d+:\d+ (AM|PM)/
+            - text: a reply
+    - button "More actions":
+        - img
+    - textbox "Send a message...":
+        - paragraph: Send a message...
+    - button "Insert sticker":
+        - img
+    - button "Insert emoji":
+        - img
+    - button "Send message":
+        - img

e2e/boot.spec.ts

@@ -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/);

e2e/helpers.ts

@@ -18,6 +18,11 @@ const BENIGN_CONSOLE_PATTERNS: RegExp[] = [
   // 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,
 ];
@@ -45,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))),
     ],
   };

e2e/local-homeserver.spec.ts

@@ -28,7 +28,7 @@ test.describe('local homeserver regression', () => {
     bob = await ensureUser(uniq('e2e_bob_'));
   });
 
-  test('logs in, opens a room, sends and receives', async ({ page }) => {
+  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);
@@ -140,7 +140,7 @@ test.describe('local homeserver regression', () => {
     await expect(page.getByText('the original message')).toBeVisible();
   });
 
-  test('thread panel: opens from the chip and yields the member drawer at 1400px (#218)', async ({
+  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 } });
@@ -169,7 +169,7 @@ test.describe('local homeserver regression', () => {
     await ctx.close();
   });
 
-  test('timeline image opens the gallery lightbox (#219)', async ({ page }) => {
+  test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
     const room = await createRoom(alice, 'Lightbox Room');
     const png = Buffer.from(
       'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',

package-lock.json

@@ -80,7 +80,8 @@
         "workbox-precaching": "7.4.1"
       },
       "devDependencies": {
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.9",
+        "@axe-core/playwright": "4.13.0",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.16",
         "@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.9",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.9/element-call-embedded-0.25.0-lotus.9.tgz",
-      "integrity": "sha512-+mIrBA4SywAmb00EYgThyyVqDLShICjC2Mh8GR13NAWo/u4nPY+j4rMhZidfOJMdFTF5eaMHigX6SE0lHZazZA==",
+      "version": "0.25.0-lotus.16",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.16/element-call-embedded-0.25.0-lotus.16.tgz",
+      "integrity": "sha512-X/MzZ2Ip7IpZD3B+SkBoBzgMfURyZuYD6OaGL9r7sw2nl7Y/0JzgpT8RWV12lu4DlOfWbbeO+ka1l+pTYVewdQ==",
       "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"
       }

package.json

@@ -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 36",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
     "typecheck": "tsc --noEmit",
     "test": "node --import tsx --test $(find src -name '*.test.ts')",
     "test:e2e": "playwright test",
-    "test:e2e:install": "playwright install chromium",
+    "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.9",
+    "@axe-core/playwright": "4.13.0",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.16",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

playwright.config.ts

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

public/manifest.json

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

src/app/components/CallEmbedProvider.tsx

@@ -47,6 +47,10 @@ import { previewRingtone, startRingtone, unlockRingtoneAudio } from '../utils/ri
 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';
@@ -176,7 +180,15 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
             escapeDeactivates: false,
           }}
         >
-          <Dialog style={{ maxWidth: toRem(324) }}>
+          <Dialog
+            style={{ maxWidth: toRem(324) }}
+            // #187: the overlay had no role or name, so a screen reader landed
+            // on an unlabelled button with no hint that a call was ringing.
+            // Match the in-call banner (role="alert" + label).
+            role="alertdialog"
+            aria-modal="true"
+            aria-label={`Incoming ${info.intent === 'video' ? 'video' : 'voice'} call from ${getMemberName(info.room, info.sender) ?? info.sender}`}
+          >
             <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
               <Text size="T200" align="Center">
                 {getMemberName(info.room, info.sender)}
@@ -744,6 +756,9 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   useAfkAutoMute(joined ? embed : undefined);
   useCallJoinLeaveSounds(embed);
   useCallPolicyRevokedToast(embed, joined);
+  useCallEndedToast(embed);
+  useScreenshareNotices(embed);
+  usePttHaptics();
   useCallAnnouncements(embed, joined);
   useMutedTalkWarning(embed, joined);
   useCallThemeSync(embed);
@@ -840,6 +855,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>;
@@ -1292,6 +1313,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
       <CallAnnouncementRegion />
       <CallEmbedRefContextProvider value={callEmbedRef}>
         <IncomingCallListener callEmbed={callEmbed} joined={joined} />
+        <CallRejoin callEmbed={callEmbed} joined={joined} />
         {children}
       </CallEmbedRefContextProvider>
       <div

src/app/components/CloseBehaviorPrompt.tsx

@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  Header,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { invokeTauri, isTauri, tauriInvoke, useTauriEvent } from '../hooks/useTauri';
+import { useModalStyle } from '../hooks/useModalStyle';
+
+/**
+ * cinny-desktop #5: the first time the window is closed, ask whether Lotus Chat
+ * should keep running in the tray (calls, messages, notifications) or quit —
+ * and, in the same moment, whether it should start when you sign in. Asked
+ * once; changeable in Settings → General. The native side sends
+ * `lotus-close-requested` only while the choice is still "ask", and never
+ * during a call (a call always goes to the tray).
+ */
+export function CloseBehaviorPrompt() {
+  const [open, setOpen] = useState(false);
+  const [launchOnLogin, setLaunchOnLogin] = useState(false);
+  const modalStyle = useModalStyle(420);
+
+  // Tells the native side we're listening (see get_close_behavior).
+  useEffect(() => {
+    if (!isTauri()) return;
+    tauriInvoke()?.('get_close_behavior').catch(() => undefined);
+  }, []);
+
+  useTauriEvent('lotus-close-requested', () => setOpen(true));
+
+  const choose = useCallback(
+    (value: 'tray' | 'quit') => {
+      if (launchOnLogin) invokeTauri('plugin:autostart|enable');
+      setOpen(false);
+      invokeTauri('resolve_close_request', { value });
+    },
+    [launchOnLogin],
+  );
+
+  if (!open) return null;
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: '#close-behavior-keep',
+            // Dismissing without choosing keeps the window open; the next close
+            // asks again.
+            onDeactivate: () => setOpen(false),
+            clickOutsideDeactivates: true,
+          }}
+        >
+          <Dialog
+            variant="Surface"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="close-behavior-title"
+            aria-describedby="close-behavior-body"
+            style={modalStyle}
+          >
+            <Header
+              style={{
+                padding: `0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Text as="h2" size="H4" id="close-behavior-title">
+                Keep Lotus Chat running?
+              </Text>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Text priority="400" id="close-behavior-body">
+                Lotus Chat can keep running in the system tray when you close this window, so
+                messages, notifications and calls still reach you. Open it again from the tray icon.
+              </Text>
+              <Box as="label" alignItems="Center" gap="200" style={{ cursor: 'pointer' }}>
+                <Checkbox
+                  size="300"
+                  variant="Primary"
+                  checked={launchOnLogin}
+                  onClick={(e: React.MouseEvent<HTMLInputElement>) =>
+                    setLaunchOnLogin(e.currentTarget.checked)
+                  }
+                />
+                <Text size="T300">Start Lotus Chat when I sign in to my computer</Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                <Button id="close-behavior-keep" variant="Primary" onClick={() => choose('tray')}>
+                  <Text size="B400">Keep running in the tray</Text>
+                </Button>
+                <Button variant="Secondary" fill="Soft" onClick={() => choose('quit')}>
+                  <Text size="B400">Quit when I close the window</Text>
+                </Button>
+              </Box>
+              <Text size="T200" priority="300">
+                You can change this in Settings → General.
+              </Text>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/components/ConsentRequiredPrompt.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  Dialog,
+  Header,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import {
+  EventStatus,
+  HttpApiEvent,
+  HttpApiEventHandlerMap,
+  MatrixEvent,
+  Room,
+  RoomEvent,
+  RoomEventHandlerMap,
+} from 'matrix-js-sdk';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useModalStyle } from '../hooks/useModalStyle';
+import { failedForConsent, safeConsentUri } from '../utils/consent';
+
+// After "Later", don't re-open for every background retry; the next send the
+// user makes after this window explains again.
+const SNOOZE_MS = 10_000;
+
+/**
+ * A homeserver with a consent requirement (e.g. Synapse's user_consent) blocks
+ * sending until its terms are accepted, answering 403 M_CONSENT_NOT_GIVEN with a `consent_uri`. Without
+ * this the message just shows "Failed to send". The SDK emits
+ * HttpApiEvent.NoConsent for every such response; we explain why, link to the
+ * acceptance page, and offer to resend what was blocked once accepted.
+ */
+export function ConsentRequiredPrompt() {
+  const mx = useMatrixClient();
+  const [consentUri, setConsentUri] = useState<string>();
+  const [open, setOpen] = useState(false);
+  const [opened, setOpened] = useState(false);
+  const [blockedCount, setBlockedCount] = useState(0);
+  const snoozedUntil = useRef(0);
+  const blocked = useRef(new Map<MatrixEvent, Room>());
+  const modalStyle = useModalStyle(440);
+  const server = mx.getDomain() ?? 'Your homeserver';
+
+  useEffect(() => {
+    const onNoConsent: HttpApiEventHandlerMap[HttpApiEvent.NoConsent] = (_message, uri) => {
+      const safe = safeConsentUri(uri);
+      if (safe) setConsentUri(safe);
+      if (Date.now() >= snoozedUntil.current) setOpen(true);
+    };
+    const onLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (event, room) => {
+      if (failedForConsent(event)) blocked.current.set(event, room);
+      else if (!blocked.current.delete(event)) return;
+      setBlockedCount(blocked.current.size);
+    };
+    mx.on(HttpApiEvent.NoConsent, onNoConsent);
+    mx.on(RoomEvent.LocalEchoUpdated, onLocalEcho);
+    return () => {
+      mx.removeListener(HttpApiEvent.NoConsent, onNoConsent);
+      mx.removeListener(RoomEvent.LocalEchoUpdated, onLocalEcho);
+    };
+  }, [mx]);
+
+  const review = useCallback(() => {
+    if (!consentUri) return;
+    window.open(consentUri, '_blank', 'noopener,noreferrer');
+    setOpened(true);
+  }, [consentUri]);
+
+  const retry = useCallback(() => {
+    setOpen(false);
+    setOpened(false);
+    const pending = Array.from(blocked.current.entries());
+    blocked.current.clear();
+    setBlockedCount(0);
+    pending.forEach(([event, room]) => {
+      if (event.status === EventStatus.NOT_SENT) mx.resendEvent(event, room);
+    });
+  }, [mx]);
+
+  const later = useCallback(() => {
+    snoozedUntil.current = Date.now() + SNOOZE_MS;
+    setOpen(false);
+  }, []);
+
+  if (!open) return null;
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: '#consent-review',
+            fallbackFocus: '#consent-later',
+            onDeactivate: later,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: true,
+          }}
+        >
+          <Dialog
+            variant="Surface"
+            role="alertdialog"
+            aria-modal="true"
+            aria-labelledby="consent-title"
+            aria-describedby="consent-body"
+            style={modalStyle}
+          >
+            <Header
+              style={{
+                padding: `0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Text as="h2" size="H4" id="consent-title">
+                Accept the terms to keep chatting
+              </Text>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Box id="consent-body" direction="Column" gap="200">
+                <Text priority="400">
+                  Your message wasn&apos;t sent. <b>{server}</b> requires you to review and accept
+                  its terms of service before you can send messages.
+                </Text>
+                <Text priority="400">
+                  {consentUri
+                    ? 'Nothing you sent is lost: accept the terms, then come back here and retry.'
+                    : 'Your homeserver didn’t include a link to its terms. Contact its administrator, or accept them in another Matrix app, then retry.'}
+                </Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                {consentUri && (
+                  <Button
+                    id="consent-review"
+                    variant={opened ? 'Secondary' : 'Primary'}
+                    fill={opened ? 'Soft' : 'Solid'}
+                    onClick={review}
+                    after={<Icon size="100" src={Icons.External} />}
+                  >
+                    <Text size="B400">Review and accept</Text>
+                  </Button>
+                )}
+                <Button
+                  variant={opened ? 'Primary' : 'Secondary'}
+                  fill={opened ? 'Solid' : 'Soft'}
+                  onClick={retry}
+                >
+                  <Text size="B400">
+                    {blockedCount > 0 ? "I've accepted — retry sending" : "I've accepted"}
+                  </Text>
+                </Button>
+                <Button id="consent-later" variant="Secondary" fill="None" onClick={later}>
+                  <Text size="B400">Later</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/components/DeviceVerification.tsx

@@ -8,7 +8,6 @@ import {
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import QRCode from 'qrcode';
 import {
   Box,
   Button,
@@ -221,12 +220,16 @@ function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
     const canvas = canvasRef.current;
     if (!canvas) return;
     // Byte-mode so the raw verification bytes round-trip (a string value would
-    // mangle high bytes via UTF-8).
-    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
-      width: 220,
-      margin: 2,
-      color: { dark: '#000000', light: '#ffffff' },
-    }).catch(() => undefined);
+    // mangle high bytes via UTF-8). The QR library is loaded on demand.
+    import('qrcode')
+      .then(({ default: QRCode }) =>
+        QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
+          width: 220,
+          margin: 2,
+          color: { dark: '#000000', light: '#ffffff' },
+        }),
+      )
+      .catch(() => undefined);
   }, [data]);
   return (
     <Box justifyContent="Center">
@@ -365,15 +368,23 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#deviceverification-dialog-1',
             clickOutsideDeactivates: false,
             escapeDeactivates: false,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="deviceverification-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="deviceverification-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header style={DialogHeaderStyles} variant="Surface" size="500">
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="deviceverification-dialog-1-title" as="h2" size="H4">
                   Device Verification
                 </Text>
               </Box>

src/app/components/DeviceVerificationSetup.tsx

@@ -293,7 +293,15 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
     const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
+        id="deviceverificationsetup-dialog-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="deviceverificationsetup-dialog-1-title"
+        tabIndex={-1}
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -303,7 +311,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-1-title" as="h2" size="H4">
               Setup Device Verification
             </Text>
           </Box>
@@ -331,7 +339,15 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
     const modalStyle = useModalStyle(480);
 
     return (
-      <Dialog ref={ref} style={modalStyle}>
+      <Dialog
+        id="deviceverificationsetup-dialog-2"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="deviceverificationsetup-dialog-2-title"
+        tabIndex={-1}
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -341,7 +357,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="deviceverificationsetup-dialog-2-title" as="h2" size="H4">
               Reset Device Verification
             </Text>
           </Box>

src/app/components/ImageOverlay.tsx

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

src/app/components/LogoutDialog.tsx

@@ -52,7 +52,16 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
 
     return (
-      <Dialog variant="Surface" ref={ref} style={modalStyle}>
+      <Dialog
+        id="logoutdialog-dialog-1"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="logoutdialog-dialog-1-title"
+        tabIndex={-1}
+        variant="Surface"
+        ref={ref}
+        style={modalStyle}
+      >
         <Header
           style={{
             padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -62,7 +71,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           size="500"
         >
           <Box grow="Yes">
-            <Text as="h2" size="H4">
+            <Text id="logoutdialog-dialog-1-title" as="h2" size="H4">
               Logout
             </Text>
           </Box>

src/app/components/Modal500.tsx

@@ -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.

src/app/components/QrScanner.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, Button, color, config, Text } from 'folds';
-import jsQR from 'jsqr';
 
 type QrScannerProps = {
   onScan: (bytes: Uint8ClampedArray) => void;
@@ -10,6 +9,7 @@ type QrScannerProps = {
 // Camera QR scanner. Decodes frames with jsQR and hands back the raw byte
 // segment (`result.binaryData`) — Matrix QR verification needs the raw bytes,
 // not a decoded string, so the string-only `BarcodeDetector` can't be used.
+// jsQR is loaded on demand: it is large and only needed while scanning.
 export function QrScanner({ onScan, onCancel }: QrScannerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [error, setError] = useState<string>();
@@ -20,15 +20,22 @@ export function QrScanner({ onScan, onCancel }: QrScannerProps) {
     let raf = 0;
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    let decode: typeof import('jsqr').default | undefined;
 
     const tick = () => {
       const video = videoRef.current;
-      if (!doneRef.current && video && ctx && video.readyState === video.HAVE_ENOUGH_DATA) {
+      if (
+        decode &&
+        !doneRef.current &&
+        video &&
+        ctx &&
+        video.readyState === video.HAVE_ENOUGH_DATA
+      ) {
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const image = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        const result = jsQR(image.data, image.width, image.height);
+        const result = decode(image.data, image.width, image.height);
         if (result && result.binaryData.length > 0) {
           doneRef.current = true;
           onScan(new Uint8ClampedArray(result.binaryData));
@@ -40,9 +47,12 @@ export function QrScanner({ onScan, onCancel }: QrScannerProps) {
 
     (async () => {
       try {
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: 'environment' },
-        });
+        const [lib, media] = await Promise.all([
+          import('jsqr'),
+          navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }),
+        ]);
+        decode = lib.default;
+        stream = media;
         if (videoRef.current) {
           videoRef.current.srcObject = stream;
           await videoRef.current.play();

src/app/components/TauriDesktopFeatures.tsx

@@ -1,6 +1,7 @@
 import { useTauriCallPower } from '../hooks/useTauriCallPower';
 import { useTauriJumpList } from '../hooks/useTauriJumpList';
 import { useTauriThumbbar } from '../hooks/useTauriThumbbar';
+import { useTauriTaskbarProgress } from '../hooks/useTauriTaskbarProgress';
 import { useTauriSmtc } from '../hooks/useTauriSmtc';
 import { useTauriNetwork } from '../hooks/useTauriNetwork';
 import { useTauriToastActions } from '../hooks/useTauriToastActions';
@@ -18,6 +19,7 @@ export function TauriDesktopFeatures(): null {
   useTauriCallPower(); // P5-46 no-sleep during calls
   useTauriJumpList(); // P5-36 Windows jump list of recent rooms
   useTauriThumbbar(); // P5-44 taskbar thumbnail toolbar (mute/deafen/end)
+  useTauriTaskbarProgress(); // cinny-desktop #10 upload progress on the taskbar button
   useTauriSmtc(); // P5-43 system media transport controls
   useTauriNetwork(); // P5-49 network-change awareness → sync retry
   useTauriToastActions(); // P5-41/35 rich toast click → open room, quick reply → send

src/app/components/UserRoomProfileRenderer.tsx

@@ -71,7 +71,15 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
       <Overlay open backdrop={<OverlayBackdrop />}>
         <OverlayCenter>
           <FocusTrap focusTrapOptions={focusTrapOptions}>
-            <Modal size="500" style={MOBILE_FULLSCREEN}>
+            <Modal
+              id="user-profile-dialog"
+              role="dialog"
+              aria-modal="true"
+              aria-label="User profile"
+              tabIndex={-1}
+              size="500"
+              style={MOBILE_FULLSCREEN}
+            >
               {/* Full-screen covers the backdrop (no tap-to-dismiss) and the
                   profile has no self-close, so provide an explicit close. */}
               <Header size="600" style={{ flexShrink: 0, paddingRight: config.space.S200 }}>

src/app/components/VoiceMessageRecorder.tsx

@@ -383,7 +383,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 audio.pause();
                 setPreviewPlaying(false);
               } else {
-                audio.play();
+                audio.play().catch(() => setPreviewPlaying(false));
                 setPreviewPlaying(true);
               }
             }}

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

@@ -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',
   },

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

@@ -89,3 +89,22 @@ test('markdown: no math conversion inside a backtick span, math outside still co
   assert.ok(/<code[^>]*>\$x\$<\/code>/.test(out), 'backtick span stays literal');
   assert.ok(out.includes('data-mx-maths="y"'));
 });
+
+test('[#107] a code block language becomes class="language-…"', () => {
+  const block = {
+    ...(el(BlockType.CodeBlock, [el(BlockType.CodeLine, [txt('let a = 1;')])]) as object),
+    lang: 'js',
+  } as unknown as Descendant;
+  assert.equal(
+    toMatrixCustomHTML(block, OPTS),
+    '<pre><code class="language-js">let a = 1;\n</code></pre>',
+  );
+});
+
+test('[#107] an unsafe language value is dropped', () => {
+  const block = {
+    ...(el(BlockType.CodeBlock, [el(BlockType.CodeLine, [txt('x')])]) as object),
+    lang: 'js" onclick="x',
+  } as unknown as Descendant;
+  assert.equal(toMatrixCustomHTML(block, OPTS), '<pre><code>x\n</code></pre>');
+});

src/app/components/editor/output.ts

@@ -86,7 +86,10 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
     case BlockType.CodeLine:
       return `${children}\n`;
     case BlockType.CodeBlock:
-      return `<pre><code>${children}</code></pre>`;
+      // [Gitea #107] Only a plain identifier is ever put in the class.
+      return node.lang && /^[a-z0-9+#-]{1,20}$/.test(node.lang)
+        ? `<pre><code class="language-${node.lang}">${children}</code></pre>`
+        : `<pre><code>${children}</code></pre>`;
     case BlockType.QuoteLine:
       return `${children}<br/>`;
     case BlockType.BlockQuote:

src/app/components/editor/slate.d.ts

@@ -64,6 +64,8 @@ export type CodeLineElement = {
 };
 export type CodeBlockElement = {
   type: BlockType.CodeBlock;
+  /** [Gitea #107] Optional language → `<code class="language-…">`. */
+  lang?: string;
   children: CodeLineElement[];
 };
 export type QuoteLineElement = {

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

@@ -189,14 +189,21 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog style={modalStyle}>
+          <Dialog
+            id="inviteuserprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="inviteuserprompt-dialog-1-title"
+            tabIndex={-1}
+            style={modalStyle}
+          >
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
                 style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               >
                 <Box grow="Yes">
-                  <Text size="H4" truncate>
+                  <Text id="inviteuserprompt-dialog-1-title" size="H4" truncate>
                     {t('Organisms.InviteUser.invite')}
                   </Text>
                 </Box>

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -67,13 +67,21 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#joinaddressprompt-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="joinaddressprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="joinaddressprompt-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -82,7 +90,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="joinaddressprompt-dialog-1-title" as="h2" size="H4">
                   Join with Address
                 </Text>
               </Box>

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -52,13 +52,21 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#leaveroomprompt-dialog',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title" style={modalStyle}>
+          <Dialog
+            id="leaveroomprompt-dialog"
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
+            variant="Surface"
+            aria-labelledby="leave-room-dialog-title"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -52,13 +52,21 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#leavespaceprompt-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="leavespaceprompt-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="leavespaceprompt-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -68,7 +76,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="leavespaceprompt-dialog-1-title" as="h2" size="H4">
                   Leave Space
                 </Text>
               </Box>

src/app/components/message/Reply.tsx

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

src/app/components/message/ReplyMediaThumb.tsx

@@ -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>
+  );
+}

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

@@ -105,16 +105,21 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#file-viewer-2-dialog',
                 onDeactivate: () => setTextViewer(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
               <Modal
+                id="file-viewer-2-dialog"
+                role="dialog"
+                aria-modal="true"
+                aria-label={`File: ${body}`}
+                tabIndex={-1}
                 className={ModalWide}
                 size="500"
-                onContextMenu={(evt: any) => evt.stopPropagation()}
+                onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
               >
                 {renderViewer({
                   name: body,
@@ -194,16 +199,21 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#file-viewer-1-dialog',
                 onDeactivate: () => setPdfViewer(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
               <Modal
+                id="file-viewer-1-dialog"
+                role="dialog"
+                aria-modal="true"
+                aria-label={`File: ${body}`}
+                tabIndex={-1}
                 className={ModalWide}
                 size="500"
-                onContextMenu={(evt: any) => evt.stopPropagation()}
+                onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
               >
                 {renderViewer({
                   name: body,

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

@@ -47,6 +47,9 @@ type RenderImageProps = {
   onError: () => void;
   onClick: () => void;
   tabIndex: number;
+  role: 'button';
+  'aria-label': string;
+  onKeyDown: (evt: React.KeyboardEvent<HTMLElement>) => void;
 };
 export type ImageContentProps = {
   body: string;
@@ -143,7 +146,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,
@@ -188,6 +191,15 @@ export const ImageContent = as<'div', ImageContentProps>(
               onError: handleError,
               onClick: () => (onOpenViewer ? onOpenViewer() : setViewer(true)),
               tabIndex: 0,
+              // [Gitea #164] Keyboard users could Tab to the image but not open it.
+              role: 'button',
+              'aria-label': `View image: ${body}`,
+              onKeyDown: (evt) => {
+                if (evt.key !== 'Enter' && evt.key !== ' ') return;
+                evt.preventDefault();
+                if (onOpenViewer) onOpenViewer();
+                else setViewer(true);
+              },
             })}
           </Box>
         )}

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

@@ -1,10 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Chip, color, config, Icon, Icons, Text, toRem } from 'folds';
 import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
 import { MatrixEvent, Room, RoomEvent, PollEvent } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMemberName } from '../../../utils/room';
+import { getMemberName, sendRoomEvent } from '../../../utils/room';
 import {
   ParsedPoll,
   PollResponse,
@@ -43,7 +42,7 @@ function computePollState(
   const validIds = new Set(parsed.answers.map((a) => a.id));
 
   const getRels = (type: string): MatrixEvent[] =>
-    relations.getChildEventsForEvent(eventId, 'm.reference', type as any)?.getRelations() ?? [];
+    relations.getChildEventsForEvent(eventId, 'm.reference', type)?.getRelations() ?? [];
 
   const endEvents = [...getRels('m.poll.end'), ...getRels('org.matrix.msc3381.poll.end')];
   const respEvents = [
@@ -127,18 +126,10 @@ export function PollContent({
     if (!eventId || !parsed) return undefined;
     const relations = room.getUnfilteredTimelineSet().relations;
     const relObjs = [
-      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.response' as any),
-      relations.getChildEventsForEvent(
-        eventId,
-        'm.reference',
-        'org.matrix.msc3381.poll.response' as any,
-      ),
-      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.end' as any),
-      relations.getChildEventsForEvent(
-        eventId,
-        'm.reference',
-        'org.matrix.msc3381.poll.end' as any,
-      ),
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.response'),
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'org.matrix.msc3381.poll.response'),
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.end'),
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'org.matrix.msc3381.poll.end'),
     ];
     relObjs.forEach((r) => {
       r?.on(RelationsEvent.Add, refresh);
@@ -228,7 +219,7 @@ export function PollContent({
     setPending(next);
     // Send the STABLE m.poll.response (matches Lotus's stable m.poll.start; the reader
     // accepts both namespaces).
-    mx.sendEvent(roomId, 'm.poll.response' as any, {
+    sendRoomEvent(mx, roomId, null, 'm.poll.response', {
       'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
       'm.selections': Array.from(next),
     }).catch(() => setPending(null));
@@ -237,7 +228,7 @@ export function PollContent({
   const handleEndPoll = () => {
     if (!roomId || !eventId || ending) return;
     setEnding(true);
-    mx.sendEvent(roomId, 'm.poll.end' as any, {
+    sendRoomEvent(mx, roomId, null, 'm.poll.end', {
       'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
       'm.poll.end': {},
       'm.text': 'The poll has ended.',

src/app/components/nav/NavItem.tsx

@@ -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) => (

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

@@ -69,7 +69,7 @@ const NavItemBase = style({
     [`&:has(.${NavLink}:active)`]: {
       backgroundColor: ContainerActive,
     },
-    '&[aria-selected=true]': {
+    '&[data-selected=true]': {
       backgroundColor: ContainerActive,
     },
     [`&:has(.${NavLink}:focus-visible)`]: {

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

@@ -76,13 +76,22 @@ export function ReadReceiptAvatars({
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#readreceipt-seenby-dialog',
               onDeactivate: () => setOpen(false),
               clickOutsideDeactivates: true,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal variant="Surface" size="300" style={modalStyle}>
+            <Modal
+              id="readreceipt-seenby-dialog"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Seen by"
+              tabIndex={-1}
+              variant="Surface"
+              size="300"
+              style={modalStyle}
+            >
               <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
             </Modal>
           </FocusTrap>

src/app/components/room-card/RoomCard.tsx

@@ -105,13 +105,20 @@ function ErrorDialog({
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#roomcard-error-dialog',
               clickOutsideDeactivates: true,
               onDeactivate: closeError,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog
+              id="roomcard-error-dialog"
+              role="dialog"
+              aria-modal="true"
+              aria-label={title}
+              tabIndex={-1}
+              variant="Surface"
+            >
               <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
                 <Box direction="Column" gap="100">
                   <Text>{title}</Text>

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -26,6 +26,10 @@ export const RoomTopicViewer = as<
 
   return (
     <Modal
+      id="roomtopicviewer-dialog"
+      role="dialog"
+      aria-modal="true"
+      tabIndex={-1}
       size="300"
       flexHeight
       className={classNames(css.ModalFlex, className)}

src/app/components/seasonal/SeasonalEffect.tsx

@@ -3,13 +3,13 @@ import { useAtomValue } from 'jotai';
 import { settingsAtom } from '../../state/settings';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { zIndices } from '../../styles/zIndex';
-import { SeasonTheme } from './types';
+import { SeasonTheme, SeasonalOverlayProps } from './types';
 import { resolveSeasonTheme } from './seasonSchedule';
 
 // [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 }> }>) =>
+const lazyOverlay = (load: () => Promise<{ default: React.ComponentType<SeasonalOverlayProps> }>) =>
   React.lazy(load);
 const HalloweenOverlay = lazyOverlay(() =>
   import('./themes/Halloween').then((m) => ({ default: m.HalloweenOverlay })),
@@ -52,16 +52,20 @@ export type { SeasonTheme };
 
 // ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──
 
-function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
+function buildOverlayContent(
+  theme: SeasonTheme,
+  reduced: boolean,
+  preview = false,
+): React.ReactNode {
   switch (theme) {
     case 'halloween':
-      return <HalloweenOverlay reduced={reduced} />;
+      return <HalloweenOverlay reduced={reduced} preview={preview} />;
     case 'christmas':
       return <ChristmasOverlay reduced={reduced} />;
     case 'newyear':
       return <NewYearOverlay reduced={reduced} />;
     case 'autumn':
-      return <AutumnOverlay reduced={reduced} />;
+      return <AutumnOverlay reduced={reduced} preview={preview} />;
     case 'aprilfools':
       return <AprilFoolsOverlay reduced={reduced} />;
     case 'lunar':
@@ -122,7 +126,7 @@ export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
         containerType: 'inline-size',
       }}
     >
-      <Suspense fallback={null}>{buildOverlayContent(theme, true)}</Suspense>
+      <Suspense fallback={null}>{buildOverlayContent(theme, true, true)}</Suspense>
     </div>
   );
 }

src/app/components/seasonal/themes/Autumn.css.ts

@@ -1,35 +1,23 @@
-import { keyframes } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 /**
  * Autumn overlay keyframes. Every animation touches ONLY `transform` and
- * `opacity` so the compositor can run them on the GPU without triggering
- * layout or paint. keyframes() returns the generated animation-name string,
- * which is applied inline in Autumn.tsx.
- *
- * Motion philosophy: warm, slow, cozy. Leaves tumble and rotate as they fall
- * with a per-leaf sway decoupled on a wrapper; sun shafts breathe; dust motes
- * drift up through the light; the whole frame has a barely-there warm pulse.
+ * `opacity` so the compositor can run them without layout or paint.
  */
 
 /**
- * A leaf falls from above to below the viewport while continuously rotating.
- * A single tall translateY serves every leaf — per-leaf duration/delay/scale
- * create the parallax variety. Horizontal travel is intentionally small here
- * because the real lateral motion comes from the sway wrapper below.
+ * A leaf falls from above to below the viewport while slowly turning. One tall
+ * translateY serves every leaf; per-leaf duration/delay/size give parallax.
  */
 export const animLeafFall = keyframes({
   '0%': { transform: 'translate3d(0, -12vh, 0) rotate(-30deg)', opacity: '0' },
-  '8%': { opacity: '1' },
-  '50%': { transform: 'translate3d(10px, 50vh, 0) rotate(200deg)' },
-  '92%': { opacity: '0.85' },
-  '100%': { transform: 'translate3d(-6px, 114vh, 0) rotate(430deg)', opacity: '0' },
+  '6%': { opacity: '1' },
+  '50%': { transform: 'translate3d(10px, 50vh, 0) rotate(160deg)' },
+  '94%': { opacity: '0.9' },
+  '100%': { transform: 'translate3d(-6px, 114vh, 0) rotate(340deg)', opacity: '0' },
 });
 
-/**
- * Lateral sway applied to a leaf's wrapper so the descent reads as wind
- * catching the blade. Decoupled from the fall so the two compose into an
- * organic, non-repeating-looking path.
- */
+/** Lateral sway on the leaf's wrapper so the descent reads as wind. */
 export const animLeafSway = keyframes({
   '0%': { transform: 'translate3d(0, 0, 0)' },
   '50%': { transform: 'translate3d(34px, 0, 0)' },
@@ -37,55 +25,40 @@ export const animLeafSway = keyframes({
 });
 
 /**
- * A second flutter on the leaf's inner shape: a gentle skew/scale wobble that
- * mimics the blade catching air as it spins. Cheap, transform-only.
+ * Soft flutter on the blade. [#237] Gentler than before (scaleX 0.82 made
+ * leaves flatten into slivers mid-flip).
  */
 export const animLeafFlutter = keyframes({
-  '0%': { transform: 'rotate(-8deg) scaleX(1)' },
-  '50%': { transform: 'rotate(8deg) scaleX(0.82)' },
-  '100%': { transform: 'rotate(-8deg) scaleX(1)' },
+  '0%': { transform: 'rotate(-10deg) scaleX(1)' },
+  '50%': { transform: 'rotate(10deg) scaleX(0.92)' },
+  '100%': { transform: 'rotate(-10deg) scaleX(1)' },
 });
 
 /**
- * Low-sun light shaft: a long soft beam slowly slides and breathes. Uses
- * translateX + opacity (never background-position) so it stays on the
- * compositor. Scale on Y makes the beam subtly elongate as it brightens.
+ * [#237] A gust: the leaf enters from the left, is blown across and up while
+ * spinning, and leaves on the right in ~6 s (14 % of a 42 s cycle). The rest
+ * of the cycle it waits off-screen, invisible.
  */
-export const animSunShaft = keyframes({
-  '0%': { transform: 'translate3d(-4%, 0, 0) scaleY(1)', opacity: '0.4' },
-  '50%': { transform: 'translate3d(4%, 0, 0) scaleY(1.06)', opacity: '0.75' },
-  '100%': { transform: 'translate3d(-4%, 0, 0) scaleY(1)', opacity: '0.4' },
+export const animGust = keyframes({
+  '0%': { transform: 'translate3d(-12vw, 0, 0) rotate(0deg)', opacity: '0' },
+  '1%': { opacity: '1' },
+  // Fast in, then carried steadily across and up (linear timing: an eased
+  // curve would apply per segment and stop the leaves mid-air).
+  '3.5%': { transform: 'translate3d(22vw, -3vh, 0) rotate(200deg)' },
+  '8%': { transform: 'translate3d(62vw, -12vh, 0) rotate(420deg)' },
+  '12.5%': { opacity: '1' },
+  '14%': { transform: 'translate3d(112vw, -24vh, 0) rotate(700deg)', opacity: '0' },
+  '100%': { transform: 'translate3d(112vw, -24vh, 0) rotate(700deg)', opacity: '0' },
 });
 
 /**
- * Dust / pollen mote: a tiny speck drifts upward through the light, swaying,
- * pulsing softly in brightness as it catches the sun. transform + opacity.
+ * Leaf blade. On the dark themes the crimson/russet leaves sank into the
+ * background, so they are lifted there.
  */
-export const animMoteDrift = keyframes({
-  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
-  '15%': { opacity: '0.85' },
-  '40%': { transform: 'translate3d(16px, -30vh, 0) scale(1)' },
-  '70%': { transform: 'translate3d(-12px, -58vh, 0) scale(0.85)', opacity: '0.6' },
-  '90%': { opacity: '0.2' },
-  '100%': { transform: 'translate3d(10px, -84vh, 0) scale(0.6)', opacity: '0' },
-});
-
-/**
- * Independent twinkle for motes — a brightness flicker layered on the drift so
- * specks shimmer as if turning in the light. Opacity only.
- */
-export const animMoteTwinkle = keyframes({
-  '0%': { opacity: '0.5' },
-  '50%': { opacity: '1' },
-  '100%': { opacity: '0.5' },
-});
-
-/**
- * Barely-there breathing of the warm vignette frame so the static tint feels
- * alive without any distracting motion. Opacity only.
- */
-export const animEmberPulse = keyframes({
-  '0%': { opacity: '0.82' },
-  '50%': { opacity: '1' },
-  '100%': { opacity: '0.82' },
+export const leafBlade = style({
+  selectors: {
+    'body.dark-theme &, body.butter-theme &': {
+      filter: 'brightness(1.6) saturate(1.2)',
+    },
+  },
 });

src/app/components/seasonal/themes/Autumn.tsx

@@ -1,97 +1,108 @@
 import React, { useMemo } from 'react';
 import { SeasonalOverlayProps } from '../types';
-import {
-  animLeafFall,
-  animLeafSway,
-  animLeafFlutter,
-  animSunShaft,
-  animMoteDrift,
-  animMoteTwinkle,
-  animEmberPulse,
-} from './Autumn.css';
+import { animGust, animLeafFall, animLeafFlutter, animLeafSway, leafBlade } from './Autumn.css';
 
 /**
- * AutumnOverlay — warm falling leaves.
+ * AutumnOverlay — falling leaves over the app as it is.
  *
  * A full-screen, pointer-events:none ambient decoration. The parent supplies a
  * fixed inset:0 overflow:hidden pointer-events:none container at the correct
  * z-index, so this component only returns absolutely-positioned aria-hidden
  * children and never sets position:fixed / z-index / pointer-events.
  *
- * Composition (back to front):
- *   1. amber -> rust ambient gradient wash (cozy low-sun atmosphere)
- *   2. soft angled sun shafts breathing high across the scene
- *   3. drifting pollen / dust motes catching the light
- *   4. maple & oak leaf silhouettes tumbling and rotating as they fall
- *   5. a warm low-saturation vignette that frames + protects text contrast
+ * [#237] Deliberately no full-screen tint, light shafts or vignette: they
+ * turned the user's theme beige (muddy brown on dark) and lowered contrast
+ * everywhere. The leaves carry the season on their own.
  *
- * All motion is transform/opacity only (compositor-friendly). When `reduced`
- * is true we render a static-but-gorgeous scene: a handful of leaves at rest,
- * still sun shafts, and the warm vignette — no `animation` anywhere. The
- * settings preview always passes reduced=true, so the still form stands alone.
+ * Composition:
+ *   1. maple / oak / aspen leaves drifting down with sway and a soft flutter
+ *   2. every ~42 s a gust: a small group of leaves blows across the screen
+ * All motion is transform/opacity only. When `reduced` is true: a few leaves
+ * at rest in empty parts of the layout, no animation, no gust. The settings
+ * preview always passes reduced=true, so the still form stands alone.
  */
 
-// Warm autumn palette in oklch. Kept low-saturation enough to never fight the
-// chat text underneath. Each leaf picks a tone for variety.
-const LEAF_TONES = [
-  'oklch(0.75 0.15 70)', // amber
-  'oklch(0.55 0.16 40)', // rust
-  'oklch(0.82 0.13 85)', // warm gold
-  'oklch(0.62 0.16 55)', // burnt orange
-  'oklch(0.5 0.14 35)', // deep ember
+// [#237] A real autumn palette: [body, tip highlight, vein]. The previous
+// muted tans read as beige smudges on the light theme.
+const LEAF_TONES: [string, string, string][] = [
+  ['oklch(0.56 0.19 30)', 'oklch(0.68 0.17 45)', 'oklch(0.38 0.12 28)'], // crimson
+  ['oklch(0.68 0.17 52)', 'oklch(0.8 0.15 75)', 'oklch(0.45 0.12 45)'], // pumpkin orange
+  ['oklch(0.76 0.15 80)', 'oklch(0.85 0.13 92)', 'oklch(0.52 0.1 65)'], // gold
+  ['oklch(0.5 0.1 50)', 'oklch(0.62 0.11 60)', 'oklch(0.34 0.06 45)'], // russet brown
+  ['oklch(0.62 0.18 40)', 'oklch(0.74 0.16 60)', 'oklch(0.42 0.12 35)'], // burnt orange
 ];
 
-// Two leaf silhouettes as inline SVG path data (no external assets, CSP-safe).
-// `maple` = classic five-lobed maple; `oak` = rounded-lobe oak blade.
-const MAPLE_PATH =
-  'M50 4 L57 30 L78 18 L66 40 L92 40 L70 52 L84 74 L58 62 L56 92 L50 70 ' +
-  'L44 92 L42 62 L16 74 L30 52 L8 40 L34 40 L22 18 L43 30 Z';
-const OAK_PATH =
-  'M50 4 C58 14 56 22 64 24 C74 22 74 32 68 36 C78 38 76 48 68 50 ' +
-  'C78 54 74 64 66 64 C70 74 60 78 54 72 C54 84 50 96 50 96 ' +
-  'C50 96 46 84 46 72 C40 78 30 74 34 64 C26 64 22 54 32 50 ' +
-  'C24 48 22 38 32 36 C26 32 26 22 36 24 C44 22 42 14 50 4 Z';
+type LeafKind = 'maple' | 'oak' | 'aspen';
 
-/** Build a CSS-ready data-URI of a single tinted leaf silhouette. */
-function leafDataUri(kind: 'maple' | 'oak', fill: string): string {
-  const path = kind === 'maple' ? MAPLE_PATH : OAK_PATH;
-  // A faint vein line gives the blade depth without extra DOM nodes.
+// Leaf silhouettes (viewBox 0 0 100 100, stem at the bottom). The maple is the
+// flag-style silhouette on purpose: its bold lobes stay recognisable at 30 px,
+// where the previous star-like outline read as a splat.
+const LEAF_SHAPES: Record<LeafKind, { body: string; veins: string }> = {
+  maple: {
+    body:
+      'M50 5 L54 20 L62 14 L60 30 L74 22 L70 36 L86 34 L78 46 L90 52 L74 56 L78 66 ' +
+      'L60 62 L56 72 L52 64 L52 94 L48 94 L48 64 L44 72 L40 62 L22 66 L26 56 L10 52 ' +
+      'L22 46 L14 34 L30 36 L26 22 L40 30 L38 14 L46 20 Z',
+    veins: 'M50 66 L50 14 M50 58 L80 40 M50 58 L20 40 M50 64 L70 60 M50 64 L30 60',
+  },
+  oak: {
+    body:
+      'M50 4 C58 14 56 22 64 24 C74 22 74 32 68 36 C78 38 76 48 68 50 ' +
+      'C78 54 74 64 66 64 C70 74 60 78 54 72 C54 80 52 86 52 96 L48 96 ' +
+      'C48 86 46 80 46 72 C40 78 30 74 34 64 C26 64 22 54 32 50 ' +
+      'C24 48 22 38 32 36 C26 32 26 22 36 24 C44 22 42 14 50 4 Z',
+    veins:
+      'M50 76 L50 12 M50 34 L64 28 M50 34 L36 28 M50 50 L66 44 M50 50 L34 44 M50 64 L62 60 M50 64 L38 60',
+  },
+  aspen: {
+    body: 'M50 8 C74 22 80 54 52 84 L52 96 L48 96 L48 84 C20 54 26 22 50 8 Z',
+    veins: 'M50 84 L50 16 M50 40 L64 32 M50 40 L36 32 M50 58 L66 50 M50 58 L34 50',
+  },
+};
+
+/** Build a CSS-ready data-URI of one leaf: gradient body, darker veins. */
+function leafDataUri(kind: LeafKind, [body, tip, vein]: [string, string, string]): string {
+  const shape = LEAF_SHAPES[kind];
   const svg =
     `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>` +
-    `<path d='${path}' fill='${fill}' fill-opacity='0.92'/>` +
-    `<path d='M50 96 L50 24' stroke='oklch(0.42 0.12 38)' stroke-opacity='0.35' ` +
-    `stroke-width='2.5' fill='none' stroke-linecap='round'/>` +
+    `<defs><linearGradient id='g' x1='0' y1='1' x2='0.4' y2='0'>` +
+    `<stop offset='0' stop-color='${body}'/><stop offset='1' stop-color='${tip}'/>` +
+    `</linearGradient></defs>` +
+    `<path d='${shape.body}' fill='url(#g)'/>` +
+    `<path d='${shape.veins}' stroke='${vein}' stroke-opacity='0.7' stroke-width='2' ` +
+    `fill='none' stroke-linecap='round'/>` +
     `</svg>`;
   return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 
 type Leaf = {
-  kind: 'maple' | 'oak';
   uri: string;
-  left: number; // vw column
-  size: number; // px
+  left: number;
+  size: number;
   duration: number; // s — fall time
   delay: number; // s
-  swayDuration: number; // s — wrapper sway
-  flutterDuration: number; // s — inner flutter
-  tilt: number; // deg — resting rotation (used for static scene)
+  swayDuration: number;
+  flutterDuration: number;
   opacity: number;
 };
 
-type Mote = {
-  left: number;
-  bottom: number;
+type GustLeaf = {
+  uri: string;
+  top: number; // % of height where it enters
   size: number;
-  duration: number;
-  delay: number;
-  twinkle: number;
+  delay: number; // s within the gust
   opacity: number;
 };
 
-// A few hand-placed leaves at rest for the reduced/static scene — arranged so
-// they read as "settled" near edges and corners, never over the busy center.
+/** Seconds between gusts, and when the first one comes after load. */
+const GUST_PERIOD = 42;
+const GUST_FIRST = 8;
+
+// Leaves at rest for the reduced/static scene, in areas that are empty in the
+// layout (middle of the left icon rail, the space under the member list),
+// partly off-edge — never on the sidebar, members, composer or controls.
 const RESTING_LEAVES: ReadonlyArray<{
-  kind: 'maple' | 'oak';
+  kind: LeafKind;
   left: number;
   top: number;
   size: number;
@@ -99,212 +110,198 @@ const RESTING_LEAVES: ReadonlyArray<{
   tone: number;
   opacity: number;
 }> = [
-  { kind: 'maple', left: 6, top: 14, size: 46, tilt: -22, tone: 0, opacity: 0.4 },
-  { kind: 'oak', left: 88, top: 22, size: 38, tilt: 28, tone: 1, opacity: 0.34 },
-  { kind: 'maple', left: 16, top: 78, size: 54, tilt: 16, tone: 3, opacity: 0.42 },
-  { kind: 'oak', left: 80, top: 82, size: 44, tilt: -34, tone: 4, opacity: 0.36 },
-  { kind: 'maple', left: 50, top: 90, size: 40, tilt: 8, tone: 2, opacity: 0.32 },
-  { kind: 'oak', left: 70, top: 8, size: 32, tilt: -12, tone: 2, opacity: 0.3 },
+  { kind: 'maple', left: 0.5, top: 44, size: 60, tilt: 24, tone: 0, opacity: 0.62 },
+  { kind: 'aspen', left: 1.5, top: 54, size: 44, tilt: -30, tone: 2, opacity: 0.6 },
+  { kind: 'oak', left: 99, top: 62, size: 54, tilt: 160, tone: 3, opacity: 0.6 },
+  { kind: 'maple', left: 97.5, top: 72, size: 46, tilt: 200, tone: 4, opacity: 0.6 },
 ];
 
-export function AutumnOverlay({ reduced }: SeasonalOverlayProps) {
-  // Deterministic pseudo-random field, computed ONCE. No per-frame state.
-  const { leaves, motes } = useMemo(() => {
-    const LEAF_COUNT = 16;
-    const MOTE_COUNT = 12;
+// Composition for the Settings swatch (sizes are % of the tile width).
+const PREVIEW_LEAVES: ReadonlyArray<{
+  kind: LeafKind;
+  left: number;
+  top: number;
+  size: number;
+  tilt: number;
+  tone: number;
+}> = [
+  { kind: 'maple', left: 30, top: 38, size: 42, tilt: -18, tone: 0 },
+  { kind: 'oak', left: 70, top: 30, size: 30, tilt: 34, tone: 3 },
+  { kind: 'aspen', left: 62, top: 70, size: 30, tilt: -60, tone: 2 },
+  { kind: 'maple', left: 86, top: 80, size: 24, tilt: 20, tone: 1 },
+  { kind: 'maple', left: 12, top: 82, size: 20, tilt: 40, tone: 4 },
+];
 
-    const builtLeaves: Leaf[] = Array.from({ length: LEAF_COUNT }, (_, i) => {
-      const kind: 'maple' | 'oak' = i % 3 === 0 ? 'oak' : 'maple';
-      const tone = LEAF_TONES[i % LEAF_TONES.length];
-      const sizeBucket = i % 4; // 0..3 → depth bucket for parallax
-      const size = 22 + sizeBucket * 9; // 22..49 px
+export function AutumnOverlay({ reduced, preview }: SeasonalOverlayProps) {
+  // Deterministic field, computed ONCE. No per-frame state.
+  const { leaves, gust } = useMemo(() => {
+    const kinds = ['maple', 'oak', 'maple', 'aspen'] as const;
+    const builtLeaves: Leaf[] = Array.from({ length: 12 }, (_, i) => {
+      const depth = i % 4; // 0..3 → parallax bucket
       return {
-        kind,
-        uri: leafDataUri(kind, tone),
-        left: (i * 6.13 + 4) % 100,
-        size,
-        // Larger (nearer) leaves fall a touch faster; all slow + cozy.
-        duration: 16 - sizeBucket * 1.6 + (i % 3) * 1.3,
-        delay: -((i * 1.37) % 16), // negative → staggered, already mid-fall
+        uri: leafDataUri(kinds[i % 4], LEAF_TONES[i % LEAF_TONES.length]),
+        left: (i * 8.3 + 4) % 100,
+        size: 28 + depth * 8, // 28..52 px
+        // Nearer leaves fall a touch faster; all slow and calm.
+        duration: 16 - depth * 1.6 + (i % 3) * 1.3,
+        delay: -((i * 1.37) % 16), // negative → already mid-fall on load
         swayDuration: 5 + (i % 5) * 0.8,
-        flutterDuration: 1.6 + (i % 4) * 0.45,
-        tilt: ((i * 53) % 70) - 35,
-        opacity: 0.34 + sizeBucket * 0.08, // nearer → slightly bolder
+        flutterDuration: 2 + (i % 4) * 0.5,
+        // Nearer → bolder. Small, moving and semi-transparent, so text under a
+        // passing leaf stays readable.
+        opacity: 0.58 + depth * 0.05,
       };
     });
-
-    const builtMotes: Mote[] = Array.from({ length: MOTE_COUNT }, (_, i) => ({
-      left: (i * 8.7 + 5) % 100,
-      bottom: (i * 4.3) % 30, // start in lower third, drift up
-      size: 2 + (i % 3),
-      duration: 16 + (i % 6) * 2.4,
-      delay: -((i * 2.1) % 16),
-      twinkle: 2.2 + (i % 4) * 0.6,
-      opacity: 0.4 + (i % 3) * 0.12,
+    const builtGust: GustLeaf[] = Array.from({ length: 5 }, (_, i) => ({
+      uri: leafDataUri(kinds[(i + 1) % 4], LEAF_TONES[(i * 2) % LEAF_TONES.length]),
+      top: 30 + ((i * 13) % 40),
+      size: 30 + (i % 3) * 10,
+      delay: GUST_FIRST + i * 0.35,
+      opacity: 0.7,
     }));
-
-    return { leaves: builtLeaves, motes: builtMotes };
+    return { leaves: builtLeaves, gust: builtGust };
   }, []);
 
-  return (
-    <>
-      {/* 1. Ambient amber → rust atmospheric wash. Layered oklch gradients give
-            depth: a warm low-sun glow from the upper-left, a rust pool at the
-            base, and a faint gold core. Kept very low opacity. */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          backgroundImage: [
-            'radial-gradient(120% 90% at 18% 8%, oklch(0.82 0.13 85 / 0.16) 0%, transparent 55%)',
-            'radial-gradient(130% 100% at 50% 118%, oklch(0.55 0.16 40 / 0.18) 0%, transparent 60%)',
-            'linear-gradient(180deg, oklch(0.75 0.15 70 / 0.07) 0%, transparent 40%, oklch(0.5 0.14 35 / 0.08) 100%)',
-          ].join(','),
-          contain: 'layout paint style',
-        }}
-      />
-
-      {/* 2. Soft angled low-sun light shafts. Two long beams skewed to suggest
-            late-afternoon light raking across the room. */}
-      {[
-        { left: -8, rotate: 18, w: 38, opacity: 0.5, dur: 17, delay: 0 },
-        { left: 46, rotate: 14, w: 30, opacity: 0.38, dur: 22, delay: -6 },
-        { left: 78, rotate: 22, w: 26, opacity: 0.32, dur: 19, delay: -11 },
-      ].map((shaft, i) => (
+  if (preview) {
+    // The Settings swatch: a warm backdrop (fine inside the tile, unlike over
+    // the app) with a few leaves arranged across it.
+    return (
+      <>
         <div
-          key={`shaft-${i}`}
           aria-hidden="true"
           style={{
             position: 'absolute',
-            top: '-30%',
-            left: `${shaft.left}%`,
-            width: `${shaft.w}vw`,
-            height: '160%',
-            transformOrigin: 'top center',
-            transform: `rotate(${shaft.rotate}deg)`,
-            backgroundImage:
-              'linear-gradient(90deg, transparent 0%, oklch(0.85 0.12 82 / 0.5) 50%, transparent 100%)',
-            filter: 'blur(14px)',
-            mixBlendMode: 'screen',
-            opacity: reduced ? shaft.opacity * 0.85 : undefined,
-            willChange: reduced ? undefined : 'transform, opacity',
-            contain: 'layout paint style',
-            animation: reduced
-              ? 'none'
-              : `${animSunShaft} ${shaft.dur}s ease-in-out ${shaft.delay}s infinite`,
+            inset: 0,
+            background:
+              'linear-gradient(160deg, oklch(0.42 0.09 55) 0%, oklch(0.32 0.08 40) 60%, oklch(0.24 0.06 35) 100%)',
           }}
         />
-      ))}
-
-      {/* 3. Drifting pollen / dust motes catching the light. Static scene omits
-            them — stillness reads cleaner at rest. */}
-      {!reduced &&
-        motes.map((m, i) => (
+        {PREVIEW_LEAVES.map((leaf, i) => (
           <div
-            key={`mote-${i}`}
+            key={`pv-${i}`}
             aria-hidden="true"
             style={{
               position: 'absolute',
-              left: `${m.left}%`,
-              bottom: `${m.bottom}%`,
-              width: `${m.size}px`,
-              height: `${m.size}px`,
+              left: `${leaf.left}%`,
+              top: `${leaf.top}%`,
+              width: `${leaf.size}%`,
+              aspectRatio: '1',
+              backgroundImage: leafDataUri(leaf.kind, LEAF_TONES[leaf.tone]),
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+              transform: `translate(-50%, -50%) rotate(${leaf.tilt}deg)`,
+              filter: 'brightness(1.25)',
+            }}
+          />
+        ))}
+      </>
+    );
+  }
+
+  if (reduced) {
+    // Phones have no icon rail and the timeline runs edge to edge, so the
+    // resting leaves tuck further off-edge and smaller there.
+    const narrow = typeof window !== 'undefined' && window.matchMedia('(max-width: 750px)').matches;
+    return (
+      <>
+        {RESTING_LEAVES.map((leaf, i) => (
+          <div
+            key={`rest-${i}`}
+            aria-hidden="true"
+            className={leafBlade}
+            style={{
+              position: 'absolute',
+              left: narrow ? `${leaf.left < 50 ? -2 : 102}%` : `${leaf.left}%`,
+              top: `${leaf.top}%`,
+              width: `${narrow ? leaf.size * 0.8 : leaf.size}px`,
+              height: `${narrow ? leaf.size * 0.8 : leaf.size}px`,
+              backgroundImage: leafDataUri(leaf.kind, LEAF_TONES[leaf.tone]),
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+              transform: `translate(-50%, -50%) rotate(${leaf.tilt}deg)`,
+              opacity: leaf.opacity,
+            }}
+          />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {leaves.map((leaf, i) => (
+        // Sway wrapper: horizontal wind, decoupled from the fall. No `paint`
+        // containment: it would clip the leaf to this box at the top of the
+        // screen, so it would never be drawn once falling (#237).
+        <div
+          key={`leaf-${i}`}
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: `${leaf.left}%`,
+            width: `${leaf.size}px`,
+            height: `${leaf.size}px`,
+            willChange: 'transform',
+            animation: `${animLeafSway} ${leaf.swayDuration}s ease-in-out ${leaf.delay}s infinite`,
+          }}
+        >
+          {/* Fall wrapper: vertical descent + tumble. */}
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
               willChange: 'transform, opacity',
-              animation: `${animMoteDrift} ${m.duration}s linear ${m.delay}s infinite`,
+              animation: `${animLeafFall} ${leaf.duration}s linear ${leaf.delay}s infinite`,
             }}
           >
+            {/* The leaf itself, with a soft flutter. */}
             <div
+              className={leafBlade}
               style={{
                 width: '100%',
                 height: '100%',
-                borderRadius: '50%',
-                background:
-                  'radial-gradient(circle, oklch(0.88 0.1 85 / 0.95) 0%, oklch(0.78 0.12 70 / 0.4) 60%, transparent 100%)',
-                opacity: m.opacity,
-                animation: `${animMoteTwinkle} ${m.twinkle}s ease-in-out infinite`,
+                backgroundImage: leaf.uri,
+                backgroundSize: 'contain',
+                backgroundRepeat: 'no-repeat',
+                opacity: leaf.opacity,
+                animation: `${animLeafFlutter} ${leaf.flutterDuration}s ease-in-out infinite`,
               }}
             />
           </div>
-        ))}
+        </div>
+      ))}
 
-      {/* 4. Falling / resting maple & oak leaves. */}
-      {reduced
-        ? RESTING_LEAVES.map((leaf, i) => (
-            <div
-              key={`rest-${i}`}
-              aria-hidden="true"
-              style={{
-                position: 'absolute',
-                left: `${leaf.left}%`,
-                top: `${leaf.top}%`,
-                width: `${leaf.size}px`,
-                height: `${leaf.size}px`,
-                backgroundImage: leafDataUri(leaf.kind, LEAF_TONES[leaf.tone]),
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-                transform: `translate(-50%, -50%) rotate(${leaf.tilt}deg)`,
-                opacity: leaf.opacity,
-                filter: 'drop-shadow(0 2px 3px oklch(0.3 0.08 40 / 0.35))',
-              }}
-            />
-          ))
-        : leaves.map((leaf, i) => (
-            // Sway wrapper: horizontal wind motion, decoupled from the fall.
-            <div
-              key={`leaf-${i}`}
-              aria-hidden="true"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: `${leaf.left}%`,
-                width: `${leaf.size}px`,
-                height: `${leaf.size}px`,
-                willChange: 'transform',
-                contain: 'layout paint style',
-                animation: `${animLeafSway} ${leaf.swayDuration}s ease-in-out ${leaf.delay}s infinite`,
-              }}
-            >
-              {/* Fall wrapper: vertical descent + tumble rotation. */}
-              <div
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  willChange: 'transform, opacity',
-                  animation: `${animLeafFall} ${leaf.duration}s linear ${leaf.delay}s infinite`,
-                }}
-              >
-                {/* Inner blade: the actual silhouette + flutter wobble. */}
-                <div
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    backgroundImage: leaf.uri,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                    opacity: leaf.opacity,
-                    filter: 'drop-shadow(0 1px 2px oklch(0.3 0.08 40 / 0.3))',
-                    animation: `${animLeafFlutter} ${leaf.flutterDuration}s ease-in-out infinite`,
-                  }}
-                />
-              </div>
-            </div>
-          ))}
-
-      {/* 5. Warm low-saturation vignette. Frames the scene and gently darkens
-            edges — protecting central chat text contrast. Breathes faintly. */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          backgroundImage:
-            'radial-gradient(120% 110% at 50% 45%, transparent 52%, oklch(0.38 0.07 45 / 0.14) 82%, oklch(0.3 0.06 40 / 0.22) 100%)',
-          contain: 'layout paint style',
-          opacity: reduced ? 1 : undefined,
-          animation: reduced ? 'none' : `${animEmberPulse} 9s ease-in-out infinite`,
-        }}
-      />
+      {/* Gust: a handful of leaves blown across the screen together, then a
+          long calm. Off-screen (and invisible) the rest of the cycle. */}
+      {gust.map((leaf, i) => (
+        <div
+          key={`gust-${i}`}
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            top: `${leaf.top}%`,
+            left: 0,
+            width: `${leaf.size}px`,
+            height: `${leaf.size}px`,
+            opacity: 0,
+            willChange: 'transform, opacity',
+            animation: `${animGust} ${GUST_PERIOD}s linear ${leaf.delay}s infinite`,
+          }}
+        >
+          <div
+            className={leafBlade}
+            style={{
+              width: '100%',
+              height: '100%',
+              backgroundImage: leaf.uri,
+              backgroundSize: 'contain',
+              backgroundRepeat: 'no-repeat',
+              opacity: leaf.opacity,
+            }}
+          />
+        </div>
+      ))}
     </>
   );
 }

src/app/components/seasonal/themes/Halloween.css.ts

@@ -1,56 +1,146 @@
-import { keyframes } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 
 /**
- * Halloween overlay keyframes. Every animation touches ONLY `transform` and
- * `opacity` so the compositor can run them on the GPU without layout/paint.
- * keyframes() returns the generated animation-name string, applied inline.
+ * Halloween overlay styles. Motion is transform/opacity only.
+ *
+ * [#239] Colours come from two custom properties set on the overlay root so
+ * the bats/spider stay dark silhouettes on light themes and turn to a pale
+ * dusk-violet on dark themes (a black bat on a black theme is invisible).
  */
-
-/** Slow breathing of the sickly moon-glow vignette. */
-export const animMoonPulse = keyframes({
-  '0%': { transform: 'scale(1)', opacity: '0.55' },
-  '50%': { transform: 'scale(1.06)', opacity: '0.8' },
-  '100%': { transform: 'scale(1)', opacity: '0.55' },
+export const halloweenRoot = style({
+  position: 'absolute',
+  inset: 0,
+  vars: {
+    '--hw-ink': 'oklch(0.24 0.04 300)',
+    '--hw-web': 'oklch(0.42 0.02 290 / 0.42)',
+    '--hw-eye': 'oklch(0.72 0.18 55)',
+  },
+  selectors: {
+    'body.dark-theme &, body.butter-theme &': {
+      vars: {
+        '--hw-ink': 'oklch(0.72 0.06 300)',
+        '--hw-web': 'oklch(0.85 0.02 290 / 0.36)',
+        '--hw-eye': 'oklch(0.8 0.17 60)',
+      },
+    },
+  },
 });
 
-/** Low fog band: drifts sideways while gently rising and swelling. */
-export const animFogDrift = keyframes({
-  '0%': { transform: 'translate3d(-12%, 6%, 0) scale(1.1)', opacity: '0' },
-  '15%': { opacity: '0.5' },
-  '50%': { transform: 'translate3d(6%, -2%, 0) scale(1.25)', opacity: '0.65' },
-  '85%': { opacity: '0.45' },
-  '100%': { transform: 'translate3d(18%, 4%, 0) scale(1.1)', opacity: '0' },
+/** A bat group crosses the top of the screen in ~9 s, then a long calm. */
+export const animBatFlight = keyframes({
+  '0%': { transform: 'translate3d(-10vw, 0, 0)', opacity: '0' },
+  '1%': { opacity: '1' },
+  '29%': { opacity: '1' },
+  '30%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
+  '100%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
 });
 
-/** A bat flaps slowly across the sky in a shallow arc. */
-export const animBatGlide = keyframes({
-  '0%': { transform: 'translate3d(-12vw, 8vh, 0) scale(0.9)', opacity: '0' },
-  '10%': { opacity: '0.7' },
-  '45%': { transform: 'translate3d(45vw, -4vh, 0) scale(1)' },
-  '80%': { transform: 'translate3d(85vw, 6vh, 0) scale(0.95)', opacity: '0.6' },
-  '100%': { transform: 'translate3d(112vw, 2vh, 0) scale(0.9)', opacity: '0' },
+/** Up-and-down bobbing on each bat, so the group doesn't move as one block. */
+export const animBatBob = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '50%': { transform: 'translate3d(0, 14px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
 });
 
-/** The bat's wings beat — fast vertical squash of the wing element. */
-export const animWingFlap = keyframes({
-  '0%': { transform: 'scaleY(1) scaleX(1)' },
-  '50%': { transform: 'scaleY(0.35) scaleX(1.08)' },
-  '100%': { transform: 'scaleY(1) scaleX(1)' },
+/** Wing beat: the silhouette squashes vertically around the body. */
+export const animBatFlap = keyframes({
+  '0%': { transform: 'scaleY(1)' },
+  '50%': { transform: 'scaleY(0.62)' },
+  '100%': { transform: 'scaleY(1)' },
 });
 
-/** Will-o'-wisp ember: floats upward, swaying, pulsing in brightness. */
-export const animEmberFloat = keyframes({
-  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
-  '12%': { opacity: '0.85' },
-  '35%': { transform: 'translate3d(14px, -28vh, 0) scale(1)' },
-  '65%': { transform: 'translate3d(-12px, -55vh, 0) scale(0.9)', opacity: '0.7' },
-  '90%': { opacity: '0.25' },
-  '100%': { transform: 'translate3d(8px, -82vh, 0) scale(0.6)', opacity: '0' },
+/** The spider bobs on its thread (thread and spider move together). */
+export const animSpiderBob = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '50%': { transform: 'translate3d(0, 18px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
 });
 
-/** Soft twinkle for embers — independent opacity flicker layered on top. */
-export const animEmberTwinkle = keyframes({
-  '0%': { opacity: '0.6' },
-  '50%': { opacity: '1' },
-  '100%': { opacity: '0.6' },
+/** A slow sway of the spider itself on the end of the thread. */
+export const animSpiderSway = keyframes({
+  '0%': { transform: 'rotate(-6deg)' },
+  '50%': { transform: 'rotate(6deg)' },
+  '100%': { transform: 'rotate(-6deg)' },
+});
+
+/**
+ * A small ghost rises from the lower part of the screen, drifting sideways,
+ * and fades out — ~8 s in a 50 s cycle.
+ */
+export const animGhost = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0) scale(0.9)', opacity: '0' },
+  '3%': { opacity: '0.8' },
+  '8%': { transform: 'translate3d(6vw, -20vh, 0) scale(1)' },
+  '13%': { opacity: '0.75' },
+  '16%': { transform: 'translate3d(-2vw, -42vh, 0) scale(1.05)', opacity: '0' },
+  '100%': { transform: 'translate3d(-2vw, -42vh, 0) scale(1.05)', opacity: '0' },
+});
+
+/** The ghost's tail wisps, a gentle wobble. */
+export const animGhostWobble = keyframes({
+  '0%': { transform: 'rotate(-4deg)' },
+  '50%': { transform: 'rotate(4deg)' },
+  '100%': { transform: 'rotate(-4deg)' },
+});
+
+/** [#239] Will-o'-the-wisp: a slow wandering loop (paired with a pulse). */
+export const animWispWander = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '25%': { transform: 'translate3d(40px, -30px, 0)' },
+  '50%': { transform: 'translate3d(-10px, -60px, 0)' },
+  '75%': { transform: 'translate3d(-45px, -20px, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
+});
+
+/** Soft breathing glow of a wisp. */
+export const animWispPulse = keyframes({
+  '0%': { opacity: '0.35', transform: 'scale(0.85)' },
+  '50%': { opacity: '0.9', transform: 'scale(1.1)' },
+  '100%': { opacity: '0.35', transform: 'scale(0.85)' },
+});
+
+/** A witch on a broom crosses high up, right to left, in ~11 s of 60 s. */
+export const animWitch = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0) rotate(-4deg)', opacity: '0' },
+  '1%': { opacity: '1' },
+  '9%': { transform: 'translate3d(-60vw, -3vh, 0) rotate(3deg)' },
+  '17.5%': { opacity: '1' },
+  '18%': { transform: 'translate3d(-118vw, 2vh, 0) rotate(-3deg)', opacity: '0' },
+  '100%': { transform: 'translate3d(-118vw, 2vh, 0) rotate(-3deg)', opacity: '0' },
+});
+
+/**
+ * The big spider: bobs for most of the cycle, then climbs up its thread,
+ * pauses, and drops back with a little bounce (24 s cycle).
+ */
+export const animSpiderClimb = keyframes({
+  '0%': { transform: 'translate3d(0, 0, 0)' },
+  '20%': { transform: 'translate3d(0, 14px, 0)' },
+  '40%': { transform: 'translate3d(0, 0, 0)' },
+  '55%': { transform: 'translate3d(0, -22vh, 0)' },
+  '68%': { transform: 'translate3d(0, -22vh, 0)' },
+  '71%': { transform: 'translate3d(0, 24px, 0)' },
+  '74%': { transform: 'translate3d(0, -8px, 0)' },
+  '77%': { transform: 'translate3d(0, 6px, 0)' },
+  '80%': { transform: 'translate3d(0, 0, 0)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
+});
+
+/** Jack-o'-lantern candle flicker (opacity of the glow behind the face). */
+export const animCandle = keyframes({
+  '0%': { opacity: '0.75' },
+  '20%': { opacity: '1' },
+  '35%': { opacity: '0.6' },
+  '55%': { opacity: '0.95' },
+  '70%': { opacity: '0.7' },
+  '100%': { opacity: '0.75' },
+});
+
+/** The swarm crosses faster than the regular bats: ~7 s of a 60 s cycle. */
+export const animSwarmFlight = keyframes({
+  '0%': { transform: 'translate3d(-10vw, 0, 0)', opacity: '0' },
+  '0.5%': { opacity: '1' },
+  '11.5%': { opacity: '1' },
+  '12%': { transform: 'translate3d(110vw, -8vh, 0)', opacity: '0' },
+  '100%': { transform: 'translate3d(110vw, -8vh, 0)', opacity: '0' },
 });

src/app/components/seasonal/themes/Halloween.tsx

@@ -1,267 +1,486 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { SeasonalOverlayProps } from '../types';
 import {
-  animMoonPulse,
-  animFogDrift,
-  animBatGlide,
-  animWingFlap,
-  animEmberFloat,
-  animEmberTwinkle,
+  animBatBob,
+  animBatFlap,
+  animBatFlight,
+  animCandle,
+  animGhost,
+  animGhostWobble,
+  animSpiderBob,
+  animSpiderClimb,
+  animSpiderSway,
+  animSwarmFlight,
+  animWispPulse,
+  animWispWander,
+  animWitch,
+  halloweenRoot,
 } from './Halloween.css';
 
-// ─── Palette (oklch) ──────────────────────────────────────────────────────────
-// Deep haunted indigo, sickly toxic-green moon glow, warm ember orange.
-const PURPLE_DEEP = 'oklch(0.20 0.12 300)';
-const PURPLE_FAINT = 'oklch(0.28 0.10 300 / 0.45)';
-const TOXIC_GREEN = 'oklch(0.80 0.18 150)';
-const TOXIC_GREEN_SOFT = 'oklch(0.72 0.16 150 / 0.35)';
-const EMBER_ORANGE = 'oklch(0.70 0.18 50)';
-const FOG_TINT = 'oklch(0.45 0.06 280 / 0.32)';
+/**
+ * HalloweenOverlay — cobwebs, a dangling spider and bats, over the app as is.
+ *
+ * The parent supplies a fixed inset:0 overflow:hidden pointer-events:none
+ * container; everything here is aria-hidden and absolutely positioned.
+ *
+ * [#239] No full-screen purple wash or blurred "moon": they tinted the whole
+ * app and the moon glow sat over the member list, making it unreadable.
+ * Colours are theme-aware via --hw-ink / --hw-web (see Halloween.css.ts).
+ *
+ * Composition:
+ *   1. cobwebs in the two top corners (thin threads, readable in both themes)
+ *   2. a spider on a thread in the empty space under the member list, bobbing
+ *   3. every 30 s a small group of bats flaps across the top of the screen
+ * `reduced`: webs and the spider at rest, no bats flying.
+ * `preview`: a night-sky swatch for Settings.
+ */
 
-// A corner cobweb, drawn once as an inline SVG data-URI (CSP-safe, no assets).
-// strokeWidth kept hairline so it reads as gossamer thread, not a cage.
-const cobwebUri = (() => {
-  const svg =
-    `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>` +
-    `<g fill='none' stroke='rgba(196,176,224,0.32)' stroke-width='0.8'>` +
-    // radial threads
-    `<line x1='0' y1='0' x2='180' y2='180'/>` +
-    `<line x1='0' y1='0' x2='180' y2='90'/>` +
-    `<line x1='0' y1='0' x2='90' y2='180'/>` +
-    `<line x1='0' y1='0' x2='180' y2='40'/>` +
-    `<line x1='0' y1='0' x2='40' y2='180'/>` +
-    // concentric catch-threads (gentle sag via quadratic curves)
-    `<path d='M40 0 Q22 22 0 40'/>` +
-    `<path d='M85 0 Q48 48 0 85'/>` +
-    `<path d='M130 0 Q74 74 0 130'/>` +
-    `<path d='M180 0 Q104 104 0 180'/>` +
-    `<path d='M180 60 Q120 120 60 180'/>` +
-    `</g></svg>`;
-  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
-})();
+/** Corner web (corner at 0,0): radial threads + sagging catch-rings. */
+function webPath(size = 100): string {
+  const angles = [0, 16, 32, 48, 64, 80, 90].map((a) => (a * Math.PI) / 180);
+  const spokes = angles
+    .map((a) => `M0 0 L${(Math.cos(a) * size).toFixed(1)} ${(Math.sin(a) * size).toFixed(1)}`)
+    .join(' ');
+  const rings = [0.28, 0.48, 0.68, 0.88].map((f) => {
+    const r = f * size;
+    const pts = angles.map((a) => [Math.cos(a) * r, Math.sin(a) * r]);
+    let d = `M${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+    for (let i = 1; i < pts.length; i += 1) {
+      const [x0, y0] = pts[i - 1];
+      const [x1, y1] = pts[i];
+      // Control point pulled toward the corner so each segment sags.
+      const cx = ((x0 + x1) / 2) * 0.86;
+      const cy = ((y0 + y1) / 2) * 0.86;
+      d += ` Q${cx.toFixed(1)} ${cy.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)}`;
+    }
+    return d;
+  });
+  return `${spokes} ${rings.join(' ')}`;
+}
+const WEB = webPath();
 
-// A single silhouetted bat, inline SVG. Wings are separate so the wrapper can
-// glide while an inner element flaps independently — we re-use one body shape.
-function BatSilhouette() {
+function Cobweb({ corner, size }: { corner: 'left' | 'right'; size: number }) {
   return (
     <svg
-      width="46"
-      height="22"
-      viewBox="0 0 46 22"
       aria-hidden="true"
-      style={{ display: 'block', overflow: 'visible' }}
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      style={{
+        position: 'absolute',
+        top: 0,
+        [corner]: 0,
+        transform: corner === 'right' ? 'scaleX(-1)' : undefined,
+        overflow: 'visible',
+      }}
     >
       <path
-        fill="oklch(0.12 0.04 300 / 0.85)"
-        d="M23 6c1.6 0 2.7 1.3 3 3 .9-1.4 2.4-2.6 4.2-2.6-.5 1-.4 2.1.2 2.9 2-2.4 5.4-4 8.6-3.7-1.5 1-2.3 2.6-2.4 4.3 1.3-.8 3-1 4.4-.4-2.2.8-3.9 2.5-5.2 4.5-2 3-4.8 5-8.3 4.4-1.9-.3-3.4-1.6-4.5-3.2-1.1 1.6-2.6 2.9-4.5 3.2-3.5.6-6.3-1.4-8.3-4.4-1.3-2-3-3.7-5.2-4.5 1.4-.6 3.1-.4 4.4.4-.1-1.7-.9-3.3-2.4-4.3 3.2-.3 6.6 1.3 8.6 3.7.6-.8.7-1.9.2-2.9 1.8 0 3.3 1.2 4.2 2.6.3-1.7 1.4-3 3-3z"
+        d={WEB}
+        fill="none"
+        stroke="var(--hw-web)"
+        strokeWidth={0.9}
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
 }
 
-export function HalloweenOverlay({ reduced }: SeasonalOverlayProps) {
-  // Deterministic per-mount generation — never per-frame React state.
-  const embers = useMemo(
-    () =>
-      Array.from({ length: 12 }, (_, i) => {
-        const green = i % 3 === 0; // ~1/3 toxic-green wisps, rest warm embers
-        return {
-          left: (i * 6151 + 113) % 100,
-          bottom: (i * 3137 + 47) % 28, // start near floor
-          size: 3 + (i % 4),
-          duration: 11 + (i % 6) * 2.2,
-          delay: (i * 0.83) % 11,
-          twinkle: 2.4 + (i % 5) * 0.6,
-          color: green ? TOXIC_GREEN : EMBER_ORANGE,
-        };
-      }),
-    [],
-  );
-
-  const bats = useMemo(
-    () =>
-      Array.from({ length: 3 }, (_, i) => ({
-        top: 8 + i * 13,
-        duration: 22 + i * 7,
-        delay: i * 6.5,
-        flap: 0.5 + i * 0.12,
-        scale: 0.7 + i * 0.18,
-      })),
-    [],
-  );
-
-  const fogBands = useMemo(
-    () =>
-      Array.from({ length: 3 }, (_, i) => ({
-        bottom: -6 + i * 9,
-        duration: 26 + i * 8,
-        delay: i * 5,
-        height: 130 + i * 30,
-      })),
-    [],
-  );
+// Classic bat silhouette, wings spread (viewBox 0 0 100 50).
+const BAT_PATH =
+  'M50 18 L46 10 L45 17 C40 17 36 19 33 23 C28 15 18 11 4 14 C12 18 14 23 12 29 ' +
+  'C7 27 3 28 0 31 C10 31 17 35 21 42 C25 36 31 34 37 36 C41 41 46 43 50 46 ' +
+  'C54 43 59 41 63 36 C69 34 75 36 79 42 C83 35 90 31 100 31 C97 28 93 27 88 29 ' +
+  'C86 23 88 18 96 14 C82 11 72 15 67 23 C64 19 60 17 55 17 L54 10 Z';
 
+function Bat({ width, flap }: { width: number; flap?: number }) {
   return (
-    <>
-      {/* ── Sky: layered indigo→black gradient with toxic-green moon vignette ── */}
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 100 50"
+      width={width}
+      height={width / 2}
+      style={{
+        display: 'block',
+        transformOrigin: '50% 60%',
+        animation: flap ? `${animBatFlap} ${flap}s ease-in-out infinite` : undefined,
+      }}
+    >
+      <path d={BAT_PATH} fill="var(--hw-ink)" />
+    </svg>
+  );
+}
+
+function Spider({ size }: { size: number }) {
+  const legs = [-1, 1]
+    .flatMap((side) =>
+      [0, 1, 2, 3].map((i) => {
+        const y = 38 + i * 7;
+        const kx = 50 + side * (16 + i * 2);
+        const fx = 50 + side * (30 + (i === 1 || i === 2 ? 6 : 0));
+        const fy = y + (i < 2 ? -8 : 10);
+        return `M${50 + side * 7} ${y} Q${kx} ${y - 12} ${fx} ${fy}`;
+      }),
+    )
+    .join(' ');
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      style={{ display: 'block' }}
+    >
+      <path d={legs} fill="none" stroke="var(--hw-ink)" strokeWidth={4} strokeLinecap="round" />
+      <ellipse cx="50" cy="52" rx="13" ry="16" fill="var(--hw-ink)" />
+      <circle cx="50" cy="33" r="8" fill="var(--hw-ink)" />
+      <circle cx="47" cy="32" r="1.8" fill="var(--hw-eye)" />
+      <circle cx="53" cy="32" r="1.8" fill="var(--hw-eye)" />
+    </svg>
+  );
+}
+
+/** Spider hanging from the top edge; thread and body move together. */
+function HangingSpider({
+  left,
+  length,
+  animate,
+  size = 30,
+  climb = false,
+}: {
+  left: string;
+  length: string;
+  animate: boolean;
+  size?: number;
+  climb?: boolean;
+}) {
+  let motion: string | undefined;
+  if (animate) {
+    motion = climb
+      ? `${animSpiderClimb} 24s ease-in-out 6s infinite`
+      : `${animSpiderBob} 7s ease-in-out infinite`;
+  }
+  return (
+    <div
+      aria-hidden="true"
+      style={{ position: 'absolute', top: 0, left, width: size, animation: motion }}
+    >
       <div
-        aria-hidden="true"
         style={{
-          position: 'absolute',
-          inset: 0,
-          contain: 'layout paint style',
-          backgroundColor: 'transparent',
-          backgroundImage: [
-            // sickly moon glow, upper-right
-            `radial-gradient(38vmax 38vmax at 78% 14%, ${TOXIC_GREEN_SOFT} 0%, transparent 58%)`,
-            // cold counter-glow lower-left for depth
-            `radial-gradient(46vmax 46vmax at 12% 92%, ${PURPLE_FAINT} 0%, transparent 60%)`,
-            // overall indigo→black wash, darker toward edges (vignette)
-            `radial-gradient(120% 120% at 50% 30%, transparent 32%, ${PURPLE_DEEP} 100%)`,
-            `linear-gradient(180deg, ${PURPLE_DEEP} 0%, transparent 45%)`,
-          ].join(', '),
-          opacity: 0.5,
+          marginLeft: size / 2 - 0.5,
+          width: 1,
+          height: length,
+          background: 'var(--hw-web)',
         }}
       />
-
-      {/* ── Moon disc + breathing halo (the only backdrop-filter, kept cheap) ── */}
       <div
-        aria-hidden="true"
         style={{
-          position: 'absolute',
-          top: '8%',
-          right: '12%',
-          width: '160px',
-          height: '160px',
-          borderRadius: '50%',
-          willChange: 'transform, opacity',
-          backgroundImage: `radial-gradient(circle at 42% 40%, ${TOXIC_GREEN} 0%, oklch(0.55 0.14 150 / 0.5) 38%, transparent 72%)`,
-          filter: 'blur(2px)',
-          backdropFilter: 'saturate(1.15)',
-          animation: reduced ? 'none' : `${animMoonPulse} 9s ease-in-out infinite`,
-        }}
-      />
-
-      {/* ── Low drifting fog bands ── */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          contain: 'layout paint style',
-          overflow: 'hidden',
+          marginTop: -size * 0.13,
+          transformOrigin: '50% 0',
+          animation: animate ? `${animSpiderSway} 5s ease-in-out infinite` : undefined,
         }}
       >
-        {fogBands.map((f, i) => (
-          <div
-            key={i}
-            aria-hidden="true"
-            style={{
-              position: 'absolute',
-              left: '-15%',
-              right: '-15%',
-              bottom: `${f.bottom}%`,
-              height: `${f.height}px`,
-              backgroundImage: `radial-gradient(60% 100% at 50% 100%, ${FOG_TINT} 0%, transparent 75%)`,
-              filter: 'blur(14px)',
-              willChange: reduced ? undefined : 'transform, opacity',
-              opacity: reduced ? 0.5 : undefined,
-              transform: reduced ? 'translate3d(2%, 0, 0) scale(1.18)' : undefined,
-              animation: reduced
-                ? 'none'
-                : `${animFogDrift} ${f.duration}s ease-in-out ${f.delay}s infinite`,
-            }}
-          />
-        ))}
+        <Spider size={size} />
       </div>
+    </div>
+  );
+}
 
-      {/* ── Will-o'-wisps / floating embers ── */}
-      {embers.map((e, i) => (
+/** Small jack-o'-lantern hanging on a short thread, candle flickering. */
+function HangingLantern({ right, length, size }: { right: number; length: number; size: number }) {
+  return (
+    <div aria-hidden="true" style={{ position: 'absolute', top: 0, right, width: size }}>
+      <div
+        style={{
+          marginLeft: size / 2 - 0.5,
+          width: 1,
+          height: length,
+          background: 'var(--hw-web)',
+        }}
+      />
+      <svg viewBox="0 0 60 56" width={size} height={size * 0.93} style={{ display: 'block' }}>
+        <path
+          d="M30 2 C31 6 33 8 36 9"
+          stroke="oklch(0.45 0.08 140)"
+          strokeWidth="3"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <path
+          d="M30 10 C18 8 4 16 4 32 C4 46 16 54 30 54 C44 54 56 46 56 32 C56 16 42 8 30 10 Z"
+          fill="oklch(0.66 0.17 50)"
+        />
+        <path
+          d="M30 11 C24 20 24 44 30 53 M30 11 C36 20 36 44 30 53"
+          stroke="oklch(0.55 0.15 45)"
+          strokeWidth="1.5"
+          fill="none"
+        />
+        <g style={{ animation: `${animCandle} 1.6s ease-in-out infinite` }}>
+          <path d="M14 26 L22 22 L22 30 Z M46 26 L38 22 L38 30 Z" fill="oklch(0.93 0.14 95)" />
+          <path
+            d="M14 38 C20 46 40 46 46 38 L41 41 L37 38 L33 42 L30 38 L27 42 L23 38 L19 41 Z"
+            fill="oklch(0.93 0.14 95)"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+// Witch on a broom, flying left (viewBox 0 0 120 60).
+const WITCH_PATH = [
+  'M4 42 L80 37 L80 40 L4 45 Z', // broom handle
+  'M80 34 C88 32 98 28 108 24 C104 32 106 38 116 46 C104 44 92 42 80 42 Z', // bristles
+  'M32 20 C36 17 50 16 58 19 L55 21 C50 19 40 20 35 22 Z', // hat brim
+  'M40 19 L64 2 L52 19 Z', // hat cone, leaning back
+  'M39 25 A5 5 0 1 0 49 25 A5 5 0 1 0 39 25 Z', // head
+  'M39 24 L34 26 L39 27 Z', // nose
+  'M40 29 C44 28 52 28 56 30 C64 30 72 28 80 24 C76 30 70 34 62 38 L44 38 C40 36 38 32 40 29 Z', // cloak
+  'M42 31 L32 37 L34 39 L44 34 Z', // arm on the broom
+  'M48 38 L44 50 L38 52 L38 54 L47 53 L52 39 Z', // leg and boot
+].join(' ');
+
+function Witch({ width }: { width: number }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 120 60"
+      width={width}
+      height={width / 2}
+      style={{ display: 'block' }}
+    >
+      <path d={WITCH_PATH} fill="var(--hw-ink)" />
+    </svg>
+  );
+}
+
+const WISPS = [
+  { left: 12, top: 62, size: 30, hue: 'oklch(0.82 0.19 145)', wander: 26, pulse: 3.2, delay: -3 },
+  { left: 34, top: 80, size: 24, hue: 'oklch(0.8 0.16 60)', wander: 31, pulse: 2.6, delay: -11 },
+  { left: 55, top: 48, size: 28, hue: 'oklch(0.82 0.19 145)', wander: 28, pulse: 3.8, delay: -7 },
+  { left: 72, top: 72, size: 34, hue: 'oklch(0.8 0.16 60)', wander: 34, pulse: 2.9, delay: -19 },
+  { left: 88, top: 55, size: 24, hue: 'oklch(0.82 0.19 145)', wander: 24, pulse: 3.4, delay: -5 },
+  { left: 46, top: 30, size: 22, hue: 'oklch(0.8 0.16 60)', wander: 29, pulse: 2.4, delay: -15 },
+];
+
+const BAT_PERIOD = 20; // s between flights
+const BAT_FIRST = 5; // s after load
+const BATS = [
+  { top: 9, width: 64, offset: 0, bob: 1.3, flap: 0.3 },
+  { top: 16, width: 46, offset: 0.5, bob: 1.1, flap: 0.26 },
+  { top: 6, width: 38, offset: 0.9, bob: 1.5, flap: 0.24 },
+  { top: 20, width: 54, offset: 1.4, bob: 1.2, flap: 0.28 },
+];
+
+// Every 60 s a bigger, faster swarm of small bats, offset from the regular group.
+const SWARM_PERIOD = 60;
+const SWARM_FIRST = 38;
+const SWARM = Array.from({ length: 8 }, (_, i) => ({
+  top: 4 + ((i * 7) % 22),
+  width: 22 + (i % 3) * 8,
+  offset: (i * 0.23) % 1.4,
+  bob: 0.9 + (i % 3) * 0.25,
+  flap: 0.18 + (i % 3) * 0.03,
+}));
+
+const WITCH_PERIOD = 60;
+const WITCH_FIRST = 22;
+
+const GHOST_PERIOD = 50;
+const GHOST_FIRST = 16;
+
+/** A small, friendly ghost: pale body with an ink outline (shows on light). */
+function Ghost({ size }: { size: number }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 60 72"
+      width={size}
+      height={size * 1.2}
+      style={{ display: 'block' }}
+    >
+      <path
+        d="M30 4 C14 4 6 16 6 32 L6 62 L13 55 L20 63 L27 55 L34 63 L41 55 L48 63 L54 56 L54 32 C54 16 46 4 30 4 Z"
+        fill="oklch(0.98 0.01 290 / 0.55)"
+        stroke="var(--hw-ink)"
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <ellipse cx="22" cy="28" rx="3.5" ry="5" fill="var(--hw-ink)" />
+      <ellipse cx="38" cy="28" rx="3.5" ry="5" fill="var(--hw-ink)" />
+      <ellipse cx="30" cy="41" rx="4" ry="3" fill="var(--hw-ink)" opacity="0.8" />
+    </svg>
+  );
+}
+
+export function HalloweenOverlay({ reduced, preview }: SeasonalOverlayProps) {
+  // Phones: smaller webs, and a shorter thread so the spider hangs near the top.
+  const narrow = typeof window !== 'undefined' && window.matchMedia('(max-width: 750px)').matches;
+  if (preview) {
+    return (
+      <div className={halloweenRoot} aria-hidden="true">
         <div
-          key={i}
-          aria-hidden="true"
           style={{
             position: 'absolute',
-            left: `${e.left}%`,
-            bottom: `${e.bottom}%`,
-            willChange: reduced ? undefined : 'transform, opacity',
-            transform: reduced ? 'scale(0.9)' : undefined,
-            opacity: reduced ? 0.4 : undefined,
-            animation: reduced
-              ? 'none'
-              : `${animEmberFloat} ${e.duration}s ease-in ${e.delay}s infinite`,
+            inset: 0,
+            background:
+              'linear-gradient(180deg, oklch(0.22 0.08 300) 0%, oklch(0.16 0.06 290) 70%, oklch(0.12 0.04 280) 100%)',
           }}
-        >
-          <div
-            aria-hidden="true"
-            style={{
-              width: `${e.size}px`,
-              height: `${e.size}px`,
-              borderRadius: '50%',
-              backgroundColor: e.color,
-              boxShadow: `0 0 ${e.size * 2.5}px ${e.color}`,
-              animation: reduced
-                ? 'none'
-                : `${animEmberTwinkle} ${e.twinkle}s ease-in-out infinite`,
-            }}
-          />
+        />
+        {/* Crescent moon */}
+        <div
+          style={{
+            position: 'absolute',
+            right: '14%',
+            top: '14%',
+            width: '30%',
+            aspectRatio: '1',
+            borderRadius: '50%',
+            boxShadow: 'inset -9px 4px 0 0 oklch(0.93 0.06 95), 0 0 18px oklch(0.9 0.08 95 / 0.35)',
+          }}
+        />
+        {/* The big bat crosses the moon, the classic silhouette. */}
+        <div style={{ position: 'absolute', left: '52%', top: '22%', width: '34%' }}>
+          <svg viewBox="0 0 100 50" style={{ width: '100%' }}>
+            <path d={BAT_PATH} fill="oklch(0.1 0.02 300)" />
+          </svg>
         </div>
-      ))}
+        <div style={{ position: 'absolute', left: '26%', top: '56%', width: '20%' }}>
+          <svg viewBox="0 0 100 50" style={{ width: '100%' }}>
+            <path d={BAT_PATH} fill="oklch(0.1 0.02 300)" />
+          </svg>
+        </div>
+        <svg
+          viewBox="0 0 100 100"
+          style={{ position: 'absolute', left: 0, top: 0, width: '42%', overflow: 'visible' }}
+        >
+          <path d={WEB} fill="none" stroke="oklch(0.85 0.02 290 / 0.6)" strokeWidth={1.2} />
+        </svg>
+      </div>
+    );
+  }
 
-      {/* ── Silhouetted bats gliding across (skip entirely when reduced) ── */}
+  return (
+    <div className={halloweenRoot} aria-hidden="true">
+      <Cobweb corner="left" size={narrow ? 64 : 88} />
+      <Cobweb corner="right" size={narrow ? 76 : 108} />
+      {/* In the empty space under the member list on desktop; near the right
+          edge on narrow screens. */}
+      <HangingSpider
+        left="calc(100% - 64px)"
+        length={narrow ? '22vh' : '50vh'}
+        animate={!reduced}
+        climb
+      />
+      {/* A second, smaller spider on the left web. */}
+      <HangingSpider
+        left={narrow ? '30px' : '46px'}
+        length={narrow ? '9vh' : '13vh'}
+        animate={!reduced}
+        size={20}
+      />
+      {!narrow && <HangingLantern right={126} length={30} size={26} />}
+
+      {/* Will-o'-the-wisps: soft glows wandering slowly, always present while
+          animating. Not in the still scene: static glows would sit on text. */}
       {!reduced &&
-        bats.map((b, i) => (
+        WISPS.map((w, i) => (
           <div
-            key={i}
-            aria-hidden="true"
+            key={`wisp-${i}`}
             style={{
               position: 'absolute',
-              top: `${b.top}%`,
-              left: 0,
-              willChange: 'transform, opacity',
-              animation: `${animBatGlide} ${b.duration}s linear ${b.delay}s infinite`,
+              left: `${w.left}%`,
+              top: `${w.top}%`,
+              animation: `${animWispWander} ${w.wander}s ease-in-out ${w.delay}s infinite`,
             }}
           >
             <div
-              aria-hidden="true"
               style={{
-                transform: `scale(${b.scale})`,
-                animation: `${animWingFlap} ${b.flap}s ease-in-out infinite`,
+                width: w.size,
+                height: w.size,
+                borderRadius: '50%',
+                background: `radial-gradient(circle, oklch(0.97 0.05 100) 0%, ${w.hue} 22%, ${w.hue.replace(')', ' / 0.35)')} 48%, transparent 72%)`,
+                animation: `${animWispPulse} ${w.pulse}s ease-in-out ${w.delay}s infinite`,
               }}
-            >
-              <BatSilhouette />
+            />
+          </div>
+        ))}
+
+      {!reduced &&
+        BATS.map((bat, i) => (
+          <div
+            key={`bat-${i}`}
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: `${bat.top}%`,
+              opacity: 0,
+              willChange: 'transform, opacity',
+              animation: `${animBatFlight} ${BAT_PERIOD}s linear ${BAT_FIRST + bat.offset}s infinite`,
+            }}
+          >
+            <div style={{ animation: `${animBatBob} ${bat.bob}s ease-in-out infinite` }}>
+              <Bat width={bat.width} flap={bat.flap} />
             </div>
           </div>
         ))}
 
-      {/* ── Cobwebs tucked into two corners (top-left, top-right mirrored) ── */}
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '180px',
-          height: '180px',
-          backgroundImage: cobwebUri,
-          backgroundRepeat: 'no-repeat',
-          opacity: 0.7,
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          width: '180px',
-          height: '180px',
-          backgroundImage: cobwebUri,
-          backgroundRepeat: 'no-repeat',
-          transform: 'scaleX(-1)',
-          opacity: 0.7,
-        }}
-      />
-    </>
+      {!reduced &&
+        SWARM.map((bat, i) => (
+          <div
+            key={`swarm-${i}`}
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: `${bat.top}%`,
+              opacity: 0,
+              willChange: 'transform, opacity',
+              animation: `${animSwarmFlight} ${SWARM_PERIOD}s linear ${SWARM_FIRST + bat.offset}s infinite`,
+            }}
+          >
+            <div style={{ animation: `${animBatBob} ${bat.bob}s ease-in-out infinite` }}>
+              <Bat width={bat.width} flap={bat.flap} />
+            </div>
+          </div>
+        ))}
+
+      {!reduced && (
+        <div
+          style={{
+            position: 'absolute',
+            right: '-14vw',
+            top: narrow ? '11%' : '12%',
+            opacity: 0,
+            willChange: 'transform, opacity',
+            animation: `${animWitch} ${WITCH_PERIOD}s linear ${WITCH_FIRST}s infinite`,
+          }}
+        >
+          <Witch width={narrow ? 84 : 120} />
+        </div>
+      )}
+
+      {!reduced && (
+        <div
+          style={{
+            position: 'absolute',
+            left: '18%',
+            top: '78%',
+            opacity: 0,
+            willChange: 'transform, opacity',
+            animation: `${animGhost} ${GHOST_PERIOD}s linear ${GHOST_FIRST}s infinite`,
+          }}
+        >
+          <div
+            style={{
+              transformOrigin: '50% 20%',
+              animation: `${animGhostWobble} 2.4s ease-in-out infinite`,
+            }}
+          >
+            <Ghost size={narrow ? 34 : 44} />
+          </div>
+        </div>
+      )}
+    </div>
   );
 }

src/app/components/seasonal/types.ts

@@ -21,4 +21,9 @@ export type SeasonTheme =
 // passes reduced=true, so the static form has to stand on its own.
 export type SeasonalOverlayProps = {
   reduced: boolean;
+  /**
+   * Rendering in the small Settings swatch rather than over the app. Optional:
+   * a theme may draw a composition made for the tile (always also `reduced`).
+   */
+  preview?: boolean;
 };

src/app/components/suspicious-link/SuspiciousLink.tsx

@@ -59,13 +59,21 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#suspiciouslink-dialog-1',
                 onDeactivate: () => setOpen(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <Dialog variant="Surface" style={{ maxWidth: 440 }}>
+              <Dialog
+                id="suspiciouslink-dialog-1"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="suspiciouslink-dialog-1-title"
+                tabIndex={-1}
+                variant="Surface"
+                style={{ maxWidth: 440 }}
+              >
                 <Header
                   style={{
                     padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -75,7 +83,7 @@ export function SuspiciousLink({ href, safety, anchorProps, children }: Suspicio
                   size="500"
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="suspiciouslink-dialog-1-title" as="h2" size="H4">
                       This link doesn&apos;t go where it says
                     </Text>
                   </Box>

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

@@ -15,10 +15,16 @@ function DummyErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="dummystage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="dummystage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="dummystage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

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

@@ -28,7 +28,13 @@ function EmailErrorDialog({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="emailstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="emailstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box
         as="form"
         onSubmit={handleFormSubmit}
@@ -37,7 +43,7 @@ function EmailErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="emailstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>
@@ -145,10 +151,16 @@ export function EmailStageDialog({
 
   if (emailTokenState.status === AsyncStatus.Success) {
     return (
-      <Dialog>
+      <Dialog
+        id="emailstage-dialog-2"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="emailstage-dialog-2-title"
+        tabIndex={-1}
+      >
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
           <Box direction="Column" gap="100">
-            <Text as="h2" size="H4">
+            <Text id="emailstage-dialog-2-title" as="h2" size="H4">
               Verification Request Sent
             </Text>
             <Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>

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

@@ -36,7 +36,13 @@ export function PasswordStage({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="passwordstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="passwordstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Header
         style={{
           padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -45,7 +51,7 @@ export function PasswordStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text as="h2" size="H4">
+          <Text id="passwordstage-dialog-1-title" as="h2" size="H4">
             {t('Organisms.PasswordStage.account_password')}
           </Text>
         </Box>

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

@@ -14,10 +14,18 @@ function ReCaptchaErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="recaptchastage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="recaptchastage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text id="recaptchastage-dialog-1-title" size="H4">
+            {title}
+          </Text>
           <Text>{message}</Text>
         </Box>
         <Button variant="Critical" fill="None" outlined onClick={onCancel}>

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

@@ -26,7 +26,13 @@ function RegistrationTokenErrorDialog({
   };
 
   return (
-    <Dialog>
+    <Dialog
+      id="registrationtokenstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="registrationtokenstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box
         as="form"
         onSubmit={handleFormSubmit}
@@ -35,7 +41,7 @@ function RegistrationTokenErrorDialog({
         gap="400"
       >
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="registrationtokenstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

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

@@ -45,7 +45,13 @@ export function SSOStage({
   }, [ssoWindow, handleSubmit, ssoRedirectURL]);
 
   return (
-    <Dialog>
+    <Dialog
+      id="ssostage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="ssostage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Header
         style={{
           padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -54,7 +60,7 @@ export function SSOStage({
         size="500"
       >
         <Box grow="Yes">
-          <Text as="h2" size="H4">
+          <Text id="ssostage-dialog-1-title" as="h2" size="H4">
             SSO Login
           </Text>
         </Box>

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

@@ -15,10 +15,16 @@ function TermsErrorDialog({
   onCancel: () => void;
 }) {
   return (
-    <Dialog>
+    <Dialog
+      id="termsstage-dialog-1"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="termsstage-dialog-1-title"
+      tabIndex={-1}
+    >
       <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
         <Box direction="Column" gap="100">
-          <Text as="h2" size="H4">
+          <Text id="termsstage-dialog-1-title" as="h2" size="H4">
             {title}
           </Text>
           <Text>{message}</Text>

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -283,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,
@@ -290,6 +296,9 @@ export function UploadCardRenderer({
   setMetadata,
   onRemove,
   onComplete,
+  autoFocusCaption,
+  onCaptionSubmit,
+  onCaptionEscape,
 }: UploadCardRendererProps) {
   const mx = useMatrixClient();
   const mediaConfig = useMediaConfig();
@@ -379,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} />
           )}

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

@@ -246,11 +246,15 @@ export const EmbedMediaPortrait = style([
   DefaultReset,
   {
     position: 'relative',
-    width: toRem(300),
-    maxWidth: '100%',
-    // 9:16 via the padding-top hack (177.78%) — see EmbedMediaLandscape.
+    // [Gitea #228] `min()` on both axes so the 9:16 ratio holds whatever the
+    // parent's width is. A padding-top percentage resolves against the
+    // CONTAINING BLOCK's width, not the element's, so a bare `177.78%` inside a
+    // wide card made the box ~2x too tall (606px card → 1077px instead of 533).
+    // Capped at the pixel height of a 300px-wide 9:16 box, it is exact when the
+    // parent is at least 300px and falls back to the percentage below that.
+    width: `min(${toRem(300)}, 100%)`,
     height: 0,
-    paddingTop: '177.78%',
+    paddingTop: `min(${toRem(533)}, 177.78%)`,
     margin: '0 auto',
     overflow: 'hidden',
     backgroundColor: color.Surface.Container,

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

@@ -17,6 +17,7 @@ import {
 import { ImageOverlay } from '../ImageOverlay';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { decodeHtmlEntities } from '../../utils/htmlEntities';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
 import {
@@ -308,6 +309,23 @@ function isTenor(url: string): boolean {
 // Synapse's thumbnailer flattens animated images to a single still frame, so a
 // GIF served from /thumbnail renders but never plays. Detect GIF previews so the
 // card can point at /download (the original) instead.
+/** Text fields that are rendered as-is by the cards below. */
+const PREVIEW_TEXT_KEYS = ['og:title', 'og:description', 'og:site_name'] as const;
+
+/**
+ * Decode character references left in preview text once, before any card
+ * reads it (e.g. Steam double-encodes, so `"` survived Synapse's decode
+ * and showed literally). #187 DP17.
+ */
+const decodePreviewText = (prev: IPreviewUrlResponse): IPreviewUrlResponse => {
+  const out: IPreviewUrlResponse = { ...prev };
+  PREVIEW_TEXT_KEYS.forEach((key) => {
+    const value = out[key];
+    if (typeof value === 'string') out[key] = decodeHtmlEntities(value);
+  });
+  return out;
+};
+
 function isGifPreview(url: string, prev: IPreviewUrlResponse): boolean {
   if (prev['og:image:type'] === 'image/gif') return true;
   try {
@@ -1203,7 +1221,11 @@ function MediaEmbedCard({
   };
 
   return (
-    <Box direction="Column">
+    // [Gitea #228] `width: 100%` — UrlPreview is a flex ROW, so this column
+    // shrink-to-fits its content. The facade's <img> supplied that width, but
+    // the player <iframe> is absolutely positioned and contributes none, so on
+    // play the whole embed collapsed to the iframe's ~200px intrinsic size.
+    <Box direction="Column" style={{ width: '100%', minWidth: 0 }}>
       {playing && rich ? (
         // Rich post embeds (Instagram/Reddit) are variable-height and self-size.
         <iframe
@@ -1380,7 +1402,9 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
   );
 
   return (
-    <Box direction="Column">
+    // [Gitea #228] See the video embed above: this column must fill the card's
+    // flex row, not shrink to the iframe's intrinsic width.
+    <Box direction="Column" style={{ width: '100%', minWidth: 0 }}>
       <div ref={mediaRef} className={previewCss.EmbedMediaPortrait}>
         {playing && videoId ? (
           <iframe
@@ -2275,8 +2299,8 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState(false);
-    const [previewStatus, loadPreview] = useAsyncCallback(
-      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx]),
+    const [previewStatus, loadPreview] = useAsyncCallback<IPreviewUrlResponse, Error, []>(
+      useCallback(() => mx.getUrlPreview(url, ts).then(decodePreviewText), [url, ts, mx]),
     );
 
     useEffect(() => {

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

@@ -55,20 +55,27 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#powerchip-dialog-1',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog
+            id="powerchip-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="powerchip-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+          >
             <Header
               style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               variant="Surface"
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="powerchip-dialog-1-title" as="h2" size="H4">
                   Self Demotion
                 </Text>
               </Box>
@@ -107,20 +114,27 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#powerchip-dialog-2',
             onDeactivate: onCancel,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog
+            id="powerchip-dialog-2"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="powerchip-dialog-2-title"
+            tabIndex={-1}
+            variant="Surface"
+          >
             <Header
               style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
               variant="Surface"
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="powerchip-dialog-2-title" as="h2" size="H4">
                   Shared Power
                 </Text>
               </Box>

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

@@ -79,16 +79,21 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             <OverlayCenter>
               <FocusTrap
                 focusTrapOptions={{
-                  initialFocus: false,
+                  fallbackFocus: '#userhero-dialog-1',
                   onDeactivate: () => setViewAvatar(undefined),
                   clickOutsideDeactivates: true,
                   escapeDeactivates: stopPropagation,
                 }}
               >
                 <Modal
+                  id="userhero-dialog-1"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="userhero-dialog-1-title"
+                  tabIndex={-1}
                   size="500"
                   className={ModalMobileFull}
-                  onContextMenu={(evt: any) => evt.stopPropagation()}
+                  onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
                 >
                   <ImageViewer
                     src={viewAvatar}
@@ -131,6 +136,7 @@ export function UserHeroName({
     <Box grow="Yes" direction="Column" gap="0">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
+          id="userhero-dialog-1-title"
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
           title={displayName ?? username}

src/app/features/add-existing/AddExisting.tsx

@@ -185,13 +185,21 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#addexisting-dialog-1',
             clickOutsideDeactivates: true,
             onDeactivate: requestClose,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="300" style={modalStyle}>
+          <Modal
+            id="addexisting-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="addexisting-dialog-1-title"
+            tabIndex={-1}
+            size="300"
+            style={modalStyle}
+          >
             <Box grow="Yes" direction="Column">
               <Header
                 size="500"
@@ -201,7 +209,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                 }}
               >
                 <Box grow="Yes">
-                  <Text as="h2" size="H4">
+                  <Text id="addexisting-dialog-1-title" as="h2" size="H4">
                     Add Existing
                   </Text>
                 </Box>

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

@@ -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>
+  );
+}

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

@@ -1,20 +1,24 @@
 import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
 import React, { useCallback, useState } from 'react';
 import { useSetAtom } from 'jotai';
+import { MicLevelBars } from '../call/MicLevelBars';
 import { StatusDivider } from './components';
-import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { CallEmbed, useCallControlState, useCallMicLevel } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 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;
   onToggle: () => Promise<unknown>;
+  /** [Gitea #146] Your input level, 0–3 bars; shown only while unmuted. */
+  level?: number;
   disabled?: boolean;
 };
-function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
+function MicrophoneButton({ enabled, onToggle, disabled, level = 0 }: MicrophoneButtonProps) {
   const [micState, toggleMic] = useAsyncCallback(onToggle);
   const loading = micState.status === AsyncStatus.Loading;
 
@@ -39,9 +43,11 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
           outlined
           disabled={disabled || loading}
           aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
-          aria-pressed={enabled}
         >
-          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+          <span style={{ position: 'relative', display: 'inline-flex' }}>
+            <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+            {enabled && <MicLevelBars level={level} />}
+          </span>
         </IconButton>
       )}
     </TooltipProvider>
@@ -72,8 +78,10 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
           size="300"
           className={MobileTouchTarget}
           onClick={() => onToggle()}
+          // No aria-pressed on these call toggles (#187 DP7/8): their labels already
+          // name the action ("Deafen" / "Undeafen"), and pressed-state on top
+          // read as "Deafen, pressed" while NOT deafened.
           aria-label={enabled ? 'Deafen' : 'Undeafen'}
-          aria-pressed={enabled}
           outlined
           disabled={disabled}
         >
@@ -116,7 +124,6 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           className={MobileTouchTarget}
           onClick={toggleVideo}
           aria-label={enabled ? 'Stop Video' : 'Start Video'}
-          aria-pressed={enabled}
           outlined
           disabled={disabled || loading}
         >
@@ -156,7 +163,6 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
           className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
-          aria-pressed={enabled}
           outlined
           disabled={disabled}
         >
@@ -177,6 +183,7 @@ export function CallControl({
   callJoined: boolean;
 }) {
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
+  const micLevel = useCallMicLevel(callEmbed);
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
   // [Gitea #26] Apply the same room-level camera/screenshare policy as the
@@ -224,12 +231,16 @@ export function CallControl({
           enabled={microphone}
           onToggle={handleMicrophoneToggle}
           disabled={!callJoined}
+          level={micLevel}
         />
         <SoundButton
           enabled={sound}
           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} />

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Spinner, Text, color } from 'folds';
 import { useAtomValue } from 'jotai';
 import classNames from 'classnames';
@@ -14,6 +14,7 @@ import { StatusDivider } from './components';
 import { CallEmbed } from '../../plugins/call/CallEmbed';
 import { useCallJoined } from '../../hooks/useCallEmbed';
 import { useCallSpeakers } from '../../hooks/useCallSpeakers';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MemberSpeaking } from './MemberSpeaking';
 import { clockSkewAtom } from '../../state/clockSkew';
 import { describeSkewVsServer } from '../../utils/clockSkew';
@@ -29,6 +30,14 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
   const speakers = useCallSpeakers(callEmbed);
+  // [Gitea #146] Your own voice is on the mic button's level meter; the
+  // "… is speaking" line is for everyone else. (Avatar rings still include you.)
+  const mx = useMatrixClient();
+  const myUserId = mx.getUserId();
+  const otherSpeakers = useMemo(
+    () => new Set([...speakers].filter((id) => id !== myUserId)),
+    [speakers, myUserId],
+  );
   // [Gitea #158] Same warning as the top banner, where the user is looking during a call.
   const clockSkew = useAtomValue(clockSkewAtom);
 
@@ -69,11 +78,11 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
                   </Text>
                 </>
               )}
-              {speakers.size > 0 && (
+              {otherSpeakers.size > 0 && (
                 <>
                   <StatusDivider />
                   <span data-spacing-node />
-                  <MemberSpeaking room={room} speakers={speakers} />
+                  <MemberSpeaking room={room} speakers={otherSpeakers} />
                 </>
               )}
             </>

src/app/features/call/CallControls.tsx

@@ -29,7 +29,7 @@ import {
   SoundButton,
   VideoButton,
 } from './Controls';
-import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { CallEmbed, useCallControlState, useCallMicLevel } from '../../plugins/call';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { callEmbedAtom } from '../../state/callEmbed';
@@ -85,6 +85,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
 
   const { microphone, video, sound, screenshare, spotlight, screenshareAudioMuted } =
     useCallControlState(callEmbed.control);
+  const micLevel = useCallMicLevel(callEmbed);
 
   const [cords, setCords] = useState<RectCords>();
   const [shareConfirm, setShareConfirm] = useState(false);
@@ -200,7 +201,11 @@ export function CallControls({ callEmbed }: CallControlsProps) {
       >
         <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
+            <MicrophoneButton
+              enabled={microphone}
+              onToggle={handleMicrophoneToggle}
+              level={micLevel}
+            />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
           </Box>
           {!compact && showVideoGroup && <ControlDivider />}

src/app/features/call/CallMemberCard.tsx

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

src/app/features/call/Controls.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds';
 import { useAtom } from 'jotai';
+import { MicLevelBars } from './MicLevelBars';
 import * as css from './styles.css';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { callChatAtom } from '../../state/callEmbed';
@@ -15,8 +16,10 @@ export function ControlDivider() {
 type MicrophoneButtonProps = {
   enabled: boolean;
   onToggle: () => Promise<unknown>;
+  /** [Gitea #146] Your input level, 0–3 bars; shown only while unmuted. */
+  level?: number;
 };
-export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
+export function MicrophoneButton({ enabled, onToggle, level = 0 }: MicrophoneButtonProps) {
   const [micState, toggleMic] = useAsyncCallback(onToggle);
   const loading = micState.status === AsyncStatus.Loading;
 
@@ -43,7 +46,10 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
           outlined
           disabled={loading}
         >
-          <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+          <span style={{ position: 'relative', display: 'inline-flex' }}>
+            <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
+            {enabled && <MicLevelBars level={level} />}
+          </span>
         </IconButton>
       )}
     </TooltipProvider>
@@ -74,8 +80,10 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
           size="400"
           className={MobileTouchTarget}
           onClick={() => onToggle()}
+          // No aria-pressed on these call toggles (#187 DP7/8): their labels already
+          // name the action ("Deafen" / "Undeafen"), and pressed-state on top
+          // read as "Deafen, pressed" while NOT deafened.
           aria-label={enabled ? 'Deafen' : 'Undeafen'}
-          aria-pressed={enabled}
           outlined
         >
           <Icon
@@ -124,7 +132,6 @@ export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           aria-label={
             disabled ? 'Camera disabled in settings' : enabled ? 'Stop camera' : 'Start camera'
           }
-          aria-pressed={enabled}
           style={disabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
         >
           <Icon
@@ -209,7 +216,6 @@ export function FullscreenButton({ isFullscreen, onToggle }: FullscreenButtonPro
           className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
-          aria-pressed={isFullscreen}
           outlined
         >
           {isFullscreen ? <ExitFullscreenIcon /> : <FullscreenIcon />}
@@ -244,7 +250,6 @@ export function ScreenshareAudioButton({ muted, onToggle }: ScreenshareAudioButt
           className={MobileTouchTarget}
           onClick={onToggle}
           aria-label={muted ? 'Unmute Screenshare Audio' : 'Mute Screenshare Audio'}
-          aria-pressed={muted}
           outlined
         >
           <Icon size="400" src={muted ? Icons.VolumeMute : Icons.VolumeHigh} filled={muted} />
@@ -277,7 +282,6 @@ export function ChatButton() {
           className={MobileTouchTarget}
           onClick={() => setChat(!chat)}
           aria-label={chat ? 'Close Chat' : 'Open Chat'}
-          aria-pressed={chat}
           outlined
         >
           <Icon size="400" src={Icons.Message} filled={chat} />

src/app/features/call/MicLevelBars.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { color } from 'folds';
+
+type MicLevelBarsProps = {
+  /** 0–3; nothing is drawn at 0. */
+  level: number;
+};
+
+const HEIGHTS = [3, 5, 7];
+
+/**
+ * [Gitea #146] Three small bars in the corner of the mic button showing your
+ * own input level while unmuted, so you can see the mic is actually picking
+ * you up. Decorative: the button's label already says whether it's on.
+ */
+export function MicLevelBars({ level }: MicLevelBarsProps) {
+  if (level <= 0) return null;
+  return (
+    <span
+      aria-hidden
+      data-mic-level={level}
+      style={{
+        position: 'absolute',
+        right: 1,
+        bottom: 1,
+        display: 'flex',
+        alignItems: 'flex-end',
+        gap: 1,
+        pointerEvents: 'none',
+      }}
+    >
+      {HEIGHTS.map((h, i) => (
+        <span
+          key={h}
+          style={{
+            width: 2,
+            height: h,
+            borderRadius: 1,
+            background: i < level ? color.Success.Main : 'transparent',
+          }}
+        />
+      ))}
+    </span>
+  );
+}

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

@@ -78,13 +78,21 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#deletemymessages-dialog-1',
             onDeactivate: requestClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="deletemymessages-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="deletemymessages-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -94,7 +102,7 @@ function ConfirmDialog({ onStart, requestClose }: ConfirmDialogProps) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="deletemymessages-dialog-1-title" as="h2" size="H4">
                   Delete all your messages
                 </Text>
               </Box>

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

@@ -108,13 +108,21 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
             <OverlayCenter>
               <FocusTrap
                 focusTrapOptions={{
-                  initialFocus: false,
+                  fallbackFocus: '#roomencryption-dialog-1',
                   onDeactivate: () => setPrompt(false),
                   clickOutsideDeactivates: true,
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Dialog variant="Surface" style={modalStyle}>
+                <Dialog
+                  id="roomencryption-dialog-1"
+                  role="dialog"
+                  aria-modal="true"
+                  aria-labelledby="roomencryption-dialog-1-title"
+                  tabIndex={-1}
+                  variant="Surface"
+                  style={modalStyle}
+                >
                   <Header
                     style={{
                       padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -124,7 +132,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
                     size="500"
                   >
                     <Box grow="Yes">
-                      <Text as="h2" size="H4">
+                      <Text id="roomencryption-dialog-1-title" as="h2" size="H4">
                         Enable Encryption
                       </Text>
                     </Box>

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

@@ -108,7 +108,6 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
               <FocusTrap
                 focusTrapOptions={{
                   initialFocus: false,
-                  returnFocusOnDeactivate: false,
                   onDeactivate: () => setMenuAnchor(undefined),
                   clickOutsideDeactivates: true,
                   isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',

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

@@ -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' &&

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

@@ -89,13 +89,21 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#roomupgrade-dialog-1',
             onDeactivate: requestClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" style={modalStyle}>
+          <Dialog
+            id="roomupgrade-dialog-1"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="roomupgrade-dialog-1-title"
+            tabIndex={-1}
+            variant="Surface"
+            style={modalStyle}
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -105,7 +113,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               size="500"
             >
               <Box grow="Yes">
-                <Text as="h2" size="H4">
+                <Text id="roomupgrade-dialog-1-title" as="h2" size="H4">
                   {room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}
                 </Text>
               </Box>

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

@@ -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}

src/app/features/create-room/CreateRoomModal.tsx

@@ -44,13 +44,22 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#createroommodal-dialog-1',
               clickOutsideDeactivates: true,
               onDeactivate: closeDialog,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal size="300" flexHeight style={modalStyle}>
+            <Modal
+              id="createroommodal-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="createroommodal-dialog-1-title"
+              tabIndex={-1}
+              size="300"
+              flexHeight
+              style={modalStyle}
+            >
               <Box direction="Column">
                 <Header
                   size="500"
@@ -60,7 +69,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="createroommodal-dialog-1-title" as="h2" size="H4">
                       {type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
                     </Text>
                   </Box>

src/app/features/create-space/CreateSpaceModal.tsx

@@ -43,13 +43,22 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
         <OverlayCenter>
           <FocusTrap
             focusTrapOptions={{
-              initialFocus: false,
+              fallbackFocus: '#createspacemodal-dialog-1',
               clickOutsideDeactivates: true,
               onDeactivate: closeDialog,
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal size="300" flexHeight style={modalStyle}>
+            <Modal
+              id="createspacemodal-dialog-1"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="createspacemodal-dialog-1-title"
+              tabIndex={-1}
+              size="300"
+              flexHeight
+              style={modalStyle}
+            >
               <Box direction="Column">
                 <Header
                   size="500"
@@ -60,7 +69,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text as="h2" size="H4">
+                    <Text id="createspacemodal-dialog-1-title" as="h2" size="H4">
                       New Space
                     </Text>
                   </Box>

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -256,7 +256,6 @@ export function HierarchyItemMenu({
             <FocusTrap
               focusTrapOptions={{
                 initialFocus: false,
-                returnFocusOnDeactivate: false,
                 onDeactivate: () => setMenuAnchor(undefined),
                 clickOutsideDeactivates: true,
                 isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',

src/app/features/lobby/LobbyHeader.tsx

@@ -260,7 +260,6 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
               <FocusTrap
                 focusTrapOptions={{
                   initialFocus: false,
-                  returnFocusOnDeactivate: false,
                   onDeactivate: () => setMenuAnchor(undefined),
                   clickOutsideDeactivates: true,
                   isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',

src/app/features/lobby/SpaceItem.tsx

@@ -330,7 +330,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
   };
 
   const handleCreateSpace = () => {
-    openCreateSpaceModal(item.roomId as any);
+    openCreateSpaceModal(item.roomId);
     setCords(undefined);
   };
 

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

@@ -50,6 +50,7 @@ import { clearAll as clearSearchCache } from '../../utils/searchCache';
 import { addRecentSearch, recentSearchesAtom } from '../../state/recentSearches';
 import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
+import { ParsedSearch, resolveRoomOperand } from './searchOperators';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
 import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
@@ -205,6 +206,8 @@ export function MessageSearch({
   // currently pinned in their room (`m.room.pinned_events`). Server-unaffected.
   const [pinnedOnly, setPinnedOnly] = useState(false);
   const [recentSearches, setRecentSearches] = useAtom(recentSearchesAtom);
+  // [Gitea #106] Why a typed operator couldn't be applied (unknown room, …).
+  const [operatorNotice, setOperatorNotice] = useState<string>();
 
   const [searchParams, setSearchParams] = useSearchParams();
   const searchPathSearchParams = useSearchPathSearchParams(searchParams);
@@ -400,6 +403,94 @@ export function MessageSearch({
     setRecentSearches((prev) => addRecentSearch(prev, term));
   };
 
+  // [Gitea #106] Typed operators → the same filters the buttons set.
+  const handleQuery = (parsed: ParsedSearch, raw: string): boolean => {
+    const notices: string[] = [];
+    const roomChoices = allRooms.map((roomId) => {
+      const room = mx.getRoom(roomId);
+      return {
+        roomId,
+        name: room?.name ?? '',
+        aliases: [room?.getCanonicalAlias(), ...(room?.getAltAliases() ?? [])].filter(
+          (a): a is string => !!a,
+        ),
+      };
+    });
+    const roomIds: string[] = [];
+    parsed.rooms.forEach((value) => {
+      const id = resolveRoomOperand(value, roomChoices);
+      if (id) {
+        if (!roomIds.includes(id)) roomIds.push(id);
+      } else notices.push(`No room matches “in:${value}”.`);
+    });
+    const mergedSenders = [...(searchParamsSenders ?? [])];
+    // from:bob → a known @bob:server (this homeserver first), as autocomplete would.
+    const myServer = mx.getUserId()?.split(':')[1];
+    const resolveUser = (id: string): string => {
+      if (id.includes(':')) return id;
+      const local = id.slice(1).toLowerCase();
+      const found = new Set<string>();
+      mx.getRooms().forEach((room) =>
+        room.getMembers().forEach((m) => {
+          if (m.userId.slice(1).split(':')[0].toLowerCase() === local) found.add(m.userId);
+        }),
+      );
+      const list = [...found];
+      return list.find((u) => u.split(':')[1] === myServer) ?? list[0] ?? id;
+    };
+    parsed.senders.map(resolveUser).forEach((id) => {
+      if (!mergedSenders.includes(id)) mergedSenders.push(id);
+    });
+    if (!parsed.term && mergedSenders.length === 0) {
+      notices.push('Add a word to search for, or a from:@user.');
+    }
+    if (parsed.unknown.length > 0) {
+      notices.push(
+        `Not a search filter: ${parsed.unknown.join(', ')} (searched as text). Try in:, from:, before:, after:, has:link/image/video/file, is:pinned.`,
+      );
+    }
+    setOperatorNotice(notices.length > 0 ? notices.join(' ') : undefined);
+    if (!parsed.term && mergedSenders.length === 0) return false;
+
+    setSearchParams((prevParams) => {
+      const p = new URLSearchParams(prevParams);
+      p.delete('term');
+      p.append('term', parsed.term);
+      if (parsed.senders.length > 0) {
+        p.delete('senders');
+        p.append('senders', encodeSearchParamValueArray(mergedSenders));
+      }
+      if (roomIds.length > 0) {
+        p.delete('rooms');
+        p.append('rooms', encodeSearchParamValueArray(roomIds));
+        // A room outside this page's own scope needs the all-rooms scope.
+        if (allowGlobal && roomIds.some((id) => !rooms.includes(id))) {
+          p.delete('global');
+          p.append('global', 'true');
+        }
+      }
+      if (parsed.fromTs !== undefined) {
+        p.delete('fromTs');
+        p.append('fromTs', String(parsed.fromTs));
+      }
+      if (parsed.toTs !== undefined) {
+        p.delete('toTs');
+        p.append('toTs', String(parsed.toTs));
+      }
+      if (parsed.containsUrl) {
+        p.delete('containsUrl');
+        p.append('containsUrl', 'true');
+      }
+      return p;
+    });
+    if (parsed.msgTypes.length > 0) {
+      setMsgTypeFilters((prev) => [...new Set([...prev, ...parsed.msgTypes])]);
+    }
+    if (parsed.pinnedOnly) setPinnedOnly(true);
+    setRecentSearches((prev) => addRecentSearch(prev, raw));
+    return true;
+  };
+
   const handleRecentSearch = (term: string) => {
     if (searchInputRef.current) {
       searchInputRef.current.value = term;
@@ -548,10 +639,16 @@ export function MessageSearch({
           onSearch={handleSearch}
           onReset={handleSearchClear}
           onSenderAdd={handleSenderAdd}
+          onQuery={handleQuery}
           recentSearches={recentSearches}
           onRecentSearch={handleRecentSearch}
           onClearRecentSearches={handleClearRecentSearches}
         />
+        {operatorNotice && (
+          <Text size="T200" role="status" style={{ color: color.Warning.Main }}>
+            {operatorNotice}
+          </Text>
+        )}
         <SearchFilters
           defaultRoomsFilterName={defaultRoomsFilterName}
           allowGlobal={allowGlobal}
@@ -582,7 +679,7 @@ export function MessageSearch({
             <PageHero
               icon={<Icon size="600" src={Icons.Message} />}
               title="Search Messages"
-              subTitle="Find helpful messages in your community by searching with related keywords, or type from:@user to see all messages from someone."
+              subTitle="Search by keyword. Narrow it with from:@user, in:room, after:2026-09-01 or before:7d, has:link / has:image, and is:pinned."
             />
           </PageHeroSection>
         </PageHeroEmpty>

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

@@ -24,6 +24,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart, getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { ParsedSearch, hasOperators, parseSearchQuery } from './searchOperators';
 
 // Matches "from:@?anything" anywhere — @ is optional
 const FROM_REGEX = /from:@?([^\s:][^\s]*)/gi;
@@ -43,6 +44,9 @@ type SearchInputProps = {
   onSearch: (term: string) => void;
   onReset: () => void;
   onSenderAdd?: (userId: string) => void;
+  /** [Gitea #106] Receives in:/before:/after:/has:/is: (and from:) as filters. */
+  /** Returns false when the query wasn't run, so the text is kept as typed. */
+  onQuery?: (parsed: ParsedSearch, raw: string) => boolean;
   recentSearches?: string[];
   onRecentSearch?: (term: string) => void;
   onClearRecentSearches?: () => void;
@@ -54,6 +58,7 @@ export function SearchInput({
   onSearch,
   onReset,
   onSenderAdd,
+  onQuery,
   recentSearches,
   onRecentSearch,
   onClearRecentSearches,
@@ -167,6 +172,19 @@ export function SearchInput({
 
     const rawValue = searchInput.value.trim();
 
+    if (onQuery) {
+      const parsed = parseSearchQuery(rawValue);
+      if (!parsed.term && !hasOperators(parsed)) return;
+      // Recognised operators become filters (chips / controls); drop them
+      // from the visible input like from: always did.
+      const ran = onQuery(parsed, rawValue);
+      if (ran && hasOperators(parsed) && searchInputRef.current) {
+        searchInputRef.current.value = parsed.term;
+      }
+      closeAutocomplete();
+      return;
+    }
+
     // Extract from:user fragments and convert to sender filters
     const fromMatches = [...rawValue.matchAll(FROM_REGEX)];
     fromMatches.forEach((match) => {

src/app/features/message-search/searchOperators.test.ts

@@ -0,0 +1,86 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseDateOperand, parseSearchQuery, resolveRoomOperand } from './searchOperators';
+
+const NOW = new Date(2026, 8, 25, 12, 0, 0).getTime();
+const DAY = 86_400_000;
+
+describe('parseSearchQuery', () => {
+  it('plain text stays the term', () => {
+    const p = parseSearchQuery('loot rules tonight', NOW);
+    assert.equal(p.term, 'loot rules tonight');
+    assert.deepEqual(p.senders, []);
+  });
+
+  it('pulls every operator out of the term', () => {
+    const p = parseSearchQuery(
+      'raid from:bob in:general after:7d before:2026-09-24 has:link has:image is:pinned plan',
+      NOW,
+    );
+    assert.equal(p.term, 'raid plan');
+    assert.deepEqual(p.senders, ['@bob']);
+    assert.deepEqual(p.rooms, ['general']);
+    assert.equal(p.fromTs, NOW - 7 * DAY);
+    assert.equal(p.toTs, new Date(2026, 8, 24).getTime());
+    assert.equal(p.containsUrl, true);
+    assert.deepEqual(p.msgTypes, ['m.image']);
+    assert.equal(p.pinnedOnly, true);
+    assert.deepEqual(p.unknown, []);
+  });
+
+  it('keeps @ on from:, accepts quoted in:, and is case-insensitive on keys', () => {
+    const p = parseSearchQuery('FROM:@alice:x.org In:"voice lounge" hello', NOW);
+    assert.deepEqual(p.senders, ['@alice:x.org']);
+    assert.deepEqual(p.rooms, ['voice lounge']);
+    assert.equal(p.term, 'hello');
+  });
+
+  it('leaves operators it cannot understand in the term', () => {
+    const p = parseSearchQuery('has:gif after:someday is:starred hi', NOW);
+    assert.equal(p.term, 'has:gif after:someday is:starred hi');
+    assert.deepEqual(p.unknown, ['has:gif', 'after:someday', 'is:starred']);
+  });
+
+  it('does not treat a URL or a mid-word colon as an operator', () => {
+    const p = parseSearchQuery('see https://in:example.org and 10:30 before-lunch', NOW);
+    assert.equal(p.term, 'see https://in:example.org and 10:30 before-lunch');
+    assert.deepEqual(p.rooms, []);
+  });
+
+  it('has: file/video map to the media filters without duplicates', () => {
+    const p = parseSearchQuery('has:file has:files has:video', NOW);
+    assert.deepEqual(p.msgTypes, ['m.file', 'm.video']);
+    assert.equal(p.term, '');
+  });
+});
+
+describe('parseDateOperand', () => {
+  it('relative units', () => {
+    assert.equal(parseDateOperand('3h', NOW), NOW - 3 * 3_600_000);
+    assert.equal(parseDateOperand('2w', NOW), NOW - 14 * DAY);
+    assert.equal(parseDateOperand('1m', NOW), NOW - 30 * DAY);
+  });
+  it('rejects impossible dates and junk', () => {
+    assert.equal(parseDateOperand('2026-02-30', NOW), undefined);
+    assert.equal(parseDateOperand('yesterday', NOW), undefined);
+  });
+});
+
+describe('resolveRoomOperand', () => {
+  const rooms = [
+    { roomId: '!a:x', name: 'General', aliases: ['#general:x.org'] },
+    { roomId: '!b:x', name: 'Voice Lounge', aliases: [] },
+    { roomId: '!c:x', name: 'Off Topic', aliases: ['#offtopic:x.org'] },
+  ];
+  it('by alias, alias localpart, name, room id', () => {
+    assert.equal(resolveRoomOperand('#general:x.org', rooms), '!a:x');
+    assert.equal(resolveRoomOperand('offtopic', rooms), '!c:x');
+    assert.equal(resolveRoomOperand('voice lounge', rooms), '!b:x');
+    assert.equal(resolveRoomOperand('!b:x', rooms), '!b:x');
+  });
+  it('a unique partial name match, otherwise nothing', () => {
+    assert.equal(resolveRoomOperand('lounge', rooms), '!b:x');
+    assert.equal(resolveRoomOperand('o', rooms), undefined);
+    assert.equal(resolveRoomOperand('nope', rooms), undefined);
+  });
+});

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

@@ -0,0 +1,140 @@
+import type { MsgTypeFilter } from './useMessageSearch';
+
+/**
+ * [Gitea #106] Discord-style operators typed into the search box. Each one
+ * maps onto a filter the search already has (sender chips, room picker, date
+ * range, "contains link", media type, pinned), so typing and clicking end up
+ * in the same state. Pure and unit-tested.
+ *
+ *   from:@user            sender (existing)
+ *   in:general  in:"a b"  room, by name or alias (resolved by the caller)
+ *   after:2026-09-01      from the start of that day (local time)
+ *   before:2026-09-01     up to the start of that day
+ *   after:7d  before:2w   relative: h, d, w, m (30 d), y (365 d) ago
+ *   has:link | image | video | file
+ *   is:pinned
+ */
+export type ParsedSearch = {
+  term: string;
+  senders: string[];
+  rooms: string[];
+  fromTs?: number;
+  toTs?: number;
+  containsUrl?: boolean;
+  msgTypes: MsgTypeFilter[];
+  pinnedOnly?: boolean;
+  /** Operators we didn't understand, left in the term as typed. */
+  unknown: string[];
+};
+
+const UNIT_MS: Record<string, number> = {
+  h: 3_600_000,
+  d: 86_400_000,
+  w: 7 * 86_400_000,
+  m: 30 * 86_400_000,
+  y: 365 * 86_400_000,
+};
+
+/** A date operand → timestamp, or undefined if it isn't one. Exported for tests. */
+export function parseDateOperand(value: string, now: number): number | undefined {
+  const rel = /^(\d{1,4})([hdwmy])$/i.exec(value);
+  if (rel) return now - Number(rel[1]) * UNIT_MS[rel[2].toLowerCase()];
+  const abs = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value);
+  if (abs) {
+    const [y, m, d] = [Number(abs[1]), Number(abs[2]), Number(abs[3])];
+    const date = new Date(y, m - 1, d);
+    if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) {
+      return undefined;
+    }
+    return date.getTime();
+  }
+  return undefined;
+}
+
+const HAS_TYPES: Record<string, MsgTypeFilter> = {
+  image: 'm.image',
+  images: 'm.image',
+  video: 'm.video',
+  videos: 'm.video',
+  file: 'm.file',
+  files: 'm.file',
+};
+
+// key:"quoted value" or key:value
+const OPERATOR = /(^|\s)(from|in|after|before|has|is):(?:"([^"]*)"|(\S*))/gi;
+
+export function parseSearchQuery(raw: string, now = Date.now()): ParsedSearch {
+  const out: ParsedSearch = { term: '', senders: [], rooms: [], msgTypes: [], unknown: [] };
+  const kept: string[] = [];
+  let last = 0;
+  raw.replace(
+    OPERATOR,
+    (match, lead: string, keyRaw: string, quoted?: string, bare?: string, offset?: number) => {
+      const key = keyRaw.toLowerCase();
+      const value = (quoted ?? bare ?? '').trim();
+      const start = (offset ?? 0) + lead.length;
+      kept.push(raw.slice(last, start));
+      last = start + match.length - lead.length;
+      let understood = value !== '';
+      if (understood) {
+        if (key === 'from') {
+          out.senders.push(value.startsWith('@') ? value : `@${value}`);
+        } else if (key === 'in') {
+          out.rooms.push(value);
+        } else if (key === 'after' || key === 'before') {
+          const ts = parseDateOperand(value, now);
+          if (ts === undefined) understood = false;
+          else if (key === 'after') out.fromTs = ts;
+          else out.toTs = ts;
+        } else if (key === 'has') {
+          const v = value.toLowerCase();
+          if (v === 'link' || v === 'links' || v === 'url') out.containsUrl = true;
+          else if (HAS_TYPES[v]) {
+            if (!out.msgTypes.includes(HAS_TYPES[v])) out.msgTypes.push(HAS_TYPES[v]);
+          } else understood = false;
+        } else if (key === 'is') {
+          if (value.toLowerCase() === 'pinned') out.pinnedOnly = true;
+          else understood = false;
+        }
+      }
+      if (!understood) {
+        out.unknown.push(match.trim());
+        kept.push(match.trim());
+      }
+      return match;
+    },
+  );
+  kept.push(raw.slice(last));
+  out.term = kept.join(' ').replace(/\s+/g, ' ').trim();
+  return out;
+}
+
+/** True when the query contains any operator at all (for the submit path). */
+export const hasOperators = (p: ParsedSearch): boolean =>
+  p.senders.length > 0 ||
+  p.rooms.length > 0 ||
+  p.fromTs !== undefined ||
+  p.toTs !== undefined ||
+  !!p.containsUrl ||
+  p.msgTypes.length > 0 ||
+  !!p.pinnedOnly;
+
+/** Resolve an `in:` value to a room id among `rooms`. Exported for tests. */
+export function resolveRoomOperand(
+  value: string,
+  rooms: { roomId: string; name: string; aliases: string[] }[],
+): string | undefined {
+  const v = value.toLowerCase().replace(/^#/, '');
+  const exact = rooms.find(
+    (r) =>
+      r.roomId.toLowerCase() === value.toLowerCase() ||
+      r.aliases.some((a) => {
+        const al = a.toLowerCase().replace(/^#/, '');
+        return al === v || al.split(':')[0] === v;
+      }) ||
+      r.name.toLowerCase() === v,
+  );
+  if (exact) return exact.roomId;
+  const partial = rooms.filter((r) => r.name.toLowerCase().includes(v));
+  return partial.length === 1 ? partial[0].roomId : undefined;
+}

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

@@ -174,8 +174,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
               // date range is instead enforced client-side (see filterGroupsByDateRange).
               // contains_url is a valid spec field not yet in SDK types.
               ...(containsUrl !== undefined && { contains_url: containsUrl }),
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            } as any,
+            },
             include_state: false,
             order_by: order as SearchOrderBy.Recent,
             search_term: term,

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

@@ -23,6 +23,7 @@ import {
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
+  color,
   config,
   PopOut,
   toRem,
@@ -37,6 +38,13 @@ import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
+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';
@@ -147,13 +155,20 @@ function RenameRoomDialog({ room, onClose }: RenameRoomDialogProps) {
       <OverlayCenter>
         <FocusTrap
           focusTrapOptions={{
-            initialFocus: false,
+            fallbackFocus: '#roomnavitem-dialog',
             onDeactivate: onClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface" aria-labelledby="rename-room-dialog-title">
+          <Dialog
+            id="roomnavitem-dialog"
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
+            variant="Surface"
+            aria-labelledby="rename-room-dialog-title"
+          >
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -277,6 +292,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'];
@@ -316,6 +339,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 = () => {
@@ -498,6 +540,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"
@@ -895,7 +1028,6 @@ function RoomNavItem_({
               <FocusTrap
                 focusTrapOptions={{
                   initialFocus: false,
-                  returnFocusOnDeactivate: false,
                   onDeactivate: () => setMenuAnchor(undefined),
                   clickOutsideDeactivates: true,
                   isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',

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

@@ -392,13 +392,17 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
           <OverlayCenter>
             <FocusTrap
               focusTrapOptions={{
-                initialFocus: false,
+                fallbackFocus: '#roomserveracl-dialog',
                 onDeactivate: () => setPrompt(false),
                 clickOutsideDeactivates: true,
                 escapeDeactivates: stopPropagation,
               }}
             >
               <Dialog
+                id="roomserveracl-dialog"
+                role="dialog"
+                aria-modal="true"
+                tabIndex={-1}
                 variant="Surface"
                 aria-labelledby="server-acl-confirm-title"
                 style={modalStyle}

src/app/features/room/MediaGallery.tsx

@@ -17,16 +17,20 @@ 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';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan, Pan } from '../../hooks/usePan';
+import { useSwipeNav } from '../../hooks/useSwipeNav';
+import { usePinchZoom } from '../../hooks/usePinchZoom';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 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';
@@ -56,67 +60,6 @@ const TAB_MSGTYPES: Record<GalleryTab, MsgType> = {
 
 // ── Decrypt hook ──────────────────────────────────────────────────────────────
 
-type DecryptState = { status: 'loading' } | { status: 'ok'; url: string } | { status: 'error' };
-
-export 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 formatBytes(bytes: number): string {
@@ -154,12 +97,6 @@ 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.
-export 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 ──────────────────────────────────────────────────────────────────
 
@@ -169,6 +106,10 @@ export type LightboxItem = {
   mimeType?: string;
   msgtype: MsgType.Image | MsgType.Video;
   body: string;
+  /** The file's name when the message also carries a caption (MSC2530). */
+  filename?: string;
+  /** Caption text: `body` when it differs from `filename`. */
+  caption?: string;
   sender: string;
   ts: number;
   eventId: string;
@@ -190,12 +131,19 @@ export function toLightboxItems(room: Room, events: MatrixEvent[]): LightboxItem
     .map((ev) => {
       const c = ev.getContent();
       const isEnc = !!c.file;
+      const filename = typeof c.filename === 'string' && c.filename ? c.filename : undefined;
+      const caption =
+        filename && typeof c.body === 'string' && c.body && c.body !== filename
+          ? c.body
+          : undefined;
       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 ?? '',
+        filename,
+        caption,
         sender: getSenderName(room, ev.getSender() ?? ''),
         ts: ev.getTs(),
         eventId: ev.getId() ?? '',
@@ -272,7 +220,7 @@ function LightboxMedia({
         ) : (
           <img
             src={media.url}
-            alt={item.body}
+            alt={item.caption ?? item.body}
             draggable={false}
             onMouseDown={onMouseDown}
             onTouchStart={onTouchStart}
@@ -321,8 +269,27 @@ export function Lightbox({
   const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
   // Pan is only active for a zoomed-in image; usePan resets its offset when this
   // flips false (i.e. back to 1x, on navigation, or on a video).
-  const { pan, cursor, onMouseDown, onTouchStart } = usePan(isImage && zoom !== 1);
+  const zoomedIn = isImage && zoom !== 1;
+  const { pan, cursor, onMouseDown, onTouchStart } = usePan(zoomedIn);
+  // [Gitea #164] Swipe between items on touch — only while not zoomed in,
+  // where the same gesture pans the image instead.
+  const swipe = useSwipeNav(
+    !zoomedIn,
+    useCallback(() => setIndex((i) => Math.min(items.length - 1, i + 1)), [items.length]),
+    useCallback(() => setIndex((i) => Math.max(0, i - 1)), []),
+  );
   const dialogRef = useRef<HTMLDivElement>(null);
+  const onPinchStart = usePinchZoom(isImage, zoom, setZoom);
+  // [Gitea #164] 44 px prev/next targets on touch screens (32 px otherwise).
+  const coarsePointer = useMediaQuery('(pointer: coarse)');
+  const navSize = coarsePointer ? '500' : '400';
+  const onMediaTouchStart = useCallback<React.TouchEventHandler<HTMLElement>>(
+    (e) => {
+      swipe.onTouchStart(e);
+      onPinchStart(e);
+    },
+    [swipe, onPinchStart],
+  );
   const toggleZoom = useCallback(() => setZoom((z) => (z === 1 ? 2 : 1)), [setZoom]);
 
   // Reset zoom when navigating to another item (and thus pan, via usePan).
@@ -400,7 +367,7 @@ export function Lightbox({
           >
             <Box grow="Yes" direction="Column" style={{ overflow: 'hidden' }}>
               <Text size="T400" truncate style={{ color: '#fff', fontWeight: 500 }}>
-                {item.body || (item.msgtype === MsgType.Video ? 'Video' : 'Image')}
+                {item.filename || item.body || (item.msgtype === MsgType.Video ? 'Video' : 'Image')}
               </Text>
               <Text size="T200" style={{ color: 'rgba(255,255,255,0.5)' }}>
                 {item.sender} · {dateStr}
@@ -456,7 +423,7 @@ export function Lightbox({
                 {(ref) => (
                   <span ref={ref}>
                     <FileDownloadButton
-                      filename={mediaFilename(item.body, item.mimeType)}
+                      filename={mediaFilename(item.filename ?? item.body, item.mimeType)}
                       url={item.mxcUrl}
                       mimeType={item.mimeType ?? 'application/octet-stream'}
                       encInfo={item.encInfo}
@@ -512,11 +479,16 @@ export function Lightbox({
             alignItems="Center"
             justifyContent="Center"
             onWheel={handleWheel}
-            style={{ overflow: 'hidden', padding: config.space.S400 }}
+            onTouchStart={onMediaTouchStart}
+            onTouchEnd={swipe.onTouchEnd}
+            // Our own swipe/pinch/pan handle touch here; stop the browser from
+            // zooming or scrolling the page underneath instead.
+            style={{ overflow: 'hidden', padding: config.space.S400, touchAction: 'none' }}
           >
             {index > 0 && (
               <IconButton
                 variant="Surface"
+                size={navSize}
                 aria-label="Previous"
                 onClick={prev}
                 style={{ flexShrink: 0, marginRight: config.space.S200 }}
@@ -545,6 +517,7 @@ export function Lightbox({
             {index < items.length - 1 && (
               <IconButton
                 variant="Surface"
+                size={navSize}
                 aria-label="Next"
                 onClick={next}
                 style={{ flexShrink: 0, marginLeft: config.space.S200 }}
@@ -553,6 +526,32 @@ export function Lightbox({
               </IconButton>
             )}
           </Box>
+          {item.caption && (
+            // [Gitea #164] The full caption, readable — the header only has room
+            // for one truncated line.
+            <Box
+              shrink="No"
+              justifyContent="Center"
+              style={{
+                padding: `${config.space.S200} ${config.space.S400} ${config.space.S400}`,
+                maxHeight: '25vh',
+                overflowY: 'auto',
+              }}
+            >
+              <Text
+                size="T300"
+                style={{
+                  color: 'rgba(255,255,255,0.88)',
+                  whiteSpace: 'pre-wrap',
+                  overflowWrap: 'anywhere',
+                  maxWidth: '70ch',
+                  textAlign: 'center',
+                }}
+              >
+                {item.caption}
+              </Text>
+            </Box>
+          )}
         </div>
       </FocusTrap>
     </Overlay>

src/app/features/room/PollCreator.tsx

@@ -21,6 +21,7 @@ import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { useModalStyle } from '../../hooks/useModalStyle';
+import { sendRoomEvent } from '../../utils/room';
 
 interface PollCreatorProps {
   roomId: string;
@@ -89,7 +90,7 @@ export function PollCreator({ roomId, threadRootId, onClose }: PollCreatorProps)
       );
       // Pass the thread id explicitly (like the sticker path in RoomInput); the
       // legacy 3-arg form always resolves to the main timeline.
-      await mx.sendEvent(roomId, threadRootId ?? null, 'm.poll.start' as any, {
+      await sendRoomEvent(mx, roomId, threadRootId ?? null, 'm.poll.start', {
         'm.poll': {
           question: { 'm.text': trimmedQuestion },
           answers: filledOptions.map((o, i) => ({ 'm.id': `${i}`, 'm.text': o })),

src/app/features/room/RoomInput.tsx

@@ -13,8 +13,9 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
 import { EventType, IContent, MsgType, RelationType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
-import { Transforms, Editor } from 'slate';
+import { Transforms, Editor, Element as SlateElement, Node as SlateNode, Range } from 'slate';
 import {
+  Button,
   Box,
   Dialog,
   Icon,
@@ -58,6 +59,7 @@ import {
   getBeginCommand,
   trimCommand,
   getMentions,
+  BlockType,
 } from '../../components/editor';
 import { EmojiBoardTab } from '../../components/emoji-board/types';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -95,9 +97,11 @@ 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 { looksLikeCode } from '../../utils/looksLikeCode';
 import { useAlive } from '../../hooks/useAlive';
 import {
   ComposerToolbarButtonKey,
@@ -111,7 +115,12 @@ import {
   getImageMsgContent,
   getVideoMsgContent,
 } from './msgContent';
-import { getMemberName, getMentionContent, trimReplyFromBody } from '../../utils/room';
+import {
+  getMemberName,
+  getMentionContent,
+  sendRoomMessage,
+  trimReplyFromBody,
+} from '../../utils/room';
 import { CommandAutocomplete } from './CommandAutocomplete';
 import {
   Command,
@@ -157,6 +166,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 {
@@ -225,6 +241,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();
@@ -250,6 +268,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);
 
@@ -279,6 +300,49 @@ 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');
+    // [Gitea #107] "Paste as code block?" offer for the top-level blocks a
+    // paste just filled. Dismissed by typing, by No, or after 8 s.
+    const [offerCodePaste] = useSetting(settingsAtom, 'offerCodePaste');
+    const [codeOffer, setCodeOffer] = useState<{ start: number; end: number; lang?: string }>();
+    useEffect(() => {
+      if (!codeOffer) return undefined;
+      const t = window.setTimeout(() => setCodeOffer(undefined), 8000);
+      return () => window.clearTimeout(t);
+    }, [codeOffer]);
+    const acceptCodeOffer = useCallback(() => {
+      if (!codeOffer) return;
+      const { start, end, lang } = codeOffer;
+      setCodeOffer(undefined);
+      if (end >= editor.children.length || start > end) return;
+      const blocks = editor.children.slice(start, end + 1);
+      // Only plain paragraphs (what a paste produces); anything else, leave it.
+      if (blocks.some((b) => !SlateElement.isElement(b) || b.type !== BlockType.Paragraph)) return;
+      // Rebuild from plain text: code lines hold text only, and a paste may
+      // have produced links/mentions.
+      const lines = blocks.map((b) => SlateNode.string(b));
+      Editor.withoutNormalizing(editor, () => {
+        for (let i = end; i >= start; i -= 1) Transforms.removeNodes(editor, { at: [i] });
+        Transforms.insertNodes(
+          editor,
+          {
+            type: BlockType.CodeBlock,
+            lang,
+            children: lines.map((text) => ({ type: BlockType.CodeLine, children: [{ text }] })),
+          },
+          { at: [start] },
+        );
+        if (start + 1 >= editor.children.length) {
+          Transforms.insertNodes(
+            editor,
+            { type: BlockType.Paragraph, children: [{ text: '' }] },
+            { at: [start + 1] },
+          );
+        }
+      });
+      Transforms.select(editor, Editor.start(editor, [start + 1]));
+      ReactEditor.focus(editor);
+    }, [codeOffer, editor]);
+    const [stripImageMetadata] = useSetting(settingsAtom, 'stripImageMetadata');
     const showGif = (composerToolbarButtons?.showGif ?? true) && gifPickerEnabled;
     const showLocation = composerToolbarButtons?.showLocation ?? true;
     const showPoll = composerToolbarButtons?.showPoll ?? true;
@@ -310,7 +374,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           // MSC3488 extensible location: send the geo_uri (legacy) alongside the
           // m.location/m.asset/m.ts blocks so Element and other clients render a
           // proper "shared location" pin instead of falling back to plain text.
-          mx.sendMessage(roomId, threadRootId ?? null, {
+          sendRoomMessage(mx, roomId, threadRootId ?? null, {
             msgtype: 'm.location',
             body: `Shared a location: ${geoUri}`,
             geo_uri: geoUri,
@@ -318,7 +382,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             'org.matrix.msc3488.asset': { type: 'm.self' },
             'org.matrix.msc3488.ts': ts,
             'm.ts': ts,
-          } as any);
+          });
         },
         (err) => {
           setLocating(false);
@@ -349,19 +413,19 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         if (room.hasEncryptionStateEvent()) {
           const { encInfo, file: encBlob } = await encryptFile(blob);
           const uploadResult = await mx.uploadContent(encBlob);
-          mx.sendMessage(roomId, threadRootId ?? null, {
+          sendRoomMessage(mx, roomId, threadRootId ?? null, {
             ...baseContent,
             file: { ...encInfo, url: uploadResult.content_uri },
-          } as any);
+          });
         } else {
           const uploadResult = await mx.uploadContent(blob, {
             name: 'voice-message.ogg',
             type: mimeType,
           });
-          mx.sendMessage(roomId, threadRootId ?? null, {
+          sendRoomMessage(mx, roomId, threadRootId ?? null, {
             ...baseContent,
             url: uploadResult.content_uri,
-          } as any);
+          });
         }
       },
       [mx, room, roomId, threadRootId],
@@ -375,46 +439,43 @@ 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);
     const handlePaste = useCallback<React.ClipboardEventHandler>(
       (evt) => {
         handleFilePaste(evt);
-        if (evt.defaultPrevented || !stripTracking) return;
+        if (evt.defaultPrevented) return;
+        if (offerCodePaste && editor.selection) {
+          const pasted = evt.clipboardData?.getData('text/plain') ?? '';
+          const startBlock = Range.start(editor.selection).path[0];
+          const startNode = editor.children[startBlock];
+          const inCode =
+            SlateElement.isElement(startNode) && startNode.type === BlockType.CodeBlock;
+          const guess =
+            !inCode && pasted
+              ? looksLikeCode(pasted, evt.clipboardData?.getData('text/html'))
+              : undefined;
+          if (guess?.isCode) {
+            // Slate inserts after this handler returns; read where it ended.
+            window.setTimeout(() => {
+              const endBlock = editor.selection ? Range.end(editor.selection).path[0] : startBlock;
+              setCodeOffer({ start: startBlock, end: endBlock, lang: guess.lang });
+            }, 0);
+          }
+        }
+        if (!stripTracking) return;
         const text = evt.clipboardData?.getData('text/plain');
         if (!text) return;
         const cleaned = stripTrackingParamsInText(text);
@@ -427,7 +488,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         dt.setData('text/plain', cleaned);
         ReactEditor.insertData(editor, dt);
       },
-      [handleFilePaste, stripTracking, editor],
+      [handleFilePaste, stripTracking, editor, offerCodePaste],
     );
     const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
     const { gifApiKey } = useClientConfig();
@@ -633,7 +694,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         });
         handleCancelUpload(uploads);
         const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
-        contents.forEach((content) => mx.sendMessage(roomId, threadRootId ?? null, content as any));
+        contents.forEach((content) => sendRoomMessage(mx, roomId, threadRootId ?? null, content));
       },
       [mx, roomId, threadRootId, selectedFiles, handleCancelUpload],
     );
@@ -740,7 +801,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           content['m.relates_to'].is_falling_back = false;
         }
       }
-      mx.sendMessage(roomId, threadRootId ?? null, content as any);
+      sendRoomMessage(mx, roomId, threadRootId ?? null, content);
       resetEditor(editor);
       resetEditorHistory(editor);
       setCharCount(0);
@@ -856,6 +917,15 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
+        // Typing (not Tab/arrows/modifiers) dismisses the paste-as-code offer.
+        if (
+          evt.key.length === 1 ||
+          evt.key === 'Backspace' ||
+          evt.key === 'Delete' ||
+          evt.key === 'Enter'
+        ) {
+          setCodeOffer(undefined);
+        }
         if (
           (isKeyHotkey('mod+enter', evt) || (!enterForNewline && isKeyHotkey('enter', evt))) &&
           !isComposing(evt)
@@ -963,10 +1033,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             const uploadRes = await mx.uploadContent(encBlob);
             const mxcUrl = (uploadRes as { content_uri: string }).content_uri;
             if (!mxcUrl) return;
-            mx.sendMessage(roomId, threadRootId ?? null, {
+            sendRoomMessage(mx, roomId, threadRootId ?? null, {
               ...baseContent,
               file: { ...encInfo, url: mxcUrl },
-            } as any);
+            });
           } else {
             const uploadRes = await mx.uploadContent(gifFile, {
               type: 'image/gif',
@@ -975,10 +1045,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             });
             const mxcUrl = (uploadRes as { content_uri: string }).content_uri;
             if (!mxcUrl) return;
-            mx.sendMessage(roomId, threadRootId ?? null, {
+            sendRoomMessage(mx, roomId, threadRootId ?? null, {
               ...baseContent,
               url: mxcUrl,
-            } as any);
+            });
           }
         } catch (e) {
           console.error('GIF send failed:', e instanceof Error ? e.message : 'unknown error');
@@ -1060,6 +1130,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>
@@ -1146,6 +1222,43 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             </Text>
           </Box>
         )}
+        {codeOffer && (
+          <Box
+            role="group"
+            aria-label="Paste as code block"
+            alignItems="Center"
+            gap="200"
+            wrap="Wrap"
+            style={{
+              margin: `0 ${config.space.S300} ${config.space.S100}`,
+              padding: `${config.space.S100} ${config.space.S200}`,
+              borderRadius: config.radii.R300,
+              background: color.SurfaceVariant.Container,
+              border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+            }}
+          >
+            <Icon size="100" src={Icons.BlockCode} style={{ flexShrink: 0 }} />
+            <Text size="T200" style={{ flexGrow: 1 }}>
+              That looks like code. Format it as a code block
+              {codeOffer.lang ? ` (${codeOffer.lang})` : ''}?
+            </Text>
+            <Button size="300" variant="Primary" radii="300" onClick={acceptCodeOffer}>
+              <Text size="B300">Format as code</Text>
+            </Button>
+            <Button
+              size="300"
+              variant="Secondary"
+              fill="None"
+              radii="300"
+              onClick={() => {
+                setCodeOffer(undefined);
+                ReactEditor.focus(editor);
+              }}
+            >
+              <Text size="B300">No thanks</Text>
+            </Button>
+          </Box>
+        )}
         <ScheduledMessagesTray roomId={roomId} />
         <CustomEditor
           editableName={editableName}
@@ -1185,9 +1298,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>