chore(call): pin element-call-embedded 0.25.0-lotus.21 (#43)

lotus.21 checks widget messages against the host's origin (works same- and
cross-origin) and accepts soundboard clip bytes. Same-origin behaviour is
unchanged; verified against the published package: join, both screenshare
paths, PTT/deafen in the frame, layout/reactions/settings, speaking and mic
level, soundboard, avatars, muted-speech warning, per-person volume, and the
foreign-frame spoof stays blocked.

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
+      # [Gitea #221] WebKit too — Playwright's Safari/iOS proxy for the tagged
-        run: npx playwright install --with-deps chromium
+      # 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,57 @@ test.describe('local homeserver regression', () => {
     await ctx.close();
   });
 
-  test('timeline image opens the gallery lightbox (#219)', async ({ page }) => {
+  test('a thread I started keeps its unread replies while I view the room (#217)', async ({
+    page,
+  }) => {
+    const room = await createRoom(alice, 'Thread Unread Room', { invite: [bob.userId] });
+    await joinRoom(bob, room);
+    const inThread = (root: string) => ({
+      'm.relates_to': {
+        rel_type: 'm.thread',
+        event_id: root,
+        is_falling_back: true,
+        'm.in_reply_to': { event_id: root },
+      },
+    });
+    const root = await sendText(alice, room, 'my thread root');
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    // While the room is open and at the bottom: a thread reply, then a newer
+    // main-timeline message. Neither may clear the thread without opening it.
+    await sendText(bob, room, 'reply in your thread', inThread(root));
+    await sendText(bob, room, 'newer main message');
+    await expect(page.getByText('newer main message')).toBeVisible();
+    const chip = page
+      .locator('[data-message-item]', { hasText: 'my thread root' })
+      .getByRole('button', { name: /1 reply/ });
+    const threadUnread = async () => {
+      // not_types varies so Synapse's sync response cache can't serve a stale answer.
+      const filter = {
+        room: {
+          rooms: [room],
+          timeline: { limit: 1, unread_thread_notifications: true, not_types: [uniq('x.')] },
+        },
+      };
+      const sync = await api<{
+        rooms: {
+          join: Record<string, { unread_thread_notifications?: Record<string, unknown> }>;
+        };
+      }>(
+        'GET',
+        `/_matrix/client/v3/sync?timeout=0&filter=${enc(JSON.stringify(filter))}`,
+        alice.token,
+      );
+      return root in (sync.rooms.join[room]?.unread_thread_notifications ?? {});
+    };
+    await page.waitForTimeout(2000); // let any receipt the room view would send go out
+    expect(await threadUnread()).toBe(true);
+    await expect(chip).toHaveAccessibleName(/unread replies/);
+    await chip.click();
+    await expect.poll(threadUnread).toBe(false);
+  });
+
+  test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
     const room = await createRoom(alice, 'Lightbox Room');
     const png = Buffer.from(
       'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',

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.21",
         "@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",
+      "version": "0.25.0-lotus.21",
-      "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",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.21/element-call-embedded-0.25.0-lotus.21.tgz",
-      "integrity": "sha512-+mIrBA4SywAmb00EYgThyyVqDLShICjC2Mh8GR13NAWo/u4nPY+j4rMhZidfOJMdFTF5eaMHigX6SE0lHZazZA==",
+      "integrity": "sha512-Phtjop2qdKRrCLqAhzipRaJaVnU3MjK9CV4QwHkwU/Xlj8oguZBfjOlV7zTqOTzAr57OteOfLcyxLsmv5+u9tg==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -4847,10 +4861,11 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.10.2",
+      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.13.0.tgz",
-      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "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.21",
     "@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",

scripts/makeDecorationThumbs.py

@@ -0,0 +1,48 @@
+#!/usr/bin/env python3
+"""Build static picker thumbnails for avatar decorations.
+
+The decorations are animated APNGs (~1 MB each). The settings picker shows
+static WebP thumbnails instead and only loads the animated file on hover,
+focus or selection, so browsing the catalog costs a few MB, not hundreds.
+
+Usage: python3 scripts/makeDecorationThumbs.py <dir-of-slug.png> <out-dir>
+Then upload <out-dir>/*.webp to `${DECORATION_CDN}/thumbs/`.
+A missing thumbnail is harmless: the picker falls back to the full PNG.
+
+Requires Pillow (pip install pillow).
+"""
+import sys
+from pathlib import Path
+
+from PIL import Image, ImageSequence
+
+SIZE = 144  # 2x the 72px picker cell
+
+
+def best_frame(im: Image.Image) -> Image.Image:
+    # Many animations start (or loop through) an empty frame, so pick the frame
+    # with the most visible pixels rather than frame 0.
+    best, best_score = None, -1
+    frames = list(ImageSequence.Iterator(im))
+    step = max(1, len(frames) // 24)
+    for frame in frames[::step]:
+        rgba = frame.convert('RGBA')
+        score = sum(rgba.getchannel('A').histogram()[33:])
+        if score > best_score:
+            best, best_score = rgba, score
+    return best
+
+
+def main(src: str, out: str) -> None:
+    out_dir = Path(out)
+    out_dir.mkdir(parents=True, exist_ok=True)
+    for png in sorted(Path(src).glob('*.png')):
+        with Image.open(png) as im:
+            thumb = best_frame(im).resize((SIZE, SIZE), Image.LANCZOS)
+        thumb.save(out_dir / f'{png.stem}.webp', 'WEBP', quality=82, method=6)
+
+
+if __name__ == '__main__':
+    if len(sys.argv) != 3:
+        sys.exit(__doc__)
+    main(sys.argv[1], sys.argv[2])

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';
@@ -74,6 +78,7 @@ import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
+import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
 import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
@@ -176,7 +181,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 +757,15 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   useAfkAutoMute(joined ? embed : undefined);
   useCallJoinLeaveSounds(embed);
   useCallPolicyRevokedToast(embed, joined);
+  useCallEndedToast(embed);
+  useScreenshareNotices(embed);
+  // [Gitea #43] The in-frame screenshare button follows the same room policy
+  // as the host bar's (hidden where the server would refuse the share).
+  const { allowScreenshare } = useRoomCallPolicy(embed.room);
+  useEffect(() => {
+    embed.control.setFrameScreenshareAllowed(allowScreenshare);
+  }, [embed, allowScreenshare]);
+  usePttHaptics();
   useCallAnnouncements(embed, joined);
   useMutedTalkWarning(embed, joined);
   useCallThemeSync(embed);
@@ -840,6 +862,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 +1320,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).
+    // mangle high bytes via UTF-8). The QR library is loaded on demand.
-    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
+    import('qrcode')
-      width: 220,
+      .then(({ default: QRCode }) =>
-      margin: 2,
+        QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
-      color: { dark: '#000000', light: '#ffffff' },
+          width: 220,
-    }).catch(() => undefined);
+          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/GifPicker.tsx

@@ -4,6 +4,8 @@ import { useAtom } from 'jotai';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
 import { Box, color, config } from 'folds';
+import { TapToSendBar } from './tap-to-send/TapToSendBar';
+import { useRecentTouch } from '../hooks/useRecentTouch';
 import { useElementSizeObserver } from '../hooks/useElementSizeObserver';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
@@ -120,13 +122,31 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
 
   const sendGif = useCallback(
     (gif: RecentGif) => {
-      setRecents((prev) => addRecentGif(prev, gif));
+      const { url, width, height, previewUrl } = gif;
+      setRecents((prev) => addRecentGif(prev, { url, width, height, previewUrl }));
       onSelect(gif.url, gif.width, gif.height);
       requestClose();
     },
     [onSelect, requestClose, setRecents],
   );
 
+  // [Gitea #147] Touch: first tap parks the GIF in a preview bar, second tap
+  // (or Send) sends. Mouse/keyboard/screen reader: one step, as before.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { wasTouch } = useRecentTouch(containerRef);
+  const [pending, setPending] = useState<(RecentGif & { title?: string }) | undefined>();
+  const pick = useCallback(
+    (gif: RecentGif & { title?: string }) => {
+      if (wasTouch() && pending?.url !== gif.url) {
+        setPending(gif);
+        return;
+      }
+      setPending(undefined);
+      sendGif(gif);
+    },
+    [wasTouch, pending, sendGif],
+  );
+
   const handleClick = useCallback(
     (gif: IGif, e: React.SyntheticEvent) => {
       e.preventDefault();
@@ -135,14 +155,15 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         gif.images.fixed_width_small_still?.url ??
         gif.images.downsized_still?.url ??
         gif.images.original_still?.url;
-      sendGif({
+      pick({
         url: r.url,
         width: Number(r.width) || 200,
         height: Number(r.height) || 200,
         previewUrl,
+        title: gif.title,
       });
     },
-    [sendGif],
+    [pick],
   );
 
   const showRecents = recents.length > 0 && !(term ?? '').trim();
@@ -150,7 +171,6 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
   // The container is min(312px, 100vw-16); feed the Grid the live pixel width
   // (minus the inner 8px padding on each side) so it doesn't overflow a phone
   // narrower than 312px with a fixed 296px grid.
-  const containerRef = useRef<HTMLDivElement>(null);
   const [gridWidth, setGridWidth] = useState(PICKER_WIDTH - 16);
   useElementSizeObserver(
     useCallback(() => containerRef.current, []),
@@ -180,11 +200,22 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
           <SearchBar />
         </div>
       </Box>
+      {pending && (
+        <TapToSendBar
+          previewUrl={pending.previewUrl ?? pending.url}
+          label={pending.title || 'GIF'}
+          onSend={() => {
+            setPending(undefined);
+            sendGif(pending);
+          }}
+          onCancel={() => setPending(undefined)}
+        />
+      )}
       <div
         style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}
       >
         {showRecents && (
-          <RecentGifs recents={recents} lotusTerminal={lotusTerminal} onPick={sendGif} />
+          <RecentGifs recents={recents} lotusTerminal={lotusTerminal} onPick={pick} />
         )}
         <Grid
           key={searchKey}

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({
+        const [lib, media] = await Promise.all([
-          video: { facingMode: 'environment' },
+          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/autocomplete/RoomMentionAutocomplete.tsx

@@ -12,6 +12,7 @@ import { AutocompleteMenu } from './AutocompleteMenu';
 import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
+import { useAutocompleteEnter } from '../../../hooks/useAutocompleteEnter';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
@@ -126,19 +127,21 @@ export function RoomMentionAutocomplete({
     requestClose();
   };
 
-  useKeyDown(window, (evt: KeyboardEvent) => {
+  const pickTop = () => {
-    onTabPress(evt, () => {
+    if (autoCompleteRoomIds.length === 0) {
-      if (autoCompleteRoomIds.length === 0) {
+      const alias = roomAliasFromQueryText(mx, query.text);
-        const alias = roomAliasFromQueryText(mx, query.text);
+      handleAutocomplete(alias, alias);
-        handleAutocomplete(alias, alias);
+      return;
-        return;
+    }
-      }
+    const rId = autoCompleteRoomIds[0];
-      const rId = autoCompleteRoomIds[0];
+    const r = mx.getRoom(rId);
-      const r = mx.getRoom(rId);
+    const name = r?.name ?? rId;
-      const name = r?.name ?? rId;
+    handleAutocomplete(r?.getCanonicalAlias() ?? rId, name);
-      handleAutocomplete(r?.getCanonicalAlias() ?? rId, name);
+  };
-    });
+
-  });
+  useKeyDown(window, (evt: KeyboardEvent) => onTabPress(evt, pickTop));
+  // Same rule as people: a fully typed #alias:server sends as typed.
+  useAutocompleteEnter(!query.text.includes(':'), pickTop);
 
   return (
     <AutocompleteMenu headerContent={<Text size="L400">Rooms</Text>} requestClose={requestClose}>

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -13,6 +13,7 @@ import {
   useAsyncSearch,
 } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
+import { useAutocompleteEnter } from '../../../hooks/useAutocompleteEnter';
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
@@ -124,21 +125,24 @@ export function UserMentionAutocomplete({
     requestClose();
   };
 
-  useKeyDown(window, (evt: KeyboardEvent) => {
+  const pickTop = () => {
-    onTabPress(evt, () => {
+    if (query.text === 'room') {
-      if (query.text === 'room') {
+      handleAutocomplete(roomAliasOrId, '@room');
-        handleAutocomplete(roomAliasOrId, '@room');
+      return;
-        return;
+    }
-      }
+    if (autoCompleteMembers.length === 0) {
-      if (autoCompleteMembers.length === 0) {
+      const userId = userIdFromQueryText(mx, query.text);
-        const userId = userIdFromQueryText(mx, query.text);
+      handleAutocomplete(userId, userId);
-        handleAutocomplete(userId, userId);
+      return;
-        return;
+    }
-      }
+    const roomMember = autoCompleteMembers[0];
-      const roomMember = autoCompleteMembers[0];
+    handleAutocomplete(roomMember.userId, getMemberName(room, roomMember.userId));
-      handleAutocomplete(roomMember.userId, roomMember.name);
+  };
-    });
+
-  });
+  useKeyDown(window, (evt: KeyboardEvent) => onTabPress(evt, pickTop));
+  // Enter picks while a partial name is being typed ("hey @bo"). Once a full
+  // user ID has been typed ("/kick @alice:server"), Enter sends as typed.
+  useAutocompleteEnter(!query.text.includes(':'), pickTop);
 
   const getName = (member: RoomMember) => getMemberName(room, member.userId);
 

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/emoji-board/EmojiBoard.tsx

@@ -31,6 +31,8 @@ import { useThrottle } from '../../hooks/useThrottle';
 import { addRecentEmoji } from '../../plugins/recent-emoji';
 import { addRecentSticker, recentStickersAtom } from '../../state/recentStickers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useRecentTouch } from '../../hooks/useRecentTouch';
+import { TapToSendBar } from '../tap-to-send/TapToSendBar';
 import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
 import { getEmoticonSearchStr } from '../../plugins/utils';
 import {
@@ -52,7 +54,7 @@ import {
   EmojiGroup,
   EmojiBoardLayout,
 } from './components';
-import { EmojiBoardTab, EmojiType } from './types';
+import { EmojiBoardTab, EmojiItemInfo, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
 
 const RECENT_GROUP_ID = 'recent_group';
@@ -518,10 +520,27 @@ export function EmojiBoard({
   });
   const vItems = virtualizer.getVirtualItems();
 
+  // [Gitea #147] Touch: first tap on a sticker parks it in a preview bar,
+  // second tap (or the bar's Send) sends. Mouse/keyboard/screen reader: one step.
+  const { wasTouch } = useRecentTouch(contentScrollRef);
+  const [pendingSticker, setPendingSticker] = useState<EmojiItemInfo | undefined>();
+  const stickerUseAuthentication = useMediaAuthentication();
+  const sendSticker = (info: EmojiItemInfo, close: boolean) => {
+    onStickerSelect?.(info.data, info.shortcode, info.label);
+    setRecentStickers((prev) =>
+      addRecentSticker(prev, { url: info.data, shortcode: info.shortcode, body: info.label }),
+    );
+    setPendingSticker(undefined);
+    if (close) requestClose();
+  };
+
   const handleGroupItemClick: MouseEventHandler = (evt) => {
     const targetEl = targetFromEvent(evt.nativeEvent, 'button');
     const emojiInfo = targetEl && getEmojiItemInfo(targetEl);
-    if (!emojiInfo) return;
+    if (!emojiInfo) {
+      if (pendingSticker) setPendingSticker(undefined);
+      return;
+    }
 
     if (emojiInfo.type === EmojiType.Emoji) {
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
@@ -533,14 +552,12 @@ export function EmojiBoard({
       onCustomEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
     }
     if (emojiInfo.type === EmojiType.Sticker) {
-      onStickerSelect?.(emojiInfo.data, emojiInfo.shortcode, emojiInfo.label);
+      if (wasTouch() && pendingSticker?.data !== emojiInfo.data) {
-      setRecentStickers((prev) =>
+        setPendingSticker(emojiInfo);
-        addRecentSticker(prev, {
+        return;
-          url: emojiInfo.data,
+      }
-          shortcode: emojiInfo.shortcode,
+      sendSticker(emojiInfo, !evt.altKey && !evt.shiftKey);
-          body: emojiInfo.label,
+      return;
-        }),
-      );
     }
     if (!evt.altKey && !evt.shiftKey) requestClose();
   };
@@ -670,7 +687,18 @@ export function EmojiBoard({
             {tab === EmojiBoardTab.Sticker && groups.length === 0 && <NoStickerPacks />}
           </EmojiGroupHolder>
         </Box>
-        <Preview previewAtom={previewAtom} />
+        {pendingSticker && tab === EmojiBoardTab.Sticker ? (
+          <TapToSendBar
+            previewUrl={
+              mxcUrlToHttp(mx, pendingSticker.data, stickerUseAuthentication) ?? undefined
+            }
+            label={pendingSticker.label}
+            onSend={() => sendSticker(pendingSticker, true)}
+            onCancel={() => setPendingSticker(undefined)}
+          />
+        ) : (
+          <Preview previewAtom={previewAtom} />
+        )}
       </EmojiBoardLayout>
     </FocusTrap>
   );

src/app/components/event-readers/EventReaders.tsx

@@ -24,32 +24,19 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { today, yesterday, timeHourMinute, timeMon, timeDay, timeYear } from '../../utils/time';
+import { TimestampPrefs, formatTimestamp } from '../../utils/formatTimestamp';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 
-function formatReadTs(ts: number, hour24Clock: boolean): string {
+const formatReadTs = (ts: number, prefs: TimestampPrefs): string => formatTimestamp(ts, prefs);
-  const timeStr = timeHourMinute(ts, hour24Clock);
-  if (today(ts)) return `Today at ${timeStr}`;
-  if (yesterday(ts)) return `Yesterday at ${timeStr}`;
-  const sameYear = timeYear(ts) === timeYear(Date.now());
-  return sameYear
-    ? `${timeMon(ts)} ${timeDay(ts)} at ${timeStr}`
-    : `${timeMon(ts)} ${timeDay(ts)} ${timeYear(ts)} at ${timeStr}`;
-}
 
 type EventReaderItemProps = {
   room: Room;
   readerId: string;
-  hour24Clock: boolean;
+  prefs: TimestampPrefs;
   lotusTerminal: boolean;
   onSelect: React.MouseEventHandler<HTMLButtonElement>;
 };
-function EventReaderItem({
+function EventReaderItem({ room, readerId, prefs, lotusTerminal, onSelect }: EventReaderItemProps) {
-  room,
-  readerId,
-  hour24Clock,
-  lotusTerminal,
-  onSelect,
-}: EventReaderItemProps) {
   const { name, avatarUrl } = useMemberAvatar(room, readerId, 100, 100);
   const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;
 
@@ -86,7 +73,7 @@ function EventReaderItem({
                 : undefined
             }
           >
-            {formatReadTs(receiptTs, hour24Clock)}
+            {formatReadTs(receiptTs, prefs)}
           </Text>
         )}
       </Box>
@@ -106,7 +93,7 @@ export const EventReaders = as<'div', EventReadersProps>(
     const latestEventReaders = useRoomEventReaders(room, eventId).filter((id) => id !== myUserId);
     const openProfile = useOpenUserRoomProfile();
     const space = useSpaceOptionally();
-    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const { prefs } = useTimestampFormatter();
     const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
 
     return (
@@ -157,7 +144,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                   key={readerId}
                   room={room}
                   readerId={readerId}
-                  hour24Clock={hour24Clock}
+                  prefs={prefs}
                   lotusTerminal={lotusTerminal}
                   onSelect={(event) => {
                     openProfile(

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/ForwardedHeader.tsx

@@ -6,7 +6,7 @@ import * as css from './Reply.css';
 import { ForwardedMeta } from '../../features/room/message/forwardContent';
 import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { formatTimestamp } from '../../utils/formatTimestamp';
 
 type ForwardedHeaderProps = {
   mx: MatrixClient;
@@ -32,11 +32,7 @@ export const ForwardedHeader = as<'div', ForwardedHeaderProps>(
       getMxIdLocalPart(meta.sender) ??
       meta.sender;
     const ts = meta.origin_server_ts;
-    const when = today(ts)
+    const when = formatTimestamp(ts, { hour24Clock, dateFormatString });
-      ? timeHourMinute(ts, hour24Clock)
-      : yesterday(ts)
-        ? `Yesterday ${timeHourMinute(ts, hour24Clock)}`
-        : `${timeDayMonYear(ts, dateFormatString)} ${timeHourMinute(ts, hour24Clock)}`;
     const canJump = !!sourceRoom && !!onJump;
 
     return (

src/app/components/message/Reaction.tsx

@@ -13,13 +13,21 @@ export const Reaction = as<
     mx: MatrixClient;
     count: number;
     reaction: string;
+    /** Custom-emoji shortcode from the reaction event, used for its label. */
+    shortcode?: string;
     useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => {
+>(({ className, mx, count, reaction, shortcode, useAuthentication, ...props }, ref) => {
-  const shortcode = reaction.startsWith('mxc://')
+  // Name a unicode reaction by the emoji itself: screen readers speak it by its
-    ? 'custom emoji'
+  // proper name ("party popper"). Don't use getShortcodeFor here — it returns
-    : (getShortcodeFor(getHexcodeForEmoji(reaction)) ?? reaction);
+  // undefined until the lazy emoji data loads, so the same button would flip
-  const label = `${shortcode} reaction, ${count} ${count === 1 ? 'person' : 'people'}`;
+  // between "🎉 reaction" and "tada reaction" depending on timing (#179).
+  const name = reaction.startsWith('mxc://')
+    ? shortcode
+      ? `:${shortcode}:`
+      : 'custom emoji'
+    : reaction;
+  const label = `${name} reaction, ${count} ${count === 1 ? 'person' : 'people'}`;
 
   return (
     <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>
+            <Box alignItems="Center" gap="200" style={{ minWidth: 0 }}>
-              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+              {hasReplyMedia(replyEvent) && <ReplyMediaThumb mEvent={replyEvent} />}
-            </Text>
+              <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/Time.tsx

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

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', 'm.poll.response'),
-      relations.getChildEventsForEvent(
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'org.matrix.msc3381.poll.response'),
-        eventId,
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.end'),
-        'm.reference',
+      relations.getChildEventsForEvent(eventId, 'm.reference', 'org.matrix.msc3381.poll.end'),
-        'org.matrix.msc3381.poll.response' as any,
-      ),
-      relations.getChildEventsForEvent(eventId, 'm.reference', 'm.poll.end' as any),
-      relations.getChildEventsForEvent(
-        eventId,
-        'm.reference',
-        'org.matrix.msc3381.poll.end' as any,
-      ),
     ];
     relObjs.forEach((r) => {
       r?.on(RelationsEvent.Add, refresh);
@@ -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}
+      as: AsNavItem = 'div',
-    {...props}
+      className,
-    ref={ref}
+      highlight,
-  >
+      variant,
-    {children}
+      radii,
-  </AsNavItem>
+      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-intro/RoomIntro.tsx

@@ -19,15 +19,13 @@ import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useRoomAvatar, useLocalRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { InviteUserPrompt } from '../invite-user-prompt';
 import { RoomTopicViewer } from '../room-topic-viewer';
 import { stopPropagation } from '../../utils/keyboard';
@@ -68,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]),
   );
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const { format } = useTimestampFormatter();
 
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
@@ -135,7 +133,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`}
+              {` on ${format(ts, 'dateTime')}`}
             </Text>
           )}
         </Box>

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
+ * `opacity` so the compositor can run them without layout or paint.
- * 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.
  */
 
 /**
- * A leaf falls from above to below the viewport while continuously rotating.
+ * A leaf falls from above to below the viewport while slowly turning. One tall
- * A single tall translateY serves every leaf — per-leaf duration/delay/scale
+ * translateY serves every leaf; per-leaf duration/delay/size give parallax.
- * create the parallax variety. Horizontal travel is intentionally small here
- * because the real lateral motion comes from the sway wrapper below.
  */
 export const animLeafFall = keyframes({
   '0%': { transform: 'translate3d(0, -12vh, 0) rotate(-30deg)', opacity: '0' },
-  '8%': { opacity: '1' },
+  '6%': { opacity: '1' },
-  '50%': { transform: 'translate3d(10px, 50vh, 0) rotate(200deg)' },
+  '50%': { transform: 'translate3d(10px, 50vh, 0) rotate(160deg)' },
-  '92%': { opacity: '0.85' },
+  '94%': { opacity: '0.9' },
-  '100%': { transform: 'translate3d(-6px, 114vh, 0) rotate(430deg)', opacity: '0' },
+  '100%': { transform: 'translate3d(-6px, 114vh, 0) rotate(340deg)', opacity: '0' },
 });
 
-/**
+/** Lateral sway on the leaf's wrapper so the descent reads as wind. */
- * 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.
- */
 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
+ * Soft flutter on the blade. [#237] Gentler than before (scaleX 0.82 made
- * mimics the blade catching air as it spins. Cheap, transform-only.
+ * leaves flatten into slivers mid-flip).
  */
 export const animLeafFlutter = keyframes({
-  '0%': { transform: 'rotate(-8deg) scaleX(1)' },
+  '0%': { transform: 'rotate(-10deg) scaleX(1)' },
-  '50%': { transform: 'rotate(8deg) scaleX(0.82)' },
+  '50%': { transform: 'rotate(10deg) scaleX(0.92)' },
-  '100%': { transform: 'rotate(-8deg) scaleX(1)' },
+  '100%': { transform: 'rotate(-10deg) scaleX(1)' },
 });
 
 /**
- * Low-sun light shaft: a long soft beam slowly slides and breathes. Uses
+ * [#237] A gust: the leaf enters from the left, is blown across and up while
- * translateX + opacity (never background-position) so it stays on the
+ * spinning, and leaves on the right in ~6 s (14 % of a 42 s cycle). The rest
- * compositor. Scale on Y makes the beam subtly elongate as it brightens.
+ * of the cycle it waits off-screen, invisible.
  */
-export const animSunShaft = keyframes({
+export const animGust = keyframes({
-  '0%': { transform: 'translate3d(-4%, 0, 0) scaleY(1)', opacity: '0.4' },
+  '0%': { transform: 'translate3d(-12vw, 0, 0) rotate(0deg)', opacity: '0' },
-  '50%': { transform: 'translate3d(4%, 0, 0) scaleY(1.06)', opacity: '0.75' },
+  '1%': { opacity: '1' },
-  '100%': { transform: 'translate3d(-4%, 0, 0) scaleY(1)', opacity: '0.4' },
+  // 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,
+ * Leaf blade. On the dark themes the crimson/russet leaves sank into the
- * pulsing softly in brightness as it catches the sun. transform + opacity.
+ * background, so they are lifted there.
  */
-export const animMoteDrift = keyframes({
+export const leafBlade = style({
-  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
+  selectors: {
-  '15%': { opacity: '0.85' },
+    'body.dark-theme &, body.butter-theme &': {
-  '40%': { transform: 'translate3d(16px, -30vh, 0) scale(1)' },
+      filter: 'brightness(1.6) saturate(1.2)',
-  '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' },
 });

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

@@ -1,97 +1,108 @@
 import React, { useMemo } from 'react';
 import { SeasonalOverlayProps } from '../types';
-import {
+import { animGust, animLeafFall, animLeafFlutter, animLeafSway, leafBlade } from './Autumn.css';
-  animLeafFall,
-  animLeafSway,
-  animLeafFlutter,
-  animSunShaft,
-  animMoteDrift,
-  animMoteTwinkle,
-  animEmberPulse,
-} 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):
+ * [#237] Deliberately no full-screen tint, light shafts or vignette: they
- *   1. amber -> rust ambient gradient wash (cozy low-sun atmosphere)
+ * turned the user's theme beige (muddy brown on dark) and lowered contrast
- *   2. soft angled sun shafts breathing high across the scene
+ * everywhere. The leaves carry the season on their own.
- *   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
  *
- * All motion is transform/opacity only (compositor-friendly). When `reduced`
+ * Composition:
- * is true we render a static-but-gorgeous scene: a handful of leaves at rest,
+ *   1. maple / oak / aspen leaves drifting down with sway and a soft flutter
- * still sun shafts, and the warm vignette — no `animation` anywhere. The
+ *   2. every ~42 s a gust: a small group of leaves blows across the screen
- * settings preview always passes reduced=true, so the still form stands alone.
+ * 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
+// [#237] A real autumn palette: [body, tip highlight, vein]. The previous
-// chat text underneath. Each leaf picks a tone for variety.
+// muted tans read as beige smudges on the light theme.
-const LEAF_TONES = [
+const LEAF_TONES: [string, string, string][] = [
-  'oklch(0.75 0.15 70)', // amber
+  ['oklch(0.56 0.19 30)', 'oklch(0.68 0.17 45)', 'oklch(0.38 0.12 28)'], // crimson
-  'oklch(0.55 0.16 40)', // rust
+  ['oklch(0.68 0.17 52)', 'oklch(0.8 0.15 75)', 'oklch(0.45 0.12 45)'], // pumpkin orange
-  'oklch(0.82 0.13 85)', // warm gold
+  ['oklch(0.76 0.15 80)', 'oklch(0.85 0.13 92)', 'oklch(0.52 0.1 65)'], // gold
-  'oklch(0.62 0.16 55)', // burnt orange
+  ['oklch(0.5 0.1 50)', 'oklch(0.62 0.11 60)', 'oklch(0.34 0.06 45)'], // russet brown
-  'oklch(0.5 0.14 35)', // deep ember
+  ['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).
+type LeafKind = 'maple' | 'oak' | 'aspen';
-// `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';
 
-/** Build a CSS-ready data-URI of a single tinted leaf silhouette. */
+// Leaf silhouettes (viewBox 0 0 100 100, stem at the bottom). The maple is the
-function leafDataUri(kind: 'maple' | 'oak', fill: string): string {
+// flag-style silhouette on purpose: its bold lobes stay recognisable at 30 px,
-  const path = kind === 'maple' ? MAPLE_PATH : OAK_PATH;
+// where the previous star-like outline read as a splat.
-  // A faint vein line gives the blade depth without extra DOM nodes.
+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'/>` +
+    `<defs><linearGradient id='g' x1='0' y1='1' x2='0.4' y2='0'>` +
-    `<path d='M50 96 L50 24' stroke='oklch(0.42 0.12 38)' stroke-opacity='0.35' ` +
+    `<stop offset='0' stop-color='${body}'/><stop offset='1' stop-color='${tip}'/>` +
-    `stroke-width='2.5' fill='none' stroke-linecap='round'/>` +
+    `</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
+  left: number;
-  size: number; // px
+  size: number;
   duration: number; // s — fall time
   delay: number; // s
-  swayDuration: number; // s — wrapper sway
+  swayDuration: number;
-  flutterDuration: number; // s — inner flutter
+  flutterDuration: number;
-  tilt: number; // deg — resting rotation (used for static scene)
   opacity: number;
 };
 
-type Mote = {
+type GustLeaf = {
-  left: number;
+  uri: string;
-  bottom: number;
+  top: number; // % of height where it enters
   size: number;
-  duration: number;
+  delay: number; // s within the gust
-  delay: number;
-  twinkle: number;
   opacity: number;
 };
 
-// A few hand-placed leaves at rest for the reduced/static scene — arranged so
+/** Seconds between gusts, and when the first one comes after load. */
-// they read as "settled" near edges and corners, never over the busy center.
+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: 'maple', left: 0.5, top: 44, size: 60, tilt: 24, tone: 0, opacity: 0.62 },
-  { kind: 'oak', left: 88, top: 22, size: 38, tilt: 28, tone: 1, opacity: 0.34 },
+  { kind: 'aspen', left: 1.5, top: 54, size: 44, tilt: -30, tone: 2, opacity: 0.6 },
-  { kind: 'maple', left: 16, top: 78, size: 54, tilt: 16, tone: 3, opacity: 0.42 },
+  { kind: 'oak', left: 99, top: 62, size: 54, tilt: 160, tone: 3, opacity: 0.6 },
-  { kind: 'oak', left: 80, top: 82, size: 44, tilt: -34, tone: 4, opacity: 0.36 },
+  { kind: 'maple', left: 97.5, top: 72, size: 46, tilt: 200, tone: 4, opacity: 0.6 },
-  { 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 },
 ];
 
-export function AutumnOverlay({ reduced }: SeasonalOverlayProps) {
+// Composition for the Settings swatch (sizes are % of the tile width).
-  // Deterministic pseudo-random field, computed ONCE. No per-frame state.
+const PREVIEW_LEAVES: ReadonlyArray<{
-  const { leaves, motes } = useMemo(() => {
+  kind: LeafKind;
-    const LEAF_COUNT = 16;
+  left: number;
-    const MOTE_COUNT = 12;
+  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) => {
+export function AutumnOverlay({ reduced, preview }: SeasonalOverlayProps) {
-      const kind: 'maple' | 'oak' = i % 3 === 0 ? 'oak' : 'maple';
+  // Deterministic field, computed ONCE. No per-frame state.
-      const tone = LEAF_TONES[i % LEAF_TONES.length];
+  const { leaves, gust } = useMemo(() => {
-      const sizeBucket = i % 4; // 0..3 → depth bucket for parallax
+    const kinds = ['maple', 'oak', 'maple', 'aspen'] as const;
-      const size = 22 + sizeBucket * 9; // 22..49 px
+    const builtLeaves: Leaf[] = Array.from({ length: 12 }, (_, i) => {
+      const depth = i % 4; // 0..3 → parallax bucket
       return {
-        kind,
+        uri: leafDataUri(kinds[i % 4], LEAF_TONES[i % LEAF_TONES.length]),
-        uri: leafDataUri(kind, tone),
+        left: (i * 8.3 + 4) % 100,
-        left: (i * 6.13 + 4) % 100,
+        size: 28 + depth * 8, // 28..52 px
-        size,
+        // Nearer leaves fall a touch faster; all slow and calm.
-        // Larger (nearer) leaves fall a touch faster; all slow + cozy.
+        duration: 16 - depth * 1.6 + (i % 3) * 1.3,
-        duration: 16 - sizeBucket * 1.6 + (i % 3) * 1.3,
+        delay: -((i * 1.37) % 16), // negative → already mid-fall on load
-        delay: -((i * 1.37) % 16), // negative → staggered, already mid-fall
         swayDuration: 5 + (i % 5) * 0.8,
-        flutterDuration: 1.6 + (i % 4) * 0.45,
+        flutterDuration: 2 + (i % 4) * 0.5,
-        tilt: ((i * 53) % 70) - 35,
+        // Nearer → bolder. Small, moving and semi-transparent, so text under a
-        opacity: 0.34 + sizeBucket * 0.08, // nearer → slightly bolder
+        // passing leaf stays readable.
+        opacity: 0.58 + depth * 0.05,
       };
     });
-
+    const builtGust: GustLeaf[] = Array.from({ length: 5 }, (_, i) => ({
-    const builtMotes: Mote[] = Array.from({ length: MOTE_COUNT }, (_, i) => ({
+      uri: leafDataUri(kinds[(i + 1) % 4], LEAF_TONES[(i * 2) % LEAF_TONES.length]),
-      left: (i * 8.7 + 5) % 100,
+      top: 30 + ((i * 13) % 40),
-      bottom: (i * 4.3) % 30, // start in lower third, drift up
+      size: 30 + (i % 3) * 10,
-      size: 2 + (i % 3),
+      delay: GUST_FIRST + i * 0.35,
-      duration: 16 + (i % 6) * 2.4,
+      opacity: 0.7,
-      delay: -((i * 2.1) % 16),
-      twinkle: 2.2 + (i % 4) * 0.6,
-      opacity: 0.4 + (i % 3) * 0.12,
     }));
-
+    return { leaves: builtLeaves, gust: builtGust };
-    return { leaves: builtLeaves, motes: builtMotes };
   }, []);
 
-  return (
+  if (preview) {
-    <>
+    // The Settings swatch: a warm backdrop (fine inside the tile, unlike over
-      {/* 1. Ambient amber → rust atmospheric wash. Layered oklch gradients give
+    // the app) with a few leaves arranged across it.
-            depth: a warm low-sun glow from the upper-left, a rust pool at the
+    return (
-            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) => (
         <div
-          key={`shaft-${i}`}
           aria-hidden="true"
           style={{
             position: 'absolute',
-            top: '-30%',
+            inset: 0,
-            left: `${shaft.left}%`,
+            background:
-            width: `${shaft.w}vw`,
+              'linear-gradient(160deg, oklch(0.42 0.09 55) 0%, oklch(0.32 0.08 40) 60%, oklch(0.24 0.06 35) 100%)',
-            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`,
           }}
         />
-      ))}
+        {PREVIEW_LEAVES.map((leaf, i) => (
-
-      {/* 3. Drifting pollen / dust motes catching the light. Static scene omits
-            them — stillness reads cleaner at rest. */}
-      {!reduced &&
-        motes.map((m, i) => (
           <div
-            key={`mote-${i}`}
+            key={`pv-${i}`}
             aria-hidden="true"
             style={{
               position: 'absolute',
-              left: `${m.left}%`,
+              left: `${leaf.left}%`,
-              bottom: `${m.bottom}%`,
+              top: `${leaf.top}%`,
-              width: `${m.size}px`,
+              width: `${leaf.size}%`,
-              height: `${m.size}px`,
+              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%',
+                backgroundImage: leaf.uri,
-                background:
+                backgroundSize: 'contain',
-                  'radial-gradient(circle, oklch(0.88 0.1 85 / 0.95) 0%, oklch(0.78 0.12 70 / 0.4) 60%, transparent 100%)',
+                backgroundRepeat: 'no-repeat',
-                opacity: m.opacity,
+                opacity: leaf.opacity,
-                animation: `${animMoteTwinkle} ${m.twinkle}s ease-in-out infinite`,
+                animation: `${animLeafFlutter} ${leaf.flutterDuration}s ease-in-out infinite`,
               }}
             />
           </div>
-        ))}
+        </div>
+      ))}
 
-      {/* 4. Falling / resting maple & oak leaves. */}
+      {/* Gust: a handful of leaves blown across the screen together, then a
-      {reduced
+          long calm. Off-screen (and invisible) the rest of the cycle. */}
-        ? RESTING_LEAVES.map((leaf, i) => (
+      {gust.map((leaf, i) => (
-            <div
+        <div
-              key={`rest-${i}`}
+          key={`gust-${i}`}
-              aria-hidden="true"
+          aria-hidden="true"
-              style={{
+          style={{
-                position: 'absolute',
+            position: 'absolute',
-                left: `${leaf.left}%`,
+            top: `${leaf.top}%`,
-                top: `${leaf.top}%`,
+            left: 0,
-                width: `${leaf.size}px`,
+            width: `${leaf.size}px`,
-                height: `${leaf.size}px`,
+            height: `${leaf.size}px`,
-                backgroundImage: leafDataUri(leaf.kind, LEAF_TONES[leaf.tone]),
+            opacity: 0,
-                backgroundSize: 'contain',
+            willChange: 'transform, opacity',
-                backgroundRepeat: 'no-repeat',
+            animation: `${animGust} ${GUST_PERIOD}s linear ${leaf.delay}s infinite`,
-                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))',
+          <div
-              }}
+            className={leafBlade}
-            />
+            style={{
-          ))
+              width: '100%',
-        : leaves.map((leaf, i) => (
+              height: '100%',
-            // Sway wrapper: horizontal wind motion, decoupled from the fall.
+              backgroundImage: leaf.uri,
-            <div
+              backgroundSize: 'contain',
-              key={`leaf-${i}`}
+              backgroundRepeat: 'no-repeat',
-              aria-hidden="true"
+              opacity: leaf.opacity,
-              style={{
+            }}
-                position: 'absolute',
+          />
-                top: 0,
+        </div>
-                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`,
-        }}
-      />
     </>
   );
 }

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
+ * Halloween overlay styles. Motion is transform/opacity only.
- * `opacity` so the compositor can run them on the GPU without layout/paint.
+ *
- * keyframes() returns the generated animation-name string, applied inline.
+ * [#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).
  */
-
+export const halloweenRoot = style({
-/** Slow breathing of the sickly moon-glow vignette. */
+  position: 'absolute',
-export const animMoonPulse = keyframes({
+  inset: 0,
-  '0%': { transform: 'scale(1)', opacity: '0.55' },
+  vars: {
-  '50%': { transform: 'scale(1.06)', opacity: '0.8' },
+    '--hw-ink': 'oklch(0.24 0.04 300)',
-  '100%': { transform: 'scale(1)', opacity: '0.55' },
+    '--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. */
+/** A bat group crosses the top of the screen in ~9 s, then a long calm. */
-export const animFogDrift = keyframes({
+export const animBatFlight = keyframes({
-  '0%': { transform: 'translate3d(-12%, 6%, 0) scale(1.1)', opacity: '0' },
+  '0%': { transform: 'translate3d(-10vw, 0, 0)', opacity: '0' },
-  '15%': { opacity: '0.5' },
+  '1%': { opacity: '1' },
-  '50%': { transform: 'translate3d(6%, -2%, 0) scale(1.25)', opacity: '0.65' },
+  '29%': { opacity: '1' },
-  '85%': { opacity: '0.45' },
+  '30%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
-  '100%': { transform: 'translate3d(18%, 4%, 0) scale(1.1)', opacity: '0' },
+  '100%': { transform: 'translate3d(110vw, -6vh, 0)', opacity: '0' },
 });
 
-/** A bat flaps slowly across the sky in a shallow arc. */
+/** Up-and-down bobbing on each bat, so the group doesn't move as one block. */
-export const animBatGlide = keyframes({
+export const animBatBob = keyframes({
-  '0%': { transform: 'translate3d(-12vw, 8vh, 0) scale(0.9)', opacity: '0' },
+  '0%': { transform: 'translate3d(0, 0, 0)' },
-  '10%': { opacity: '0.7' },
+  '50%': { transform: 'translate3d(0, 14px, 0)' },
-  '45%': { transform: 'translate3d(45vw, -4vh, 0) scale(1)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
-  '80%': { transform: 'translate3d(85vw, 6vh, 0) scale(0.95)', opacity: '0.6' },
-  '100%': { transform: 'translate3d(112vw, 2vh, 0) scale(0.9)', opacity: '0' },
 });
 
-/** The bat's wings beat — fast vertical squash of the wing element. */
+/** Wing beat: the silhouette squashes vertically around the body. */
-export const animWingFlap = keyframes({
+export const animBatFlap = keyframes({
-  '0%': { transform: 'scaleY(1) scaleX(1)' },
+  '0%': { transform: 'scaleY(1)' },
-  '50%': { transform: 'scaleY(0.35) scaleX(1.08)' },
+  '50%': { transform: 'scaleY(0.62)' },
-  '100%': { transform: 'scaleY(1) scaleX(1)' },
+  '100%': { transform: 'scaleY(1)' },
 });
 
-/** Will-o'-wisp ember: floats upward, swaying, pulsing in brightness. */
+/** The spider bobs on its thread (thread and spider move together). */
-export const animEmberFloat = keyframes({
+export const animSpiderBob = keyframes({
-  '0%': { transform: 'translate3d(0, 0, 0) scale(0.7)', opacity: '0' },
+  '0%': { transform: 'translate3d(0, 0, 0)' },
-  '12%': { opacity: '0.85' },
+  '50%': { transform: 'translate3d(0, 18px, 0)' },
-  '35%': { transform: 'translate3d(14px, -28vh, 0) scale(1)' },
+  '100%': { transform: 'translate3d(0, 0, 0)' },
-  '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' },
 });
 
-/** Soft twinkle for embers — independent opacity flicker layered on top. */
+/** A slow sway of the spider itself on the end of the thread. */
-export const animEmberTwinkle = keyframes({
+export const animSpiderSway = keyframes({
-  '0%': { opacity: '0.6' },
+  '0%': { transform: 'rotate(-6deg)' },
-  '50%': { opacity: '1' },
+  '50%': { transform: 'rotate(6deg)' },
-  '100%': { opacity: '0.6' },
+  '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,
+  animBatBob,
-  animFogDrift,
+  animBatFlap,
-  animBatGlide,
+  animBatFlight,
-  animWingFlap,
+  animCandle,
-  animEmberFloat,
+  animGhost,
-  animEmberTwinkle,
+  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.
+ * HalloweenOverlay — cobwebs, a dangling spider and bats, over the app as is.
-const PURPLE_DEEP = 'oklch(0.20 0.12 300)';
+ *
-const PURPLE_FAINT = 'oklch(0.28 0.10 300 / 0.45)';
+ * The parent supplies a fixed inset:0 overflow:hidden pointer-events:none
-const TOXIC_GREEN = 'oklch(0.80 0.18 150)';
+ * container; everything here is aria-hidden and absolutely positioned.
-const TOXIC_GREEN_SOFT = 'oklch(0.72 0.16 150 / 0.35)';
+ *
-const EMBER_ORANGE = 'oklch(0.70 0.18 50)';
+ * [#239] No full-screen purple wash or blurred "moon": they tinted the whole
-const FOG_TINT = 'oklch(0.45 0.06 280 / 0.32)';
+ * 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).
+/** Corner web (corner at 0,0): radial threads + sagging catch-rings. */
-// strokeWidth kept hairline so it reads as gossamer thread, not a cage.
+function webPath(size = 100): string {
-const cobwebUri = (() => {
+  const angles = [0, 16, 32, 48, 64, 80, 90].map((a) => (a * Math.PI) / 180);
-  const svg =
+  const spokes = angles
-    `<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>` +
+    .map((a) => `M0 0 L${(Math.cos(a) * size).toFixed(1)} ${(Math.sin(a) * size).toFixed(1)}`)
-    `<g fill='none' stroke='rgba(196,176,224,0.32)' stroke-width='0.8'>` +
+    .join(' ');
-    // radial threads
+  const rings = [0.28, 0.48, 0.68, 0.88].map((f) => {
-    `<line x1='0' y1='0' x2='180' y2='180'/>` +
+    const r = f * size;
-    `<line x1='0' y1='0' x2='180' y2='90'/>` +
+    const pts = angles.map((a) => [Math.cos(a) * r, Math.sin(a) * r]);
-    `<line x1='0' y1='0' x2='90' y2='180'/>` +
+    let d = `M${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
-    `<line x1='0' y1='0' x2='180' y2='40'/>` +
+    for (let i = 1; i < pts.length; i += 1) {
-    `<line x1='0' y1='0' x2='40' y2='180'/>` +
+      const [x0, y0] = pts[i - 1];
-    // concentric catch-threads (gentle sag via quadratic curves)
+      const [x1, y1] = pts[i];
-    `<path d='M40 0 Q22 22 0 40'/>` +
+      // Control point pulled toward the corner so each segment sags.
-    `<path d='M85 0 Q48 48 0 85'/>` +
+      const cx = ((x0 + x1) / 2) * 0.86;
-    `<path d='M130 0 Q74 74 0 130'/>` +
+      const cy = ((y0 + y1) / 2) * 0.86;
-    `<path d='M180 0 Q104 104 0 180'/>` +
+      d += ` Q${cx.toFixed(1)} ${cy.toFixed(1)} ${x1.toFixed(1)} ${y1.toFixed(1)}`;
-    `<path d='M180 60 Q120 120 60 180'/>` +
+    }
-    `</g></svg>`;
+    return d;
-  return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  });
-})();
+  return `${spokes} ${rings.join(' ')}`;
+}
+const WEB = webPath();
 
-// A single silhouetted bat, inline SVG. Wings are separate so the wrapper can
+function Cobweb({ corner, size }: { corner: 'left' | 'right'; size: number }) {
-// glide while an inner element flaps independently — we re-use one body shape.
-function BatSilhouette() {
   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={WEB}
-        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"
+        fill="none"
+        stroke="var(--hw-web)"
+        strokeWidth={0.9}
+        strokeLinecap="round"
+        vectorEffect="non-scaling-stroke"
       />
     </svg>
   );
 }
 
-export function HalloweenOverlay({ reduced }: SeasonalOverlayProps) {
+// Classic bat silhouette, wings spread (viewBox 0 0 100 50).
-  // Deterministic per-mount generation — never per-frame React state.
+const BAT_PATH =
-  const embers = useMemo(
+  '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 ' +
-      Array.from({ length: 12 }, (_, i) => {
+  'C54 43 59 41 63 36 C69 34 75 36 79 42 C83 35 90 31 100 31 C97 28 93 27 88 29 ' +
-        const green = i % 3 === 0; // ~1/3 toxic-green wisps, rest warm embers
+  'C86 23 88 18 96 14 C82 11 72 15 67 23 C64 19 60 17 55 17 L54 10 Z';
-        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,
-      })),
-    [],
-  );
 
+function Bat({ width, flap }: { width: number; flap?: number }) {
   return (
-    <>
+    <svg
-      {/* ── Sky: layered indigo→black gradient with toxic-green moon vignette ── */}
+      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',
+          marginLeft: size / 2 - 0.5,
-          inset: 0,
+          width: 1,
-          contain: 'layout paint style',
+          height: length,
-          backgroundColor: 'transparent',
+          background: 'var(--hw-web)',
-          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,
         }}
       />
-
-      {/* ── Moon disc + breathing halo (the only backdrop-filter, kept cheap) ── */}
       <div
-        aria-hidden="true"
         style={{
-          position: 'absolute',
+          marginTop: -size * 0.13,
-          top: '8%',
+          transformOrigin: '50% 0',
-          right: '12%',
+          animation: animate ? `${animSpiderSway} 5s ease-in-out infinite` : undefined,
-          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',
         }}
       >
-        {fogBands.map((f, i) => (
+        <Spider size={size} />
-          <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`,
-            }}
-          />
-        ))}
       </div>
+    </div>
+  );
+}
 
-      {/* ── Will-o'-wisps / floating embers ── */}
+/** Small jack-o'-lantern hanging on a short thread, candle flickering. */
-      {embers.map((e, i) => (
+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}%`,
+            inset: 0,
-            bottom: `${e.bottom}%`,
+            background:
-            willChange: reduced ? undefined : 'transform, opacity',
+              'linear-gradient(180deg, oklch(0.22 0.08 300) 0%, oklch(0.16 0.06 290) 70%, oklch(0.12 0.04 280) 100%)',
-            transform: reduced ? 'scale(0.9)' : undefined,
-            opacity: reduced ? 0.4 : undefined,
-            animation: reduced
-              ? 'none'
-              : `${animEmberFloat} ${e.duration}s ease-in ${e.delay}s infinite`,
           }}
-        >
+        />
-          <div
+        {/* Crescent moon */}
-            aria-hidden="true"
+        <div
-            style={{
+          style={{
-              width: `${e.size}px`,
+            position: 'absolute',
-              height: `${e.size}px`,
+            right: '14%',
-              borderRadius: '50%',
+            top: '14%',
-              backgroundColor: e.color,
+            width: '30%',
-              boxShadow: `0 0 ${e.size * 2.5}px ${e.color}`,
+            aspectRatio: '1',
-              animation: reduced
+            borderRadius: '50%',
-                ? 'none'
+            boxShadow: 'inset -9px 4px 0 0 oklch(0.93 0.06 95), 0 0 18px oklch(0.9 0.08 95 / 0.35)',
-                : `${animEmberTwinkle} ${e.twinkle}s ease-in-out infinite`,
+          }}
-            }}
+        />
-          />
+        {/* 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}
+            key={`wisp-${i}`}
-            aria-hidden="true"
             style={{
               position: 'absolute',
-              top: `${b.top}%`,
+              left: `${w.left}%`,
-              left: 0,
+              top: `${w.top}%`,
-              willChange: 'transform, opacity',
+              animation: `${animWispWander} ${w.wander}s ease-in-out ${w.delay}s infinite`,
-              animation: `${animBatGlide} ${b.duration}s linear ${b.delay}s infinite`,
             }}
           >
             <div
-              aria-hidden="true"
               style={{
-                transform: `scale(${b.scale})`,
+                width: w.size,
-                animation: `${animWingFlap} ${b.flap}s ease-in-out infinite`,
+                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) ── */}
+      {!reduced &&
-      <div
+        SWARM.map((bat, i) => (
-        aria-hidden="true"
+          <div
-        style={{
+            key={`swarm-${i}`}
-          position: 'absolute',
+            style={{
-          top: 0,
+              position: 'absolute',
-          left: 0,
+              left: 0,
-          width: '180px',
+              top: `${bat.top}%`,
-          height: '180px',
+              opacity: 0,
-          backgroundImage: cobwebUri,
+              willChange: 'transform, opacity',
-          backgroundRepeat: 'no-repeat',
+              animation: `${animSwarmFlight} ${SWARM_PERIOD}s linear ${SWARM_FIRST + bat.offset}s infinite`,
-          opacity: 0.7,
+            }}
-        }}
+          >
-      />
+            <div style={{ animation: `${animBatBob} ${bat.bob}s ease-in-out infinite` }}>
-      <div
+              <Bat width={bat.width} flap={bat.flap} />
-        aria-hidden="true"
+            </div>
-        style={{
+          </div>
-          position: 'absolute',
+        ))}
-          top: 0,
+
-          right: 0,
+      {!reduced && (
-          width: '180px',
+        <div
-          height: '180px',
+          style={{
-          backgroundImage: cobwebUri,
+            position: 'absolute',
-          backgroundRepeat: 'no-repeat',
+            right: '-14vw',
-          transform: 'scaleX(-1)',
+            top: narrow ? '11%' : '12%',
-          opacity: 0.7,
+            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/tap-to-send/TapToSendBar.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { Box, Button, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
+
+type TapToSendBarProps = {
+  previewUrl?: string;
+  label: string;
+  onSend: () => void;
+  onCancel: () => void;
+};
+
+/**
+ * [Gitea #147] Fat-finger guard for touch screens: the first tap on a sticker
+ * or GIF parks it here with a preview; "Send" (or a second tap on the same
+ * item) sends it.
+ */
+export function TapToSendBar({ previewUrl, label, onSend, onCancel }: TapToSendBarProps) {
+  const liveRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    liveRef.current?.focus?.();
+  }, [label]);
+
+  return (
+    <Box
+      ref={liveRef}
+      role="status"
+      aria-live="polite"
+      tabIndex={-1}
+      shrink="No"
+      alignItems="Center"
+      gap="300"
+      style={{
+        margin: `0 ${config.space.S300} ${config.space.S200}`,
+        padding: config.space.S200,
+        borderRadius: config.radii.R400,
+        backgroundColor: color.SurfaceVariant.Container,
+        color: color.SurfaceVariant.OnContainer,
+        outline: 'none',
+      }}
+    >
+      {previewUrl && (
+        <img
+          src={previewUrl}
+          alt=""
+          style={{
+            width: toRem(40),
+            height: toRem(40),
+            objectFit: 'contain',
+            borderRadius: config.radii.R300,
+            flexShrink: 0,
+          }}
+        />
+      )}
+      <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
+        <Text size="T200" priority="300">
+          Tap again to send
+        </Text>
+        <Text size="T300" truncate>
+          {label}
+        </Text>
+      </Box>
+      <Button size="300" variant="Primary" fill="Solid" radii="300" onClick={onSend}>
+        <Text size="B300">Send</Text>
+      </Button>
+      <IconButton
+        size="300"
+        variant="SurfaceVariant"
+        radii="300"
+        onClick={onCancel}
+        aria-label="Cancel"
+      >
+        <Icon size="100" src={Icons.Cross} />
+      </IconButton>
+    </Box>
+  );
+}

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),
+    // [Gitea #228] `min()` on both axes so the 9:16 ratio holds whatever the
-    maxWidth: '100%',
+    // parent's width is. A padding-top percentage resolves against the
-    // 9:16 via the padding-top hack (177.78%) — see EmbedMediaLandscape.
+    // 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,
@@ -311,6 +315,33 @@ export const EmbedIframeStatic = style([
   },
 ]);
 
+// Shown over (or instead of) an embed that hung or that the provider says is gone.
+export const EmbedNotice = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: config.space.S200,
+    padding: config.space.S300,
+    textAlign: 'center',
+    backgroundColor: color.Surface.Container,
+    color: color.Surface.OnContainer,
+  },
+]);
+
+export const EmbedNoticeStatic = style([
+  EmbedNotice,
+  {
+    position: 'static',
+    minHeight: toRem(120),
+    borderRadius: config.radii.R300,
+  },
+]);
+
 export const EmbedPlaceholder = style([
   DefaultReset,
   {

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 {
@@ -33,11 +34,13 @@ import { onEnterOrSpace } from '../../utils/keyboard';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import {
+  EMBED_LOAD_TIMEOUT_MS,
   extractEmbedHeight,
   getSteamTarget,
   getTikTokVideoId,
   getTweetId,
   isTikTokLink,
+  isTwitterNoResults,
   MediaEmbed,
   parseMediaEmbed,
   steamWidgetEmbedUrl,
@@ -308,6 +311,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 {
@@ -651,10 +671,84 @@ function useIframeAutoHeight(origins: string[], initial: number) {
   return { ref, height };
 }
 
+// Embed iframes that never fire `load` (provider down, network stall) would
+// otherwise sit as an empty box forever. After EMBED_LOAD_TIMEOUT_MS the card
+// offers Retry / "Open on …"; a late `load` clears the notice on its own.
+// `attempt` is the iframe's `key`, so Retry remounts it.
+function useEmbedWatchdog(active: boolean) {
+  const [attempt, setAttempt] = useState(0);
+  const [loaded, setLoaded] = useState(false);
+  const [timedOut, setTimedOut] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setTimedOut(false);
+    if (!active) return undefined;
+    const t = window.setTimeout(() => setTimedOut(true), EMBED_LOAD_TIMEOUT_MS);
+    return () => window.clearTimeout(t);
+  }, [active, attempt]);
+  const onLoad = useCallback(() => setLoaded(true), []);
+  const retry = useCallback(() => setAttempt((a) => a + 1), []);
+  return { attempt, onLoad, stalled: active && timedOut && !loaded, retry };
+}
+
+function EmbedNotice({
+  message,
+  url,
+  site,
+  onRetry,
+  inFlow,
+}: {
+  message: string;
+  url: string;
+  site: string;
+  onRetry?: () => void;
+  /** Render in the layout flow instead of as an overlay on the player box. */
+  inFlow?: boolean;
+}) {
+  return (
+    <div className={inFlow ? previewCss.EmbedNoticeStatic : previewCss.EmbedNotice} role="status">
+      <Text size="T300">{message}</Text>
+      <Box gap="200" wrap="Wrap" justifyContent="Center">
+        {onRetry && (
+          <Chip variant="Secondary" radii="Pill" className={MobileTouchTarget} onClick={onRetry}>
+            <Text size="T200">Retry</Text>
+          </Chip>
+        )}
+        <Chip
+          as="a"
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          variant="Primary"
+          radii="Pill"
+          className={MobileTouchTarget}
+        >
+          <Text size="T200">Open on {site}</Text>
+        </Chip>
+      </Box>
+    </div>
+  );
+}
+
+const EMBED_STALLED_MESSAGE = 'This embed is taking too long to load.';
+
 // Interactive X/Twitter post embed — playable video/GIF, galleries, quote tweets.
 // Self-sizes via useIframeAutoHeight. Only mounted after "View post" (facade).
-function TweetEmbed({ id }: { id: string }) {
+function TweetEmbed({ id, url }: { id: string; url: string }) {
   const { ref, height } = useIframeAutoHeight(TWITTER_ORIGINS, 320);
+  const { attempt, onLoad, stalled, retry } = useEmbedWatchdog(true);
+  // A deleted/private/suspended post renders an EMPTY frame; X only says so
+  // via `twttr.private.no_results`.
+  const [unavailable, setUnavailable] = useState(false);
+  useEffect(() => {
+    const onMessage = (e: MessageEvent) => {
+      if (!TWITTER_ORIGINS.includes(e.origin)) return;
+      if (!ref.current || e.source !== ref.current.contentWindow) return;
+      if (isTwitterNoResults(e.data)) setUnavailable(true);
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [ref]);
   const theme =
     typeof window !== 'undefined' &&
     window.matchMedia &&
@@ -662,20 +756,38 @@ function TweetEmbed({ id }: { id: string }) {
       ? 'light'
       : 'dark';
 
+  if (unavailable) {
+    return (
+      <EmbedNotice
+        inFlow
+        message="This post isn't available. It may have been deleted, or the account is private or suspended."
+        url={url}
+        site="X"
+      />
+    );
+  }
+
   return (
-    <iframe
+    <div style={{ position: 'relative' }}>
-      ref={ref}
+      <iframe
-      className={previewCss.EmbedIframeStatic}
+        key={attempt}
-      src={`https://platform.twitter.com/embed/Tweet.html?id=${encodeURIComponent(
+        ref={ref}
-        id,
+        className={previewCss.EmbedIframeStatic}
-      )}&theme=${theme}&dnt=true`}
+        src={`https://platform.twitter.com/embed/Tweet.html?id=${encodeURIComponent(
-      title="Post on X"
+          id,
-      style={{ height: `${height}px` }}
+        )}&theme=${theme}&dnt=true`}
-      sandbox={EMBED_SANDBOX}
+        title="Post on X"
-      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+        style={{ height: `${height}px` }}
-      loading="lazy"
+        sandbox={EMBED_SANDBOX}
-      scrolling="no"
+        allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
-    />
+        loading="lazy"
+        scrolling="no"
+        onLoad={onLoad}
+      />
+      {stalled && (
+        <EmbedNotice message={EMBED_STALLED_MESSAGE} url={url} site="X" onRetry={retry} />
+      )}
+    </div>
   );
 }
 
@@ -755,7 +867,7 @@ function TwitterCard({
           </IconButton>
         </div>
         <UrlPreviewContent>
-          <TweetEmbed id={tweetId} />
+          <TweetEmbed id={tweetId} url={url} />
         </UrlPreviewContent>
       </>
     );
@@ -1133,6 +1245,7 @@ function MediaEmbedCard({
   const [inlineMediaEmbeds] = useSetting(settingsAtom, 'inlineMediaEmbeds');
   const [playing, setPlaying] = useState(false);
   const mediaRef = useRef<HTMLDivElement>(null);
+  const { attempt, onLoad, stalled, retry } = useEmbedWatchdog(playing);
 
   const rawTitle = prev['og:title'] ?? '';
   const rawDescription = prev['og:description'] ?? '';
@@ -1203,33 +1316,61 @@ 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
+        <div style={{ position: 'relative' }}>
-          ref={resizeRef}
+          <iframe
-          className={previewCss.EmbedIframeStatic}
+            key={attempt}
-          src={embed.embedUrl}
+            ref={resizeRef}
-          title={title || badge.label}
+            className={previewCss.EmbedIframeStatic}
-          style={{ height: `${resizeHeight}px` }}
+            src={embed.embedUrl}
-          allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+            title={title || badge.label}
-          sandbox={EMBED_SANDBOX}
+            style={{ height: `${resizeHeight}px` }}
-          allowFullScreen
+            allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-          loading="lazy"
+            sandbox={EMBED_SANDBOX}
-          scrolling="no"
+            allowFullScreen
-        />
+            loading="lazy"
+            scrolling="no"
+            onLoad={onLoad}
+          />
+          {stalled && (
+            <EmbedNotice
+              message={EMBED_STALLED_MESSAGE}
+              url={url}
+              site={badge.label}
+              onRetry={retry}
+            />
+          )}
+        </div>
       ) : (
         <div ref={mediaRef} className={mediaClass} style={mediaStyle}>
           {playing ? (
-            <iframe
+            <>
-              className={previewCss.EmbedIframe}
+              <iframe
-              src={embed.embedUrl}
+                key={attempt}
-              title={title || badge.label}
+                className={previewCss.EmbedIframe}
-              allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+                src={embed.embedUrl}
-              sandbox={EMBED_SANDBOX}
+                title={title || badge.label}
-              allowFullScreen
+                allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-              loading="lazy"
+                sandbox={EMBED_SANDBOX}
-            />
+                allowFullScreen
+                loading="lazy"
+                onLoad={onLoad}
+              />
+              {stalled && (
+                <EmbedNotice
+                  message={EMBED_STALLED_MESSAGE}
+                  url={url}
+                  site={badge.label}
+                  onRetry={retry}
+                />
+              )}
+            </>
           ) : inlineMediaEmbeds ? (
             <button
               type="button"
@@ -1325,6 +1466,7 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
   const [failed, setFailed] = useState(false);
   const mediaRef = useRef<HTMLDivElement>(null);
   const abortRef = useRef<AbortController | null>(null);
+  const tiktokWatch = useEmbedWatchdog(playing && !!videoId);
 
   // Abort an in-flight oEmbed resolve if the card unmounts (scrolled away).
   useEffect(() => () => abortRef.current?.abort(), []);
@@ -1380,18 +1522,32 @@ 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
+          <>
-            className={previewCss.EmbedIframe}
+            <iframe
-            src={tiktokPlayerEmbedUrl(videoId)}
+              key={tiktokWatch.attempt}
-            title={title || 'TikTok'}
+              className={previewCss.EmbedIframe}
-            allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+              src={tiktokPlayerEmbedUrl(videoId)}
-            sandbox={EMBED_SANDBOX}
+              title={title || 'TikTok'}
-            allowFullScreen
+              allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-            loading="lazy"
+              sandbox={EMBED_SANDBOX}
-          />
+              allowFullScreen
+              loading="lazy"
+              onLoad={tiktokWatch.onLoad}
+            />
+            {tiktokWatch.stalled && (
+              <EmbedNotice
+                message={EMBED_STALLED_MESSAGE}
+                url={url}
+                site="TikTok"
+                onRetry={tiktokWatch.retry}
+              />
+            )}
+          </>
         ) : inlineMediaEmbeds ? (
           <button
             type="button"
@@ -1734,6 +1890,7 @@ function SteamAppCard({
   const useAuthentication = useMediaAuthentication();
   const [inlineMediaEmbeds] = useSetting(settingsAtom, 'inlineMediaEmbeds');
   const [showWidget, setShowWidget] = useState(false);
+  const steamWatch = useEmbedWatchdog(showWidget);
   const title = prev['og:title'] ?? '';
   const description = prev['og:description'] ?? '';
   const mxcImage = prev['og:image'] as string | undefined;
@@ -1767,13 +1924,25 @@ function SteamAppCard({
           </Text>
         )}
         {showWidget ? (
-          <iframe
+          <div style={{ position: 'relative' }}>
-            className={previewCss.SteamWidget}
+            <iframe
-            src={steamWidgetEmbedUrl(appId)}
+              key={steamWatch.attempt}
-            title={title ? `Steam store: ${title}` : 'Steam store widget'}
+              className={previewCss.SteamWidget}
-            sandbox={EMBED_SANDBOX}
+              src={steamWidgetEmbedUrl(appId)}
-            loading="lazy"
+              title={title ? `Steam store: ${title}` : 'Steam store widget'}
-          />
+              sandbox={EMBED_SANDBOX}
+              loading="lazy"
+              onLoad={steamWatch.onLoad}
+            />
+            {steamWatch.stalled && (
+              <EmbedNotice
+                message={EMBED_STALLED_MESSAGE}
+                url={url}
+                site="Steam"
+                onRetry={steamWatch.retry}
+              />
+            )}
+          </div>
         ) : (
           <Box alignItems="Center" gap="200" justifyContent="SpaceBetween">
             <Text
@@ -2275,8 +2444,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(
+    const [previewStatus, loadPreview] = useAsyncCallback<IPreviewUrlResponse, Error, []>(
-      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx]),
+      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/components/user-profile/UserModeration.tsx

@@ -6,9 +6,7 @@ import { SettingTile } from '../setting-tile';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
-import { useSetting } from '../../state/hooks/settings';
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
-import { settingsAtom } from '../../state/settings';
-import { timeDayMonYear, timeHourMinute } from '../../utils/time';
 
 type UserKickAlertProps = {
   reason?: string;
@@ -16,11 +14,8 @@ type UserKickAlertProps = {
   ts?: number;
 };
 export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const { format } = useTimestampFormatter();
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const when = ts ? format(ts) : undefined;
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
 
   return (
     <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
@@ -28,11 +23,7 @@ export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
         <Box direction="Column" gap="200">
           <Box gap="200" justifyContent="SpaceBetween">
             <Text size="L400">Kicked User</Text>
-            {time && date && (
+            {when && <Text size="T200">{when}</Text>}
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
           </Box>
           <Box direction="Column">
             {kickedBy && (
@@ -66,11 +57,8 @@ type UserBanAlertProps = {
 export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const { format } = useTimestampFormatter();
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const when = ts ? format(ts) : undefined;
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
 
   const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
@@ -86,11 +74,7 @@ export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBan
         <Box direction="Column" gap="200">
           <Box gap="200" justifyContent="SpaceBetween">
             <Text size="L400">Banned User</Text>
-            {time && date && (
+            {when && <Text size="T200">{when}</Text>}
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
           </Box>
           <Box direction="Column">
             {bannedBy && (
@@ -141,11 +125,8 @@ type UserInviteAlertProps = {
 export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
   const mx = useMatrixClient();
   const room = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const { format } = useTimestampFormatter();
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const when = ts ? format(ts) : undefined;
-
-  const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
-  const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
 
   const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
     useCallback(async () => {
@@ -161,11 +142,7 @@ export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: User
         <Box direction="Column" gap="200">
           <Box gap="200" justifyContent="SpaceBetween">
             <Text size="L400">Invited User</Text>
-            {time && date && (
+            {when && <Text size="T200">{when}</Text>}
-              <Text size="T200">
-                {date} {time}
-              </Text>
-            )}
           </Box>
           <Box direction="Column">
             {invitedBy && (

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/bookmarks/BookmarksPanel.tsx

@@ -35,19 +35,8 @@ import { nameInitials } from '../../utils/common';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { stopPropagation } from '../../utils/keyboard';
 import * as css from './BookmarksPanel.css';
-
+import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
-function formatTimeAgo(ts: number): string {
+import { formatRelativeAge } from '../../utils/formatTimestamp';
-  const diff = Date.now() - ts;
-  const minutes = Math.floor(diff / 60_000);
-  if (minutes < 1) return 'just now';
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days === 1) return 'yesterday';
-  if (days < 7) return `${days}d ago`;
-  return new Date(ts).toLocaleDateString();
-}
 
 // Remember the last-chosen sort across panel opens (the panel unmounts on close).
 // getOnInit reads localStorage synchronously at init so the persisted sort is
@@ -110,7 +99,8 @@ function BookmarkItem({ bookmark, onJump, onRemove, preview, senderName }: Bookm
     : undefined;
   // Prefer a live-resolved author name, then the stored snapshot.
   const author = senderName ?? bookmark.senderName;
-  const timeAgo = formatTimeAgo(bookmark.savedAt);
+  const { prefs } = useTimestampFormatter();
+  const timeAgo = formatRelativeAge(bookmark.savedAt, prefs);
 
   return (
     <Box

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,29 @@
 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,
+  useFrameScreenshare,
+} 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 +48,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 +83,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 +129,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 +168,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 +188,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
@@ -185,7 +197,9 @@ export function CallControl({
   // Keep a forbidden control visible while its track is still live (so the user
   // can stop it); otherwise hide it entirely.
   const showCamera = allowCamera || video;
-  const showScreenshare = allowScreenshare || screenshare;
+  // [Gitea #43] Hidden where EC shows its own screenshare button in the frame.
+  const frameScreenshare = useFrameScreenshare(callEmbed.control);
+  const showScreenshare = !frameScreenshare && (allowScreenshare || screenshare);
   const [shareConfirm, setShareConfirm] = useState(false);
 
   const handleMicrophoneToggle = useCallback(
@@ -224,12 +238,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,12 @@ import {
   SoundButton,
   VideoButton,
 } from './Controls';
-import { CallEmbed, useCallControlState } from '../../plugins/call';
+import {
+  CallEmbed,
+  useCallControlState,
+  useCallMicLevel,
+  useFrameScreenshare,
+} from '../../plugins/call';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { callEmbedAtom } from '../../state/callEmbed';
@@ -85,6 +90,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);
@@ -105,6 +111,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   // Keep a forbidden control visible while its track is still live (so the user
   // can stop it); otherwise hide it entirely.
   const showCamera = allowCamera || video;
+  // [Gitea #43] Where EC shows its own screenshare button in the frame, ours
+  // is hidden (this engine can't start a share from the host); the
+  // screenshare-audio mute stays.
+  const frameScreenshare = useFrameScreenshare(callEmbed.control);
   const showScreenshare = allowScreenshare || screenshare;
   const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -200,7 +210,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 />}
@@ -211,12 +225,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
               {showScreenshare && (
                 <>
-                  <ScreenShareButton
+                  {!frameScreenshare && (
-                    enabled={screenshare}
+                    <ScreenShareButton
-                    onToggle={() =>
+                      enabled={screenshare}
-                      screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
+                      onToggle={() =>
-                    }
+                        screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-                  />
+                      }
+                    />
+                  )}
                   {/* Mute-screenshare-audio sits directly next to the screenshare
                       control since they're the same concern. */}
                   <ScreenshareAudioButton

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/CallSoundboard.tsx

@@ -115,7 +115,12 @@ export function CallSoundboard({ callEmbed }: CallSoundboardProps) {
       try {
         const url = await resolveClipObjectUrl(mx, flat.clip.url);
         const vol = (flat.clip.volume / 100) * master;
-        const result = await callEmbed.control.injectAudio(url, vol);
+        // [Gitea #43] Send the bytes too: the call page may be on another
+        // origin, where this blob: URL can't be fetched.
+        const clipBytes = await fetch(url)
+          .then((r) => r.arrayBuffer())
+          .catch(() => undefined);
+        const result = await callEmbed.control.injectAudio(url, vol, clipBytes);
         if (!result.played) {
           // [EC#13] Refused fork-side (only reason today: local mic muted) —
           // don't play it locally either, or the user would think it went out.

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>