deps: brace-expansion 1.1.18 → 1.1.21 (GHSA-q2hr-2g5m-vwhr and two related DoS advisories)

npm audit --omit=dev started failing every PR: brace-expansion <=1.1.20
(via @eslint/eslintrc → minimatch 3) has three high-severity DoS
advisories. Lockfile-only patch bump; nothing else changes.

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

config.json

@@ -12,5 +12,16 @@
     "enabled": false,
     "basename": "/"
   },
-  "gifApiKey": ""
+  "gifApiKey": "",
+  "statusPages": {
+    "matrix.lotusguild.org": {
+      "url": "https://isitup.lotusguild.org",
+      "slug": "matrix",
+      "groups": {
+        "homeserver": "Homeserver",
+        "calls": "Voice calls",
+        "login": "Login"
+      }
+    }
+  }
 }

e2e/local-homeserver.spec.ts

@@ -169,6 +169,56 @@ test.describe('local homeserver regression', () => {
     await ctx.close();
   });
 
+  test('a thread I started keeps its unread replies while I view the room (#217)', async ({
+    page,
+  }) => {
+    const room = await createRoom(alice, 'Thread Unread Room', { invite: [bob.userId] });
+    await joinRoom(bob, room);
+    const inThread = (root: string) => ({
+      'm.relates_to': {
+        rel_type: 'm.thread',
+        event_id: root,
+        is_falling_back: true,
+        'm.in_reply_to': { event_id: root },
+      },
+    });
+    const root = await sendText(alice, room, 'my thread root');
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    // While the room is open and at the bottom: a thread reply, then a newer
+    // main-timeline message. Neither may clear the thread without opening it.
+    await sendText(bob, room, 'reply in your thread', inThread(root));
+    await sendText(bob, room, 'newer main message');
+    await expect(page.getByText('newer main message')).toBeVisible();
+    const chip = page
+      .locator('[data-message-item]', { hasText: 'my thread root' })
+      .getByRole('button', { name: /1 reply/ });
+    const threadUnread = async () => {
+      // not_types varies so Synapse's sync response cache can't serve a stale answer.
+      const filter = {
+        room: {
+          rooms: [room],
+          timeline: { limit: 1, unread_thread_notifications: true, not_types: [uniq('x.')] },
+        },
+      };
+      const sync = await api<{
+        rooms: {
+          join: Record<string, { unread_thread_notifications?: Record<string, unknown> }>;
+        };
+      }>(
+        'GET',
+        `/_matrix/client/v3/sync?timeout=0&filter=${enc(JSON.stringify(filter))}`,
+        alice.token,
+      );
+      return root in (sync.rooms.join[room]?.unread_thread_notifications ?? {});
+    };
+    await page.waitForTimeout(2000); // let any receipt the room view would send go out
+    expect(await threadUnread()).toBe(true);
+    await expect(chip).toHaveAccessibleName(/unread replies/);
+    await chip.click();
+    await expect.poll(threadUnread).toBe(false);
+  });
+
   test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
     const room = await createRoom(alice, 'Lightbox Room');
     const png = Buffer.from(
@@ -207,12 +257,21 @@ test.describe('local homeserver regression', () => {
     await page.clock.install({ time: Date.now() + 14 * 60 * 1000 });
     await loginUI(page, alice);
     await openRoom(page, room);
-    for (let i = 0; i < 4; i += 1) {
-      // eslint-disable-next-line no-await-in-loop
-      await sendText(bob, room, `tick ${i}`);
-      // eslint-disable-next-line no-await-in-loop
-      await page.waitForTimeout(500);
-    }
+    const ticks = async (from: number, n: number) => {
+      for (let i = from; i < from + n; i += 1) {
+        // eslint-disable-next-line no-await-in-loop
+        await sendText(bob, room, `tick ${i}`);
+        // eslint-disable-next-line no-await-in-loop
+        await page.waitForTimeout(500);
+      }
+    };
+    await ticks(0, 4);
+    // "Ahead" could be a late delivery (a stalled server), so it is only
+    // reported once it has held for a minute of fresh samples.
+    await page.waitForTimeout(2000);
+    await expect(page.getByText(/clock is .*ahead of the server/)).toHaveCount(0);
+    await page.clock.fastForward('01:05');
+    await ticks(4, 2);
     await expect(page.getByText(/clock is .*14 minutes ahead of the server/)).toBeVisible();
     await page.getByRole('button', { name: 'Dismiss for 24 h' }).click();
     await expect(page.getByText(/clock is .*ahead of the server/)).toHaveCount(0);

e2e/server-status.spec.ts

@@ -0,0 +1,162 @@
+import { test, expect, Page } from '@playwright/test';
+import {
+  HS,
+  createRoom,
+  ensureUser,
+  hsReachable,
+  loginUI,
+  openRoom,
+  uniq,
+  TestUser,
+} from './localHs';
+
+// [Gitea #124] Status banner from the homeserver's Uptime Kuma page. Kuma is
+// answered by fixtures here; nothing contacts a real Kuma.
+const KUMA = 'https://isitup.lotusguild.org';
+const PAGE_CFG = { url: KUMA, slug: 'matrix' };
+const UP = 1;
+const DOWN = 0;
+
+type Fixture = { hs?: number; calls?: number; staleMinutes?: number; fail?: boolean };
+
+const kumaTime = (ms: number) => new Date(ms).toISOString().replace('T', ' ').slice(0, 23);
+
+/** Serve config.json with a status page for `serverName` and answer Kuma from `fx()`. */
+async function mockKuma(page: Page, serverName: string | null, fx: () => Fixture) {
+  const kumaRequests: string[] = [];
+  await page.route(/\/config\.json(\?.*)?$/, async (route) => {
+    const res = await route.fetch();
+    const cfg = await res.json();
+    cfg.statusPages = serverName ? { [serverName]: PAGE_CFG } : {};
+    await route.fulfill({ response: res, json: cfg });
+  });
+  await page.route(/isitup\.lotusguild\.org\/api\/status-page\//, async (route) => {
+    const url = route.request().url();
+    kumaRequests.push(url);
+    const f = fx();
+    if (f.fail) {
+      await route.fulfill({ status: 500, body: 'oops' });
+      return;
+    }
+    const cors = { 'access-control-allow-origin': '*' };
+    if (url.includes('/heartbeat/')) {
+      // Two checks, the latest `staleMinutes` ago (0 = just now).
+      const last = Date.now() - (f.staleMinutes ?? 0) * 60_000;
+      const beats = (s: number) => [
+        { status: s, time: kumaTime(last - 60_000) },
+        { status: s, time: kumaTime(last) },
+      ];
+      await route.fulfill({
+        headers: cors,
+        json: { heartbeatList: { 1: beats(f.hs ?? UP), 2: beats(f.calls ?? UP) }, uptimeList: {} },
+      });
+      return;
+    }
+    await route.fulfill({
+      headers: cors,
+      json: {
+        config: { slug: 'matrix' },
+        incidents: [],
+        maintenanceList: [],
+        publicGroupList: [
+          { name: 'Homeserver', monitorList: [{ id: 1 }] },
+          { name: 'Voice calls', monitorList: [{ id: 2 }] },
+        ],
+      },
+    });
+  });
+  return kumaRequests;
+}
+
+const serverOf = (u: TestUser) => u.userId.split(':').slice(1).join(':');
+const strip = (page: Page, text: RegExp) =>
+  page.locator('[role="status"], [role="alert"]').filter({ hasText: text });
+const cutSync = (page: Page) =>
+  page.route(/\/_matrix\/client\/v3\/sync/, (route) => route.abort('connectionfailed'));
+
+test.describe('server status banner (#124)', () => {
+  let alice: TestUser;
+  let room: string;
+
+  test.beforeAll(async () => {
+    test.skip(!(await hsReachable()), `no local homeserver at ${HS} (set E2E_LOCAL_HS)`);
+    alice = await ensureUser(uniq('e2e_status_'));
+    room = await createRoom(alice, 'Status Room');
+  });
+
+  test('calls down: amber strip, dismiss sticks across a reload', async ({ page }) => {
+    await mockKuma(page, serverOf(alice), () => ({ calls: DOWN }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    const calls = strip(page, /Voice calls are down right now\. Messages still work\./);
+    await expect(calls).toBeVisible();
+    await calls.getByRole('button', { name: 'Dismiss' }).click();
+    await expect(calls).toHaveCount(0);
+    await page.reload();
+    await openRoom(page, room);
+    await page.waitForTimeout(2000);
+    await expect(calls).toHaveCount(0);
+  });
+
+  test('other homeservers never contact Kuma', async ({ page }) => {
+    const requests = await mockKuma(page, 'some.other.server', () => ({ hs: DOWN }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    await page.waitForTimeout(3000);
+    expect(requests).toEqual([]);
+  });
+
+  test('Kuma failing shows nothing (fail quiet)', async ({ page }) => {
+    const requests = await mockKuma(page, serverOf(alice), () => ({ fail: true }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    await expect.poll(() => requests.length).toBeGreaterThan(0);
+    await page.waitForTimeout(1500);
+    await expect(strip(page, /server|Voice calls|Maintenance/i)).toHaveCount(0);
+  });
+
+  test('connection lost + Kuma says the server is down: critical strip, not "Connection Lost"', async ({
+    page,
+  }) => {
+    test.setTimeout(150_000);
+    await mockKuma(page, serverOf(alice), () => ({ hs: DOWN }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    // Connected: the server is "having problems" for others, not for us.
+    await expect(strip(page, /server is having problems/)).toBeVisible();
+    await cutSync(page);
+    const down = page.getByRole('alert').filter({ hasText: /server is down\. We're on it/ });
+    await expect(down).toBeVisible({ timeout: 120_000 });
+    await expect(page.getByText('Connection Lost! Reconnecting...')).toHaveCount(0);
+  });
+
+  test('connection lost + Kuma checked since and the server is up: "may be your connection"', async ({
+    page,
+  }) => {
+    test.setTimeout(150_000);
+    await mockKuma(page, serverOf(alice), () => ({ hs: UP }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    await cutSync(page);
+    await expect(page.getByText(/server is up, so it may be your internet connection/)).toBeVisible(
+      {
+        timeout: 120_000,
+      },
+    );
+  });
+
+  test('connection lost + only a stale "up" from Kuma: plain "Connection Lost"', async ({
+    page,
+  }) => {
+    test.setTimeout(150_000);
+    await mockKuma(page, serverOf(alice), () => ({ hs: UP, staleMinutes: 10 }));
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    await cutSync(page);
+    await expect(page.getByText('Connection Lost! Reconnecting...')).toBeVisible({
+      timeout: 120_000,
+    });
+    await page.waitForTimeout(3000);
+    await expect(page.getByText(/may be your internet connection/)).toHaveCount(0);
+  });
+});

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.16",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.16",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.16/element-call-embedded-0.25.0-lotus.16.tgz",
-      "integrity": "sha512-X/MzZ2Ip7IpZD3B+SkBoBzgMfURyZuYD6OaGL9r7sw2nl7Y/0JzgpT8RWV12lu4DlOfWbbeO+ka1l+pTYVewdQ==",
+      "version": "0.25.0-lotus.22",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
+      "integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -5026,9 +5026,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.18",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
-      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.21.tgz",
+      "integrity": "sha512-9zeA+KLZNNzglF2TPKRQEDyx6Yby7daAkuy8MiPzpXPsYDWi/DRM8jmwUDxokQjYqBpv5DgPiwD4h4ZZSy1Ujw==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.16",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

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

@@ -38,7 +38,7 @@ import {
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { CallEmbed, useCallControlState } from '../plugins/call';
+import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
 import { hangupCallAndWait } from '../plugins/call/hangup';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
@@ -78,9 +78,11 @@ import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
+import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
 import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
 
 const PIP_MIN_W = 200;
@@ -230,13 +232,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                 </Text>
               )}
               {!webRTCSupported() && (
-                <Text
-                  style={{ margin: 'auto', color: color.Critical.Main }}
-                  size="L400"
-                  align="Center"
-                >
-                  Your browser does not support WebRTC, which is required for calling.
-                </Text>
+                <CallsUnavailableMessage roomId={room.roomId} actionLabel="Answer in browser" />
               )}
               <Box direction="Column" gap="300">
                 {willAnswerWithCamera && (
@@ -758,6 +754,12 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   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);
@@ -875,6 +877,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const callActive = callEmbed && joined;
   const callVisible = inCallRoom && callActive && !chatOnlyView;
   const pipMode = callActive && !inCallRoom;
+  const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
   const { navigateRoom } = useRoomNavigate();
 
   const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
@@ -1356,6 +1359,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 zIndex: 1,
                 background: 'transparent',
                 cursor: 'grab',
+                // [Gitea #43] The call's "Share your screen?" prompt is drawn
+                // inside the frame: let the click reach its Share button.
+                pointerEvents: pipPromptOpen ? 'none' : undefined,
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'flex-end',

src/app/components/DeviceVerification.tsx

@@ -8,7 +8,6 @@ import {
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import QRCode from 'qrcode';
 import {
   Box,
   Button,
@@ -221,12 +220,16 @@ function QrCodeImage({ data }: { data: Uint8ClampedArray }) {
     const canvas = canvasRef.current;
     if (!canvas) return;
     // Byte-mode so the raw verification bytes round-trip (a string value would
-    // mangle high bytes via UTF-8).
-    QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
-      width: 220,
-      margin: 2,
-      color: { dark: '#000000', light: '#ffffff' },
-    }).catch(() => undefined);
+    // mangle high bytes via UTF-8). The QR library is loaded on demand.
+    import('qrcode')
+      .then(({ default: QRCode }) =>
+        QRCode.toCanvas(canvas, [{ data: new Uint8Array(data), mode: 'byte' }], {
+          width: 220,
+          margin: 2,
+          color: { dark: '#000000', light: '#ffffff' },
+        }),
+      )
+      .catch(() => undefined);
   }, [data]);
   return (
     <Box justifyContent="Center">

src/app/components/QrScanner.tsx

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

src/app/components/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) => {
-    onTabPress(evt, () => {
-      if (autoCompleteRoomIds.length === 0) {
-        const alias = roomAliasFromQueryText(mx, query.text);
-        handleAutocomplete(alias, alias);
-        return;
-      }
-      const rId = autoCompleteRoomIds[0];
-      const r = mx.getRoom(rId);
-      const name = r?.name ?? rId;
-      handleAutocomplete(r?.getCanonicalAlias() ?? rId, name);
-    });
-  });
+  const pickTop = () => {
+    if (autoCompleteRoomIds.length === 0) {
+      const alias = roomAliasFromQueryText(mx, query.text);
+      handleAutocomplete(alias, alias);
+      return;
+    }
+    const rId = autoCompleteRoomIds[0];
+    const r = mx.getRoom(rId);
+    const name = r?.name ?? rId;
+    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) => {
-    onTabPress(evt, () => {
-      if (query.text === 'room') {
-        handleAutocomplete(roomAliasOrId, '@room');
-        return;
-      }
-      if (autoCompleteMembers.length === 0) {
-        const userId = userIdFromQueryText(mx, query.text);
-        handleAutocomplete(userId, userId);
-        return;
-      }
-      const roomMember = autoCompleteMembers[0];
-      handleAutocomplete(roomMember.userId, roomMember.name);
-    });
-  });
+  const pickTop = () => {
+    if (query.text === 'room') {
+      handleAutocomplete(roomAliasOrId, '@room');
+      return;
+    }
+    if (autoCompleteMembers.length === 0) {
+      const userId = userIdFromQueryText(mx, query.text);
+      handleAutocomplete(userId, userId);
+      return;
+    }
+    const roomMember = autoCompleteMembers[0];
+    handleAutocomplete(roomMember.userId, getMemberName(room, roomMember.userId));
+  };
+
+  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/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) => {
-  const shortcode = reaction.startsWith('mxc://')
-    ? 'custom emoji'
-    : (getShortcodeFor(getHexcodeForEmoji(reaction)) ?? reaction);
-  const label = `${shortcode} reaction, ${count} ${count === 1 ? 'person' : 'people'}`;
+>(({ className, mx, count, reaction, shortcode, useAuthentication, ...props }, ref) => {
+  // Name a unicode reaction by the emoji itself: screen readers speak it by its
+  // proper name ("party popper"). Don't use getShortcodeFor here — it returns
+  // undefined until the lazy emoji data loads, so the same button would flip
+  // 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/content/PollContent.tsx

@@ -261,52 +261,69 @@ export function PollContent({
     handleVote(answers[idx].id);
   };
 
-  const headerLabel = isEnded
-    ? 'Poll closed · Final results'
-    : `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
+  // [Gitea #246] Type line under the "Poll" label.
+  const typeLabel = (() => {
+    if (isEnded) return 'Final results';
+    if (isUndisclosed) return 'Results hidden until the end';
+    return isMultiple ? `Pick up to ${maxSelections}` : 'Single choice';
+  })();
 
+  // Multiple choice counts people, not answers ("1 voter" who picked two).
+  const unit = isMultiple ? 'voter' : 'vote';
   const footerNote = (() => {
+    const totalPart = total > 0 ? `${total} ${unit}${total === 1 ? '' : 's'}` : `No ${unit}s yet`;
     if (isUndisclosed && !isEnded) {
       return canVote
-        ? 'Voting open · Results hidden until the poll ends'
-        : 'Results hidden until the poll ends';
+        ? `${myVotes.size > 0 ? 'You voted' : 'Voting open'} · results shown when the poll ends`
+        : 'Results shown when the poll ends';
     }
-    const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
-    if (isEnded) return `${votesPart} · Poll closed`;
-    if (!canVote) return votesPart;
-    if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
-    return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
+    if (isEnded) return `${totalPart} · Poll closed`;
+    if (!canVote) return totalPart;
+    return `${totalPart} · ${myVotes.size > 0 ? 'Select another answer to change your vote' : 'Select an answer to vote'}`;
   })();
 
+  // Neutral tones derived from the theme's text colour, so they have contrast
+  // in every theme (the Container/ContainerLine tokens were near-invisible).
+  const muted = (pct: number) =>
+    `color-mix(in srgb, ${color.SurfaceVariant.OnContainer} ${pct}%, transparent)`;
+
   return (
     <Box
       data-poll-content
       direction="Column"
-      gap="200"
-      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
+      gap="300"
+      style={{
+        // Same width for every poll (the message body shrink-wraps its content).
+        width: toRem(460),
+        maxWidth: '100%',
+        margin: `${config.space.S100} 0`,
+        padding: config.space.S300,
+        borderRadius: config.radii.R400,
+        border: `${config.borderWidth.B300} solid ${muted(18)}`,
+        background: muted(4),
+        boxSizing: 'border-box',
+      }}
     >
-      <Text
-        as="div"
-        size="T200"
-        priority="300"
-        data-poll-content-label
-        style={{
-          fontWeight: 700,
-          letterSpacing: '0.12em',
-          textTransform: 'uppercase',
-          marginBottom: config.space.S100,
-        }}
-      >
-        <span aria-hidden>◉ </span>
-        {headerLabel}
-      </Text>
-      <Text size="T400" style={{ fontWeight: 600 }}>
-        {question}
-      </Text>
+      <Box direction="Column" gap="100">
+        <Box alignItems="Center" gap="200" wrap="Wrap" data-poll-content-label>
+          <Icon size="100" src={Icons.OrderList} style={{ opacity: 0.8 }} />
+          <Text as="span" size="L400" style={{ fontWeight: 600 }}>
+            Poll
+          </Text>
+          <Text as="span" size="T200" priority="300">
+            ·
+          </Text>
+          <Text as="span" size="T200" priority="300">
+            {typeLabel}
+          </Text>
+        </Box>
+        <Text size="T400" style={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
+          {question}
+        </Text>
+      </Box>
       <Box
         direction="Column"
-        gap="100"
-        style={{ marginTop: '2px' }}
+        gap="200"
         role={isMultiple ? 'group' : 'radiogroup'}
         aria-label={question}
         onKeyDown={handleRadioKeyDown}
@@ -316,20 +333,32 @@ export function PollContent({
           const text = answer.text;
           const selected = myVotes.has(id);
           const voteCount = counts.get(id) ?? 0;
-          const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
+          const showBar = showResults && total > 0;
+          const pct = showBar ? Math.round((voteCount / total) * 100) : 0;
           const isWinner = winners.has(id);
+          const resultText = `${voteCount} ${voteCount === 1 ? 'vote' : 'votes'} · ${pct}%`;
           // Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
           const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
+          let barColor = muted(40);
+          if (isWinner) barColor = color.Success.Main;
+          else if (selected) barColor = color.Primary.Main;
+          let rowBorder = muted(22);
+          if (isWinner) rowBorder = color.Success.Main;
+          else if (selected) rowBorder = color.Primary.Main;
+          const labelParts = [text];
+          if (showBar) labelParts.push(resultText);
+          if (isWinner) labelParts.push('winning answer');
           return (
             <React.Fragment key={id}>
               <button
                 type="button"
                 data-poll-answer
                 data-selected={selected}
+                data-winner={isWinner || undefined}
                 role={isMultiple ? 'checkbox' : 'radio'}
                 aria-checked={selected}
                 aria-disabled={!canVote}
-                aria-label={isWinner ? `${text}, winning answer` : undefined}
+                aria-label={labelParts.join(', ')}
                 aria-describedby={
                   showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
                     ? `poll-voters-${eventId}-${id}`
@@ -340,60 +369,36 @@ export function PollContent({
                 style={{
                   padding: `${config.space.S200} ${config.space.S300}`,
                   borderRadius: config.radii.R300,
-                  background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
-                  border: `${config.borderWidth.B300} solid ${
-                    isWinner
-                      ? color.Success.Main
-                      : selected
-                        ? color.Primary.Main
-                        : color.SurfaceVariant.ContainerLine
-                  }`,
+                  background: selected ? muted(8) : 'transparent',
+                  border: `${config.borderWidth.B300} solid ${rowBorder}`,
                   lineHeight: 1.4,
                   textAlign: 'left',
                   cursor: canVote ? 'pointer' : 'default',
                   color: 'inherit',
+                  font: 'inherit',
                   display: 'flex',
                   flexDirection: 'column',
-                  gap: config.space.S100,
+                  gap: config.space.S200,
                   width: '100%',
-                  position: 'relative',
-                  overflow: 'hidden',
                   transition: 'border-color 0.15s, background 0.15s',
                 }}
               >
-                {showResults && total > 0 && (
-                  <span
-                    aria-hidden
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      right: 'auto',
-                      width: `${pct}%`,
-                      background: selected
-                        ? color.Primary.ContainerActive
-                        : color.SurfaceVariant.ContainerActive,
-                      pointerEvents: 'none',
-                      transition: 'width 0.3s ease',
-                    }}
-                  />
-                )}
                 <span
                   style={{
                     display: 'flex',
                     alignItems: 'center',
                     gap: config.space.S200,
-                    position: 'relative',
+                    width: '100%',
                   }}
                 >
                   <span
                     aria-hidden
                     style={{
                       flexShrink: 0,
-                      width: toRem(14),
-                      height: toRem(14),
-                      border: `${config.borderWidth.B300} solid ${
-                        selected ? color.Primary.Main : color.Primary.ContainerLine
-                      }`,
+                      boxSizing: 'border-box',
+                      width: toRem(18),
+                      height: toRem(18),
+                      border: `2px solid ${selected ? color.Primary.Main : muted(55)}`,
                       borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
                       background: selected ? color.Primary.Main : 'transparent',
                       display: 'flex',
@@ -405,29 +410,72 @@ export function PollContent({
                   >
                     {selected ? <Icon size="50" src={Icons.Check} /> : null}
                   </span>
-                  <Text as="span" size="T300" style={{ flexGrow: 1 }}>
+                  <Text
+                    as="span"
+                    size="T300"
+                    style={{ flexGrow: 1, minWidth: 0, overflowWrap: 'anywhere' }}
+                  >
                     {text}
                   </Text>
                   {isWinner && (
-                    <Icon
-                      size="50"
-                      src={Icons.Check}
-                      style={{ flexShrink: 0, color: color.Success.Main }}
-                    />
+                    <Text
+                      as="span"
+                      size="T200"
+                      style={{
+                        flexShrink: 0,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: config.space.S100,
+                        color: color.Success.Main,
+                        fontWeight: 600,
+                      }}
+                    >
+                      <Icon size="50" src={Icons.Star} filled />
+                      Winner
+                    </Text>
                   )}
-                  {showResults && total > 0 && (
-                    <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
-                      {pct}%
+                  {showBar && (
+                    <Text
+                      as="span"
+                      size="T200"
+                      priority="300"
+                      style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}
+                    >
+                      {resultText}
                     </Text>
                   )}
                 </span>
+                {showBar && (
+                  <span
+                    aria-hidden
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      height: toRem(6),
+                      borderRadius: config.radii.Pill,
+                      background: muted(12),
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: 'block',
+                        height: '100%',
+                        width: `${pct}%`,
+                        borderRadius: config.radii.Pill,
+                        background: barColor,
+                        transition: 'width 0.3s ease',
+                      }}
+                    />
+                  </span>
+                )}
               </button>
               {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
                 <Text
                   id={`poll-voters-${eventId}-${id}`}
                   size="T200"
                   priority="300"
-                  style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
+                  style={{ padding: `0 ${config.space.S300}`, marginTop: `-${config.space.S100}` }}
                 >
                   {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
                 </Text>
@@ -436,48 +484,56 @@ export function PollContent({
           );
         })}
       </Box>
-      {canShowVoters && (
-        <Box>
-          <Chip
-            variant={showVoters ? 'Primary' : 'SurfaceVariant'}
-            radii="Pill"
-            aria-pressed={showVoters}
-            onClick={() => setShowVoters((v) => !v)}
-            before={<Icon size="50" src={Icons.User} />}
-          >
-            <Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
-          </Chip>
-        </Box>
-      )}
-      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-        <Text size="T200" priority="300" style={{ minWidth: 0 }}>
-          <i>{footerNote}</i>
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200" wrap="Wrap">
+        <Text size="T200" priority="300" style={{ minWidth: 0, flex: '1 1 12rem' }}>
+          {footerNote}
         </Text>
-        {canEnd &&
-          (confirmEnd ? (
-            <Box gap="100" shrink="No" alignItems="Center">
-              <Chip
-                variant="Critical"
-                radii="Pill"
-                aria-disabled={ending}
-                onClick={ending ? undefined : handleEndPoll}
-              >
-                <Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
-              </Chip>
-              <Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
-                <Text size="T200">Cancel</Text>
-              </Chip>
-            </Box>
-          ) : (
+        <Box gap="100" shrink="No" alignItems="Center" wrap="Wrap">
+          {canShowVoters && (
             <Chip
-              variant="SurfaceVariant"
+              variant={showVoters ? 'Primary' : 'SurfaceVariant'}
               radii="Pill"
-              onClick={() => setConfirmEnd(true)}
-              before={<Icon size="50" src={Icons.Cross} />}
+              aria-pressed={showVoters}
+              onClick={() => setShowVoters((v) => !v)}
+              before={<Icon size="50" src={Icons.User} />}
             >
-              <Text size="T200">End poll</Text>
+              <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                {showVoters ? 'Hide voters' : 'Who voted'}
+              </Text>
             </Chip>
-          ))}
+          )}
+          {canEnd &&
+            (confirmEnd ? (
+              <>
+                <Chip
+                  variant="Critical"
+                  radii="Pill"
+                  aria-disabled={ending}
+                  onClick={ending ? undefined : handleEndPoll}
+                >
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    {ending ? 'Ending…' : 'End poll'}
+                  </Text>
+                </Chip>
+                <Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    Cancel
+                  </Text>
+                </Chip>
+              </>
+            ) : (
+              <Chip
+                variant="SurfaceVariant"
+                radii="Pill"
+                onClick={() => setConfirmEnd(true)}
+                before={<Icon size="50" src={Icons.Cross} />}
+              >
+                <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                  End poll
+                </Text>
+              </Chip>
+            ))}
+        </Box>
       </Box>
     </Box>
   );

src/app/components/seasonal/SeasonalEffect.tsx

@@ -3,13 +3,13 @@ import { useAtomValue } from 'jotai';
 import { settingsAtom } from '../../state/settings';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 import { zIndices } from '../../styles/zIndex';
-import { SeasonTheme } from './types';
+import { SeasonTheme, SeasonalOverlayProps } from './types';
 import { resolveSeasonTheme } from './seasonSchedule';
 
 // [Gitea #167] Each overlay (its particles + keyframes) is its own chunk,
 // fetched only when that season is active or previewed in Settings — the
 // date/override decision stays in the main bundle.
-const lazyOverlay = (load: () => Promise<{ default: React.ComponentType<{ reduced: boolean }> }>) =>
+const lazyOverlay = (load: () => Promise<{ default: React.ComponentType<SeasonalOverlayProps> }>) =>
   React.lazy(load);
 const HalloweenOverlay = lazyOverlay(() =>
   import('./themes/Halloween').then((m) => ({ default: m.HalloweenOverlay })),
@@ -52,16 +52,20 @@ export type { SeasonTheme };
 
 // ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──
 
-function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
+function buildOverlayContent(
+  theme: SeasonTheme,
+  reduced: boolean,
+  preview = false,
+): React.ReactNode {
   switch (theme) {
     case 'halloween':
-      return <HalloweenOverlay reduced={reduced} />;
+      return <HalloweenOverlay reduced={reduced} preview={preview} />;
     case 'christmas':
       return <ChristmasOverlay reduced={reduced} />;
     case 'newyear':
       return <NewYearOverlay reduced={reduced} />;
     case 'autumn':
-      return <AutumnOverlay reduced={reduced} />;
+      return <AutumnOverlay reduced={reduced} preview={preview} />;
     case 'aprilfools':
       return <AprilFoolsOverlay reduced={reduced} />;
     case 'lunar':
@@ -122,7 +126,7 @@ export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
         containerType: 'inline-size',
       }}
     >
-      <Suspense fallback={null}>{buildOverlayContent(theme, true)}</Suspense>
+      <Suspense fallback={null}>{buildOverlayContent(theme, true, true)}</Suspense>
     </div>
   );
 }

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

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

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

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

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

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

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

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

src/app/components/seasonal/types.ts

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

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

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

@@ -34,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,
@@ -669,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 &&
@@ -680,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
-      ref={ref}
-      className={previewCss.EmbedIframeStatic}
-      src={`https://platform.twitter.com/embed/Tweet.html?id=${encodeURIComponent(
-        id,
-      )}&theme=${theme}&dnt=true`}
-      title="Post on X"
-      style={{ height: `${height}px` }}
-      sandbox={EMBED_SANDBOX}
-      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
-      loading="lazy"
-      scrolling="no"
-    />
+    <div style={{ position: 'relative' }}>
+      <iframe
+        key={attempt}
+        ref={ref}
+        className={previewCss.EmbedIframeStatic}
+        src={`https://platform.twitter.com/embed/Tweet.html?id=${encodeURIComponent(
+          id,
+        )}&theme=${theme}&dnt=true`}
+        title="Post on X"
+        style={{ height: `${height}px` }}
+        sandbox={EMBED_SANDBOX}
+        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>
   );
 }
 
@@ -773,7 +867,7 @@ function TwitterCard({
           </IconButton>
         </div>
         <UrlPreviewContent>
-          <TweetEmbed id={tweetId} />
+          <TweetEmbed id={tweetId} url={url} />
         </UrlPreviewContent>
       </>
     );
@@ -1151,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'] ?? '';
@@ -1228,30 +1323,54 @@ function MediaEmbedCard({
     <Box direction="Column" style={{ width: '100%', minWidth: 0 }}>
       {playing && rich ? (
         // Rich post embeds (Instagram/Reddit) are variable-height and self-size.
-        <iframe
-          ref={resizeRef}
-          className={previewCss.EmbedIframeStatic}
-          src={embed.embedUrl}
-          title={title || badge.label}
-          style={{ height: `${resizeHeight}px` }}
-          allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-          sandbox={EMBED_SANDBOX}
-          allowFullScreen
-          loading="lazy"
-          scrolling="no"
-        />
+        <div style={{ position: 'relative' }}>
+          <iframe
+            key={attempt}
+            ref={resizeRef}
+            className={previewCss.EmbedIframeStatic}
+            src={embed.embedUrl}
+            title={title || badge.label}
+            style={{ height: `${resizeHeight}px` }}
+            allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+            sandbox={EMBED_SANDBOX}
+            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}
-              src={embed.embedUrl}
-              title={title || badge.label}
-              allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-              sandbox={EMBED_SANDBOX}
-              allowFullScreen
-              loading="lazy"
-            />
+            <>
+              <iframe
+                key={attempt}
+                className={previewCss.EmbedIframe}
+                src={embed.embedUrl}
+                title={title || badge.label}
+                allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+                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"
@@ -1347,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(), []);
@@ -1407,15 +1527,27 @@ function TikTokEmbedCard({ url, prev }: { url: string; prev: IPreviewUrlResponse
     <Box direction="Column" style={{ width: '100%', minWidth: 0 }}>
       <div ref={mediaRef} className={previewCss.EmbedMediaPortrait}>
         {playing && videoId ? (
-          <iframe
-            className={previewCss.EmbedIframe}
-            src={tiktokPlayerEmbedUrl(videoId)}
-            title={title || 'TikTok'}
-            allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
-            sandbox={EMBED_SANDBOX}
-            allowFullScreen
-            loading="lazy"
-          />
+          <>
+            <iframe
+              key={tiktokWatch.attempt}
+              className={previewCss.EmbedIframe}
+              src={tiktokPlayerEmbedUrl(videoId)}
+              title={title || 'TikTok'}
+              allow="autoplay; encrypted-media; picture-in-picture; fullscreen; clipboard-write"
+              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"
@@ -1758,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;
@@ -1791,13 +1924,25 @@ function SteamAppCard({
           </Text>
         )}
         {showWidget ? (
-          <iframe
-            className={previewCss.SteamWidget}
-            src={steamWidgetEmbedUrl(appId)}
-            title={title ? `Steam store: ${title}` : 'Steam store widget'}
-            sandbox={EMBED_SANDBOX}
-            loading="lazy"
-          />
+          <div style={{ position: 'relative' }}>
+            <iframe
+              key={steamWatch.attempt}
+              className={previewCss.SteamWidget}
+              src={steamWidgetEmbedUrl(appId)}
+              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

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

@@ -3,7 +3,12 @@ import React, { useCallback, useState } from 'react';
 import { useSetAtom } from 'jotai';
 import { MicLevelBars } from '../call/MicLevelBars';
 import { StatusDivider } from './components';
-import { CallEmbed, useCallControlState, useCallMicLevel } from '../../plugins/call';
+import {
+  CallEmbed,
+  useCallControlState,
+  useCallMicLevel,
+  useScreenshareMode,
+} from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
 import { MobileTouchTarget } from '../../styles/mobile.css';
@@ -192,8 +197,16 @@ 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;
+  // where the click can't be delegated, starting asks for the in-frame prompt.
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const showScreenshare = screenshareMode !== 'hidden' && (allowScreenshare || screenshare);
   const [shareConfirm, setShareConfirm] = useState(false);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };
 
   const handleMicrophoneToggle = useCallback(
     () => callEmbed.control.toggleMicrophone(),
@@ -248,9 +261,7 @@ export function CallControl({
         {!compact && showScreenshare && (
           <ScreenShareButton
             enabled={screenshare}
-            onToggle={() =>
-              screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-            }
+            onToggle={() => handleScreenshareToggle()}
             disabled={!callJoined}
           />
         )}

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

@@ -72,9 +72,9 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
                     size="T200"
                     truncate
                     style={{ color: color.Warning.Main }}
-                    title="Fix your computer's clock — calls and encryption depend on it"
+                    title="This device's clock is off. Calls and encryption depend on it: turn on automatic time in your system settings."
                   >
-                    Clock {describeSkewVsServer(clockSkew.skewMs)} — calls will fail
+                    Device clock {describeSkewVsServer(clockSkew.skewMs)}: calls may fail
                   </Text>
                 </>
               )}

src/app/features/call/CallControls.tsx

@@ -29,7 +29,12 @@ import {
   SoundButton,
   VideoButton,
 } from './Controls';
-import { CallEmbed, useCallControlState, useCallMicLevel } from '../../plugins/call';
+import {
+  CallEmbed,
+  useCallControlState,
+  useCallMicLevel,
+  useScreenshareMode,
+} from '../../plugins/call';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { callEmbedAtom } from '../../state/callEmbed';
@@ -106,6 +111,15 @@ 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 (the screenshare-audio mute stays); where the click can't be
+  // delegated, starting asks for the fork's in-frame "Share your screen?".
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };
   const showScreenshare = allowScreenshare || screenshare;
   const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -216,12 +230,12 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
               {showScreenshare && (
                 <>
-                  <ScreenShareButton
-                    enabled={screenshare}
-                    onToggle={() =>
-                      screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-                    }
-                  />
+                  {screenshareMode !== 'hidden' && (
+                    <ScreenShareButton
+                      enabled={screenshare}
+                      onToggle={() => handleScreenshareToggle()}
+                    />
+                  )}
                   {/* Mute-screenshare-audio sits directly next to the screenshare
                       control since they're the same concern. */}
                   <ScreenshareAudioButton

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

@@ -23,6 +23,7 @@ import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+import { CallsUnavailableMessage } from './CallsUnavailable';
 import { webRTCSupported } from '../../utils/rtc';
 
 function LivekitServerMissingMessage() {
@@ -33,25 +34,19 @@ function LivekitServerMissingMessage() {
   );
 }
 
-function WebRTCMissingError() {
-  return (
-    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your browser does not support WebRTC, which is required for calling.
-    </Text>
-  );
-}
-
 function JoinMessage({
+  roomId,
   hasParticipant,
   livekitSupported,
   rtcSupported,
 }: {
+  roomId: string;
   hasParticipant?: boolean;
   livekitSupported?: boolean;
   rtcSupported?: boolean;
 }) {
   if (rtcSupported === false) {
-    return <WebRTCMissingError />;
+    return <CallsUnavailableMessage roomId={roomId} />;
   }
 
   if (livekitSupported === false) {
@@ -144,6 +139,7 @@ function CallPrescreen() {
             )}
             {!inOtherCall && hasPermission && !channelFull && (
               <JoinMessage
+                roomId={room.roomId}
                 hasParticipant={hasParticipant}
                 livekitSupported={livekitSupported}
                 rtcSupported={rtcSupported}

src/app/features/call/CallsUnavailable.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { Box, Button, Icon, Icons, Text, color } from 'folds';
+import { useClientConfig } from '../../hooks/useClientConfig';
+import { isTauri } from '../../hooks/useTauri';
+import { webRTCSupported } from '../../utils/rtc';
+import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';
+
+/**
+ * [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
+ * which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
+ * around 2.56). Where calls can't work here, send the user to the room in the
+ * web app instead of a dead end. Only in the desktop app, and only when
+ * config.json sets `webAppUrl`.
+ */
+export const useCallInBrowserUrl = (roomId: string): string | undefined => {
+  const { webAppUrl } = useClientConfig();
+  return useMemo(
+    () =>
+      isTauri() && !webRTCSupported()
+        ? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
+        : undefined,
+    [webAppUrl, roomId],
+  );
+};
+
+/** Opens through the desktop's new-window handler → the system browser. */
+export const openCallInBrowser = (url: string): void => {
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const desktopUnavailableText = (): string =>
+  typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
+    ? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
+    : 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';
+
+type CallsUnavailableMessageProps = {
+  roomId: string;
+  /** Button label, e.g. "Answer in browser" for an incoming call. */
+  actionLabel?: string;
+};
+
+export function CallsUnavailableMessage({
+  roomId,
+  actionLabel = 'Open in browser',
+}: CallsUnavailableMessageProps) {
+  const url = useCallInBrowserUrl(roomId);
+
+  if (!isTauri()) {
+    return (
+      <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+        Your browser does not support WebRTC, which is required for calling.
+      </Text>
+    );
+  }
+
+  return (
+    <Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
+      <Text style={{ color: color.Warning.Main }} size="L400" align="Center">
+        {desktopUnavailableText()}
+        {url ? ' You can join from the web app in your browser.' : ''}
+      </Text>
+      {url && (
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          before={<Icon size="100" src={Icons.External} />}
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Text size="B300">{actionLabel}</Text>
+        </Button>
+      )}
+    </Box>
+  );
+}

src/app/features/call/PrescreenControls.tsx

@@ -8,6 +8,7 @@ import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEm
 import { useCallPreferences } from '../../state/hooks/callPreferences';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { useCallsDown } from '../server-status/ServerStatusBanner';
 
 type MediaPermState = 'granted' | 'denied' | 'prompt' | 'unknown';
 
@@ -61,6 +62,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
 
   const micPermission = useMediaPermissions();
   const micDenied = micPermission === 'denied';
+  const callsDown = useCallsDown();
 
   const disabled = inOtherCall || !canJoin || micDenied;
 
@@ -91,6 +93,11 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
         <ChatButton />
       </Box>
       <Box grow="Yes" direction="Column" gap="200">
+        {callsDown && (
+          <Text size="T200" style={{ color: color.Warning.Main, textAlign: 'center' }}>
+            Voice calls are down right now, so joining may fail.
+          </Text>
+        )}
         {micDenied && (
           <Text size="T200" style={{ color: color.Critical.Main, textAlign: 'center' }}>
             Microphone access is blocked. Enable it in your browser settings to join.

src/app/features/lotus/avatarDecorations.ts

@@ -33,7 +33,6 @@ export const DECORATION_CATEGORIES: DecorationCategory[] = [
     decorations: [
       { slug: 'slither_n_snack', name: "Slither 'n Snack" },
       { slug: 'joystick', name: 'Joystick' },
-      { slug: 'clyde_invaders', name: 'Space Invaders' },
       { slug: 'mallow_jump', name: 'Mallow Jump' },
       { slug: 'hot_shot', name: 'Hot Shot' },
       { slug: 'pipedream', name: 'Pipedream' },
@@ -71,7 +70,6 @@ export const DECORATION_CATEGORIES: DecorationCategory[] = [
       { slug: 'solar_orbit', name: 'Solar Orbit' },
       { slug: 'astronaut_helmet', name: 'Astronaut Helmet' },
       { slug: 'ufo', name: 'UFO' },
-      { slug: 'warp_helmet', name: 'Warp Helmet' },
       { slug: 'aurora', name: 'Aurora' },
     ],
   },
@@ -182,6 +180,650 @@ export const DECORATION_CATEGORIES: DecorationCategory[] = [
       { slug: 'polar_bear_hat', name: 'Polar Bear Hat' },
     ],
   },
+  {
+    id: 'reactions',
+    label: 'Reactions',
+    decorations: [
+      { slug: 'shy', name: 'Shy' },
+      { slug: 'shy_in_love', name: 'Shy (In Love)' },
+      { slug: 'rumbling', name: 'Rumbling' },
+      { slug: 'angry', name: 'Angry' },
+      { slug: 'angry_pink', name: 'Angry (Pink)' },
+      { slug: 'angry_yellow', name: 'Angry (Yellow)' },
+      { slug: 'radiating_energy', name: 'Radiating Energy' },
+      { slug: 'radiating_energy_yellow', name: 'Radiating Energy (Yellow)' },
+      { slug: 'radiating_energy_blue', name: 'Radiating Energy (Blue)' },
+      { slug: 'sweat_drops', name: 'Sweat Drops' },
+      { slug: 'sweat_drops_cyan', name: 'Sweat Drops (Cyan)' },
+      { slug: 'sweat_drops_pink', name: 'Sweat Drops (Pink)' },
+      { slug: 'soul_leaving_body', name: 'Soul Leaving Body' },
+      { slug: 'soul_leaving_body_blue', name: 'Soul Leaving Body (Blue)' },
+      { slug: 'starry_eyed', name: 'Starry Eyed' },
+      { slug: 'starry_eyed_green', name: 'Starry Eyed (Green)' },
+      { slug: 'starry_eyed_pink', name: 'Starry Eyed (Pink)' },
+      { slug: 'shocked', name: 'Shocked' },
+      { slug: 'shocked_green', name: 'Shocked (Green)' },
+      { slug: 'shocked_yellow', name: 'Shocked (Yellow)' },
+      { slug: 'in_love', name: 'In Love' },
+      { slug: 'in_love_blue', name: 'In Love (Blue)' },
+      { slug: 'in_love_green', name: 'In Love (Green)' },
+      { slug: 'ki_energy_green', name: 'Ki Energy (Green)' },
+      { slug: 'ki_energy_cyan', name: 'Ki Energy (Cyan)' },
+      { slug: 'ki_energy_blue', name: 'Ki Energy (Blue)' },
+      { slug: 'ki_energy_fuchsia', name: 'Ki Energy (Fuchsia)' },
+      { slug: 'heartbloom', name: 'Heartbloom' },
+      { slug: 'heartbloom_purple', name: 'Heartbloom (Purple)' },
+      { slug: 'heartbloom_blue', name: 'Heartbloom (Blue)' },
+      { slug: 'heartbloom_yellow', name: 'Heartbloom (Yellow)' },
+      { slug: 'heartbloom_green', name: 'Heartbloom (Green)' },
+      { slug: 'dismay', name: 'Dismay' },
+      { slug: 'dismay_purple', name: 'Dismay (Purple)' },
+      { slug: 'dismay_pink', name: 'Dismay (Pink)' },
+      { slug: 'dismay_yellow', name: 'Dismay (Yellow)' },
+      { slug: 'dismay_green', name: 'Dismay (Green)' },
+      { slug: 'in_tears', name: 'In Tears' },
+      { slug: 'in_tears_purple', name: 'In Tears (Purple)' },
+      { slug: 'in_tears_pink', name: 'In Tears (Pink)' },
+      { slug: 'in_tears_yellow', name: 'In Tears (Yellow)' },
+      { slug: 'in_tears_green', name: 'In Tears (Green)' },
+      { slug: 'rage', name: 'Rage' },
+      { slug: 'rage_green', name: 'Rage (Green)' },
+      { slug: 'rage_blue', name: 'Rage (Blue)' },
+      { slug: 'rage_purple', name: 'Rage (Purple)' },
+      { slug: 'rage_red', name: 'Rage (Red)' },
+      { slug: 'copium', name: 'Copium' },
+      { slug: 'trash', name: 'Trash' },
+      { slug: 'grass_toucher', name: 'Grass Toucher' },
+      { slug: 'touch_grass', name: 'Touch Grass' },
+      { slug: 'press_f_black', name: 'Press F (Black)' },
+      { slug: 'press_f_white', name: 'Press F (White)' },
+      { slug: 'git_gud', name: 'Git Gud' },
+      { slug: 'ggez', name: 'GGEZ' },
+      { slug: 'questionable', name: 'Questionable' },
+      { slug: 'buffering', name: 'Buffering' },
+      { slug: 'toilet_lid', name: 'Toilet Lid' },
+      { slug: 'feeling_cute', name: 'Feeling Cute' },
+      { slug: 'im_a_clown', name: "I'm a Clown" },
+    ],
+  },
+  {
+    id: 'critters',
+    label: 'Critters',
+    decorations: [
+      { slug: 'cat_1', name: 'Lazy Cat (Ginger)' },
+      { slug: 'cat_2', name: 'Lazy Cat (Tabby)' },
+      { slug: 'cat_3', name: 'Lazy Cat (Calico)' },
+      { slug: 'cat_4', name: 'Lazy Cat (Siamese)' },
+      { slug: 'dog_1', name: 'Dogs (Tan)' },
+      { slug: 'dog_2', name: 'Dogs (Spotted)' },
+      { slug: 'dog_3', name: 'Dogs (Brown)' },
+      { slug: 'frog_1', name: 'Frog' },
+      { slug: 'frog_derpy', name: 'Derpy Frog' },
+      { slug: 'frog_3', name: 'Sleepy Frog' },
+      { slug: 'frog_angry', name: 'Angry Frog' },
+      { slug: 'mushroom_1', name: 'Mushroom (Moss)' },
+      { slug: 'mushroom_2', name: 'Mushroom (Amber)' },
+      { slug: 'mushroom_3', name: 'Mushroom (Rust)' },
+      { slug: 'mushroom_4', name: 'Mushroom (Neon)' },
+      { slug: 'hoppy_day', name: 'Hoppy Day' },
+      { slug: 'hoppy_boi', name: 'Hoppy Boi' },
+      { slug: 'cow_glider', name: 'Cow Glider' },
+      { slug: 'moomoo_hood', name: 'Moomoo Hood' },
+      { slug: 'cosy_deer', name: 'Cosy Deer' },
+      { slug: 'berry_bunny', name: 'Berry Bunny' },
+      { slug: 'mochi_bunny_pink', name: 'Mochi Bunny (Pink)' },
+      { slug: 'mochi_bunny_blue', name: 'Mochi Bunny (Blue)' },
+      { slug: 'nibbles', name: 'Nibbles' },
+      { slug: 'hammy', name: 'Hammy' },
+      { slug: 'hammy_blue', name: 'Hammy (Blue)' },
+      { slug: 'hammy_green', name: 'Hammy (Green)' },
+      { slug: 'hammy_pink', name: 'Hammy (Pink)' },
+      { slug: 'shroomling', name: 'Shroomling' },
+      { slug: 'shroomling_blue', name: 'Shroomling (Blue)' },
+      { slug: 'shroomling_brown', name: 'Shroomling (Brown)' },
+      { slug: 'shroomling_pink', name: 'Shroomling (Pink)' },
+      { slug: 'shroomling_purple', name: 'Shroomling (Purple)' },
+      { slug: 'sleepy_bee', name: 'Sleepy Bee' },
+      { slug: 'baker_bear', name: 'Baker Bear' },
+      { slug: 'dewdrop', name: 'Dewdrop' },
+      { slug: 'gone_fishin', name: "Gone Fishin'" },
+      { slug: 'happy_harvest', name: 'Happy Harvest' },
+      { slug: 'cat_onesie', name: 'Cat Onesie' },
+      { slug: 'cat_onesie_pink', name: 'Cat Onesie (Pink)' },
+      { slug: 'cat_onesie_black', name: 'Cat Onesie (Black)' },
+      { slug: 'cat_ears_yellow', name: 'Cat Ears (Yellow)' },
+      { slug: 'cat_ears_green', name: 'Cat Ears (Green)' },
+      { slug: 'cat_ears_blue', name: 'Cat Ears (Blue)' },
+      { slug: 'cat_ears_purple', name: 'Cat Ears (Purple)' },
+      { slug: 'greenhouse_cat', name: 'Greenhouse Cat' },
+      { slug: 'graveyard_cat', name: 'Graveyard Cat' },
+      { slug: 'forest_frolic', name: 'Forest Frolic' },
+      { slug: 'a_real_fungi', name: 'A Real Fungi' },
+      { slug: 'mokoko', name: 'Mokoko' },
+    ],
+  },
+  {
+    id: 'monsters',
+    label: 'Little Monsters',
+    decorations: [
+      { slug: 'beamchop', name: 'Beamchop' },
+      { slug: 'chuck', name: 'Chuck' },
+      { slug: 'winkle', name: 'Winkle' },
+      { slug: 'chewbert', name: 'Chewbert' },
+      { slug: 'doodlezard', name: 'Doodlezard' },
+      { slug: 'glop', name: 'Glop' },
+      { slug: 'gawblehop', name: 'Gawblehop' },
+      { slug: 'stinkums', name: 'Stinkums' },
+      { slug: 'goblin_stinkums', name: 'Goblin Stinkums' },
+      { slug: 'chomp_chomp', name: 'Chomp Chomp' },
+    ],
+  },
+  {
+    id: 'snacks',
+    label: 'Snacks',
+    decorations: [
+      { slug: 'pancakes', name: 'Pancakes' },
+      { slug: 'blueberry_jam', name: 'Blueberry Jam' },
+      { slug: 'donut', name: 'Donut' },
+      { slug: 'fried_egg', name: 'Fried Egg' },
+      { slug: 'green_fried_egg', name: 'Green Fried Egg' },
+      { slug: 'toast', name: 'Toast' },
+      { slug: 'burnt_toast', name: 'Burnt Toast' },
+      { slug: 'morning_coffee', name: 'Morning Coffee' },
+      { slug: 'sushi_roll', name: 'Sushi Roll' },
+      { slug: 'ramen_bowl', name: 'Ramen Bowl' },
+      { slug: 'ramen_bowl_toppings', name: 'Ramen Bowl (Toppings)' },
+      { slug: 'donut_cow', name: 'Donut Cow' },
+      { slug: 'donut_cat', name: 'Donut Cat' },
+      { slug: 'donut_bear', name: 'Donut Bear' },
+      { slug: 'bread_doggy', name: 'Bread Doggy' },
+      { slug: 'ice_cream_frog', name: 'Ice Cream Frog' },
+      { slug: 'jelly_bear', name: 'Jelly Bear' },
+      { slug: 'nom_kitty', name: 'Nom Kitty' },
+      { slug: 'egg', name: 'Egg' },
+      { slug: 'chicken_nugget', name: 'Chicken Nugget' },
+      { slug: 'sippy_juice', name: 'Sippy Juice' },
+      { slug: 'bubble_tea', name: 'Bubble Tea' },
+      { slug: 'freshly_picked', name: 'Freshly Picked' },
+      { slug: 'strawberry_vine', name: 'Strawberry Vine' },
+      { slug: 'a_hint_of_clove', name: 'A Hint of Clove' },
+    ],
+  },
+  {
+    id: 'scene',
+    label: 'Scene',
+    decorations: [
+      { slug: 'neon_cat_hoodie', name: 'Neon Cat Hoodie' },
+      { slug: 'neon_cat_hoodie_blue', name: 'Neon Cat Hoodie (Blue)' },
+      { slug: 'neon_cat_hoodie_pink', name: 'Neon Cat Hoodie (Pink)' },
+      { slug: 'neon_cat_hoodie_black', name: 'Neon Cat Hoodie (Black)' },
+      { slug: 'neon_decora_hair', name: 'Neon Decora Hair' },
+      { slug: 'neon_spike_choker', name: 'Neon Spike Choker' },
+      { slug: 'neon_spike_choker_black', name: 'Neon Spike Choker (Black)' },
+      { slug: 'mischievous_kitties', name: 'Mischievous Kitties' },
+      { slug: 'mischievous_kitties_hearts', name: 'Mischievous Kitties (Hearts)' },
+      { slug: 'mischievous_kitties_blue', name: 'Mischievous Kitties (Blue)' },
+      { slug: 'skully_charms', name: 'Skully Charms' },
+      { slug: 'rawr_xd', name: 'Rawr xD' },
+      { slug: 'magical_girl', name: 'Magical Girl' },
+      { slug: 'sakura_scholar', name: 'Sakura Scholar' },
+    ],
+  },
+  {
+    id: 'dreamy',
+    label: 'Dreamy',
+    decorations: [
+      { slug: 'jet_ring', name: 'Jet Ring' },
+      { slug: 'pondering_portal', name: 'Pondering Portal' },
+      { slug: 'magic_mists', name: 'Magic Mists' },
+      { slug: 'infinite_swirl', name: 'Infinite Swirl' },
+      { slug: 'blue_gyroscope', name: 'Blue Gyroscope' },
+      { slug: 'pink_gyroscope', name: 'Pink Gyroscope' },
+      { slug: 'green_gyroscope', name: 'Green Gyroscope' },
+      { slug: 'saw', name: 'Saw' },
+      { slug: 'blue_smoke', name: 'Blue Smoke' },
+      { slug: 'pink_smoke', name: 'Pink Smoke' },
+      { slug: 'green_smoke', name: 'Green Smoke' },
+      { slug: 'starlight_whales', name: 'Starlight Whales' },
+      { slug: 'head_in_the_clouds', name: 'Head In the Clouds' },
+      { slug: 'head_in_the_clouds_sunset', name: 'Head In the Clouds (Sunset)' },
+      { slug: 'mirage', name: 'Mirage' },
+      { slug: 'mirage_void', name: 'Mirage (Void)' },
+      { slug: 'mirage_twilight', name: 'Mirage (Twilight)' },
+      { slug: 'mirage_nightshade', name: 'Mirage (Nightshade)' },
+      { slug: 'lava_blobs', name: 'Lava Blobs' },
+      { slug: 'lava_blobs_pink', name: 'Lava Blobs (Pink)' },
+      { slug: 'lava_blobs_blue', name: 'Lava Blobs (Blue)' },
+      { slug: 'lava_blobs_slime', name: 'Lava Blobs (Slime)' },
+      { slug: 'luminescent_lotus', name: 'Luminescent Lotus' },
+      { slug: 'woolgathering', name: 'Woolgathering' },
+      { slug: 'travel_ring', name: 'Travel Ring' },
+      { slug: 'dream_dive_stars', name: 'Dream Dive Stars' },
+      { slug: 'rift_butterfly', name: 'Rift Butterfly' },
+    ],
+  },
+  {
+    id: 'celestial',
+    label: 'Celestial',
+    decorations: [
+      { slug: 'lunar_flowers', name: 'Lunar Flowers' },
+      { slug: 'starlight_tiara', name: 'Starlight Tiara' },
+      { slug: 'astral_aura', name: 'Astral Aura' },
+      { slug: 'luna_moths', name: 'Luna Moths' },
+      { slug: 'moonlit_charms', name: 'Moonlit Charms' },
+      { slug: 'liquid_moon', name: 'Liquid Moon' },
+    ],
+  },
+  {
+    id: 'garden',
+    label: 'Garden',
+    decorations: [
+      { slug: 'terrarium', name: 'Terrarium' },
+      { slug: 'mushcaps', name: 'Mushcaps' },
+      { slug: 'blossomburst', name: 'Blossomburst' },
+      { slug: 'rainy_canopy', name: 'Rainy Canopy' },
+      { slug: 'snowdrops', name: 'Snowdrops' },
+      { slug: 'afternoon_breeze', name: 'Afternoon Breeze' },
+      { slug: 'shower_stroll', name: 'Shower Stroll' },
+      { slug: 'sakura_gyoiko', name: 'Gyoiko Sakura' },
+      { slug: 'sakura_ukon', name: 'Ukon Sakura' },
+      { slug: 'forest', name: 'Forest' },
+      { slug: 'fall_leaves_woodland', name: 'Woodland Leaves' },
+      { slug: 'autumn_foliage', name: 'Autumn Foliage' },
+      { slug: 'flower_clouds', name: 'Flower Clouds' },
+      { slug: 'the_petal_pack', name: 'The Petal Pack' },
+      { slug: 'chrysanthemums_morning', name: 'Morning Chrysanthemums' },
+      { slug: 'chrysanthemums_twilight', name: 'Twilight Chrysanthemums' },
+      { slug: 'dusk_and_dawn', name: 'Dusk and Dawn' },
+      { slug: 'floral_harmony', name: 'Floral Harmony' },
+      { slug: 'floral_harmony_sunburst', name: 'Floral Harmony (Sunburst)' },
+      { slug: 'autumns_arbor', name: "Autumn's Arbor" },
+      { slug: 'autumns_arbor_aurora', name: "Autumn's Arbor (Aurora)" },
+      { slug: 'autumn_crown', name: 'Autumn Crown' },
+      { slug: 'faces_of_the_moon', name: 'Faces of the Moon' },
+      { slug: 'lover_girl_autumn', name: 'Lover Girl Autumn' },
+    ],
+  },
+  {
+    id: 'summer',
+    label: 'Summer',
+    decorations: [
+      { slug: 'sunflowers', name: 'Sunflowers' },
+      { slug: 'beach_hat', name: 'Beach Hat' },
+      { slug: 'a_duck', name: 'A Duck' },
+      { slug: 'bubble', name: 'Bubble' },
+      { slug: 'fireflies', name: 'Fireflies' },
+    ],
+  },
+  {
+    id: 'love',
+    label: 'Love',
+    decorations: [
+      { slug: 'rose_bearer_pink', name: 'Rose Bearer (Pink)' },
+      { slug: 'rose_bearer_blue', name: 'Rose Bearer (Blue)' },
+      { slug: 'angel', name: 'Angel' },
+      { slug: 'devil', name: 'Devil' },
+      { slug: 'aim_for_love', name: 'Aim for Love' },
+      { slug: 'lovestruck', name: 'Lovestruck' },
+      { slug: 'ring_of_roses_red', name: 'Ring of Roses (Red)' },
+      { slug: 'ring_of_roses_blue', name: 'Ring of Roses (Blue)' },
+      { slug: 'heartstrings_red', name: 'Heartstrings (Red)' },
+      { slug: 'heartstrings_blue', name: 'Heartstrings (Blue)' },
+      { slug: 'heart_to_heart', name: 'Heart-to-Heart' },
+      { slug: 'ruby_hearts', name: 'Ruby Hearts' },
+    ],
+  },
+  {
+    id: 'winter',
+    label: 'Winter',
+    decorations: [
+      { slug: 'snowfall', name: 'Snowfall' },
+      { slug: 'santa_cat_ears', name: 'Holiday Cat Ears' },
+      { slug: 'string_lights', name: 'String Lights' },
+      { slug: 'string_lights_aurora', name: 'String Lights (Aurora)' },
+      { slug: 'string_lights_ember', name: 'String Lights (Ember)' },
+      { slug: 'string_lights_dusk', name: 'String Lights (Dusk)' },
+      { slug: 'string_lights_mix', name: 'String Lights (Mix)' },
+      { slug: 'snowglobe', name: 'Snowglobe' },
+      { slug: 'snowglobe_wood', name: 'Snowglobe (Wood)' },
+      { slug: 'snowglobe_pink', name: 'Snowglobe (Pink)' },
+      { slug: 'snowglobe_blue', name: 'Snowglobe (Blue)' },
+      { slug: 'snowglobe_green', name: 'Snowglobe (Green)' },
+      { slug: 'fresh_pine', name: 'Fresh Pine' },
+      { slug: 'fresh_pine_cinnamon', name: 'Fresh Pine (Cinnamon)' },
+      { slug: 'fresh_pine_ribbon', name: 'Fresh Pine (Ribbon)' },
+      { slug: 'blanket_green', name: 'Green Blanket' },
+      { slug: 'blanket_orange', name: 'Orange Blanket' },
+      { slug: 'blanket_pink', name: 'Pink Blanket' },
+      { slug: 'blanket_purple', name: 'Purple Blanket' },
+      { slug: 'box_white_blue', name: 'Gift Box (White)' },
+      { slug: 'box_blue_yellow', name: 'Gift Box (Blue)' },
+      { slug: 'box_green_red', name: 'Gift Box (Green)' },
+      { slug: 'box_red_white', name: 'Gift Box (Red)' },
+      { slug: 'box_red_white_blue', name: 'Gift Box (Red, White & Blue)' },
+      { slug: 'ice_cube', name: 'Ice Cube' },
+      { slug: 'icicle_gleaming', name: 'Gleaming Icicle' },
+      { slug: 'icicle_snowing', name: 'Snowing Icicle' },
+      { slug: 'teacup_blue', name: 'Blue Teacup' },
+      { slug: 'teacup_orange', name: 'Orange Teacup' },
+      { slug: 'teacup_pink', name: 'Pink Teacup' },
+      { slug: 'teacup_red', name: 'Red Teacup' },
+    ],
+  },
+  {
+    id: 'celebrate',
+    label: 'Celebrate',
+    decorations: [
+      { slug: 'new_year_2024', name: '2024 Balloons' },
+      { slug: 'new_year_2025', name: '2025 Balloons' },
+      { slug: 'confetti_festive', name: 'Festive Confetti' },
+      { slug: 'confetti_fire', name: 'Fire Confetti' },
+      { slug: 'confetti_ice', name: 'Ice Confetti' },
+      { slug: 'confetti_mint', name: 'Mint Confetti' },
+      { slug: 'confetti_star', name: 'Star Confetti' },
+      { slug: 'confetti_vaporwave', name: 'Vaporwave Confetti' },
+      { slug: 'snakes_hug', name: "Snake's Hug" },
+      { slug: 'red_lantern', name: 'Red Lantern' },
+      { slug: 'fan_flourish', name: 'Fan Flourish' },
+      { slug: 'lucky_envelopes', name: 'Lucky Envelopes' },
+    ],
+  },
+  {
+    id: 'steampunk',
+    label: 'Steampunk',
+    decorations: [
+      { slug: 'steampunk_cat_ears', name: 'Steampunk Cat Ears' },
+      { slug: 'mech_flora', name: 'Mech Flora' },
+      { slug: 'bowler_hat', name: 'Bowler Hat' },
+      { slug: 'brass_beats', name: 'Brass Beats' },
+      { slug: 'timekeepers_clock', name: "Timekeeper's Clock" },
+      { slug: 'flux_alchemy', name: 'Flux Alchemy' },
+      { slug: 'magic_portal_purple', name: 'Magic Portal (Purple)' },
+      { slug: 'magic_portal_blue', name: 'Magic Portal (Blue)' },
+      { slug: 'fairy_sprites', name: 'Fairy Sprites' },
+      { slug: 'fairy_sprites_pink', name: 'Fairy Sprites (Pink)' },
+      { slug: 'fairy_sprites_blue', name: 'Fairy Sprites (Blue)' },
+      { slug: 'wizard_hat_purple', name: 'Wizard Hat (Purple)' },
+      { slug: 'wizard_hat_blue', name: 'Wizard Hat (Blue)' },
+      { slug: 'magical_wand_purple', name: 'Magical Wand (Purple)' },
+      { slug: 'magical_wand_green', name: 'Magical Wand (Green)' },
+      { slug: 'mooncaps_pink', name: 'Mooncaps (Pink)' },
+      { slug: 'mooncaps_blue', name: 'Mooncaps (Blue)' },
+      { slug: 'cottage_home', name: 'Cottage Home' },
+      { slug: 'treasure_and_key', name: 'Treasure and Key' },
+    ],
+  },
+  {
+    id: 'pirates',
+    label: 'Pirates',
+    decorations: [
+      { slug: 'pirate_captain', name: 'Pirate Captain' },
+      { slug: 'scallywag', name: 'Scallywag' },
+      { slug: 'good_ol_pepper', name: "Good Ol' Pepper" },
+      { slug: 'crossbones', name: 'Crossbones' },
+      { slug: 'cannon_fire', name: 'Cannon Fire' },
+      { slug: 'helmsman', name: 'Helmsman' },
+    ],
+  },
+  {
+    id: 'neo_tokyo',
+    label: 'Neo Tokyo',
+    decorations: [
+      { slug: 'bonsai', name: 'Bonsai' },
+      { slug: 'sakura_city', name: 'Sakura City' },
+      { slug: 'hologram_dragon', name: 'Hologram Dragon' },
+      { slug: 'cyber_katana', name: 'Cyber Katana' },
+      { slug: 'o_n_i', name: 'O.N.I' },
+      { slug: 'jingasa', name: 'Jingasa' },
+      { slug: 'white_mana', name: 'White Mana' },
+      { slug: 'blue_mana', name: 'Blue Mana' },
+      { slug: 'black_mana', name: 'Black Mana' },
+      { slug: 'red_mana', name: 'Red Mana' },
+      { slug: 'green_mana', name: 'Green Mana' },
+    ],
+  },
+  {
+    id: 'lofi',
+    label: 'Lofi',
+    decorations: [
+      { slug: 'lofi_girl_outfit', name: 'Lofi Girl Outfit' },
+      { slug: 'playful_lofi_cat', name: 'Playful Lofi Cat' },
+      { slug: 'sleepy_chilledcow', name: 'Sleepy ChilledCow' },
+      { slug: 'study_session', name: 'Study Session' },
+      { slug: 'group_hug', name: 'Group Hug' },
+      { slug: 'cozy_post_it', name: 'Cozy Post-It' },
+      { slug: 'cozy_post_it_festive', name: 'Cozy Post-It (Festive)' },
+      { slug: 'cat_ear_headset', name: 'Cat Ear Headset' },
+      { slug: 'bunny_zzzs', name: 'Bunny Zzzs' },
+      { slug: 'sproutling', name: 'Sproutling' },
+      { slug: 'bloomling', name: 'Bloomling' },
+      { slug: 'neon_nibbles', name: 'Neon Nibbles' },
+      { slug: 'uwu_xp', name: 'UwU XP' },
+      { slug: 'dancing_fairies', name: 'Dancing Fairies' },
+      { slug: 'crystal_elk', name: 'Crystal Elk' },
+      { slug: 'mermaid_serenade', name: 'Mermaid Serenade' },
+    ],
+  },
+  {
+    id: 'game_night',
+    label: 'Game Night',
+    decorations: [
+      { slug: 'hugh_the_rainbow', name: 'Hugh the Rainbow' },
+      { slug: 'imagination', name: 'Imagination' },
+      { slug: 'depresso', name: 'Depresso' },
+      { slug: 'selyne', name: 'Selyne' },
+      { slug: 'cattiva', name: 'Cattiva' },
+      { slug: 'gold_laurel_wreath', name: 'Gold Laurel Wreath' },
+      { slug: 'golden_hex', name: 'Golden Hex' },
+      { slug: 'terrain_tiles', name: 'Terrain Tiles' },
+      { slug: 'hex_tiles', name: 'Hex Tiles' },
+      { slug: 'city_walls', name: 'City Walls' },
+      { slug: 'next_turn_button', name: 'Next Turn Button' },
+      { slug: 'armamenter', name: 'Armamenter' },
+      { slug: 'e_d_hacker', name: 'E.D Hacker' },
+      { slug: 'got_xenoglossy', name: 'Got Xenoglossy' },
+      { slug: 'port_of_soul', name: 'Port of Soul' },
+      { slug: 'rocket_puncher', name: 'Rocket Puncher' },
+      { slug: 'lights_camera_action_orange', name: 'Lights, Camera, Action! (Orange)' },
+      { slug: 'lights_camera_action_teal', name: 'Lights, Camera, Action! (Teal)' },
+      { slug: 'victory_crown', name: 'Fortnite Victory Crown' },
+      { slug: 'shield_potion', name: 'Shield Potion' },
+      { slug: 'slurp_barrel', name: 'Slurp Barrel' },
+      { slug: 'supply_llama', name: 'Supply Llama' },
+      { slug: 'bush_camper', name: 'Bush Camper' },
+    ],
+  },
+  {
+    id: 'crossover_screen',
+    label: 'Movies & TV',
+    decorations: [
+      { slug: 'lightsabers_blue_and_red', name: 'Lightsabers (Blue and Red)' },
+      { slug: 'lightsabers_green_and_red', name: 'Lightsabers (Green and Red)' },
+      { slug: 'r2_d2_on_tatooine', name: 'R2-D2 on Tatooine' },
+      { slug: 'curious_bb_8', name: 'Curious BB-8' },
+      { slug: 'yoda_on_dagobah', name: 'Yoda on Dagobah' },
+      { slug: 'millennium_falcon_hyperdrive', name: 'Millennium Falcon Hyperdrive' },
+      { slug: 'space_battle', name: 'Space Battle' },
+      { slug: 'the_thing', name: 'The Thing' },
+      { slug: 'invisible_woman', name: 'Invisible Woman' },
+      { slug: 'mister_fantastic', name: 'Mister Fantastic' },
+      { slug: 'human_torch', name: 'Human Torch' },
+      { slug: 'silver_surfer', name: 'Silver Surfer' },
+      { slug: 'the_fantastic_four', name: 'The Fantastic Four' },
+      { slug: 'dragon_balls', name: 'Dragon Balls' },
+      { slug: 'gomah', name: 'Gomah' },
+      { slug: 'shenron', name: 'Shenron' },
+      { slug: 'mini_goku', name: 'Mini Goku' },
+      { slug: 'mini_vegeta', name: 'Mini Vegeta' },
+      { slug: 'glorio', name: 'Glorio' },
+      { slug: 'mini_supreme_kai', name: 'Mini Supreme Kai' },
+      { slug: 'mini_piccolo', name: 'Mini Piccolo' },
+      { slug: 'panzy', name: 'Panzy' },
+      { slug: 'izuku_midoriya', name: 'Izuku Midoriya' },
+      { slug: 'katsuki_bakugo', name: 'Katsuki Bakugo' },
+      { slug: 'ochaco_uraraka', name: 'Ochaco Uraraka' },
+      { slug: 'shoto_todoroki', name: 'Shoto Todoroki' },
+      { slug: 'endeavor', name: 'Endeavor' },
+      { slug: 'hawks', name: 'Hawks' },
+      { slug: 'all_might', name: 'All Might' },
+      { slug: 'tomura_shigaraki', name: 'Tomura Shigaraki' },
+      { slug: 'spongebob', name: 'SpongeBob' },
+      { slug: 'patrick_star', name: 'Patrick Star' },
+      { slug: 'gary_the_snail', name: 'Gary the Snail' },
+      { slug: 'sandy_cheeks', name: 'Sandy Cheeks' },
+      { slug: 'musclebob', name: 'MuscleBob' },
+      { slug: 'skibidi_toilet', name: 'Skibidi Toilet' },
+      { slug: 'g_toilet', name: 'G-Toilet' },
+      { slug: 'cameraman_glitch', name: 'Cameraman Glitch' },
+      { slug: 'speakerwoman', name: 'Speakerwoman' },
+      { slug: 'tv_woman', name: 'TV Woman' },
+      { slug: 'juggernaut_astro', name: 'Juggernaut Astro' },
+      { slug: 'the_anomaly', name: 'The Anomaly' },
+      { slug: 'the_mark', name: 'The Mark' },
+      { slug: 'the_monster_you_created', name: 'The Monster You Created' },
+      { slug: 'the_atlas_gauntlets', name: 'The Atlas Gauntlets' },
+      { slug: 'flame_chompers', name: 'Flame Chompers' },
+      { slug: 'fishbones', name: 'FISHBONES!' },
+      { slug: 'the_hexcore', name: 'The Hexcore' },
+      { slug: 'powered_by_shimmer', name: 'Powered by Shimmer' },
+      { slug: 'minions', name: 'Minions' },
+      { slug: 'daredevil', name: 'Daredevil' },
+      { slug: 'jean_grey_phoenix', name: 'Phoenix' },
+      { slug: 'emma_frost', name: 'Emma Frost' },
+      { slug: 'ultron', name: 'Ultron' },
+      { slug: 'marvel_snap_venom', name: 'Marvel Snap Venom' },
+      { slug: 'jeff_the_land_shark', name: 'Jeff the Land Shark' },
+      { slug: 'hank_hill', name: 'Hank Hill' },
+      { slug: 'how_to_train_your_dragon', name: 'How to Train Your Dragon' },
+      { slug: 'jurassic_world_rebirth', name: 'Jurassic World Rebirth Trailer' },
+      { slug: 'mission_impossible', name: 'Mission: Impossible' },
+      { slug: 'bad_guys_2', name: 'The Bad Guys 2 Trailer' },
+      { slug: 'm3gan_2_0', name: 'M3GAN 2.0' },
+      { slug: '28_years_later', name: '28 Years Later' },
+      { slug: 'black_phone_2', name: 'Black Phone 2' },
+      { slug: 'the_conjuring_last_rites', name: 'The Conjuring: Last Rites' },
+      { slug: 'ballerina', name: 'Ballerina' },
+      { slug: 'wendys_x_wednesday', name: "Wendy's x Wednesday" },
+      { slug: 'batarang', name: 'Batarang' },
+      { slug: 'espn', name: 'ESPN' },
+      { slug: 'aespa_fanlight', name: 'aespa Fanlight' },
+      { slug: 'bing_bong', name: 'Bing Bong' },
+    ],
+  },
+  {
+    id: 'crossover_games',
+    label: 'Game Crossovers',
+    decorations: [
+      { slug: 'trick_pumpkin', name: 'Trick Pumpkin' },
+      { slug: 'treat_pumpkin', name: 'Treat Pumpkin' },
+      { slug: 'trick_spider', name: 'Trick Spider' },
+      { slug: 'treat_spider', name: 'Treat Spider' },
+      { slug: 'trick_skull', name: 'Trick Skull' },
+      { slug: 'treat_skull', name: 'Treat Skull' },
+      { slug: 'trick_ghost', name: 'Trick Ghost' },
+      { slug: 'treat_ghost', name: 'Treat Ghost' },
+      { slug: 'the_final_peel', name: 'The Final Peel' },
+      { slug: 'warframe_clem', name: 'Warframe Clem' },
+      { slug: 'dart_monkey', name: 'Dart Monkey' },
+      { slug: 'kom', name: 'KOM' },
+      { slug: 'mr_m', name: 'Mr. M' },
+      { slug: 'fc_26_icon', name: 'FC 26 Icon' },
+      { slug: 'skate', name: 'Skate' },
+      { slug: 'airona_fireworks', name: 'Airona Fireworks' },
+      { slug: 'champions_tactibear', name: 'Champions Tactibear' },
+      { slug: 'cab_monster', name: 'Cab Monster' },
+      { slug: 'atsus_mask', name: "Atsu's Mask" },
+      { slug: 'tactibear_flex', name: 'Tactibear Flex' },
+      { slug: 'angela_avatar', name: 'Angela Avatar' },
+      { slug: 'echo_4', name: 'Echo 4' },
+      { slug: 'nba_2k26', name: 'NBA 2K26' },
+      { slug: 'eye_of_prophesy', name: 'Eye of Prophesy' },
+      { slug: 'inzoi_psycat', name: 'inZOI Psycat' },
+      { slug: 'bf_soldier_helmet', name: 'BF Soldier Helmet' },
+      { slug: 'the_entity', name: 'The Entity' },
+      { slug: 'descendant', name: 'Descendant' },
+      { slug: 'sweet_tooth', name: 'Sweet Tooth' },
+      { slug: 'call_of_duty_mobile', name: 'Call of Duty: Mobile' },
+      { slug: 'thps_half_pipe', name: 'THPS Half Pipe' },
+      { slug: 'mecha_break', name: 'Mecha BREAK' },
+      { slug: 'valorant_summer_kickoff', name: 'VALORANT Summer Kickoff' },
+      { slug: 'palia', name: 'Palia' },
+      { slug: 'supercell', name: 'SuperCell' },
+      { slug: 'i_love_repo', name: 'I Love R.E.P.O.' },
+      { slug: 'lego_fortnite', name: 'LEGO® Fortnite' },
+      { slug: 'r6_siege_x_avatar', name: 'R6 Siege X Avatar' },
+      { slug: 'towerborne_play', name: 'Towerborne Play' },
+      { slug: 'starlight_revolver', name: 'Starlight Revolver' },
+      { slug: 'open_beta', name: 'Open Beta' },
+      { slug: 'fortnite_galactic_battle', name: 'Fortnite Galactic Battle' },
+      { slug: 'shield_saw', name: 'Shield Saw' },
+      { slug: 'friend_of_dex', name: 'Friend of Dex' },
+      { slug: 'hackclaw', name: 'Hackclaw' },
+      { slug: 'signal_from_tau_ceti', name: 'Signal from Tau Ceti' },
+      { slug: 'face_of_corruption', name: 'Face of Corruption' },
+      { slug: 'clicker', name: 'Clicker' },
+      { slug: 'gallica', name: 'Gallica' },
+      { slug: 'khazan', name: 'Khazan' },
+      { slug: 'split', name: 'Split' },
+      { slug: 'pathojen', name: 'Pathojen' },
+      { slug: 'big_dill_chain', name: 'Big Dill Chain' },
+      { slug: 'exoborne', name: 'Exoborne' },
+      { slug: 'scout', name: 'Scout' },
+      { slug: 'fortnite_boogie_bomb', name: 'Fortnite Boogie Bomb' },
+      { slug: 'fuchsia_agent', name: 'Fuchsia Agent' },
+      { slug: 'wingmans_got_it', name: "WINGMAN'S GOT IT" },
+      { slug: 'rec_room_lightning', name: 'Rec Room Lightning' },
+      { slug: 'shadow', name: 'Shadow' },
+      { slug: 'tga_controller', name: 'TGA Controller' },
+      { slug: 'wallach_spaceport', name: 'Wallach IX Spaceport' },
+      { slug: 'wolf_morph', name: 'Wolf Morph' },
+      { slug: 'street_fighter_6_battle_field', name: 'Street Fighter 6 Battle Field' },
+      { slug: 'torgal_puppy', name: 'Torgal Puppy' },
+      { slug: 'bunny', name: 'Bunny Mech' },
+      { slug: 'hailey', name: 'Hailey' },
+      { slug: 'los_santos', name: 'Los Santos' },
+      { slug: 'wingman_boba', name: 'Wingman Boba' },
+      { slug: 'freezer_bunny_lovebug', name: 'Freezer Bunny Lovebug' },
+      { slug: 'im_dancin', name: "I'm Dancin'!" },
+      { slug: 'finger_gun', name: 'Finger Gun' },
+      { slug: 'bandit_mask', name: 'Bandit Mask' },
+      { slug: 'mad_moxxi', name: 'Mad Moxxi' },
+      { slug: 'elpis', name: 'Elpis' },
+      { slug: 'loot_lightshow', name: 'Loot Lightshow' },
+      { slug: 'spirit_blossom_zed', name: 'Spirit Blossom Zed' },
+      { slug: 'spirit_blossom_springs_sett', name: 'Spirit Blossom Springs Sett' },
+      { slug: 'spirit_blossom_morgana', name: 'Spirit Blossom Morgana' },
+      { slug: 'spirit_blossom_karma', name: 'Spirit Blossom Karma' },
+      { slug: 'spirit_blossom_springs', name: 'Spirit Blossom Springs' },
+      { slug: 'spirit_blossom_springs_ahri', name: 'Spirit Blossom Springs Ahri' },
+      { slug: 'yunara', name: 'Yunara' },
+      { slug: 'gelatinous_cube_green', name: 'Green Gelatinous Cube' },
+      { slug: 'gelatinous_cube_blue', name: 'Blue Gelatinous Cube' },
+      { slug: 'spooky_cat_ears_midnight', name: 'Spooky Cat Ears (Midnight)' },
+      { slug: 'candlelight_dark', name: 'Dark Candlelight' },
+      { slug: 'zombie_food_purple', name: 'Zombie Food (Purple)' },
+      { slug: 'bloodthirsty_green', name: 'Bloodthirsty (Green)' },
+      { slug: 'ryu', name: 'Ryu' },
+      { slug: 'chun_li', name: 'Chun-Li' },
+      { slug: 'ken', name: 'Ken' },
+      { slug: 'akuma', name: 'Akuma' },
+      { slug: 'cammy', name: 'Cammy' },
+      { slug: 'guile', name: 'Guile' },
+      { slug: 'juri', name: 'Juri' },
+      { slug: 'm_bison', name: 'M. Bison' },
+      { slug: 'valorant_champions_2024', name: 'VALORANT Champions 2024' },
+      { slug: 'yoru_dimensional_drift', name: 'Yoru Dimensional Drift' },
+      { slug: 'viper_poison_cloud', name: 'Viper Poison Cloud' },
+      { slug: 'cypher_neural_theft', name: 'Cypher Neural Theft' },
+      { slug: 'omens_cowl', name: "Omen's Cowl" },
+      { slug: 'reynas_leer', name: "Reyna's Leer" },
+      { slug: 'frag_out', name: 'FRAG OUT' },
+      { slug: 'blade_storm', name: 'Blade Storm' },
+      { slug: 'chillet', name: 'Chillet' },
+      { slug: 'pal_sphere', name: 'Pal Sphere' },
+      { slug: 'lamball', name: 'Lamball' },
+    ],
+  },
 ];
 
 export const ALL_DECORATIONS: AvatarDecoration[] = DECORATION_CATEGORIES.flatMap(
@@ -204,3 +846,14 @@ export function isValidDecorationSlug(slug: string): boolean {
 export function decorationUrl(slug: string): string {
   return `${RESOLVED_DECORATION_CDN}/${slug}.png`;
 }
+
+/**
+ * Small static WebP preview (first busy frame, 144px) for the picker. The full
+ * decorations are ~1 MB animated PNGs, so the picker shows these and only
+ * loads `decorationUrl` on hover/focus/selection. Built by
+ * scripts/makeDecorationThumbs.py; callers fall back to `decorationUrl` if a
+ * thumbnail is missing.
+ */
+export function decorationThumbUrl(slug: string): string {
+  return `${RESOLVED_DECORATION_CDN}/thumbs/${slug}.webp`;
+}

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

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

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

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

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

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

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

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

src/app/features/outbox/OutboxFeature.tsx

@@ -0,0 +1,268 @@
+import { useSetAtom } from 'jotai';
+import { useEffect } from 'react';
+import {
+  ClientEvent,
+  ClientEventHandlerMap,
+  ConnectionError,
+  EventStatus,
+  KnownMembership,
+  MatrixClient,
+  MatrixError,
+  MatrixEvent,
+  Room,
+  RoomEvent,
+  RoomEventHandlerMap,
+  SyncState,
+} from 'matrix-js-sdk';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { sendOfflineAtom } from '../../state/sendOffline';
+import {
+  OUTBOX_MAX_AUTO_RETRIES,
+  OutboxEntry,
+  isRetryableSendError,
+  loadOutbox,
+  outboxRetryDelayMs,
+  planRestore,
+  saveOutbox,
+  shouldKeepInOutbox,
+  withEntry,
+  withoutEntry,
+} from '../../utils/outbox';
+
+const PENDING: ReadonlySet<EventStatus | null> = new Set([
+  EventStatus.SENDING,
+  EventStatus.ENCRYPTING,
+  EventStatus.QUEUED,
+  EventStatus.NOT_SENT,
+]);
+const ONLINE: ReadonlySet<SyncState | null> = new Set([
+  SyncState.Prepared,
+  SyncState.Syncing,
+  SyncState.Catchup,
+]);
+const OFFLINE: ReadonlySet<SyncState | null> = new Set([SyncState.Reconnecting, SyncState.Error]);
+
+/** The server already has it: its transaction id came back down /sync. */
+const isDelivered = (room: Room, txnId: string): boolean => {
+  const hasTxn = (events: MatrixEvent[]) =>
+    events.some((e) => e.getUnsigned().transaction_id === txnId);
+  return (
+    hasTxn(room.getLiveTimeline().getEvents()) ||
+    room.getThreads().some((t) => hasTxn(t.liveTimeline.getEvents()))
+  );
+};
+
+type OutboxSession = {
+  /** Own pending events of this session, by txnId. */
+  live: Map<string, { event: MatrixEvent; room: Room }>;
+  autoRetries: Map<string, number>;
+  restored: boolean;
+  retrying: boolean;
+};
+
+// Per client, not per mount: a remount must neither restore twice nor forget
+// the events it is tracking.
+const sessions = new WeakMap<MatrixClient, OutboxSession>();
+const getSession = (mx: MatrixClient): OutboxSession => {
+  let session = sessions.get(mx);
+  if (!session) {
+    session = { live: new Map(), autoRetries: new Map(), restored: false, retrying: false };
+    sessions.set(mx, session);
+  }
+  return session;
+};
+
+/**
+ * [Gitea #112] Offline outbox (see utils/outbox.ts): mirrors own message sends
+ * into localStorage until the server confirms them, puts unsent ones back
+ * after a reload, and re-sends network failures when the connection returns.
+ */
+export function OutboxFeature() {
+  const mx = useMatrixClient();
+  const setOffline = useSetAtom(sendOfflineAtom);
+
+  useEffect(() => {
+    const userId = mx.getSafeUserId();
+    let entries = loadOutbox(userId);
+    const session = getSession(mx);
+    const { live, autoRetries } = session;
+    let disposed = false;
+    let offlineNow = false;
+    const timers = new Set<ReturnType<typeof setTimeout>>();
+
+    const isOffline = () =>
+      OFFLINE.has(mx.getSyncState()) ||
+      (typeof navigator !== 'undefined' && navigator.onLine === false);
+
+    const persist = (next: OutboxEntry[]) => {
+      if (next === entries) return;
+      entries = next;
+      saveOutbox(userId, entries);
+    };
+
+    /**
+     * A network failure while we think we're online (a blip neither sync nor
+     * the browser noticed): try again shortly, backing off. Real outages are
+     * handled by the reconnect / back-online triggers below.
+     */
+    const scheduleBlipRetry = (event: MatrixEvent) => {
+      const attempts = autoRetries.get(event.getTxnId() ?? '') ?? 0;
+      if (!isRetryableSendError(event.error) || attempts >= OUTBOX_MAX_AUTO_RETRIES || isOffline())
+        return;
+      const timer = setTimeout(() => {
+        timers.delete(timer);
+        retryQueued();
+      }, outboxRetryDelayMs(attempts));
+      timers.add(timer);
+    };
+
+    const onLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (event, room) => {
+      const txnId = event.getTxnId();
+      if (!txnId || event.getSender() !== userId) return;
+      if (PENDING.has(event.status)) {
+        if (!shouldKeepInOutbox(event.getType(), event.getContent())) return;
+        live.set(txnId, { event, room });
+        if (event.status === EventStatus.NOT_SENT) scheduleBlipRetry(event);
+        persist(
+          withEntry(entries, {
+            txnId,
+            roomId: room.roomId,
+            threadId: event.threadRootId ?? null,
+            type: event.getType(),
+            content: event.getContent(),
+            ts: event.getTs(),
+          }),
+        );
+        return;
+      }
+      // SENT, CANCELLED, or the remote echo replaced it (status null).
+      live.delete(txnId);
+      autoRetries.delete(txnId);
+      persist(withoutEntry(entries, txnId));
+    };
+
+    /** Re-send network failures, oldest first; a room stops at its first failure. */
+    const retryQueued = async () => {
+      if (session.retrying || disposed) return;
+      session.retrying = true;
+      try {
+        const byRoom = new Map<Room, MatrixEvent[]>();
+        Array.from(live.values())
+          .filter(
+            ({ event }) =>
+              event.status === EventStatus.NOT_SENT &&
+              isRetryableSendError(event.error) &&
+              (autoRetries.get(event.getTxnId() ?? '') ?? 0) < OUTBOX_MAX_AUTO_RETRIES,
+          )
+          .sort((a, b) => a.event.getTs() - b.event.getTs())
+          .forEach(({ event, room }) => {
+            byRoom.set(room, [...(byRoom.get(room) ?? []), event]);
+          });
+        await Promise.all(
+          Array.from(byRoom.entries()).map(async ([room, events]) => {
+            for (const event of events) {
+              if (disposed || event.status !== EventStatus.NOT_SENT) continue;
+              const txnId = event.getTxnId() ?? '';
+              autoRetries.set(txnId, (autoRetries.get(txnId) ?? 0) + 1);
+              try {
+                // eslint-disable-next-line no-await-in-loop
+                await mx.resendEvent(event, room);
+              } catch (e) {
+                // Still offline: keep the rest of this room in order for the next try.
+                if (isRetryableSendError(e)) break;
+              }
+            }
+          }),
+        );
+      } finally {
+        session.retrying = false;
+      }
+    };
+
+    const restore = () => {
+      if (session.restored) return;
+      session.restored = true;
+      const plan = planRestore(
+        entries,
+        Date.now(),
+        (roomId) => mx.getRoom(roomId)?.getMyMembership() === KnownMembership.Join,
+        (entry) => {
+          const room = mx.getRoom(entry.roomId);
+          return !!room && isDelivered(room, entry.txnId);
+        },
+      );
+      plan.drop.forEach((entry) => persist(withoutEntry(entries, entry.txnId)));
+      plan.restore.forEach((entry) => {
+        const room = mx.getRoom(entry.roomId);
+        if (!room || live.has(entry.txnId)) return;
+        // Same shape as the SDK's own local echo (client.sendCompleteEvent).
+        const event = new MatrixEvent({
+          type: entry.type,
+          content: entry.content,
+          event_id: `~${entry.roomId}:${entry.txnId}`,
+          sender: userId,
+          room_id: entry.roomId,
+          origin_server_ts: entry.ts,
+        });
+        const thread = entry.threadId ? room.getThread(entry.threadId) : undefined;
+        if (thread) event.setThread(thread);
+        event.setTxnId(entry.txnId);
+        event.setStatus(EventStatus.NOT_SENT);
+        if (plan.autoSend.has(entry.txnId)) {
+          // Recent: treat like a send that lost the network (shown as Queued
+          // while offline, re-sent below and on reconnect).
+          // (The SDK types `error` as MatrixError but stores any send error there.)
+          event.error = new ConnectionError(
+            'not sent before the app was closed',
+          ) as unknown as MatrixError;
+        } else {
+          // Old: back as "Failed to send"; the user decides (Retry / Cancel).
+          autoRetries.set(entry.txnId, OUTBOX_MAX_AUTO_RETRIES);
+        }
+        try {
+          room.addPendingEvent(event, entry.txnId); // emits LocalEchoUpdated → `live`
+        } catch {
+          // Already pending under this txnId: nothing to restore.
+        }
+      });
+      if (!isOffline()) retryQueued();
+    };
+
+    const updateOffline = () => {
+      const offline = isOffline();
+      // Back online (sync recovered or the browser says so): send what's queued.
+      if (offlineNow && !offline && session.restored) retryQueued();
+      offlineNow = offline;
+      setOffline(offline);
+    };
+
+    const onSync: ClientEventHandlerMap[ClientEvent.Sync] = (state, prevState) => {
+      updateOffline();
+      if (!ONLINE.has(state)) return;
+      if (!session.restored) {
+        restore();
+        return;
+      }
+      if (OFFLINE.has(prevState) || prevState === SyncState.Catchup) retryQueued();
+    };
+    const onBrowserOnline = () => updateOffline();
+
+    mx.on(RoomEvent.LocalEchoUpdated, onLocalEcho);
+    mx.on(ClientEvent.Sync, onSync);
+    window.addEventListener('online', onBrowserOnline);
+    window.addEventListener('offline', onBrowserOnline);
+    updateOffline();
+    if (ONLINE.has(mx.getSyncState())) restore();
+
+    return () => {
+      disposed = true;
+      timers.forEach((t) => clearTimeout(t));
+      mx.off(RoomEvent.LocalEchoUpdated, onLocalEcho);
+      mx.off(ClientEvent.Sync, onSync);
+      window.removeEventListener('online', onBrowserOnline);
+      window.removeEventListener('offline', onBrowserOnline);
+    };
+  }, [mx, setOffline]);
+
+  return null;
+}

src/app/features/room/CommandAutocomplete.tsx

@@ -14,6 +14,7 @@ import { UseAsyncSearchOptions, useAsyncSearch } from '../../hooks/useAsyncSearc
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { onTabPress } from '../../utils/keyboard';
+import { useAutocompleteEnter } from '../../hooks/useAutocompleteEnter';
 
 type CommandAutoCompleteHandler = (commandName: string) => void;
 
@@ -60,15 +61,14 @@ export function CommandAutocomplete({
     requestClose();
   };
 
-  useKeyDown(window, (evt: KeyboardEvent) => {
-    onTabPress(evt, () => {
-      if (autoCompleteNames.length === 0) {
-        return;
-      }
-      const cmdName = autoCompleteNames[0];
-      handleAutocomplete(cmdName);
-    });
-  });
+  const pickTop = () => {
+    if (autoCompleteNames.length === 0) return;
+    handleAutocomplete(autoCompleteNames[0]);
+  };
+
+  useKeyDown(window, (evt: KeyboardEvent) => onTabPress(evt, pickTop));
+  // Only while suggestions show: with no match Enter must still send.
+  useAutocompleteEnter(autoCompleteNames.length > 0, pickTop);
 
   return autoCompleteNames.length === 0 ? null : (
     <AutocompleteMenu

src/app/features/room/ComposerErrorBoundary.tsx

@@ -0,0 +1,124 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
+import { Box, Button, Text, config } from 'folds';
+import { Editor, Transforms } from 'slate';
+import { RoomInputPlaceholder } from './RoomInputPlaceholder';
+import { copyToClipboard } from '../../utils/dom';
+
+/** Two failures within this window show the notice instead of recovering again. */
+const SILENT_RETRY_WINDOW_MS = 5000;
+
+type CapturedError = { message: string; details: string };
+
+/**
+ * Error boundary around a message composer.
+ *
+ * The composer's known failure mode is a transient render error right after an
+ * autocomplete insert (slate-react's DOM selection sync racing the model), and
+ * the draft is intact when it happens. So the first failure recovers silently:
+ * the selection is cleared and the composer remounts with the same content.
+ * Only a second failure within a few seconds shows the notice, which offers
+ * "Reload composer" and "Copy details" (the error and component stack), so the
+ * underlying bug can be diagnosed. Every failure is also logged to the console.
+ */
+export function ComposerErrorBoundary({
+  editor,
+  children,
+}: {
+  editor: Editor;
+  children: ReactNode;
+}) {
+  const lastSilentReset = useRef(0);
+  const captured = useRef<CapturedError | undefined>(undefined);
+
+  const clearSelection = () => {
+    try {
+      Transforms.deselect(editor);
+    } catch {
+      /* editor already in a safe state */
+    }
+  };
+
+  return (
+    <ErrorBoundary
+      onReset={clearSelection}
+      onError={(error, info) => {
+        const message = error instanceof Error ? error.message : String(error);
+        const details = [
+          `When: ${new Date().toISOString()}`,
+          `Error: ${error instanceof Error ? `${error.name}: ${message}` : message}`,
+          error instanceof Error && error.stack ? `Stack:\n${error.stack}` : '',
+          info.componentStack ? `Component stack:${info.componentStack}` : '',
+          `Browser: ${navigator.userAgent}`,
+        ]
+          .filter(Boolean)
+          .join('\n');
+        captured.current = { message, details };
+
+        console.error('[composer] render error (draft kept):', error, info.componentStack);
+      }}
+      fallbackRender={(props) => (
+        <ComposerFallback
+          {...props}
+          captured={captured.current}
+          lastSilentReset={lastSilentReset}
+        />
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
+
+function ComposerFallback({
+  resetErrorBoundary,
+  captured,
+  lastSilentReset,
+}: FallbackProps & {
+  captured?: CapturedError;
+  lastSilentReset: React.MutableRefObject<number>;
+}) {
+  const silent = Date.now() - lastSilentReset.current > SILENT_RETRY_WINDOW_MS;
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!silent) return;
+    lastSilentReset.current = Date.now();
+    resetErrorBoundary();
+  }, [silent, resetErrorBoundary, lastSilentReset]);
+
+  if (silent) return null;
+  return (
+    <RoomInputPlaceholder
+      role="alert"
+      style={{ padding: config.space.S200 }}
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="200"
+    >
+      <Text align="Center">
+        The message composer hit a snag. Your draft is safe — reload the composer to keep typing.
+      </Text>
+      <Box gap="200" justifyContent="Center" wrap="Wrap">
+        <Button size="300" variant="Secondary" fill="Soft" radii="300" onClick={resetErrorBoundary}>
+          <Text size="B300">Reload composer</Text>
+        </Button>
+        {captured && (
+          <Button
+            size="300"
+            variant="Secondary"
+            fill="None"
+            radii="300"
+            onClick={() => {
+              copyToClipboard(captured.details);
+              setCopied(true);
+            }}
+          >
+            <Text size="B300">{copied ? 'Copied' : 'Copy details'}</Text>
+          </Button>
+        )}
+      </Box>
+    </RoomInputPlaceholder>
+  );
+}

src/app/features/room/MediaGallery.tsx

@@ -41,6 +41,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import * as css from './MediaGallery.css';
 import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { formatRelativeAge } from '../../utils/formatTimestamp';
+import { canCopyImage, copyImageFromUrl } from '../../utils/copyImage';
 
 type GalleryTab = 'image' | 'video' | 'file' | 'audio';
 
@@ -160,6 +161,7 @@ function LightboxMedia({
   onMouseDown,
   onTouchStart,
   onImageDoubleClick,
+  onUrl,
 }: {
   item: LightboxItem;
   useAuthentication: boolean;
@@ -169,6 +171,7 @@ function LightboxMedia({
   onMouseDown: React.MouseEventHandler<HTMLElement>;
   onTouchStart: React.TouchEventHandler<HTMLElement>;
   onImageDoubleClick: () => void;
+  onUrl: (url: string | undefined) => void;
 }) {
   const mx = useMatrixClient();
   const media = useDecryptedMediaUrl(
@@ -178,6 +181,11 @@ function LightboxMedia({
     useAuthentication,
     item.mimeType,
   );
+  const readyUrl = media.status === 'ok' ? media.url : undefined;
+  useEffect(() => {
+    onUrl(readyUrl);
+    return () => onUrl(undefined);
+  }, [readyUrl, onUrl]);
 
   return (
     <Box
@@ -292,6 +300,24 @@ export function Lightbox({
   );
   const toggleZoom = useCallback(() => setZoom((z) => (z === 1 ? 2 : 1)), [setZoom]);
 
+  // [Gitea #164] Copy image. No "open in new tab": an E2EE image is a blob URL
+  // revoked when the viewer closes, and authenticated media 401s in a bare tab.
+  const [mediaUrl, setMediaUrl] = useState<string>();
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');
+  useEffect(() => {
+    if (copyState === 'idle') return undefined;
+    const t = window.setTimeout(() => setCopyState('idle'), 2000);
+    return () => window.clearTimeout(t);
+  }, [copyState]);
+  useEffect(() => setCopyState('idle'), [index]);
+  const handleCopyImage = useCallback(() => {
+    if (!mediaUrl) return;
+    copyImageFromUrl(mediaUrl).then(
+      () => setCopyState('copied'),
+      () => setCopyState('failed'),
+    );
+  }, [mediaUrl]);
+
   // Reset zoom when navigating to another item (and thus pan, via usePan).
   useEffect(() => {
     setZoom(1);
@@ -409,6 +435,40 @@ export function Lightbox({
                 </IconButton>
               </Box>
             )}
+            {isImage && canCopyImage() && (
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>
+                      {copyState === 'copied' && 'Copied'}
+                      {copyState === 'failed' && 'Could not copy image'}
+                      {copyState === 'idle' && 'Copy image'}
+                    </Text>
+                  </Tooltip>
+                }
+              >
+                {(ref) => (
+                  <IconButton
+                    ref={ref}
+                    variant="Surface"
+                    aria-label={copyState === 'copied' ? 'Image copied' : 'Copy image'}
+                    onClick={handleCopyImage}
+                    disabled={!mediaUrl}
+                  >
+                    <Icon
+                      src={
+                        (copyState === 'copied' && Icons.Check) ||
+                        (copyState === 'failed' && Icons.Warning) ||
+                        Icons.Photo
+                      }
+                    />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            )}
             {item.mxcUrl && (
               <TooltipProvider
                 position="Bottom"
@@ -512,6 +572,7 @@ export function Lightbox({
                 onMouseDown={onMouseDown}
                 onTouchStart={onTouchStart}
                 onImageDoubleClick={toggleZoom}
+                onUrl={setMediaUrl}
               />
             </Box>
             {index < items.length - 1 && (

src/app/features/room/RoomTimeline.tsx

@@ -108,7 +108,7 @@ import {
   getIntersectionObserverEntry,
   useIntersectionObserver,
 } from '../../hooks/useIntersectionObserver';
-import { markAsRead } from '../../utils/notifications';
+import { markAsRead, MarkAsReadOptions } from '../../utils/notifications';
 import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
@@ -505,6 +505,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const setActiveThreadId = useSetAtom(roomIdToActiveThreadIdAtomFamily(room.roomId));
+  // [Gitea #217] Reads from just viewing the timeline are passive: threads the
+  // user follows stay unread, and the open thread panel sends its own receipts.
+  const activeThreadId = useAtomValue(roomIdToActiveThreadIdAtomFamily(room.roomId));
+  const passiveReadRef = useRef<MarkAsReadOptions>({ passive: true });
+  passiveReadRef.current = { passive: true, openThreadId: activeThreadId ?? undefined };
   // Thread summary chips only mount for events that already carry thread data
   // (perf: a chip subscribes room-level listeners, so mounting one per rendered
   // message would exceed the SDK's emitter cap). This single room-level
@@ -707,7 +712,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             // and either there are no unread messages or the latest message is from the current user.
             // If either condition is met, trigger the markAsRead function to send a read receipt.
             const _roomId = mEvt.getRoomId();
-            if (_roomId) requestAnimationFrame(() => markAsRead(mx, _roomId, hideActivity));
+            if (_roomId)
+              requestAnimationFrame(() =>
+                markAsRead(mx, _roomId, hideActivity, passiveReadRef.current),
+              );
           }
 
           if (!document.hasFocus() && !unreadInfo) {
@@ -829,13 +837,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const tryAutoMarkAsRead = useCallback(() => {
     const readUptoEventId = readUptoEventIdRef.current;
     if (!readUptoEventId) {
-      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
+      requestAnimationFrame(() =>
+        markAsRead(mx, room.roomId, hideActivity, passiveReadRef.current),
+      );
       return;
     }
     const evtTimeline = getEventTimeline(room, readUptoEventId);
     const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
     if (latestTimeline === room.getLiveTimeline()) {
-      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
+      requestAnimationFrame(() =>
+        markAsRead(mx, room.roomId, hideActivity, passiveReadRef.current),
+      );
     }
   }, [mx, room, hideActivity]);
 

src/app/features/room/RoomView.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Box, Button, Text, config } from 'folds';
+import { Box, Text, config } from 'folds';
 import { EventType } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
-import { Transforms } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { StateEvent } from '../../../types/matrix/room';
@@ -15,6 +14,7 @@ import { RoomTimeline } from './RoomTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
+import { ComposerErrorBoundary } from './ComposerErrorBoundary';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
 import { useSetting } from '../../state/hooks/settings';
@@ -162,40 +162,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
           ) : (
             <>
               {canMessage && (
-                <ErrorBoundary
-                  onReset={() => {
-                    // The composer crash is a transient bad-selection render
-                    // (e.g. after an autocomplete insert); the draft content is
-                    // intact. Clear the selection so the remounted composer can
-                    // render — the user clicks in to continue, no page refresh.
-                    try {
-                      Transforms.deselect(editor);
-                    } catch {
-                      /* editor already in a safe state */
-                    }
-                  }}
-                  fallbackRender={({ resetErrorBoundary }) => (
-                    <RoomInputPlaceholder
-                      role="alert"
-                      style={{ padding: config.space.S200 }}
-                      direction="Column"
-                      alignItems="Center"
-                      justifyContent="Center"
-                      gap="200"
-                    >
-                      <Text align="Center">The message composer hit a snag.</Text>
-                      <Button
-                        size="300"
-                        variant="Secondary"
-                        fill="Soft"
-                        radii="300"
-                        onClick={resetErrorBoundary}
-                      >
-                        <Text size="B300">Reload composer</Text>
-                      </Button>
-                    </RoomInputPlaceholder>
-                  )}
-                >
+                <ComposerErrorBoundary editor={editor}>
                   <RoomInput
                     room={room}
                     editor={editor}
@@ -203,7 +170,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
                     fileDropContainerRef={roomViewRef}
                     ref={roomInputRef}
                   />
-                </ErrorBoundary>
+                </ComposerErrorBoundary>
               )}
               {!canMessage && (
                 <RoomInputPlaceholder

src/app/features/room/RoomViewHeader.tsx

@@ -80,6 +80,7 @@ import { widgetsPanelAtom } from '../../state/widgetsPanel';
 import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { threadsListAtom } from '../../state/threadsList';
 import { usePendingKnocks } from '../../hooks/usePendingKnocks';
+import { openCallInBrowser, useCallInBrowserUrl } from '../call/CallsUnavailable';
 import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
 
 type RoomMenuProps = {
@@ -465,6 +466,36 @@ function CallRulesChip({ room }: { room: Room }) {
   );
 }
 
+/**
+ * [cinny-desktop: Linux calls] Stand-in for CallButton where this app can't
+ * make calls (desktop on WebKitGTK): opens the room in the web app instead.
+ */
+function CallInBrowserButton({ url }: { url: string }) {
+  return (
+    <TooltipProvider
+      position="Bottom"
+      offset={4}
+      tooltip={
+        <Tooltip>
+          <Text>Call in your browser (this desktop app can’t make calls here)</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <IconButton
+          variant="Surface"
+          fill="None"
+          ref={triggerRef}
+          aria-label="Start call in browser"
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Icon size="400" src={Icons.VideoCamera} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
 function CallButton() {
   const room = useRoom();
   const direct = useIsDirectRoom();
@@ -555,6 +586,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   );
   const livekitSupported = useLivekitSupport();
   const rtcSupported = webRTCSupported();
+  const callInBrowserUrl = useCallInBrowserUrl(room.roomId);
 
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
@@ -782,11 +814,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
             {screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
             {!room.isCallRoom() &&
               livekitSupported &&
-              rtcSupported &&
+              (rtcSupported || callInBrowserUrl) &&
               hasCallPermission &&
               (direct ||
                 (room.getJoinRule() === 'invite' &&
-                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) && <CallButton />}
+                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) &&
+              (rtcSupported ? (
+                <CallButton />
+              ) : (
+                callInBrowserUrl && <CallInBrowserButton url={callInBrowserUrl} />
+              ))}
             {screenSize === ScreenSize.Desktop && (
               <TooltipProvider
                 position="Bottom"

src/app/features/room/message/Message.tsx

@@ -26,6 +26,7 @@ import {
   config,
 } from 'folds';
 import React, {
+  CSSProperties,
   FormEventHandler,
   MouseEventHandler,
   ReactNode,
@@ -38,7 +39,7 @@ import { useHover, useFocusWithin } from 'react-aria';
 import { MatrixEvent, Room, EventStatus } from 'matrix-js-sdk';
 import { Relations } from 'matrix-js-sdk/lib/models/relations';
 import classNames from 'classnames';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import {
   AvatarBase,
@@ -83,8 +84,6 @@ import { copyToClipboard } from '../../../utils/dom';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getLotusRoomPermalink } from '../../../plugins/lotus-permalink';
-import { getOriginBaseUrl } from '../../../pages/pathUtils';
-import { useClientConfig } from '../../../hooks/useClientConfig';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
@@ -98,28 +97,41 @@ import { useLongPress } from '../../../hooks/useLongPress';
 import { ActionSheet } from '../../../components/action-sheet';
 import { useBookmarks } from '../../../hooks/useBookmarks';
 import { PresenceRingAvatar } from '../../../components/presence';
+import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
 import { AvatarDecoration } from '../../../components/avatar-decoration/AvatarDecoration';
+import { sendOfflineAtom } from '../../../state/sendOffline';
+import { isRetryableSendError } from '../../../utils/outbox';
 
 // Delivery status indicator for own messages
 function DeliveryStatus({
-  status,
+  mEvent,
+  room,
   lotusTerminal,
 }: {
-  status: string | null;
+  mEvent: MatrixEvent;
+  room: Room;
   lotusTerminal: boolean;
 }) {
+  const mx = useMatrixClient();
+  const offline = useAtomValue(sendOfflineAtom);
+  const { status } = mEvent;
   if (status === null) return null; // confirmed by server — read receipts take over
   let iconSrc: IconSrc;
   let label: string;
   let colorStyle: string;
   const isSending = status === EventStatus.SENDING || status === EventStatus.ENCRYPTING;
-  if (status === EventStatus.NOT_SENT || status === EventStatus.CANCELLED) {
+  // [Gitea #112] A network failure while offline is queued, not failed: the
+  // outbox sends it again when the connection is back.
+  const queued = status === EventStatus.NOT_SENT && offline && isRetryableSendError(mEvent.error);
+  const failed = !queued && (status === EventStatus.NOT_SENT || status === EventStatus.CANCELLED);
+  if (failed) {
     iconSrc = Icons.Cross;
-    label = 'Failed to send';
+    label = status === EventStatus.NOT_SENT ? 'Failed to send. Click to retry' : 'Failed to send';
     colorStyle = lotusTerminal ? 'var(--lt-accent-red)' : color.Critical.Main;
-  } else if (status === EventStatus.QUEUED || isSending) {
-    iconSrc = Icons.Send;
-    label = isSending ? 'Sending...' : 'Queued';
+  } else if (queued || status === EventStatus.QUEUED || isSending) {
+    iconSrc = queued ? Icons.RecentClock : Icons.Send;
+    if (queued) label = "Queued. Will send when you're back online";
+    else label = isSending ? 'Sending...' : 'Queued';
     colorStyle = lotusTerminal
       ? 'color-mix(in srgb, var(--lt-accent-cyan) 60%, transparent)'
       : color.Secondary.Main;
@@ -130,27 +142,49 @@ function DeliveryStatus({
       ? 'color-mix(in srgb, var(--lt-accent-cyan) 70%, transparent)'
       : color.Secondary.Main;
   }
+  const retryable = failed && status === EventStatus.NOT_SENT;
+  const handleRetry: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    evt.stopPropagation();
+    if (mEvent.status === EventStatus.NOT_SENT) mx.resendEvent(mEvent, room).catch(() => undefined);
+  };
+  const style: CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    marginTop: '2px',
+    lineHeight: 1,
+    color: colorStyle,
+    opacity: 0.85,
+    userSelect: 'none',
+    ...(lotusTerminal && failed ? { textShadow: 'var(--lt-glow-red)' } : {}),
+  };
+  const icon = (
+    <span className={isSending ? SendingSpinClass : undefined}>
+      <Icon size="100" src={iconSrc} />
+    </span>
+  );
+  if (retryable) {
+    return (
+      <button
+        type="button"
+        onClick={handleRetry}
+        aria-label={label}
+        title={label}
+        style={{
+          ...style,
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+          font: 'inherit',
+        }}
+      >
+        {icon}
+      </button>
+    );
+  }
   return (
-    <Box
-      as="span"
-      aria-label={label}
-      title={label}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        marginTop: '2px',
-        lineHeight: 1,
-        color: colorStyle,
-        opacity: 0.85,
-        userSelect: 'none',
-        ...(lotusTerminal && status === EventStatus.NOT_SENT
-          ? { textShadow: 'var(--lt-glow-red)' }
-          : {}),
-      }}
-    >
-      <span className={isSending ? SendingSpinClass : undefined}>
-        <Icon size="100" src={iconSrc} />
-      </span>
+    <Box as="span" aria-label={label} title={label} style={style}>
+      {icon}
     </Box>
   );
 }
@@ -460,18 +494,11 @@ export const MessageCopyLotusLinkItem = as<
     onClose?: () => void;
   }
 >(({ room, mEvent, onClose, ...props }, ref) => {
-  const { hashRouter } = useClientConfig();
+  const lotusBase = useLotusShareBase();
   const handleCopy = () => {
     const eventId = mEvent.getId();
     if (!eventId) return;
-    copyToClipboard(
-      getLotusRoomPermalink(
-        getOriginBaseUrl(hashRouter),
-        room.roomId,
-        eventId,
-        getViaServers(room),
-      ),
-    );
+    copyToClipboard(getLotusRoomPermalink(lotusBase, room.roomId, eventId, getViaServers(room)));
     onClose?.();
   };
 
@@ -1110,7 +1137,7 @@ export const Message = React.memo(
             />
           )}
           {isMine && !mEvent.isState() && readReceiptUsers.length === 0 && (
-            <DeliveryStatus status={mEvent.status} lotusTerminal={!!lotusTerminal} />
+            <DeliveryStatus mEvent={mEvent} room={room} lotusTerminal={!!lotusTerminal} />
           )}
         </Box>
       );

src/app/features/room/message/Reactions.tsx

@@ -23,7 +23,7 @@ import { Room } from 'matrix-js-sdk';
 import { type Relations } from 'matrix-js-sdk/lib/models/relations';
 import FocusTrap from 'focus-trap-react';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { factoryEventSentBy } from '../../../utils/matrix';
+import { eventWithShortcode, factoryEventSentBy } from '../../../utils/matrix';
 import { Reaction, ReactionTooltipMsg } from '../../../components/message';
 import { useRelations } from '../../../hooks/useRelations';
 import * as css from './styles.css';
@@ -138,6 +138,7 @@ export const Reactions = as<'div', ReactionsProps>(
               key={key}
               mx={mx}
               reaction={key}
+              shortcode={rEvents.find(eventWithShortcode)?.getContent().shortcode}
               count={events.size}
               onClick={canSendReaction ? () => onReactionToggle(mEventId, key) : undefined}
               onContextMenu={handleViewReaction}

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -107,6 +107,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                     key={key}
                     mx={mx}
                     reaction={key}
+                    shortcode={Array.from(evts).find(eventWithShortcode)?.getContent().shortcode}
                     count={evts.size}
                     role="option"
                     aria-selected={key === selectedKey}

src/app/features/room/thread/ThreadPanel.tsx

@@ -23,6 +23,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { RoomInput } from '../RoomInput';
+import { ComposerErrorBoundary } from '../ComposerErrorBoundary';
 import {
   getThreadNotificationModeIcon,
   ThreadNotificationModeSwitcher,
@@ -204,15 +205,17 @@ export function ThreadPanel({ room, threadId, requestClose }: ThreadPanelProps)
             <ThreadTimeline room={room} thread={thread} editor={editor} />
           </Box>
           <Box className={css.ThreadPanelInput} shrink="No" direction="Column">
-            <RoomInput
-              room={room}
-              roomId={room.roomId}
-              threadRootId={threadId}
-              editor={editor}
-              editableName="ThreadInput"
-              fileDropContainerRef={fileDropContainerRef}
-              compactLayout
-            />
+            <ComposerErrorBoundary editor={editor}>
+              <RoomInput
+                room={room}
+                roomId={room.roomId}
+                threadRootId={threadId}
+                editor={editor}
+                editableName="ThreadInput"
+                fileDropContainerRef={fileDropContainerRef}
+                compactLayout
+              />
+            </ComposerErrorBoundary>
           </Box>
         </>
       )}

src/app/features/room/thread/ThreadTimeline.tsx

@@ -33,6 +33,8 @@ import { Badge, Box, Chip, Icon, Icons, Line, Scroll, Spinner, Text, color, conf
 import classNames from 'classnames';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { isKeyHotkey } from 'is-hotkey';
+import { isRetryableSendError } from '../../../utils/outbox';
+import { sendOfflineAtom } from '../../../state/sendOffline';
 import { eventWithShortcode, factoryEventSentBy } from '../../../utils/matrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useVirtualPaginator, ItemRange } from '../../../hooks/useVirtualPaginator';
@@ -73,7 +75,7 @@ import { useSetting } from '../../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../../state/settings';
 import { Message, Reactions, EncryptedContent } from '../message';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
-import { RoomMediaLightbox } from '../RoomMediaLightbox';
+import { Lightbox, toLightboxItems } from '../MediaGallery';
 import { Image } from '../../../components/media';
 import { ImageViewer } from '../../../components/image-viewer';
 import * as css from './ThreadTimeline.css';
@@ -253,6 +255,7 @@ export type ThreadTimelineProps = {
 
 export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
   const mx = useMatrixClient();
+  const sendOffline = useAtomValue(sendOfflineAtom);
   const alive = useAlive();
   const useAuthentication = useMediaAuthentication();
 
@@ -308,7 +311,7 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
 
   const [editId, setEditId] = useState<string>();
   const [editHistoryEvent, setEditHistoryEvent] = useState<MatrixEvent | undefined>();
-  // [Gitea #219] Thread images open the room's shared media lightbox too.
+  // [Gitea #219] Thread images open the shared media lightbox too.
   const [lightboxEventId, setLightboxEventId] = useState<string | undefined>();
 
   const linkifyOpts = useMemo<LinkifyOpts>(
@@ -627,11 +630,9 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
     ),
   );
 
-  const handleOpenReply: MouseEventHandler = useCallback(
-    (evt) => {
-      const targetId = evt.currentTarget.getAttribute('data-event-id');
-      if (!targetId) return;
-      // best-effort: scroll to referenced event if it is inside the loaded thread window
+  // best-effort: scroll to an event if it is inside the loaded thread window
+  const scrollToThreadEvent = useCallback(
+    (targetId: string) => {
       let absIndex = -1;
       let acc = 0;
       timeline.linkedTimelines.some((tl) => {
@@ -654,6 +655,39 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
     [timeline.linkedTimelines, scrollToItem],
   );
 
+  const handleOpenReply: MouseEventHandler = useCallback(
+    (evt) => {
+      const targetId = evt.currentTarget.getAttribute('data-event-id');
+      if (targetId) scrollToThreadEvent(targetId);
+    },
+    [scrollToThreadEvent],
+  );
+
+  // [Gitea #164] The viewer steps through this thread's media (root + loaded
+  // replies). Thread replies never reach the room's media timeline, so the
+  // room lightbox could only ever show a thread image as "1 / 1".
+  const lightboxItems = useMemo(() => {
+    if (!lightboxEventId) return [];
+    const seen = new Set<string>();
+    const events = [thread.rootEvent, ...timeline.linkedTimelines.flatMap((tl) => tl.getEvents())]
+      .filter((ev): ev is MatrixEvent => !!ev)
+      .filter((ev) => {
+        const id = ev.getId();
+        if (!id || seen.has(id) || ev.isRedacted()) return false;
+        seen.add(id);
+        return true;
+      });
+    return toLightboxItems(room, events);
+  }, [lightboxEventId, thread.rootEvent, timeline.linkedTimelines, room]);
+  const lightboxIndex = lightboxItems.findIndex((it) => it.eventId === lightboxEventId);
+  const handleLightboxJump = useCallback(
+    (id: string) => {
+      setLightboxEventId(undefined);
+      scrollToThreadEvent(id);
+    },
+    [scrollToThreadEvent],
+  );
+
   const renderMessageContent = useCallback(
     (mEvent: MatrixEvent, mEventId: string, timelineSet: EventTimelineSet): ReactNode => {
       // Evaluated lazily so EncryptedContent can re-run it (re-reading getType())
@@ -961,8 +995,12 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
   const showEmptyReplies = ready && thread.length === 0;
 
   const renderPendingEvent = (mEvent: MatrixEvent) => {
+    // [Gitea #112] Network failures while offline are queued, not failed.
+    const queued =
+      mEvent.status === EventStatus.NOT_SENT && sendOffline && isRetryableSendError(mEvent.error);
     const failed =
-      mEvent.status === EventStatus.NOT_SENT || mEvent.status === EventStatus.CANCELLED;
+      !queued &&
+      (mEvent.status === EventStatus.NOT_SENT || mEvent.status === EventStatus.CANCELLED);
     return (
       <div
         key={mEvent.getId() ?? mEvent.getTxnId()}
@@ -976,6 +1014,13 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
             </Text>
           </Box>
         )}
+        {queued && (
+          <Box style={{ padding: `0 ${config.space.S400}` }}>
+            <Text size="T200" priority="300">
+              Queued. Will send when you&apos;re back online
+            </Text>
+          </Box>
+        )}
       </div>
     );
   };
@@ -1051,11 +1096,13 @@ export function ThreadTimeline({ room, thread, editor }: ThreadTimelineProps) {
           onClose={() => setEditHistoryEvent(undefined)}
         />
       )}
-      {lightboxEventId && (
-        <RoomMediaLightbox
-          room={room}
-          eventId={lightboxEventId}
+      {lightboxEventId && lightboxIndex !== -1 && (
+        <Lightbox
+          items={lightboxItems}
+          initialIndex={lightboxIndex}
+          useAuthentication={useAuthentication}
           onClose={() => setLightboxEventId(undefined)}
+          onJump={handleLightboxJump}
         />
       )}
     </Box>

src/app/features/room/widgets/RoomWidgetView.tsx

@@ -12,6 +12,7 @@ import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-a
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { GeneralWidgetDriver } from './GeneralWidgetDriver';
 import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
+import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
 import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
 
 type PendingAsk = {
@@ -96,6 +97,9 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
         }),
     );
     const clientApi = new ClientWidgetApi(current, iframe, driver);
+    // Only messages from this widget's own frame and origin are handled, so a
+    // widget can't impersonate another one (or the call).
+    restrictWidgetMessages(clientApi, iframe, current.origin);
     clientApi.setViewedRoomId(room.roomId);
 
     // Live room events for widgets that were allowed to see them

src/app/features/server-status/ServerStatusBanner.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { MatrixClient, SyncState } from 'matrix-js-sdk';
+import { Box, Button, config, Icon, IconButton, Icons, IconSrc, Line, Text } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useClientConfig } from '../../hooks/useClientConfig';
+import { useSyncState } from '../../hooks/useSyncState';
+import { useServerStatus } from '../../hooks/useServerStatus';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { serverStatusAtom } from '../../state/serverStatus';
+import { pickBanner, resolveStatusPage, StatusBanner } from '../../utils/kumaStatus';
+
+const DISMISS_KEY = 'lotus-status-banner-dismissed';
+const DISMISS_MAX = 50;
+
+const readDismissed = (): string[] => {
+  try {
+    const v = JSON.parse(localStorage.getItem(DISMISS_KEY) ?? '[]');
+    return Array.isArray(v) ? v.filter((k): k is string => typeof k === 'string') : [];
+  } catch {
+    return [];
+  }
+};
+
+const bannerIcon = (b: StatusBanner): IconSrc => {
+  if (b.kind === 'maintenance') return Icons.Setting;
+  if (b.tone === 'Primary') return Icons.Info;
+  return Icons.Warning;
+};
+
+/**
+ * [Gitea #124] One status strip, in the same slot and style as the sync and
+ * clock banners. Presentational: the caller picks the banner.
+ */
+export function StatusStrip({
+  banner,
+  onDismiss,
+}: {
+  banner: StatusBanner;
+  onDismiss?: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const mobile = useScreenSizeContext() === ScreenSize.Mobile;
+  useEffect(() => setOpen(false), [banner.key]);
+  const critical = banner.tone === 'Critical';
+  return (
+    <Box direction="Column" shrink="No">
+      <Box
+        className={ContainerColor({ variant: banner.tone })}
+        style={{ padding: `${config.space.S100} ${config.space.S300}` }}
+        direction="Column"
+        gap="100"
+        role={critical ? 'alert' : 'status'}
+        aria-live={critical ? 'assertive' : 'polite'}
+      >
+        <Box
+          alignItems="Center"
+          justifyContent={mobile ? 'Start' : 'Center'}
+          gap="200"
+          style={{ minHeight: config.size.X300 }}
+        >
+          <Icon size="100" src={bannerIcon(banner)} />
+          <Text size="L400" truncate={mobile && !open} style={{ minWidth: 0 }}>
+            {banner.text}
+          </Text>
+          {banner.detail && (
+            <Button
+              size="300"
+              variant={banner.tone}
+              fill="None"
+              radii="300"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              style={{ flexShrink: 0 }}
+            >
+              <Text size="B300" style={{ textDecoration: 'underline' }}>
+                {open ? 'Hide' : 'Details'}
+              </Text>
+            </Button>
+          )}
+          {banner.dismissable && onDismiss && (
+            <IconButton
+              size="300"
+              variant={banner.tone}
+              fill="None"
+              radii="300"
+              aria-label="Dismiss"
+              onClick={onDismiss}
+              style={{ flexShrink: 0 }}
+            >
+              <Icon size="100" src={Icons.Cross} />
+            </IconButton>
+          )}
+        </Box>
+        {banner.detail && open && (
+          <Box justifyContent={mobile ? 'Start' : 'Center'}>
+            <Text size="T200" style={{ maxWidth: 680, whiteSpace: 'pre-line' }}>
+              {banner.detail}
+            </Text>
+          </Box>
+        )}
+      </Box>
+      <Line variant={banner.tone} size="300" />
+    </Box>
+  );
+}
+
+/** Runs the Kuma poller for the logged-in homeserver and publishes it. */
+export function ServerStatusFeature({ mx }: { mx: MatrixClient }) {
+  const { statusPages } = useClientConfig();
+  const page = useMemo(
+    () => resolveStatusPage(statusPages, mx.getDomain() ?? undefined),
+    [statusPages, mx],
+  );
+  const [lostAt, setLostAt] = useState<number | null>(null);
+  useSyncState(
+    mx,
+    useCallback((state: SyncState | null) => {
+      const lost = state === SyncState.Reconnecting || state === SyncState.Error;
+      setLostAt((prev) => {
+        if (!lost) return null;
+        return prev ?? Date.now();
+      });
+    }, []),
+  );
+  const syncLost = lostAt !== null;
+  const status = useServerStatus(page, syncLost);
+  const setAtom = useSetAtom(serverStatusAtom);
+  useEffect(() => setAtom({ status, syncLost, lostAt }), [setAtom, status, syncLost, lostAt]);
+  return null;
+}
+
+/** The logged-in app's status strip. */
+export function ServerStatusBanner() {
+  const { status, syncLost } = useAtomValue(serverStatusAtom);
+  const [dismissed, setDismissed] = useState(readDismissed);
+  const banner = pickBanner(status, {
+    syncLost,
+    where: 'client',
+    dismissed: new Set(dismissed),
+  });
+  if (!banner) return null;
+  const dismiss = () => {
+    const next = [...dismissed.filter((k) => k !== banner.key), banner.key].slice(-DISMISS_MAX);
+    try {
+      localStorage.setItem(DISMISS_KEY, JSON.stringify(next));
+    } catch {
+      // storage unavailable — dismissed for this session only
+    }
+    setDismissed(next);
+  };
+  return <StatusStrip banner={banner} onDismiss={dismiss} />;
+}
+
+/** The sign-in screen's strip, for the homeserver being signed in to. */
+export function LoginStatusBanner({ serverName }: { serverName: string }) {
+  const { statusPages } = useClientConfig();
+  const page = useMemo(() => resolveStatusPage(statusPages, serverName), [statusPages, serverName]);
+  const status = useServerStatus(page);
+  const banner = pickBanner(status, { syncLost: false, where: 'login' });
+  return banner ? <StatusStrip banner={banner} /> : null;
+}
+
+/** Calls-down note for the call Join controls (null when calls are fine). */
+export function useCallsDown(): boolean {
+  const { status } = useAtomValue(serverStatusAtom);
+  return status?.calls === 'down' && status.homeserver !== 'down';
+}

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

@@ -1,10 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, Button, Text, Spinner, color } from 'folds';
+import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SettingTile } from '../../../components/setting-tile';
-import { DECORATION_CATEGORIES, decorationUrl } from '../../lotus/avatarDecorations';
+import {
+  ALL_DECORATIONS,
+  DECORATION_CATEGORIES,
+  decorationThumbUrl,
+  decorationUrl,
+} from '../../lotus/avatarDecorations';
 import { invalidateDecorationCache } from '../../../hooks/useAvatarDecoration';
 
 const PROFILE_FIELD = 'io.lotus.avatar_decoration';
@@ -21,6 +26,12 @@ function DecorationPreviewCell({
   selected: boolean;
   onSelect: (slug: string) => void;
 }) {
+  // The full decorations are ~1 MB animated PNGs. Show the small static
+  // thumbnail and only pull the animated file while the cell is hovered,
+  // focused or selected. A missing thumbnail falls back to the full file.
+  const [active, setActive] = useState(false);
+  const [thumbFailed, setThumbFailed] = useState(false);
+  const animate = active || selected || thumbFailed;
   return (
     <button
       type="button"
@@ -28,6 +39,10 @@ function DecorationPreviewCell({
       aria-label={name}
       aria-pressed={selected}
       onClick={() => onSelect(slug)}
+      onMouseEnter={() => setActive(true)}
+      onMouseLeave={() => setActive(false)}
+      onFocus={() => setActive(true)}
+      onBlur={() => setActive(false)}
       style={{
         position: 'relative',
         width: CELL_SIZE,
@@ -44,10 +59,11 @@ function DecorationPreviewCell({
       }}
     >
       <img
-        src={decorationUrl(slug)}
+        src={animate ? decorationUrl(slug) : decorationThumbUrl(slug)}
         alt={name}
         loading="lazy"
         decoding="async"
+        onError={() => setThumbFailed(true)}
         style={{
           position: 'absolute',
           inset: 0,
@@ -61,6 +77,12 @@ function DecorationPreviewCell({
   );
 }
 
+function categoryOf(slug: string | null): string {
+  const found =
+    slug && DECORATION_CATEGORIES.find((c) => c.decorations.some((d) => d.slug === slug));
+  return found ? found.id : DECORATION_CATEGORIES[0].id;
+}
+
 export function ProfileDecoration() {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
@@ -75,6 +97,16 @@ export function ProfileDecoration() {
   // mount-time fetch below clobbering a fresh selection if it resolves late
   // (mirrors ProfileStatus's statusDirtyRef in Profile.tsx).
   const dirtyRef = useRef(false);
+  const [activeCategory, setActiveCategory] = useState(DECORATION_CATEGORIES[0].id);
+  const [search, setSearch] = useState('');
+  const query = search.trim().toLowerCase();
+  const visible = useMemo(
+    () =>
+      query
+        ? ALL_DECORATIONS.filter((d) => d.name.toLowerCase().includes(query))
+        : (DECORATION_CATEGORIES.find((c) => c.id === activeCategory)?.decorations ?? []),
+    [query, activeCategory],
+  );
 
   const fetchDecoration = useCallback(() => {
     let cancelled = false;
@@ -92,6 +124,7 @@ export function ProfileDecoration() {
         const val = (res[PROFILE_FIELD] as string | undefined) ?? null;
         setCurrent(val);
         setSelected(val);
+        setActiveCategory(categoryOf(val));
       })
       .catch(() => {
         if (cancelled) return;
@@ -196,9 +229,7 @@ export function ProfileDecoration() {
               {loadError
                 ? 'Failed to load'
                 : selected
-                  ? (DECORATION_CATEGORIES.flatMap((c) => c.decorations).find(
-                      (d) => d.slug === selected,
-                    )?.name ?? selected)
+                  ? (ALL_DECORATIONS.find((d) => d.slug === selected)?.name ?? selected)
                   : 'None'}
             </Text>
             {selected && !loadError && (
@@ -256,42 +287,72 @@ export function ProfileDecoration() {
           </Text>
         )}
 
-        {/* Category grid */}
+        {/* Search + category tabs. Only one category (or the search results)
+            is mounted at a time so the picker never loads the whole catalog. */}
+        <Input
+          aria-label="Search decorations"
+          placeholder="Search decorations"
+          value={search}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+          variant="Secondary"
+          size="400"
+          radii="300"
+          before={<Icon size="100" src={Icons.Search} />}
+        />
+        {!query && (
+          <Box gap="100" wrap="Wrap" role="tablist" aria-label="Decoration categories">
+            {DECORATION_CATEGORIES.map((category) => (
+              <Chip
+                key={category.id}
+                type="button"
+                role="tab"
+                aria-selected={category.id === activeCategory}
+                variant={category.id === activeCategory ? 'Primary' : 'Secondary'}
+                fill="Soft"
+                outlined={category.id === activeCategory}
+                radii="Pill"
+                onClick={() => setActiveCategory(category.id)}
+              >
+                <Text as="span" size="B300">
+                  {category.label}
+                </Text>
+              </Chip>
+            ))}
+          </Box>
+        )}
         <div
+          role={query ? undefined : 'tabpanel'}
           style={{
-            maxHeight: 480,
+            maxHeight: 360,
             overflowY: 'auto',
             overflowX: 'hidden',
             paddingRight: 4,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 24,
           }}
         >
-          {DECORATION_CATEGORIES.map((category) => (
-            <div key={category.id} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-              <Text size="L400" priority="400">
-                {category.label}
-              </Text>
-              <div
-                style={{
-                  display: 'grid',
-                  gridTemplateColumns: `repeat(auto-fill, ${CELL_SIZE}px)`,
-                  gap: 20,
-                }}
-              >
-                {category.decorations.map((d) => (
-                  <DecorationPreviewCell
-                    key={d.slug}
-                    slug={d.slug}
-                    name={d.name}
-                    selected={selected === d.slug}
-                    onSelect={handleSelect}
-                  />
-                ))}
-              </div>
+          {visible.length === 0 ? (
+            <Text size="T300" priority="300">
+              No decorations match “{search.trim()}”.
+            </Text>
+          ) : (
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(auto-fill, ${CELL_SIZE}px)`,
+                gap: 20,
+                padding: 2,
+              }}
+            >
+              {visible.map((d) => (
+                <DecorationPreviewCell
+                  key={d.slug}
+                  slug={d.slug}
+                  name={d.name}
+                  selected={selected === d.slug}
+                  onSelect={handleSelect}
+                />
+              ))}
             </div>
-          ))}
+          )}
         </div>
       </Box>
     </SettingTile>

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

@@ -49,6 +49,7 @@ import {
   Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useAtom } from 'jotai';
+import { useClientConfig } from '../../../hooks/useClientConfig';
 import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
 import { BgSwatch as BgSwatchStyle } from './BgSwatch.css';
 import { Page, PageContent, PageHeader } from '../../../components/page';
@@ -113,6 +114,7 @@ import { SequenceCardStyle } from '../styles.css';
 import { UpdateProgress, useTauriUpdater } from '../../../hooks/useTauriUpdater';
 import { describeUpdateError, manualDownloadUrl } from '../../../utils/updateErrors';
 import { isTauri as isTauriEnv, invokeTauri, tauriInvoke } from '../../../hooks/useTauri';
+import { useKeychainMirrorStatus } from '../../../state/keychainMirror';
 import { isSafeGlobalToggleKey } from '../../../hooks/useCallHotkeys';
 import { customWindowChromeAtom } from '../../../state/customWindowChrome';
 import { useDateFormatItems } from '../../../hooks/useDateFormat';
@@ -237,6 +239,27 @@ function AutostartSetting() {
   );
 }
 
+// [Gitea #105] Desktop: whether the login is also kept in the OS keychain.
+function KeychainMirrorSetting() {
+  const status = useKeychainMirrorStatus();
+  if (!isTauriEnv() || status.state === 'idle' || status.state === 'cleared') return null;
+  let description: string;
+  if (status.state === 'ok') {
+    description =
+      "A copy of your login is kept in the system keychain (Windows Credential Manager). A later update will keep it only there, out of the app's data folder.";
+  } else if (status.state === 'unsupported') {
+    description =
+      "Not available on this system yet. Your login is saved in the app's data folder, as before.";
+  } else {
+    description = `Couldn't save a copy to the system keychain (${status.error}). You stay logged in; your login is saved in the app's data folder, as before.`;
+  }
+  return (
+    <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SettingTile title="Login in the system keychain" description={description} />
+    </SequenceCard>
+  );
+}
+
 type ThemeSelectorProps = {
   themeNames: Record<string, string>;
   themes: Theme[];
@@ -569,6 +592,7 @@ function Appearance() {
 
       <DesktopChromeSetting />
       <AutostartSetting />
+      <KeychainMirrorSetting />
 
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
@@ -2581,6 +2605,8 @@ function Messages() {
   );
   const [autoTranslate, setAutoTranslate] = useSetting(settingsAtom, 'autoTranslate');
   const [gifPickerEnabled, setGifPickerEnabled] = useSetting(settingsAtom, 'gifPickerEnabled');
+  // No Giphy key in this build's config: the switch can't show a GIF button.
+  const gifAvailable = !!useClientConfig().gifApiKey;
   const translationSupported = chromeTranslationEngine.isSupported();
   const selectedTargetLang = isSupportedTargetLang(translateTargetLang)
     ? normalizeLang(translateTargetLang)
@@ -2686,9 +2712,18 @@ function Messages() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="GIF Picker"
-          description="Every search term (and your IP address) is sent directly to Giphy, not through your homeserver. Off by default."
+          description={
+            gifAvailable
+              ? 'Every search term (and your IP address) is sent directly to Giphy, not through your homeserver. Off by default.'
+              : "GIF search isn't set up for this version of the app (no Giphy key in its configuration), so there is no GIF button even when this is on."
+          }
           after={
-            <Switch variant="Primary" value={gifPickerEnabled} onChange={setGifPickerEnabled} />
+            <Switch
+              variant="Primary"
+              value={gifPickerEnabled && gifAvailable}
+              onChange={setGifPickerEnabled}
+              disabled={!gifAvailable}
+            />
           }
         />
       </SequenceCard>

src/app/hooks/useAutocompleteEnter.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import { isKeyHotkey } from 'is-hotkey';
+
+/**
+ * Enter picks the top suggestion while an autocomplete list is showing, as in
+ * Discord / Slack / Element, instead of sending the half-typed text ("hey @bo").
+ *
+ * The listener runs in the window's capture phase so it sees Enter before the
+ * composer's own handler (which would submit), and only claims the key when
+ * `active` (the list has suggestions) — otherwise Enter sends as normal. IME
+ * composition and modified Enter (Shift/Ctrl/Alt/Meta) are left alone.
+ */
+export function useAutocompleteEnter(active: boolean, onSelect: () => void): void {
+  const selectRef = useRef(onSelect);
+  selectRef.current = onSelect;
+
+  useEffect(() => {
+    if (!active) return undefined;
+    const onKeyDown = (evt: KeyboardEvent) => {
+      if (evt.isComposing || !isKeyHotkey('enter', evt)) return;
+      evt.preventDefault();
+      evt.stopPropagation();
+      selectRef.current();
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => window.removeEventListener('keydown', onKeyDown, true);
+  }, [active]);
+}

src/app/hooks/useCallHotkeys.ts

@@ -105,32 +105,6 @@ const isInteractive = (el: HTMLElement): boolean => {
   return false;
 };
 
-/**
- * Bind listeners to the EC iframe's window and keep them bound across document
- * reloads. [Gitea #60] Listeners registered on a contentWindow are discarded
- * when that window navigates to a new document (crash recovery, in-widget
- * navigation), so re-run `bind` from the iframe's `load` event and detach the
- * previous set. Returns a cleanup that detaches everything.
- */
-const bindIframeWindow = (
-  iframe: HTMLIFrameElement,
-  bind: (win: Window) => () => void,
-): (() => void) => {
-  let unbind: (() => void) | undefined;
-  const attach = () => {
-    unbind?.();
-    const win = iframe.contentWindow;
-    unbind = win ? bind(win) : undefined;
-  };
-  attach();
-  iframe.addEventListener('load', attach);
-  return () => {
-    iframe.removeEventListener('load', attach);
-    unbind?.();
-    unbind = undefined;
-  };
-};
-
 /**
  * Push-to-talk and deafen hotkeys for the active call.
  *
@@ -210,11 +184,12 @@ export function useCallHotkeys(callEmbed: CallEmbed | undefined, joined: boolean
       pttActiveRef.current = false;
       setPttActive(false);
     };
-    const onKeyDown = (e: KeyboardEvent) => {
+    // `prevent` is absent for keys reported by the fork, which already
+    // cancelled the default action inside its frame.
+    const pttDown = (e: KeyLike, editable: boolean, interactive: boolean, prevent?: () => void) => {
       if (!isPttKeyDown(e, pttKey)) return;
-      const target = e.target as HTMLElement;
-      if (isEditable(target)) return;
-      if (!isInteractive(target)) e.preventDefault();
+      if (editable) return;
+      if (!interactive) prevent?.();
       // Key auto-repeat re-fires keydown while held; don't restart the clock.
       if (pttActiveRef.current) return;
       // C-M5: mark PTT active BEFORE unmuting so the mic echo (onMediaState)
@@ -225,6 +200,10 @@ export function useCallHotkeys(callEmbed: CallEmbed | undefined, joined: boolean
       setPttActive(true);
       holdWatchdog.current.arm();
     };
+    const onKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      pttDown(e, isEditable(target), isInteractive(target), () => e.preventDefault());
+    };
     const onKeyUp = (e: KeyboardEvent) => {
       if (e.code !== pttKey) return;
       release();
@@ -249,11 +228,18 @@ export function useCallHotkeys(callEmbed: CallEmbed | undefined, joined: boolean
       };
     };
     const unbindHost = bind(window);
-    // BUG-9: also wire iframe key/blur/focus so PTT works with focus in the iframe
-    const unbindIframe = bindIframeWindow(embed.iframe, bind);
+    // BUG-9: PTT also works with focus in the call frame, reported by the
+    // fork (io.lotus.hotkey; the host no longer listens on the frame's window).
+    embed.control.setHotkeyCodes('ptt', [pttKey]);
+    const unbindFork = embed.control.onHotkey((r) => {
+      if (r.type === 'focus') onFocusChange();
+      else if (r.type === 'keydown') pttDown(r, r.editable, r.interactive);
+      else if (r.code === pttKey) release();
+    });
     return () => {
       unbindHost();
-      unbindIframe();
+      unbindFork();
+      embed.control.setHotkeyCodes('ptt', []);
       // BUG-8: if the embed changes while PTT is active, release mic on cleanup
       if (pttActiveRef.current) release();
     };
@@ -330,15 +316,18 @@ export function useCallHotkeys(callEmbed: CallEmbed | undefined, joined: boolean
       embed.control.toggleSound();
     };
     window.addEventListener('keydown', onKeyDown);
-    // C-L4: also bind the EC iframe window so the deafen key works when focus is
-    // inside the iframe (mirrors the PTT binding above).
-    const unbindIframe = bindIframeWindow(embed.iframe, (win) => {
-      win.addEventListener('keydown', onKeyDown);
-      return () => win.removeEventListener('keydown', onKeyDown);
+    // C-L4: the deafen key also works with focus inside the call frame (no
+    // composer there, so only the editable-field check applies).
+    embed.control.setHotkeyCodes('deafen', [deafenKey]);
+    const unbindFork = embed.control.onHotkey((r) => {
+      if (r.type === 'keydown' && isDeafenKeyDown(r, deafenKey) && !r.editable) {
+        embed.control.toggleSound();
+      }
     });
     return () => {
       window.removeEventListener('keydown', onKeyDown);
-      unbindIframe();
+      unbindFork();
+      embed.control.setHotkeyCodes('deafen', []);
     };
   }, [embed, deafenKey, deafenHotkey]);
 }

src/app/hooks/useCallSpeakers.ts

@@ -1,25 +1,16 @@
 import { useEffect, useState } from 'react';
 import { CallEmbed } from '../plugins/call';
-import { getCallDocument } from '../plugins/call/utils';
-import { isUserId } from '../utils/matrix';
 import { nextSpeakerSet } from '../utils/speakerSet';
 import { useCallMembers, useCallSession } from './useCall';
 import { useCallJoined } from './useCallEmbed';
 
 /**
- * Returns the set of Matrix user IDs currently speaking in the Element Call
- * iframe.
+ * Returns the set of Matrix user IDs currently speaking in the call, from the
+ * fork's io.lotus.call_state reports ([lotus #2]).
  *
- * EC renders each participant's video tile with a `[data-video-fit]` wrapper.
- * When a participant is speaking, EC draws a speaking indicator via the tile's
- * `::before` pseudo-element `background-image` (anything other than `none`).
- * The participant's Matrix user ID is exposed on the first descendant carrying
- * an `aria-label`.
- *
- * We watch the whole iframe document so tiles added/removed mid-call are picked
- * up automatically, and on every relevant mutation we re-scan ALL `[data-video-fit]`
- * tiles and rebuild the set from the full current DOM state (rather than just the
- * tiles in the mutation batch).
+ * [Gitea #43] The fallback that scraped EC's rendered tiles (the speaking
+ * ring's `::before` background) is gone: the bundled fork always reports call
+ * state, and the host no longer reads the call frame's DOM.
  */
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const [speakers, setSpeakers] = useState(new Set<string>());
@@ -28,9 +19,8 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const joined = useCallJoined(callEmbed);
 
   // C-L5 — depend on a STABLE boolean, not the callMembers array (whose identity
-  // changes on every membership change). The MutationObserver + io.lotus.call_state
-  // subscription below already track tiles joining/leaving live, so rebuilding
-  // them on each membership change is pure churn.
+  // changes on every membership change). The io.lotus.call_state subscription
+  // below already tracks participants joining/leaving live.
   const hasCallMembers = callMembers.length > 0;
 
   useEffect(() => {
@@ -39,123 +29,22 @@ export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
       return undefined;
     }
 
-    const getDoc = (): Document | undefined => getCallDocument(callEmbed.iframe);
-
-    let tileObserver: MutationObserver | undefined;
-
-    const detachTileObserver = (): void => {
-      tileObserver?.disconnect();
-      tileObserver = undefined;
-    };
-
-    // #32 — only attach the DOM fallback observer while the fork isn't
-    // supplying usable speaker data; it stays disconnected for the rest of
-    // the call once io.lotus.call_state starts reporting participants.
-    const attachTileObserver = (): void => {
-      if (tileObserver) return;
-      const doc = getDoc();
-      if (!doc?.body) return;
-      // Watch the whole document for attribute changes on tiles (which carry
-      // the speaking indicator) and for new tiles being added/removed.
-      tileObserver = new MutationObserver((mutations) => {
-        const relevant = mutations.some(
-          (m) =>
-            m.type === 'attributes' ||
-            (m.type === 'childList' &&
-              (Array.from(m.addedNodes).some(
-                (n) => n instanceof Element && n.querySelector('[data-video-fit]'),
-              ) ||
-                Array.from(m.removedNodes).some(
-                  (n) => n instanceof Element && n.querySelector('[data-video-fit]'),
-                ))),
-        );
-        if (relevant) syncState();
-      });
-      tileObserver.observe(doc.body, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ['class', 'style'],
-      });
-    };
-
     const syncState = (): void => {
-      // [lotus #2] Prefer the fork's io.lotus.call_state events over scraping
-      // EC's rendered DOM. Falls back to the DOM path below when the fork hasn't
-      // sent yet (null) OR sent a spurious empty list (you're always present in
-      // your own joined call, so [] means "no usable data", not "nobody").
-      const lotus = callEmbed.getLotusParticipants();
-      if (lotus !== null && lotus.length > 0) {
-        detachTileObserver();
-        // #32 — bail out of setState (and the re-render it causes) when the
-        // derived set is unchanged from the previous one.
-        setSpeakers((prev) => nextSpeakerSet(prev, lotus));
-        return;
-      }
-      const doc = getDoc();
-      if (!doc) {
-        setSpeakers(new Set<string>());
-        return;
-      }
-      // Fork gave no usable data (older fork, or hasn't sent yet) — fall back
-      // to scraping the DOM, and keep watching it for changes.
-      attachTileObserver();
-      const s = new Set<string>();
-      // Re-scan every tile on each mutation and build the set from the full
-      // current DOM state, not just the tiles that mutated this batch.
-      const tiles = doc.querySelectorAll<HTMLElement>('[data-video-fit]');
-      tiles.forEach((el) => {
-        const style = callEmbed.iframe.contentWindow?.getComputedStyle(el, '::before');
-        if (!style) return;
-        const tileBackgroundImage = style.getPropertyValue('background-image');
-        const speaking = tileBackgroundImage !== 'none';
-        if (!speaking) return;
-
-        const speakerId = el.querySelector('[aria-label]')?.getAttribute('aria-label');
-        if (speakerId && isUserId(speakerId)) {
-          s.add(speakerId);
-        }
-      });
-      setSpeakers(s);
+      // #32 — bail out of setState (and the re-render it causes) when the
+      // derived set is unchanged from the previous one.
+      setSpeakers((prev) => nextSpeakerSet(prev, callEmbed.getLotusParticipants() ?? []));
     };
 
     syncState();
-    // [lotus #2] Re-derive whenever the fork pushes new call-state.
-    const unsubLotus = callEmbed.onLotusCallState(syncState);
-
-    // If iframe isn't ready yet, wait for body to be available.
-    let bodyWatcher: MutationObserver | undefined;
-    if (!getDoc()?.body) {
-      bodyWatcher = new MutationObserver(() => {
-        if (getDoc()?.body) {
-          bodyWatcher?.disconnect();
-          bodyWatcher = undefined;
-          syncState();
-        }
-      });
-      const doc = getDoc();
-      if (doc) bodyWatcher.observe(doc, { childList: true });
-    }
-
-    return () => {
-      detachTileObserver();
-      bodyWatcher?.disconnect();
-      unsubLotus();
-    };
+    return callEmbed.onLotusCallState(syncState);
   }, [callEmbed, hasCallMembers, joined]);
 
   return speakers;
 };
 
 /**
- * Returns true when any REMOTE participant has their microphone muted in the
- * Element Call iframe.
- *
- * EC renders a mute-icon element per participant tile with a `data-muted`
- * attribute ("true" = muted, "false" = unmuted) and an `aria-label` set to
- * the participant's Matrix user ID.  We watch for attribute changes on all
- * `[data-muted]` elements, filter out the local user, and return true if any
- * remaining participant is muted.
+ * Returns true when there is at least one REMOTE participant and every one of
+ * them has their microphone muted, from the fork's io.lotus.call_state reports.
  */
 export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean => {
   const [muted, setMuted] = useState(false);
@@ -163,105 +52,17 @@ export const useRemoteAllMuted = (callEmbed: CallEmbed | undefined): boolean =>
   useEffect(() => {
     if (!callEmbed) return undefined;
 
-    const getDoc = (): Document | undefined => getCallDocument(callEmbed.iframe);
-
     const localUserId = callEmbed.room.client?.getUserId() ?? '';
 
-    let tileObserver: MutationObserver | undefined;
-
-    const detachTileObserver = (): void => {
-      tileObserver?.disconnect();
-      tileObserver = undefined;
-    };
-
-    // #32 — only attach the DOM fallback observer while the fork isn't
-    // supplying usable participant data; it stays disconnected for the rest
-    // of the call once io.lotus.call_state starts reporting participants.
-    const attachTileObserver = (): void => {
-      if (tileObserver) return;
-      const doc = getDoc();
-      if (!doc?.body) return;
-      // Watch the whole document for attribute changes on data-muted elements
-      // and for new tiles being added/removed.
-      tileObserver = new MutationObserver((mutations) => {
-        const relevant = mutations.some(
-          (m) =>
-            m.type === 'attributes' ||
-            (m.type === 'childList' &&
-              (Array.from(m.addedNodes).some(
-                (n) => n instanceof Element && n.querySelector('[data-muted]'),
-              ) ||
-                Array.from(m.removedNodes).some(
-                  (n) => n instanceof Element && n.querySelector('[data-muted]'),
-                ))),
-        );
-        if (relevant) syncState();
-      });
-      tileObserver.observe(doc.body, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ['data-muted'],
-      });
-    };
-
     const syncState = (): void => {
-      // [lotus #2] Prefer the fork's io.lotus.call_state over DOM scraping;
-      // ignore a spurious empty list (fall back to DOM).
-      const lotus = callEmbed.getLotusParticipants();
-      if (lotus !== null && lotus.length > 0) {
-        detachTileObserver();
-        const remote = lotus.filter((p) => p.userId !== localUserId);
-        setMuted(remote.length > 0 && remote.every((p) => !p.audioEnabled));
-        return;
-      }
-      const doc = getDoc();
-      if (!doc) {
-        setMuted(false);
-        return;
-      }
-      // Fork gave no usable data (older fork, or hasn't sent yet) — fall back
-      // to scraping the DOM, and keep watching it for changes.
-      attachTileObserver();
-      // Each participant's mute icon has data-muted="true"|"false" and
-      // aria-label set to their Matrix user ID.
-      const muteIcons = doc.querySelectorAll<HTMLElement>('[data-muted]');
-      let remoteCount = 0;
-      let remoteMutedCount = 0;
-      muteIcons.forEach((el) => {
-        const userId = el.getAttribute('aria-label') ?? '';
-        if (userId === localUserId) return;
-        remoteCount += 1;
-        if (el.getAttribute('data-muted') === 'true') remoteMutedCount += 1;
-      });
-      // "All muted" badge: true only when there is at least one remote
-      // participant and every one of them is muted (not merely any single one).
-      setMuted(remoteCount > 0 && remoteMutedCount === remoteCount);
+      const remote = (callEmbed.getLotusParticipants() ?? []).filter(
+        (p) => p.userId !== localUserId,
+      );
+      setMuted(remote.length > 0 && remote.every((p) => !p.audioEnabled));
     };
 
     syncState();
-    // [lotus #2] Re-derive whenever the fork pushes new call-state.
-    const unsubLotus = callEmbed.onLotusCallState(syncState);
-
-    // If iframe isn't ready yet, wait for body to be available.
-    let bodyWatcher: MutationObserver | undefined;
-    if (!getDoc()?.body) {
-      bodyWatcher = new MutationObserver(() => {
-        if (getDoc()?.body) {
-          bodyWatcher?.disconnect();
-          bodyWatcher = undefined;
-          syncState();
-        }
-      });
-      const doc = getDoc();
-      if (doc) bodyWatcher.observe(doc, { childList: true });
-    }
-
-    return () => {
-      detachTileObserver();
-      bodyWatcher?.disconnect();
-      unsubLotus();
-    };
+    return callEmbed.onLotusCallState(syncState);
   }, [callEmbed]);
 
   return muted;

src/app/hooks/useClientConfig.ts

@@ -19,6 +19,34 @@ export type ClientConfig = {
 
   hashRouter?: HashRouterConfig;
   gifApiKey?: string;
+
+  /**
+   * [Gitea #43] Absolute https URL of the Element Call page on its own origin.
+   * Unset: the bundled copy on this origin. Ignored in the desktop app.
+   */
+  elementCallUrl?: string;
+
+  /**
+   * [Gitea #43] Desktop only: the loopback origin the desktop app's local
+   * server also answers on (e.g. "http://127.0.0.1:44548"), to load the
+   * bundled call page from a different origin than the app
+   * ("http://localhost:44548"). Set by cinny-desktop together with the server
+   * and CSP changes it needs; unset keeps the same-origin call page.
+   */
+  desktopCallOrigin?: string;
+
+  /**
+   * [Gitea #124] Uptime Kuma status page per homeserver, for the status banner:
+   * { "<server name>": { url, slug, groups?: { homeserver, calls, login } } }.
+   * Homeservers not listed never contact Kuma.
+   */
+  statusPages?: Record<string, unknown>;
+
+  /**
+   * Absolute https URL of the public web app (e.g. https://chat.lotusguild.org).
+   * The desktop app sets it so it can hand calls it can't make to the browser.
+   */
+  webAppUrl?: string;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);

src/app/hooks/useLotusLinkBase.test.ts

@@ -0,0 +1,23 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { lotusLinkBases, lotusShareBase } from './useLotusLinkBase';
+
+const LOCAL = 'http://localhost:44548/#/';
+const WEB = 'https://chat.lotusguild.org';
+
+test('web: shared links use the page origin', () => {
+  assert.equal(lotusShareBase(WEB, false, WEB), WEB);
+  assert.deepEqual(lotusLinkBases(WEB, false, undefined), [WEB]);
+});
+
+test('desktop with webAppUrl: shared links use the public web app', () => {
+  assert.equal(lotusShareBase(LOCAL, true, `${WEB}/`), WEB);
+  assert.deepEqual(lotusLinkBases(LOCAL, true, WEB), [LOCAL, WEB]);
+});
+
+test('desktop without a valid webAppUrl falls back to the origin', () => {
+  [undefined, '', 'http://chat.lotusguild.org', 'nonsense'].forEach((v) => {
+    assert.equal(lotusShareBase(LOCAL, true, v), LOCAL, String(v));
+    assert.deepEqual(lotusLinkBases(LOCAL, true, v), [LOCAL]);
+  });
+});

src/app/hooks/useLotusLinkBase.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { useClientConfig } from './useClientConfig';
+import { isTauri } from './useTauri';
+import { getOriginBaseUrl } from '../pages/pathUtils';
+import { resolveWebAppUrl } from '../utils/callInBrowser';
+
+/**
+ * [Gitea #248] Base URL for Lotus links meant for other people.
+ *
+ * On the web that's this page's origin. In the desktop app the page is served
+ * from a local address (and hash-routed), which nobody else can open, so use
+ * the public web app from config `webAppUrl` (web path routing) instead.
+ * Without a valid `webAppUrl` it falls back to the origin, as before.
+ */
+export const lotusShareBase = (originBase: string, desktop: boolean, webAppUrl: unknown): string =>
+  (desktop && resolveWebAppUrl(webAppUrl)) || originBase;
+
+/**
+ * Every base a Lotus link to this deployment may start with: the origin, plus
+ * the public web app in the desktop app, so a shared https link opens in-app.
+ */
+export const lotusLinkBases = (
+  originBase: string,
+  desktop: boolean,
+  webAppUrl: unknown,
+): string[] => {
+  const shared = lotusShareBase(originBase, desktop, webAppUrl);
+  return shared === originBase ? [originBase] : [originBase, shared];
+};
+
+export const useLotusShareBase = (): string => {
+  const { hashRouter, webAppUrl } = useClientConfig();
+  return useMemo(
+    () => lotusShareBase(getOriginBaseUrl(hashRouter), isTauri(), webAppUrl),
+    [hashRouter, webAppUrl],
+  );
+};

src/app/hooks/useRoomMediaTimeline.ts

@@ -9,6 +9,7 @@ import {
   Room,
   RoomEvent,
   RoomEventHandlerMap,
+  ThreadEvent,
 } from 'matrix-js-sdk';
 
 import {
@@ -34,7 +35,7 @@ export const isMediaMessage = (event: MatrixEvent): boolean =>
 const PAGE_SIZE = 100;
 
 export type RoomMediaTimeline = {
-  /** Every loaded media message in the room, newest first. */
+  /** Every loaded media message in the room and its threads, newest first. */
   events: MatrixEvent[];
   loadMore: () => Promise<void>;
   loading: boolean;
@@ -57,11 +58,23 @@ export const useRoomMediaTimeline = (mx: MatrixClient, room: Room): RoomMediaTim
     [mx, room],
   );
 
-  const readEvents = useCallback(
-    (): MatrixEvent[] =>
-      collectTimelineEvents(detached.set.getLiveTimeline()).filter(isMediaMessage).reverse(),
-    [detached],
-  );
+  // [Gitea #165] The SDK routes thread replies out of every room timeline set
+  // (ours included) into the room's Thread objects, so media posted in a
+  // thread only shows up if we read the loaded threads too.
+  const readEvents = useCallback((): MatrixEvent[] => {
+    const seen = new Set<string>();
+    return [
+      ...collectTimelineEvents(detached.set.getLiveTimeline()),
+      ...room.getThreads().flatMap((thread) => thread.timeline),
+    ]
+      .filter((event) => {
+        const id = event.getId();
+        if (!id || seen.has(id) || !isMediaMessage(event)) return false;
+        seen.add(id);
+        return true;
+      })
+      .sort((a, b) => b.getTs() - a.getTs());
+  }, [detached, room]);
 
   const [events, setEvents] = useState<MatrixEvent[]>(readEvents);
   const [loading, setLoading] = useState(false);
@@ -119,11 +132,23 @@ export const useRoomMediaTimeline = (mx: MatrixClient, room: Room): RoomMediaTim
       refresh();
     };
 
+    const onThreadReply = (_thread: unknown, event: MatrixEvent) => {
+      if (event.isBeingDecrypted() || event.shouldAttemptDecryption()) {
+        event.once(MatrixEventEvent.Decrypted, () => {
+          if (isMediaMessage(event)) refresh();
+        });
+        return;
+      }
+      if (isMediaMessage(event)) refresh();
+    };
+
     room.on(RoomEvent.Timeline, onTimeline);
     room.on(RoomEvent.Redaction, onRedaction);
+    room.on(ThreadEvent.NewReply, onThreadReply);
     return () => {
       room.removeListener(RoomEvent.Timeline, onTimeline);
       room.removeListener(RoomEvent.Redaction, onRedaction);
+      room.removeListener(ThreadEvent.NewReply, onThreadReply);
     };
   }, [detached, room, readEvents]);
 

src/app/hooks/useServerStatus.ts

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { kumaUrls, parseKumaStatus, ServerStatus, StatusPageConfig } from '../utils/kumaStatus';
+
+/** Normal poll, and while a problem is showing (so recovery clears quickly). */
+export const STATUS_POLL_MS = 5 * 60 * 1000;
+export const STATUS_POLL_PROBLEM_MS = 60 * 1000;
+const STATUS_FETCH_TIMEOUT_MS = 10 * 1000;
+const STATUS_BACKOFF_MAX_MS = 15 * 60 * 1000;
+
+const fetchJson = async (url: string, signal: AbortSignal): Promise<unknown> => {
+  const res = await fetch(url, { cache: 'no-store', credentials: 'omit', signal });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+};
+
+export const hasProblem = (s: ServerStatus | null): boolean =>
+  !!s &&
+  (s.homeserver === 'down' || s.calls === 'down' || s.login === 'down' || s.maintenance.length > 0);
+
+/**
+ * [Gitea #124] Poll the homeserver's Kuma status page (none configured → no
+ * requests, null). Only while the page is visible; every 5 min, every 60 s
+ * while something is wrong, and at once when `urgent` turns true (this
+ * client's connection dropped). Any failure → null ("no banner"), with
+ * backoff: Kuma being unreachable must never look like Matrix being down.
+ */
+export const useServerStatus = (
+  page: StatusPageConfig | undefined,
+  urgent = false,
+): ServerStatus | null => {
+  const [status, setStatus] = useState<ServerStatus | null>(null);
+  const pageKey = page ? `${page.url}/${page.slug}` : '';
+
+  useEffect(() => {
+    if (!page) {
+      setStatus(null);
+      return undefined;
+    }
+    const urls = kumaUrls(page);
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let controller: AbortController | undefined;
+    let failures = 0;
+    let stopped = false;
+    let last: ServerStatus | null = null;
+
+    const schedule = (ms: number) => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(poll, ms);
+    };
+
+    async function poll() {
+      if (stopped) return;
+      if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return;
+      controller?.abort();
+      controller = new AbortController();
+      const abort = controller;
+      const timeout = setTimeout(() => abort.abort(), STATUS_FETCH_TIMEOUT_MS);
+      try {
+        const [pageJson, heartbeatJson] = await Promise.all([
+          fetchJson(urls.page, abort.signal),
+          fetchJson(urls.heartbeat, abort.signal),
+        ]);
+        if (stopped) return;
+        failures = 0;
+        last = parseKumaStatus(pageJson, heartbeatJson, page!.groups);
+        setStatus(last);
+        // While this client's connection is lost, keep asking every minute: that
+        // is how it learns Kuma has checked the server since the drop.
+        schedule(hasProblem(last) || urgent ? STATUS_POLL_PROBLEM_MS : STATUS_POLL_MS);
+      } catch {
+        if (stopped) return;
+        failures += 1;
+        last = null;
+        setStatus(null);
+        schedule(Math.min(STATUS_POLL_PROBLEM_MS * 2 ** failures, STATUS_BACKOFF_MAX_MS));
+      } finally {
+        clearTimeout(timeout);
+      }
+    }
+
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') poll();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    poll();
+
+    return () => {
+      stopped = true;
+      if (timer) clearTimeout(timer);
+      controller?.abort();
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+    // pageKey identifies the page; the object itself is rebuilt from config.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageKey, urgent]);
+
+  return status;
+};

src/app/pages/App.tsx

@@ -36,6 +36,11 @@ import { applyCustomAccent, removeCustomAccent } from '../utils/accentColor';
 import { zIndices } from '../styles/zIndex';
 import { OIDC_CALLBACK_PATH } from './paths';
 import { OidcCallback } from './auth/oidc/OidcCallback';
+import {
+  resolveCallPageUrl,
+  resolveDesktopCallPageUrl,
+  setCallPageUrl,
+} from '../plugins/call/callPageUrl';
 
 // The emoji families (Twemoji when "Twitter emoji" is on, Twemoji flags on
 // Windows — see SystemEmojiFeature) must sit before the generic family, or the
@@ -220,23 +225,35 @@ function App() {
                     <ConfigConfigError error={err} retry={retry} ignore={ignore} />
                   )}
                 >
-                  {(clientConfig) => (
-                    <ClientConfigProvider value={clientConfig}>
-                      <QueryClientProvider client={queryClient}>
-                        <JotaiProvider>
-                          <AppearanceEffects />
-                          <TauriEffects />
-                          <DesktopChrome>
-                            <RouterProvider router={createRouter(clientConfig, screenSize)} />
-                          </DesktopChrome>
-                          <SeasonalEffect />
-                          <NightLightOverlay />
-                          <LotusToastContainer />
-                        </JotaiProvider>
-                        <ReactQueryDevtools initialIsOpen={false} />
-                      </QueryClientProvider>
-                    </ClientConfigProvider>
-                  )}
+                  {(clientConfig) => {
+                    // [Gitea #43] Idempotent: where the call page is loaded from.
+                    setCallPageUrl(
+                      isTauri()
+                        ? resolveDesktopCallPageUrl(
+                            clientConfig.desktopCallOrigin,
+                            window.location.origin,
+                            import.meta.env.BASE_URL,
+                          )
+                        : resolveCallPageUrl(clientConfig.elementCallUrl, false),
+                    );
+                    return (
+                      <ClientConfigProvider value={clientConfig}>
+                        <QueryClientProvider client={queryClient}>
+                          <JotaiProvider>
+                            <AppearanceEffects />
+                            <TauriEffects />
+                            <DesktopChrome>
+                              <RouterProvider router={createRouter(clientConfig, screenSize)} />
+                            </DesktopChrome>
+                            <SeasonalEffect />
+                            <NightLightOverlay />
+                            <LotusToastContainer />
+                          </JotaiProvider>
+                          <ReactQueryDevtools initialIsOpen={false} />
+                        </QueryClientProvider>
+                      </ClientConfigProvider>
+                    );
+                  }}
                 </ClientConfigLoader>
               </FeatureCheck>
             </ScreenSizeProvider>

src/app/pages/auth/AuthLayout.tsx

@@ -30,6 +30,7 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
 import { AuthServerProvider } from '../../hooks/useAuthServer';
 import { tryDecodeURIComponent } from '../../utils/dom';
+import { LoginStatusBanner } from '../../features/server-status/ServerStatusBanner';
 
 const LotusLogo = withOriginBaseUrl(getOriginBaseUrl(), '/public/res/lotus-logo.png');
 
@@ -125,89 +126,92 @@ export function AuthLayout() {
     discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
 
   return (
-    <Scroll variant="Background" visibility="Hover" size="300" hideTrack>
-      <Box
-        className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
-        direction="Column"
-        alignItems="Center"
-        justifyContent="SpaceBetween"
-        gap="400"
-      >
-        <Box direction="Column" className={css.AuthCard}>
-          <Header className={css.AuthHeader} size="600" variant="Surface">
-            <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-              <img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
-              <Text as="h1" size="H3">
-                Lotus Chat
-              </Text>
+    <Box direction="Column" style={{ height: '100%' }}>
+      <LoginStatusBanner serverName={server} />
+      <Scroll variant="Background" visibility="Hover" size="300" hideTrack>
+        <Box
+          className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
+          direction="Column"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          gap="400"
+        >
+          <Box direction="Column" className={css.AuthCard}>
+            <Header className={css.AuthHeader} size="600" variant="Surface">
+              <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
+                <img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
+                <Text as="h1" size="H3">
+                  Lotus Chat
+                </Text>
+              </Box>
+            </Header>
+            <Box className={css.AuthCardContent} direction="Column">
+              <Box direction="Column" gap="100">
+                <Text as="label" size="L400" priority="300">
+                  Homeserver
+                </Text>
+                <ServerPicker
+                  server={server}
+                  serverList={clientConfig.homeserverList ?? []}
+                  allowCustomServer={clientConfig.allowCustomHomeservers}
+                  onServerChange={selectServer}
+                />
+              </Box>
+              {discoveryState.status === AsyncStatus.Loading && (
+                <AuthLayoutLoading message="Looking for homeserver..." />
+              )}
+              {discoveryState.status === AsyncStatus.Error && (
+                <AuthLayoutError message="Failed to find homeserver." />
+              )}
+              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
+                <AuthLayoutError
+                  message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
+                />
+              )}
+              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
+                <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
+              )}
+              {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
+                <AuthServerProvider value={discoveryState.data.serverName}>
+                  <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
+                    <SpecVersionsLoader
+                      baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
+                      fallback={() => (
+                        <AuthLayoutLoading
+                          message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
+                        />
+                      )}
+                      error={() => (
+                        <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
+                      )}
+                    >
+                      {(specVersions) => (
+                        <SpecVersionsProvider value={specVersions}>
+                          <AuthFlowsLoader
+                            fallback={() => (
+                              <AuthLayoutLoading message="Loading authentication flow..." />
+                            )}
+                            error={() => (
+                              <AuthLayoutError message="Failed to get authentication flow information." />
+                            )}
+                          >
+                            {(authFlows) => (
+                              <AuthFlowsProvider value={authFlows}>
+                                <Outlet />
+                              </AuthFlowsProvider>
+                            )}
+                          </AuthFlowsLoader>
+                        </SpecVersionsProvider>
+                      )}
+                    </SpecVersionsLoader>
+                  </AutoDiscoveryInfoProvider>
+                </AuthServerProvider>
+              )}
             </Box>
-          </Header>
-          <Box className={css.AuthCardContent} direction="Column">
-            <Box direction="Column" gap="100">
-              <Text as="label" size="L400" priority="300">
-                Homeserver
-              </Text>
-              <ServerPicker
-                server={server}
-                serverList={clientConfig.homeserverList ?? []}
-                allowCustomServer={clientConfig.allowCustomHomeservers}
-                onServerChange={selectServer}
-              />
-            </Box>
-            {discoveryState.status === AsyncStatus.Loading && (
-              <AuthLayoutLoading message="Looking for homeserver..." />
-            )}
-            {discoveryState.status === AsyncStatus.Error && (
-              <AuthLayoutError message="Failed to find homeserver." />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
-              <AuthLayoutError
-                message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
-              />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
-              <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
-            )}
-            {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
-              <AuthServerProvider value={discoveryState.data.serverName}>
-                <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
-                  <SpecVersionsLoader
-                    baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
-                    fallback={() => (
-                      <AuthLayoutLoading
-                        message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
-                      />
-                    )}
-                    error={() => (
-                      <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
-                    )}
-                  >
-                    {(specVersions) => (
-                      <SpecVersionsProvider value={specVersions}>
-                        <AuthFlowsLoader
-                          fallback={() => (
-                            <AuthLayoutLoading message="Loading authentication flow..." />
-                          )}
-                          error={() => (
-                            <AuthLayoutError message="Failed to get authentication flow information." />
-                          )}
-                        >
-                          {(authFlows) => (
-                            <AuthFlowsProvider value={authFlows}>
-                              <Outlet />
-                            </AuthFlowsProvider>
-                          )}
-                        </AuthFlowsLoader>
-                      </SpecVersionsProvider>
-                    )}
-                  </SpecVersionsLoader>
-                </AutoDiscoveryInfoProvider>
-              </AuthServerProvider>
-            )}
           </Box>
+          <AuthFooter />
         </Box>
-        <AuthFooter />
-      </Box>
-    </Scroll>
+      </Scroll>
+    </Box>
   );
 }

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -31,6 +31,7 @@ import { allInvitesAtom } from '../../state/room-list/inviteList';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useClientConfig } from '../../hooks/useClientConfig';
 import { useHydrateMsgDrafts } from '../../hooks/useHydrateMsgDrafts';
+import { OutboxFeature } from '../../features/outbox/OutboxFeature';
 import { useSearchCacheInvalidation } from '../../utils/searchCacheInvalidation';
 import { ClockSkewMonitor } from '../../utils/clockSkew';
 import { clockSkewAtom } from '../../state/clockSkew';
@@ -77,6 +78,7 @@ import { KeyboardShortcutsDialog, useKeyboardShortcutsTrigger } from '../../feat
 import { useRoomsListener } from '../../hooks/useRoomsListener';
 import { threadNotificationsAtom } from '../../state/threadNotifications';
 import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
+import { lotusLinkBases } from '../../hooks/useLotusLinkBase';
 import {
   getThreadNotificationMode,
   shouldNotifyThreadReply,
@@ -118,11 +120,12 @@ function SystemEmojiFeature() {
 
 // [Gitea #103] Mirror the privacy toggle into the html parser's module flag.
 function LotusPermalinkFeature() {
-  const { hashRouter } = useClientConfig();
+  const { hashRouter, webAppUrl } = useClientConfig();
   useEffect(() => {
-    setLotusPermalinkBase(getOriginBaseUrl(hashRouter));
+    // [Gitea #248] In the desktop app, links to the public web app count too.
+    setLotusPermalinkBase(lotusLinkBases(getOriginBaseUrl(hashRouter), isTauriApp(), webAppUrl));
     return () => setLotusPermalinkBase(undefined);
-  }, [hashRouter]);
+  }, [hashRouter, webAppUrl]);
   return null;
 }
 
@@ -1069,6 +1072,10 @@ function ClockSkewFeature() {
       data,
     ) => {
       if (!data.liveEvent) return;
+      // Only events our homeserver stamped: a federated event's
+      // origin_server_ts is the other server's clock.
+      const senderServer = mEvent.getSender()?.split(':').slice(1).join(':');
+      if (senderServer !== mx.getDomain()) return;
       monitor.sample(mEvent.getTs(), mEvent.getAge(), mEvent.localTimestamp);
     };
     mx.on(RoomEvent.Timeline, onTimeline);
@@ -1105,6 +1112,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <TauriDesktopFeatures />
       <CloseBehaviorPrompt />
       <ConsentRequiredPrompt />
+      <OutboxFeature />
       <LotusDenoiseFeature />
       <DeepLinkNavigator />
       <KeyboardShortcutsFeature />

src/app/pages/client/ClientRoot.tsx

@@ -44,6 +44,10 @@ import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { ClockSkewBanner } from './ClockSkewBanner';
+import {
+  ServerStatusBanner,
+  ServerStatusFeature,
+} from '../../features/server-status/ServerStatusBanner';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
 import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
 import { pushSessionToSW } from '../../../sw-session';
@@ -245,6 +249,8 @@ export function ClientRoot({ children }: ClientRootProps) {
   return (
     <AutoDiscovery userId={userId!} baseUrl={baseUrl!}>
       <SpecVersions baseUrl={baseUrl!}>
+        {mx && <ServerStatusFeature mx={mx} />}
+        {mx && !syncError && <ServerStatusBanner />}
         {mx && !syncError && <SyncStatus mx={mx} />}
         {mx && !syncError && <ClockSkewBanner />}
         {loading && <ClientRootOptions mx={mx} />}

src/app/pages/client/ClockSkewBanner.tsx

@@ -19,7 +19,7 @@ const readDismissedUntil = (): number => {
 };
 
 /**
- * [Gitea #158] "Your computer's clock is 14 minutes ahead of the server."
+ * [Gitea #158] "This device's clock is 14 minutes ahead of the server."
  * Same slot and style as the sync banners. Shown while the skew monitor is
  * over its threshold; the direction matters, so it is said. Dismissable for
  * 24 h; never auto-corrects anything.
@@ -53,8 +53,8 @@ export function ClockSkewBanner() {
       >
         <Box alignItems="Center" gap="300" wrap="Wrap" justifyContent="Center">
           <Text size="L400" align="Center">
-            Your computer&apos;s clock is <b>{describeSkewVsServer(skewMs)}</b>. Encrypted messages
-            and voice calls will fail until it is fixed.
+            This device&apos;s clock is <b>{describeSkewVsServer(skewMs)}</b>. Voice calls and
+            encrypted messages can fail until it&apos;s corrected.
           </Text>
           <Button
             size="300"

src/app/pages/client/SyncStatus.tsx

@@ -1,8 +1,11 @@
 import { MatrixClient, SyncState } from 'matrix-js-sdk';
 import React, { useCallback, useState } from 'react';
+import { useAtomValue } from 'jotai';
 import { Box, config, Line, Text } from 'folds';
 import { useSyncState } from '../../hooks/useSyncState';
 import { ContainerColor } from '../../styles/ContainerColor.css';
+import { serverStatusAtom } from '../../state/serverStatus';
+import { serverConfirmedUpSince } from '../../utils/kumaStatus';
 
 type StateData = {
   current: SyncState | null;
@@ -13,6 +16,7 @@ type SyncStatusProps = {
   mx: MatrixClient;
 };
 export function SyncStatus({ mx }: SyncStatusProps) {
+  const serverStatus = useAtomValue(serverStatusAtom);
   const [stateData, setStateData] = useState<StateData>({
     current: null,
     previous: undefined,
@@ -53,7 +57,14 @@ export function SyncStatus({ mx }: SyncStatusProps) {
     );
   }
 
-  if (stateData.current === SyncState.Reconnecting) {
+  // [Gitea #124] When Kuma confirms the homeserver is down, the status banner
+  // says so ("Lotus Chat's server is down…") instead of "Connection Lost!".
+  const serverDown = serverStatus.status?.homeserver === 'down';
+  // Only blame the user's connection when Kuma has checked the server since
+  // the drop and it was fine (a stale "up" from before proves nothing).
+  const serverUp = serverConfirmedUpSince(serverStatus.status, serverStatus.lostAt);
+
+  if (stateData.current === SyncState.Reconnecting && !serverDown) {
     return (
       <Box direction="Column" shrink="No">
         <Box
@@ -64,14 +75,18 @@ export function SyncStatus({ mx }: SyncStatusProps) {
           role="status"
           aria-live="polite"
         >
-          <Text size="L400">Connection Lost! Reconnecting...</Text>
+          <Text size="L400">
+            {serverUp
+              ? "Connection lost. Our status checks say Lotus Chat's server is up, so it may be your internet connection. Reconnecting…"
+              : 'Connection Lost! Reconnecting...'}
+          </Text>
         </Box>
         <Line variant="Warning" size="300" />
       </Box>
     );
   }
 
-  if (stateData.current === SyncState.Error) {
+  if (stateData.current === SyncState.Error && !serverDown) {
     return (
       <Box direction="Column" shrink="No">
         <Box
@@ -82,7 +97,11 @@ export function SyncStatus({ mx }: SyncStatusProps) {
           role="alert"
           aria-live="assertive"
         >
-          <Text size="L400">Connection Lost!</Text>
+          <Text size="L400">
+            {serverUp
+              ? "Connection lost. Our status checks say Lotus Chat's server is up, so check your internet connection."
+              : 'Connection Lost!'}
+          </Text>
         </Box>
         <Line variant="Critical" size="300" />
       </Box>

src/app/pages/client/sidebar/SpaceTabs.tsx

@@ -49,13 +49,7 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useAnyRoomLiveCall } from '../../../hooks/useSpaceLiveCall';
 import { LiveDot } from './SpaceTabs.css';
-import {
-  getOriginBaseUrl,
-  getSpaceLobbyPath,
-  getSpacePath,
-  joinPathComponent,
-} from '../../pathUtils';
-import { useClientConfig } from '../../../hooks/useClientConfig';
+import { getSpaceLobbyPath, getSpacePath, joinPathComponent } from '../../pathUtils';
 import {
   SidebarAvatar,
   SidebarItem,
@@ -102,6 +96,7 @@ import { settingsAtom } from '../../../state/settings';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
 import { InviteUserPrompt } from '../../../components/invite-user-prompt';
 
 type SpaceMenuProps = {
@@ -112,7 +107,7 @@ type SpaceMenuProps = {
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
   ({ room, requestClose, onUnpin }, ref) => {
     const mx = useMatrixClient();
-    const { hashRouter } = useClientConfig();
+    const lotusBase = useLotusShareBase();
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const roomToParents = useAtomValue(roomToParentsAtom);
     const powerLevels = usePowerLevels(room);
@@ -152,9 +147,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     const handleCopyLotusLink = () => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
       const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-      copyToClipboard(
-        getLotusSpacePermalink(getOriginBaseUrl(hashRouter), roomIdOrAlias, viaServers),
-      );
+      copyToClipboard(getLotusSpacePermalink(lotusBase, roomIdOrAlias, viaServers));
       requestClose();
     };
 

src/app/pages/client/space/Space.tsx

@@ -39,13 +39,7 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import {
-  getOriginBaseUrl,
-  getSpaceLobbyPath,
-  getSpaceRoomPath,
-  getSpaceSearchPath,
-} from '../../pathUtils';
-import { useClientConfig } from '../../../hooks/useClientConfig';
+import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
@@ -92,6 +86,7 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { BreakWord } from '../../../styles/Text.css';
 import { InviteUserPrompt } from '../../../components/invite-user-prompt';
+import { useLotusShareBase } from '../../../hooks/useLotusLinkBase';
 import { useCallEmbed } from '../../../hooks/useCallEmbed';
 
 type SpaceMenuProps = {
@@ -100,7 +95,7 @@ type SpaceMenuProps = {
 };
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
   const mx = useMatrixClient();
-  const { hashRouter } = useClientConfig();
+  const lotusBase = useLotusShareBase();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
@@ -137,9 +132,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const handleCopyLotusLink = () => {
     const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
     const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    copyToClipboard(
-      getLotusSpacePermalink(getOriginBaseUrl(hashRouter), roomIdOrAlias, viaServers),
-    );
+    copyToClipboard(getLotusSpacePermalink(lotusBase, roomIdOrAlias, viaServers));
     requestClose();
   };
 

src/app/plugins/call/CallControl.ts

@@ -2,7 +2,7 @@ import { ClientWidgetApi } from 'matrix-widget-api';
 import { EventEmitter } from 'events';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
-import { getCallDocument } from './utils';
+import { canDelegateCapability } from './utils';
 
 export enum CallControlEvent {
   StateUpdate = 'state_update',
@@ -19,6 +19,41 @@ export type LotusQualityPayload = {
   screenshareMaxFramerate?: number | null;
 };
 
+/** fromWidget `io.lotus.hotkey` (Gitea #43): a watched key in the call frame. */
+export type ForkHotkeyReport =
+  | {
+      type: 'keydown' | 'keyup';
+      code: string;
+      repeat: boolean;
+      ctrlKey: boolean;
+      altKey: boolean;
+      metaKey: boolean;
+      shiftKey: boolean;
+      /** Went to a text field in the frame. */
+      editable: boolean;
+      /** Went to a button/link in the frame. */
+      interactive: boolean;
+    }
+  | { type: 'focus' };
+
+export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
+  if (typeof data !== 'object' || data === null) return null;
+  const d = data as Record<string, unknown>;
+  if (d.type === 'focus') return { type: 'focus' };
+  if ((d.type !== 'keydown' && d.type !== 'keyup') || typeof d.code !== 'string') return null;
+  return {
+    type: d.type,
+    code: d.code,
+    repeat: d.repeat === true,
+    ctrlKey: d.ctrlKey === true,
+    altKey: d.altKey === true,
+    metaKey: d.metaKey === true,
+    shiftKey: d.shiftKey === true,
+    editable: d.editable === true,
+    interactive: d.interactive === true,
+  };
+}
+
 export class CallControl extends EventEmitter implements CallControlState {
   private state: CallControlState;
 
@@ -26,14 +61,6 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private iframe: HTMLIFrameElement;
 
-  private bodyMutationObserver: MutationObserver;
-
-  private controlMutationObserver: MutationObserver;
-
-  // C-H3: coalesces bursts of body-subtree mutations into a single debounced
-  // re-observe pass so a busy EC re-render doesn't thrash the control observer.
-  private bodyMutationTimer?: ReturnType<typeof setTimeout>;
-
   // [Gitea #56] Tracks the participant currently pinned via focusCameraParticipant(),
   // so callers (MemberGlance) can render a "Focus camera" / "Unfocus camera" toggle
   // instead of a one-way pin with no way back. null == no manual pin (speaker-follows).
@@ -62,68 +89,12 @@ export class CallControl extends EventEmitter implements CallControlState {
   // timeout — io.lotus toWidget actions must only be sent after call-join).
   private joined = false;
 
-  private get document(): Document | undefined {
-    return getCallDocument(this.iframe);
-  }
-
-  private get screenshareButton(): HTMLElement | undefined {
-    const screenshareBtn = this.document?.querySelector(
-      '[data-testid="incall_screenshare"]',
-    ) as HTMLElement | null;
-
-    return screenshareBtn ?? undefined;
-  }
-
-  private get leaveButton(): Element | undefined {
-    const leaveBtn = this.document?.querySelector('[data-testid="incall_leave"]');
-
-    return leaveBtn ?? undefined;
-  }
-
-  private get settingsButton(): HTMLElement | undefined {
-    // EC 0.20.1: settings button moved to bottom-left; fall back to bottom-center.
-    const settingsButtonLeft = this.document?.querySelector(
-      '[data-testid="settings-bottom-left"]',
-    ) as HTMLButtonElement | undefined;
-    const settingsButtonCenter = this.document?.querySelector(
-      '[data-testid="settings-bottom-center"]',
-    ) as HTMLButtonElement | undefined;
-
-    return settingsButtonLeft ?? settingsButtonCenter ?? undefined;
-  }
-
-  private get reactionsButton(): HTMLElement | undefined {
-    // EC 0.20.1: reactions/raise-hand button sits just before the leave button.
-    const reactionsButton = this.leaveButton?.previousElementSibling as HTMLElement | null;
-
-    return reactionsButton ?? undefined;
-  }
-
-  private get spotlightButton(): HTMLInputElement | undefined {
-    const spotlightButton = this.document?.querySelector(
-      'input[value="spotlight"]',
-    ) as HTMLInputElement | null;
-
-    return spotlightButton ?? undefined;
-  }
-
-  private get gridButton(): HTMLInputElement | undefined {
-    const gridButton = this.document?.querySelector(
-      'input[value="grid"]',
-    ) as HTMLInputElement | null;
-
-    return gridButton ?? undefined;
-  }
-
   constructor(state: CallControlState, call: ClientWidgetApi, iframe: HTMLIFrameElement) {
     super();
 
     this.state = state;
     this.call = call;
     this.iframe = iframe;
-
-    this.bodyMutationObserver = new MutationObserver(this.onBodyMutation.bind(this));
-    this.controlMutationObserver = new MutationObserver(this.onControlMutation.bind(this));
   }
 
   public getState(): CallControlState {
@@ -180,6 +151,8 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.joined = true;
     this.sendDeafenState();
     this.sendQuality();
+    this.sendHotkeyCodes();
+    this.sendFrameScreenshareAllowed();
   }
 
   /**
@@ -194,62 +167,8 @@ export class CallControl extends EventEmitter implements CallControlState {
     if (this._audioOutputId !== undefined) this.sendAudioOutput(this._audioOutputId);
     // [Gitea #17] The pin lives fork-side and is dropped on a handler remount.
     if (this._focusedUserId !== null) this.sendFocus(this._focusedUserId, this._focusedMediaId);
-  }
-
-  public startObserving() {
-    if (!this.document) return;
-
-    // C-H3: watch the whole body subtree (not just direct children) so we
-    // re-bind the control observer when EC re-renders its controls deeper in the
-    // tree. Debounced via onBodyMutation() to avoid thrashing on busy renders.
-    this.bodyMutationObserver.observe(this.document.body, {
-      childList: true,
-      subtree: true,
-    });
-    this.applyBodyMutation();
-  }
-
-  private onBodyMutation() {
-    // C-H3: coalesce a burst of subtree mutations into one debounced pass.
-    if (this.bodyMutationTimer !== undefined) return;
-    this.bodyMutationTimer = setTimeout(() => {
-      this.bodyMutationTimer = undefined;
-      this.applyBodyMutation();
-    }, 100);
-  }
-
-  private applyBodyMutation() {
-    if (!this.document) return;
-
-    this.document.body.style.setProperty('background', 'none', 'important');
-
-    const controls = this.leaveButton?.parentElement?.parentElement;
-    if (controls) {
-      controls.style.setProperty('position', 'absolute');
-      controls.style.setProperty('visibility', 'hidden');
-    }
-
-    this.observeControls();
-  }
-
-  private observeControls() {
-    this.controlMutationObserver.disconnect();
-
-    const screenshareBtn = this.screenshareButton;
-    if (screenshareBtn) {
-      this.controlMutationObserver.observe(screenshareBtn, {
-        attributes: true,
-        attributeFilter: ['data-kind'],
-      });
-    }
-    const spotlightBtn = this.spotlightButton;
-    if (spotlightBtn) {
-      this.controlMutationObserver.observe(spotlightBtn, {
-        attributes: true,
-      });
-    }
-
-    this.onControlMutation();
+    this.sendHotkeyCodes();
+    this.sendFrameScreenshareAllowed();
   }
 
   private async setMediaState(state: ElementMediaStatePayload) {
@@ -330,30 +249,152 @@ export class CallControl extends EventEmitter implements CallControlState {
     }
   }
 
-  // [Gitea #43] Set once the fork reports io.lotus.controls_state: from then on
-  // layout / settings / reactions go over the widget API and screenshare +
-  // layout state come from that report, not from EC's DOM. Older forks never
-  // send it and keep the DOM path below.
-  private forkControls = false;
+  // [Gitea #43] The fork has reported io.lotus.controls_state, so its Lotus
+  // action handlers are mounted. Screenshare and layout state come from that
+  // report; the host never reads or clicks EC's DOM.
+  private forkReady = false;
+
+  // [Gitea #43] The fork shows EC's own screenshare button inside the frame
+  // (lotusFrameScreenshare: no Capability Delegation here), so the host bar
+  // hides its own.
+  private _frameScreenshare = false;
+
+  private frameScreenshareListeners = new Set<() => void>();
+
+  // [Gitea #43] The fork draws the "Share your screen?" prompt inside the frame
+  // on request (io.lotus.prompt_screenshare), so where the click can't be
+  // delegated our call-bar button asks for that instead of starting the share.
+  private _screensharePrompt = false;
+
+  // [Gitea #43] The fork's in-frame prompt is showing: anything the host lays
+  // over the frame (the picture-in-picture overlay) must let clicks through.
+  private _screensharePromptOpen = false;
+
+  // [Gitea #43] Whether the room's call policy allows screensharing; the fork
+  // hides its in-frame button when it doesn't.
+  private frameScreenshareAllowed = true;
+
+  private hotkeyCodes = new Map<string, string[]>();
+
+  private hotkeyListeners = new Set<(report: ForkHotkeyReport) => void>();
+
+  /** EC's own screenshare button is shown in the frame instead of ours. */
+  public get frameScreenshare(): boolean {
+    return this._frameScreenshare;
+  }
+
+  /**
+   * Starting a share must go through the fork's in-frame prompt: this engine
+   * can't delegate the click (Firefox, Safari, WebKitGTK) and the fork has
+   * the prompt. Stopping never needs it.
+   */
+  public get screenshareNeedsPrompt(): boolean {
+    return this._screensharePrompt && !canDelegateCapability();
+  }
+
+  /** The fork's in-frame "Share your screen?" prompt is showing. */
+  public get screensharePromptOpen(): boolean {
+    return this._screensharePromptOpen;
+  }
+
+  /**
+   * Ask the fork to show "Share your screen?" inside the call frame; its Share
+   * button starts the share with the frame's own click.
+   */
+  public promptScreenshare(): void {
+    this.sendForkAction('io.lotus.prompt_screenshare', {});
+  }
+
+  /**
+   * Subscribe to `frameScreenshare` / `screenshareNeedsPrompt` /
+   * `screensharePromptOpen` changes. Returns an unsubscribe.
+   */
+  public onFrameScreenshareChange(cb: () => void): () => void {
+    this.frameScreenshareListeners.add(cb);
+    return () => {
+      this.frameScreenshareListeners.delete(cb);
+    };
+  }
+
+  /** Room call policy for the in-frame screenshare button. */
+  public setFrameScreenshareAllowed(allowed: boolean): void {
+    this.frameScreenshareAllowed = allowed;
+    this.sendFrameScreenshareAllowed();
+  }
+
+  private sendFrameScreenshareAllowed(): void {
+    if (!this.joined || !this.forkReady) return;
+    if (!this._frameScreenshare && !this._screensharePrompt) return;
+    this.sendForkAction('io.lotus.set_frame_screenshare', {
+      visible: this.frameScreenshareAllowed,
+    });
+  }
+
+  /** Key codes `source` (e.g. 'ptt', 'deafen') wants reported from the frame. */
+  public setHotkeyCodes(source: string, codes: string[]): void {
+    this.hotkeyCodes.set(source, codes);
+    this.sendHotkeyCodes();
+  }
+
+  private sendHotkeyCodes(): void {
+    if (!this.joined || !this.forkReady) return;
+    const codes = [...new Set([...this.hotkeyCodes.values()].flat())];
+    this.call.transport.send('io.lotus.set_hotkeys', { codes }).catch(() => undefined);
+  }
+
+  /** Subscribe to the fork's `io.lotus.hotkey` reports. Returns an unsubscribe. */
+  public onHotkey(cb: (report: ForkHotkeyReport) => void): () => void {
+    this.hotkeyListeners.add(cb);
+    return () => {
+      this.hotkeyListeners.delete(cb);
+    };
+  }
+
+  /** [Gitea #43] The fork's `io.lotus.hotkey` report. */
+  public onHotkeyReport(data: unknown): void {
+    const report = parseForkHotkeyReport(data);
+    if (report) this.hotkeyListeners.forEach((l) => l(report));
+  }
 
   /** [Gitea #43] The fork's `io.lotus.controls_state` report. */
   public onControlsState(data: unknown) {
     if (typeof data !== 'object' || data === null) return;
-    const { screensharing, layout } = data as { screensharing?: unknown; layout?: unknown };
-    this.forkControls = true;
+    const { screensharing, layout, frameScreenshare, screensharePrompt, screensharePromptOpen } =
+      data as {
+        screensharing?: unknown;
+        layout?: unknown;
+        frameScreenshare?: unknown;
+        screensharePrompt?: unknown;
+        screensharePromptOpen?: unknown;
+      };
+    const firstReport = !this.forkReady;
+    this.forkReady = true;
+    const frame = frameScreenshare === true;
+    const prompt = screensharePrompt === true;
+    const promptOpen = screensharePromptOpen === true;
+    if (promptOpen !== this._screensharePromptOpen) {
+      this._screensharePromptOpen = promptOpen;
+      if (frame === this._frameScreenshare && prompt === this._screensharePrompt) {
+        this.frameScreenshareListeners.forEach((l) => l());
+      }
+    }
+    if (frame !== this._frameScreenshare || prompt !== this._screensharePrompt) {
+      const promptTurnedOn = prompt && !this._screensharePrompt;
+      this._frameScreenshare = frame;
+      this._screensharePrompt = prompt;
+      this.frameScreenshareListeners.forEach((l) => l());
+      if (promptTurnedOn && !firstReport) this.sendFrameScreenshareAllowed();
+    }
+    if (firstReport) {
+      this.sendHotkeyCodes();
+      this.sendFrameScreenshareAllowed();
+    }
     this.applyControls(
       typeof screensharing === 'boolean' ? screensharing : this.screenshare,
       layout === 'spotlight' || layout === 'grid' ? layout === 'spotlight' : this.spotlight,
     );
   }
 
-  private onControlMutation() {
-    if (this.forkControls) return;
-    const screenshare: boolean = this.screenshareButton?.getAttribute('data-kind') === 'primary';
-    const spotlight: boolean = this.spotlightButton?.checked ?? false;
-    this.applyControls(screenshare, spotlight);
-  }
-
   private applyControls(screenshare: boolean, spotlight: boolean) {
     const wasScreensharing = this.screenshare;
 
@@ -453,39 +494,65 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.applyScreenshareAudioMuted();
   }
 
+  /**
+   * Must be called synchronously inside the user's click: starting a share
+   * calls getDisplayMedia in the frame, which needs that click. Where the
+   * browser can hand the click over (Capability Delegation, Chromium incl.
+   * WebView2) it is sent with delegation. Elsewhere the host bar hides its
+   * button and EC's own shows in the frame (`frameScreenshare`); a plain send
+   * still stops a share, which needs no click.
+   */
   public toggleScreenshare() {
-    this.screenshareButton?.click();
+    const data = { on: !this.screenshare };
+    if (canDelegateCapability()) {
+      this.sendDelegated('io.lotus.set_screenshare', data, 'display-capture');
+      return;
+    }
+    this.sendForkAction('io.lotus.set_screenshare', data);
+  }
+
+  /**
+   * Send a widget action with `postMessage(…, { delegate })` so the frame
+   * receives the user's activation for `capability`. matrix-widget-api has no
+   * postMessage options, so swap its `sendInternal` for this one synchronous
+   * send (the request is posted before `send()` returns). Delegation refuses a
+   * `*` target origin, so the frame's real origin is used.
+   */
+  private sendDelegated(action: string, data: Record<string, unknown>, capability: string): void {
+    const target = this.iframe.contentWindow;
+    if (!target) return;
+    const targetOrigin = new URL(this.iframe.src, window.location.href).origin;
+    const transport = this.call.transport as unknown as {
+      sendInternal: (message: unknown) => void;
+    };
+    const hadOwn = Object.prototype.hasOwnProperty.call(transport, 'sendInternal');
+    const original = transport.sendInternal;
+    transport.sendInternal = (message: unknown) =>
+      target.postMessage(message, {
+        targetOrigin,
+        delegate: capability,
+      } as WindowPostMessageOptions);
+    try {
+      this.call.transport.send(action, data).catch(() => undefined);
+    } finally {
+      if (hadOwn) transport.sendInternal = original;
+      else delete (transport as { sendInternal?: unknown }).sendInternal;
+    }
   }
 
   public toggleSpotlight() {
-    if (this.forkControls) {
-      this.sendForkAction('io.lotus.set_layout', {
-        layout: this.spotlight ? 'grid' : 'spotlight',
-      });
-      return;
-    }
-    if (this.spotlight) {
-      this.gridButton?.click();
-      return;
-    }
-    this.spotlightButton?.click();
+    this.sendForkAction('io.lotus.set_layout', {
+      layout: this.spotlight ? 'grid' : 'spotlight',
+    });
   }
 
   public toggleReactions() {
-    if (this.forkControls) {
-      this.sendForkAction('io.lotus.toggle_reactions', {});
-      return;
-    }
-    this.reactionsButton?.click();
+    this.sendForkAction('io.lotus.toggle_reactions', {});
   }
 
   public toggleSettings() {
-    if (this.forkControls) {
-      // Same as clicking EC's settings button: opens the modal.
-      this.sendForkAction('io.lotus.open_settings', { open: true });
-      return;
-    }
-    this.settingsButton?.click();
+    // Same as clicking EC's settings button: opens the modal.
+    this.sendForkAction('io.lotus.open_settings', { open: true });
   }
 
   private sendForkAction(action: string, data: Record<string, unknown>): void {
@@ -546,19 +613,27 @@ export class CallControl extends EventEmitter implements CallControlState {
    * track (`io.lotus.inject_audio`) rather than splicing the mic. `url` must be
    * an https/blob URL the widget can fetch WITHOUT credentials — the host
    * resolves an mxc clip to a `blob:` object URL first (authenticated media
-   * can't be fetched cross-realm by the widget). `volume` is 0–1.
+   * can't be fetched cross-realm by the widget) — and `audio` the same clip's
+   * bytes, which the fork prefers. `volume` is 0–1.
    *
    * The local user does not hear their own published track, so callers should
    * also play the clip locally for feedback.
    */
-  public injectAudio(url: string, volume = 1): Promise<{ played: boolean; reason?: string }> {
+  public injectAudio(
+    url: string,
+    volume = 1,
+    audio?: ArrayBuffer,
+  ): Promise<{ played: boolean; reason?: string }> {
     // [EC#13] The fork now refuses while the local mic is muted and replies
     // { played:false, reason:"muted" }; older forks reply {} (treated as played).
+    // [Gitea #43] `audio` carries the clip's bytes: a `blob:` URL only works on
+    // this origin, so a call page on its own origin can't fetch it. Forks that
+    // predate `audio` ignore it and use `url`.
     return this.call.transport
-      .send<{ url: string; volume: number }, { played?: boolean; reason?: string }>(
-        'io.lotus.inject_audio',
-        { url, volume },
-      )
+      .send<
+        { url: string; volume: number; audio?: ArrayBuffer },
+        { played?: boolean; reason?: string }
+      >('io.lotus.inject_audio', audio ? { url, volume, audio } : { url, volume })
       .then((r) => ({ played: r?.played !== false, reason: r?.reason }))
       .catch(() => ({ played: true }));
   }
@@ -587,14 +662,8 @@ export class CallControl extends EventEmitter implements CallControlState {
   }
 
   public dispose() {
-    if (this.bodyMutationTimer !== undefined) {
-      clearTimeout(this.bodyMutationTimer);
-      this.bodyMutationTimer = undefined;
-    }
     // [Gitea #56] Don't let a manual focus pin outlive the call.
     this.clearFocusParticipant();
-    this.bodyMutationObserver.disconnect();
-    this.controlMutationObserver.disconnect();
   }
 
   private emitStateUpdate() {

src/app/plugins/call/CallEmbed.ts

@@ -28,7 +28,9 @@ import {
 import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
 import { verifyDenoiseAssets } from './denoiseSmokeCheck';
-import { getCallDocument } from './utils';
+import { canDelegateCapability } from './utils';
+import { getCallPageUrl } from './callPageUrl';
+import { restrictWidgetMessages } from '../widgetTransport';
 
 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -105,8 +107,6 @@ export class CallEmbed {
 
   private readonly initialState: CallControlState;
 
-  private styleRetryObserver?: MutationObserver;
-
   private themeKind: ElementCallThemeKind = 'dark';
 
   // Watchdog: detects an iframe that never reaches a usable state.
@@ -217,6 +217,14 @@ export class CallEmbed {
       //  - transparent background so the room wallpaper shows through natively
       lotusCallState: 'true',
       lotusTransparent: 'true',
+      // [Gitea #43] The fork hides its own footer (we draw the call bar) and
+      // sets its root color-scheme from the theme, instead of us injecting CSS.
+      lotusHostControls: 'true',
+      // [Gitea #43] Engines without Capability Delegation (Firefox, Safari,
+      // WebKitGTK) can't start a share from our call bar: getDisplayMedia
+      // needs the click inside the frame. There the fork shows EC's own
+      // screenshare button and we hide ours.
+      ...(canDelegateCapability() ? {} : { lotusFrameScreenshare: 'true' }),
       // [lotus #3 / P5-15] Arm the fork's audio-inject handler so the in-call
       // soundboard can publish clips into the call. Dormant until the host
       // sends io.lotus.inject_audio (only on an explicit user click), so
@@ -247,10 +255,14 @@ export class CallEmbed {
       params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
     }
 
-    const widgetUrl = new URL(
-      `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
-      window.location.origin,
-    );
+    // [Gitea #43] On its own origin when config.json sets elementCallUrl.
+    const externalPage = getCallPageUrl();
+    const widgetUrl = externalPage
+      ? new URL(externalPage)
+      : new URL(
+          `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
+          window.location.origin,
+        );
     widgetUrl.search = params.toString();
 
     const options: IWidget = {
@@ -299,6 +311,8 @@ export class CallEmbed {
 
     const callWidgetDriver: WidgetDriver = new CallWidgetDriver(mx, room.roomId);
     const call: ClientWidgetApi = new ClientWidgetApi(widget, iframe, callWidgetDriver);
+    // Only messages from the call's own frame and origin reach the widget API.
+    restrictWidgetMessages(call, iframe, widget.origin);
 
     this.mx = mx;
     this.call = call;
@@ -310,10 +324,6 @@ export class CallEmbed {
     const controlState = initialControlState ?? new CallControlState(true, false, true);
     this.control = new CallControl(controlState, call, iframe);
     this.initialState = controlState;
-    this.control.startObserving();
-    iframe.onload = () => {
-      this.control.startObserving();
-    };
     // If the iframe document itself fails to load, fail fast.
     iframe.onerror = () => {
       this.settleLoad('iframe');
@@ -347,17 +357,8 @@ export class CallEmbed {
     return this.room.roomId;
   }
 
-  get document(): Document | undefined {
-    return getCallDocument(this.iframe);
-  }
-
   public setTheme(theme: ElementCallThemeKind) {
     this.themeKind = theme;
-    const doc = this.document;
-    if (doc && this.joined) {
-      const styleEl = doc.getElementById('lotus-ec-styles');
-      if (styleEl) styleEl.textContent = this.buildStyleContent();
-    }
     return this.call.transport
       .send(WidgetApiToWidgetAction.ThemeChange, { name: theme })
       .catch(() => {
@@ -438,6 +439,12 @@ export class CallEmbed {
         this.control.onControlsState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
+    // [Gitea #43] PTT / deafen keys pressed while focus is inside the frame.
+    this.disposables.push(
+      this.listenAction('io.lotus.hotkey', (evt) => {
+        this.control.onHotkeyReport((evt.detail as { data?: unknown } | undefined)?.data);
+      }),
+    );
     this.disposables.push(
       this.listenAction('io.lotus.call_state', (evt) => {
         const data = (evt.detail as { data?: { participants?: unknown } } | undefined)?.data;
@@ -479,7 +486,6 @@ export class CallEmbed {
     });
     this.clearLoadWatchdog();
     this.loadErrorListeners.clear();
-    this.styleRetryObserver?.disconnect();
     this.call.stop();
     this.container.removeChild(this.iframe);
     this.control.dispose();
@@ -572,14 +578,12 @@ export class CallEmbed {
 
   private onCallJoined(): void {
     this.settleLoad();
-    this.applyStyles();
-    this.control.startObserving();
 
     // C-H1: EC fires JoinCall again on an EC reconnect (this action has no
     // once-guard). forceState() would reset live mic/video/deafen back to the
     // join-time snapshot, so only run it on the FIRST join. On a rejoin we just
-    // re-apply styles/observers (above) and re-push the sticky fork state
-    // (deafen/quality), leaving the user's live media state untouched.
+    // re-push the sticky fork state (deafen/quality), leaving the user's live
+    // media state untouched.
     if (this.joined) {
       this.control.resendForkState();
       return;
@@ -590,50 +594,6 @@ export class CallEmbed {
     this.control.forceState(this.initialState);
   }
 
-  private buildStyleContent(): string {
-    return [
-      'html, body { background: none !important; }',
-      `:root { color-scheme: ${this.themeKind}; }`,
-      '[style*="height: 0"][style*="z-index: 1"][style*="align-self: center"] { display: none !important; }',
-      // EC 0.19.4: avatar uses line-height centering which breaks in some tile sizes;
-      // override with flexbox for reliable centering of the initial letter.
-      '._avatarContainer_1mrho_40 ._avatar_va14e_8 { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }',
-    ].join('\n');
-  }
-
-  private applyStyles(): void {
-    const doc = this.document;
-    if (!doc) return;
-
-    doc.body.style.setProperty('background', 'none', 'important');
-
-    if (!doc.getElementById('lotus-ec-styles')) {
-      const style = doc.createElement('style');
-      style.id = 'lotus-ec-styles';
-      style.textContent = this.buildStyleContent();
-      (doc.head ?? doc.body).appendChild(style);
-    } else {
-      const styleEl = doc.getElementById('lotus-ec-styles');
-      if (styleEl) styleEl.textContent = this.buildStyleContent();
-    }
-
-    // Hide EC built-in controls (we provide our own)
-    const leaveBtn = doc.body.querySelector('[data-testid="incall_leave"]');
-    if (leaveBtn) {
-      this.styleRetryObserver?.disconnect();
-      this.styleRetryObserver = undefined;
-      const controls = leaveBtn.parentElement?.parentElement;
-      if (controls) {
-        controls.style.setProperty('position', 'absolute');
-        controls.style.setProperty('visibility', 'hidden');
-      }
-    } else if (!this.styleRetryObserver) {
-      // Controls not in DOM yet — observe and retry when they appear
-      this.styleRetryObserver = new MutationObserver(() => this.applyStyles());
-      this.styleRetryObserver.observe(doc.body, { childList: true, subtree: true });
-    }
-  }
-
   private onEvent(ev: MatrixEvent): void {
     this.mx.decryptEventIfNeeded(ev);
     this.feedEvent(ev);

src/app/plugins/call/callPageUrl.test.ts

@@ -0,0 +1,81 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolveCallPageUrl, resolveDesktopCallPageUrl } from './callPageUrl';
+
+const URL_OK = 'https://call.chat.example.org/public/element-call/index.html';
+
+test('uses an absolute https URL on the web', () => {
+  assert.equal(resolveCallPageUrl(URL_OK, false), URL_OK);
+});
+
+test('strips a query or hash (the app adds its own parameters)', () => {
+  assert.equal(resolveCallPageUrl(`${URL_OK}?x=1#y`, false), URL_OK);
+});
+
+test('allows http only on localhost (development)', () => {
+  assert.equal(
+    resolveCallPageUrl('http://127.0.0.1:5174/public/element-call/index.html', false),
+    'http://127.0.0.1:5174/public/element-call/index.html',
+  );
+  assert.equal(resolveCallPageUrl('http://call.example.org/index.html', false), undefined);
+});
+
+test('desktop keeps the bundled page', () => {
+  assert.equal(resolveCallPageUrl(URL_OK, true), undefined);
+});
+
+test('anything else falls back to the bundled page', () => {
+  [
+    undefined,
+    null,
+    42,
+    '',
+    '  ',
+    'not a url',
+    '/public/element-call/index.html',
+    'http://call.chat.example.org/index.html',
+    ['javascript', 'alert(1)'].join(':'),
+    'data:text/html,x',
+  ].forEach((v) => assert.equal(resolveCallPageUrl(v, false), undefined, String(v)));
+});
+
+const APP = 'http://localhost:44548';
+const PAGE = '/public/element-call/index.html';
+
+test('desktop: the bundled page from the loopback origin on the same port', () => {
+  assert.equal(
+    resolveDesktopCallPageUrl('http://127.0.0.1:44548', APP, '/'),
+    `http://127.0.0.1:44548${PAGE}`,
+  );
+  assert.equal(
+    resolveDesktopCallPageUrl('http://127.0.0.1:44548/', APP, '/app/'),
+    `http://127.0.0.1:44548/app${PAGE}`,
+  );
+});
+
+test('desktop: unset or anything but same-port loopback http keeps the same-origin page', () => {
+  [
+    undefined,
+    '',
+    'http://127.0.0.1:44549',
+    'http://127.0.0.1',
+    'https://127.0.0.1:44548',
+    'http://localhost:44548',
+    'http://[::1]:44548',
+    'http://10.0.0.5:44548',
+    'https://call.chat.lotusguild.org',
+    'http://127.0.0.1:44548/evil/',
+    'http://127.0.0.1:44548/?x=1',
+    'http://user:pw@127.0.0.1:44548',
+    'not a url',
+    42,
+  ].forEach((v) => assert.equal(resolveDesktopCallPageUrl(v, APP, '/'), undefined, String(v)));
+});
+
+test('desktop: only when the app itself runs on http://localhost (release builds)', () => {
+  const v = 'http://127.0.0.1:44548';
+  assert.equal(resolveDesktopCallPageUrl(v, 'tauri://localhost', '/'), undefined);
+  assert.equal(resolveDesktopCallPageUrl(v, 'http://tauri.localhost', '/'), undefined);
+  assert.equal(resolveDesktopCallPageUrl(v, 'https://chat.lotusguild.org', '/'), undefined);
+  assert.equal(resolveDesktopCallPageUrl(v, 'http://localhost', '/'), undefined);
+});

src/app/plugins/call/callPageUrl.ts

@@ -0,0 +1,71 @@
+/**
+ * [Gitea #43] Where the Element Call page is loaded from.
+ *
+ * By default it's the copy bundled with this app (same origin). With
+ * `elementCallUrl` in config.json (e.g.
+ * "https://call.chat.lotusguild.org/public/element-call/index.html") the web
+ * app loads it from that origin instead, so the call frame can no longer
+ * reach this origin's storage (login token, crypto store) or service worker.
+ *
+ * Web only: the desktop app keeps its bundled copy (a network copy could
+ * drift from the bundle); see resolveDesktopCallPageUrl for how it isolates
+ * it. Anything that isn't an absolute https URL (http only on localhost, for
+ * development) is ignored, so a bad value falls
+ * back to the bundled page instead of breaking calls.
+ */
+export const resolveCallPageUrl = (value: unknown, desktop: boolean): string | undefined => {
+  if (desktop || typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const url = new URL(value);
+    // http only for local development (localhost is a secure context).
+    const local = url.hostname === 'localhost' || url.hostname === '127.0.0.1';
+    if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) return undefined;
+    url.search = '';
+    url.hash = '';
+    return url.href;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * [Gitea #43] Desktop: the bundled call page from a second origin.
+ *
+ * The desktop app is served by its local server at http://localhost:<port>.
+ * The same server answers on http://127.0.0.1:<port>, which is a different
+ * origin (and still a secure context), so loading the bundled call page from
+ * there cuts the call frame off from the app's storage (login token, crypto
+ * store) without a network copy that could drift from the bundle.
+ *
+ * Only used when cinny-desktop sets `desktopCallOrigin` (it ships the server
+ * and CSP changes this needs in the same release), only for a loopback http
+ * origin on the SAME port as the app, and only when the app itself runs on
+ * http://localhost (release builds). Anything else keeps the same-origin page.
+ */
+export const resolveDesktopCallPageUrl = (
+  value: unknown,
+  appOrigin: string,
+  basePath: string,
+): string | undefined => {
+  if (typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const app = new URL(appOrigin);
+    const call = new URL(value);
+    if (app.protocol !== 'http:' || app.hostname !== 'localhost' || !app.port) return undefined;
+    if (call.protocol !== 'http:' || call.hostname !== '127.0.0.1') return undefined;
+    if (call.port !== app.port || call.username || call.password) return undefined;
+    if (call.pathname !== '/' || call.search || call.hash) return undefined;
+    const base = basePath.replace(/\/+$/, '');
+    return `${call.origin}${base}/public/element-call/index.html`;
+  } catch {
+    return undefined;
+  }
+};
+
+let callPageUrl: string | undefined;
+
+export const setCallPageUrl = (url: string | undefined): void => {
+  callPageUrl = url;
+};
+
+export const getCallPageUrl = (): string | undefined => callPageUrl;

src/app/plugins/call/forkHotkeyReport.test.ts

@@ -0,0 +1,40 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseForkHotkeyReport } from './CallControl';
+
+test('parseForkHotkeyReport: key reports keep only known boolean flags', () => {
+  assert.deepEqual(
+    parseForkHotkeyReport({
+      type: 'keydown',
+      code: 'Space',
+      repeat: false,
+      ctrlKey: false,
+      altKey: 'yes',
+      metaKey: false,
+      shiftKey: true,
+      editable: false,
+      interactive: true,
+      extra: 1,
+    }),
+    {
+      type: 'keydown',
+      code: 'Space',
+      repeat: false,
+      ctrlKey: false,
+      altKey: false,
+      metaKey: false,
+      shiftKey: true,
+      editable: false,
+      interactive: true,
+    },
+  );
+  assert.equal(parseForkHotkeyReport({ type: 'keyup', code: 'KeyM' })?.type, 'keyup');
+});
+
+test('parseForkHotkeyReport: focus reports and junk', () => {
+  assert.deepEqual(parseForkHotkeyReport({ type: 'focus' }), { type: 'focus' });
+  assert.equal(parseForkHotkeyReport({ type: 'keydown' }), null);
+  assert.equal(parseForkHotkeyReport({ type: 'click', code: 'Space' }), null);
+  assert.equal(parseForkHotkeyReport(null), null);
+  assert.equal(parseForkHotkeyReport('keydown'), null);
+});

src/app/plugins/call/hooks.ts

@@ -73,3 +73,48 @@ export const useCallMicLevel = (callEmbed: CallEmbed | undefined): number => {
   );
   return useSyncExternalStore(subscribe, () => callEmbed?.getMicLevel() ?? 0);
 };
+
+/**
+ * [Gitea #43] How the call bar's screenshare button behaves:
+ * - `hidden`: EC's own button is inside the frame (fork lotus.20/21), so ours hides;
+ * - `prompt`: starting asks the fork for its in-frame "Share your screen?"
+ *   (no Capability Delegation in this engine);
+ * - `direct`: our own confirm, then a (delegated) set_screenshare.
+ */
+export type ScreenshareMode = 'hidden' | 'prompt' | 'direct';
+
+const screenshareMode = (control: CallControl): ScreenshareMode => {
+  if (control.frameScreenshare) return 'hidden';
+  return control.screenshareNeedsPrompt ? 'prompt' : 'direct';
+};
+
+export const useScreenshareMode = (control: CallControl | undefined): ScreenshareMode => {
+  const [mode, setMode] = useState<ScreenshareMode>(() =>
+    control ? screenshareMode(control) : 'direct',
+  );
+  useEffect(() => {
+    if (!control) {
+      setMode('direct');
+      return undefined;
+    }
+    const sync = () => setMode(screenshareMode(control));
+    sync();
+    return control.onFrameScreenshareChange(sync);
+  }, [control]);
+  return mode;
+};
+
+/** [Gitea #43] The fork's in-frame "Share your screen?" prompt is showing. */
+export const useScreensharePromptOpen = (control: CallControl | undefined): boolean => {
+  const [open, setOpen] = useState(() => control?.screensharePromptOpen ?? false);
+  useEffect(() => {
+    if (!control) {
+      setOpen(false);
+      return undefined;
+    }
+    const sync = () => setOpen(control.screensharePromptOpen);
+    sync();
+    return control.onFrameScreenshareChange(sync);
+  }, [control]);
+  return open;
+};

src/app/plugins/call/utils.ts

@@ -118,17 +118,10 @@ export function getCallCapabilities(
 }
 
 /**
- * The EC iframe's document, or undefined when it cannot be read. The widget is
- * same-origin, but when its navigation fails (offline, blocked) the frame
- * becomes a cross-origin error page and `contentWindow.document` THROWS a
- * SecurityError — which surfaced as page errors (and a React "Should not
- * already be working" cascade) from every DOM-driven call hook the moment the
- * load watchdog fired. Treat "can't read" the same as "not loaded yet".
+ * Capability Delegation (`postMessage(msg, { delegate })`) ships only in
+ * Chromium; other engines silently ignore the option, so the frame would get
+ * no activation. `navigator.userAgentData` is likewise Chromium-only, which
+ * makes it the practical feature test.
  */
-export const getCallDocument = (iframe: HTMLIFrameElement): Document | undefined => {
-  try {
-    return iframe.contentDocument ?? iframe.contentWindow?.document ?? undefined;
-  } catch {
-    return undefined;
-  }
-};
+export const canDelegateCapability = (): boolean =>
+  typeof navigator !== 'undefined' && 'userAgentData' in navigator;

src/app/plugins/react-custom-html-parser.tsx

@@ -122,11 +122,15 @@ const cleanHref = (href: string): string =>
   stripTrackingOnRender ? stripTrackingParams(href) : href;
 
 // [Gitea #130] Links to THIS deployment's room routes render and click like
-// matrix.to links. The base is set once from the client config
-// (ClientNonUIFeatures) because this module has no access to hooks.
-let lotusPermalinkBase: string | undefined;
-export const setLotusPermalinkBase = (baseUrl: string | undefined): void => {
-  lotusPermalinkBase = baseUrl;
+// matrix.to links. The bases are set once from the client config
+// (ClientNonUIFeatures) because this module has no access to hooks. [Gitea
+// #248] Several: the desktop app knows both its local origin and the public web
+// app (`webAppUrl`), and people share the public one.
+let lotusPermalinkBases: string[] = [];
+export const setLotusPermalinkBase = (baseUrls: string | string[] | undefined): void => {
+  lotusPermalinkBases = (Array.isArray(baseUrls) ? baseUrls : [baseUrls]).filter(
+    (b): b is string => !!b,
+  );
 };
 /**
  * The matrix.to form of `href` when it is a matrix.to link or a Lotus
@@ -134,7 +138,11 @@ export const setLotusPermalinkBase = (baseUrl: string | undefined): void => {
  */
 export const toMatrixToHref = (href: string): string | undefined => {
   if (testMatrixTo(href)) return href;
-  return lotusPermalinkBase ? lotusPermalinkToMatrixTo(lotusPermalinkBase, href) : undefined;
+  for (const base of lotusPermalinkBases) {
+    const matrixTo = lotusPermalinkToMatrixTo(base, href);
+    if (matrixTo) return matrixTo;
+  }
+  return undefined;
 };
 
 export const LINKIFY_OPTS: LinkifyOpts = {

src/app/plugins/widgetTransport.test.ts

@@ -0,0 +1,46 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { ClientWidgetApi } from 'matrix-widget-api';
+import { isFromWidgetFrame, restrictWidgetMessages } from './widgetTransport';
+
+const frame = {} as Window;
+const other = {} as Window;
+const ORIGIN = 'https://call.example.org';
+
+test('isFromWidgetFrame: only the widget frame at its origin', () => {
+  assert.equal(isFromWidgetFrame({ source: frame, origin: ORIGIN }, frame, ORIGIN), true);
+  assert.equal(isFromWidgetFrame({ source: other, origin: ORIGIN }, frame, ORIGIN), false);
+  assert.equal(isFromWidgetFrame({ source: frame, origin: 'null' }, frame, ORIGIN), false);
+  assert.equal(
+    isFromWidgetFrame({ source: frame, origin: 'https://evil.example' }, frame, ORIGIN),
+    false,
+  );
+  assert.equal(isFromWidgetFrame({ source: null, origin: ORIGIN }, null, ORIGIN), false);
+});
+
+test('restrictWidgetMessages swaps the listener and drops foreign messages', () => {
+  const seen: unknown[] = [];
+  const original = (ev: MessageEvent) => {
+    seen.push(ev.data);
+  };
+  const transport = { handleMessage: original };
+  const api = { transport } as unknown as ClientWidgetApi;
+  const iframe = { contentWindow: frame } as HTMLIFrameElement;
+  const listeners = new Set<EventListener>([original as EventListener]);
+  const inbound = {
+    addEventListener: (_t: string, l: EventListener) => listeners.add(l),
+    removeEventListener: (_t: string, l: EventListener) => listeners.delete(l),
+  } as unknown as Window;
+
+  restrictWidgetMessages(api, iframe, ORIGIN, inbound);
+  assert.equal(listeners.has(original as EventListener), false);
+  assert.equal(listeners.size, 1);
+  assert.equal(transport.handleMessage === original, false);
+
+  const dispatch = (ev: Partial<MessageEvent>) =>
+    listeners.forEach((l) => l(ev as unknown as Event));
+  dispatch({ source: other, origin: ORIGIN, data: 'spoof' });
+  dispatch({ source: frame, origin: 'null', data: 'wrong-origin' });
+  dispatch({ source: frame, origin: ORIGIN, data: 'real' });
+  assert.deepEqual(seen, ['real']);
+});

src/app/plugins/widgetTransport.ts

@@ -0,0 +1,47 @@
+import { ClientWidgetApi } from 'matrix-widget-api';
+
+type MessageLike = Pick<MessageEvent, 'source' | 'origin'>;
+
+/**
+ * True when a message came from the widget's own frame, at the origin the
+ * widget was loaded from.
+ */
+export const isFromWidgetFrame = (
+  ev: MessageLike,
+  frameWindow: Window | null | undefined,
+  widgetOrigin: string,
+): boolean => !!frameWindow && ev.source === frameWindow && ev.origin === widgetOrigin;
+
+type InboundTransport = {
+  handleMessage: (ev: MessageEvent) => void;
+};
+
+/**
+ * matrix-widget-api's host transport accepts a message from ANY window on the
+ * page as long as it carries the widget's id (its `strictOriginCheck` only
+ * compares against the host's own origin, and is off by default). The call
+ * widget's id is fixed ('call-embed'), so any other frame (a room widget, a
+ * URL-preview embed) could post fromWidget actions as the call: e.g. a fake
+ * push-to-talk keydown turned the user's mic on.
+ *
+ * Swap the transport's listener for one that only lets through messages from
+ * this widget's iframe and origin. `stop()` removes `handleMessage`, which is
+ * the guarded one after this. Call right after `new ClientWidgetApi(...)`,
+ * which has already started the transport.
+ */
+export const restrictWidgetMessages = (
+  api: ClientWidgetApi,
+  iframe: HTMLIFrameElement,
+  widgetOrigin: string,
+  inbound: Pick<Window, 'addEventListener' | 'removeEventListener'> = window,
+): void => {
+  const transport = api.transport as unknown as InboundTransport;
+  const original = transport.handleMessage;
+  const guarded = (ev: MessageEvent) => {
+    if (!isFromWidgetFrame(ev, iframe.contentWindow, widgetOrigin)) return;
+    original(ev);
+  };
+  inbound.removeEventListener('message', original as EventListener);
+  transport.handleMessage = guarded;
+  inbound.addEventListener('message', guarded as EventListener);
+};

src/app/state/keychainMirror.test.ts

@@ -0,0 +1,117 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { KeychainInvoke, sameTokens, syncKeychain, tokensOf } from './keychainMirror';
+import type { Session } from './sessions';
+
+const session: Session = {
+  baseUrl: 'https://matrix.example.org',
+  userId: '@alice:example.org',
+  deviceId: 'DEV1',
+  accessToken: 'syt_token',
+  refreshToken: 'mar_refresh',
+};
+
+/** An in-memory keychain behind the same commands the desktop app exposes. */
+const fakeKeychain = (opts: { supported?: boolean; failSet?: boolean; corrupt?: boolean } = {}) => {
+  let stored: unknown = null;
+  const calls: string[] = [];
+  const invoke: KeychainInvoke = async (cmd, args) => {
+    calls.push(cmd);
+    switch (cmd) {
+      case 'secure_session_supported':
+        return opts.supported ?? true;
+      case 'secure_session_get':
+        return stored;
+      case 'secure_session_set':
+        if (opts.failSet) throw new Error('Access is denied.');
+        stored = opts.corrupt ? { ...(args?.tokens as object), accessToken: 'x' } : args?.tokens;
+        return null;
+      case 'secure_session_clear':
+        stored = null;
+        return null;
+      default:
+        throw new Error(`unknown ${cmd}`);
+    }
+  };
+  return { invoke, calls, get: () => stored };
+};
+
+test('stores the tokens (not the whole session) and verifies them', async () => {
+  const kc = fakeKeychain();
+  assert.deepEqual(await syncKeychain(kc.invoke, session), { state: 'ok' });
+  assert.deepEqual(kc.get(), {
+    userId: '@alice:example.org',
+    deviceId: 'DEV1',
+    accessToken: 'syt_token',
+    refreshToken: 'mar_refresh',
+  });
+  assert.deepEqual(kc.calls, [
+    'secure_session_supported',
+    'secure_session_get',
+    'secure_session_set',
+    'secure_session_get',
+  ]);
+});
+
+test('an up-to-date copy is not rewritten', async () => {
+  const kc = fakeKeychain();
+  await syncKeychain(kc.invoke, session);
+  kc.calls.length = 0;
+  assert.deepEqual(await syncKeychain(kc.invoke, session), { state: 'ok' });
+  assert.deepEqual(kc.calls, ['secure_session_supported', 'secure_session_get']);
+});
+
+test('a token rotation rewrites; no session clears', async () => {
+  const kc = fakeKeychain();
+  await syncKeychain(kc.invoke, session);
+  await syncKeychain(kc.invoke, { ...session, accessToken: 'syt_new', refreshToken: undefined });
+  assert.equal((kc.get() as { accessToken: string }).accessToken, 'syt_new');
+  assert.equal('refreshToken' in (kc.get() as object), false);
+  assert.deepEqual(await syncKeychain(kc.invoke, null), { state: 'cleared' });
+  assert.equal(kc.get(), null);
+});
+
+test('unsupported platform: nothing is touched', async () => {
+  const kc = fakeKeychain({ supported: false });
+  assert.deepEqual(await syncKeychain(kc.invoke, session), { state: 'unsupported' });
+  assert.deepEqual(kc.calls, ['secure_session_supported']);
+});
+
+test('failures become a status, never an exception', async () => {
+  assert.deepEqual(await syncKeychain(fakeKeychain({ failSet: true }).invoke, session), {
+    state: 'error',
+    error: 'Access is denied.',
+  });
+  assert.deepEqual(await syncKeychain(fakeKeychain({ corrupt: true }).invoke, session), {
+    state: 'error',
+    error: 'read-back did not match',
+  });
+  // The credential store hangs (the support check itself is instant).
+  const hung: KeychainInvoke = async (cmd) =>
+    cmd === 'secure_session_supported'
+      ? true
+      : new Promise(() => {
+          /* never settles */
+        });
+  assert.deepEqual(await syncKeychain(hung, session, 50), {
+    state: 'error',
+    error: 'keychain timed out',
+  });
+});
+
+test('a desktop build without the commands reads as unsupported, not an error', async () => {
+  const missingCommand: KeychainInvoke = async (cmd) => {
+    throw new Error(`Command ${cmd} not found`);
+  };
+  assert.deepEqual(await syncKeychain(missingCommand, session), { state: 'unsupported' });
+});
+
+test('sameTokens compares only the secrets, treating a missing refresh token as absent', () => {
+  const t = tokensOf({ ...session, refreshToken: undefined });
+  assert.equal(sameTokens({ ...t }, t), true);
+  assert.equal(sameTokens({ ...t, refreshToken: undefined }, t), true);
+  assert.equal(sameTokens({ ...t, accessToken: 'other' }, t), false);
+  assert.equal(sameTokens({ ...t, refreshToken: 'r' }, t), false);
+  assert.equal(sameTokens(null, t), false);
+  assert.equal(sameTokens('string', t), false);
+});

src/app/state/keychainMirror.ts

@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import { getFallbackSession, onSessionPersisted, Session } from './sessions';
+
+/**
+ * [Gitea #105] Desktop, step 1: mirror the login tokens into the OS keychain.
+ *
+ * The session is still read from localStorage exactly as before; this only
+ * keeps a copy in the keychain (Windows Credential Manager) and checks it by
+ * reading it back, so real installs prove the keychain works before step 2
+ * switches reads over to it. Nothing here can log anyone out: every failure
+ * just records a status for Settings.
+ *
+ * Writes are serialized (a token rotation right after login must not race
+ * the login's write) and time out, so a hung credential store can't pile up.
+ * When there's no session the keychain entry is cleared, which also covers a
+ * logout whose page reload beat the clear.
+ */
+
+export type KeychainTokens = {
+  userId: string;
+  deviceId: string;
+  accessToken: string;
+  refreshToken?: string;
+};
+
+export type KeychainMirrorStatus =
+  | { state: 'idle' }
+  | { state: 'unsupported' }
+  | { state: 'ok' }
+  | { state: 'cleared' }
+  | { state: 'error'; error: string };
+
+export type KeychainInvoke = (cmd: string, args?: Record<string, unknown>) => Promise<unknown>;
+
+export const KEYCHAIN_TIMEOUT_MS = 5000;
+
+export const tokensOf = (session: Session): KeychainTokens => ({
+  userId: session.userId,
+  deviceId: session.deviceId,
+  accessToken: session.accessToken,
+  ...(session.refreshToken ? { refreshToken: session.refreshToken } : {}),
+});
+
+export const sameTokens = (a: unknown, b: KeychainTokens): boolean => {
+  if (!a || typeof a !== 'object') return false;
+  const t = a as Partial<KeychainTokens>;
+  return (
+    t.userId === b.userId &&
+    t.deviceId === b.deviceId &&
+    t.accessToken === b.accessToken &&
+    (t.refreshToken ?? undefined) === (b.refreshToken ?? undefined)
+  );
+};
+
+const withTimeout = <T>(p: Promise<T>, ms: number): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('keychain timed out')), ms);
+    p.then(
+      (v) => {
+        clearTimeout(timer);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(timer);
+        reject(e);
+      },
+    );
+  });
+
+const errorText = (e: unknown): string =>
+  (e instanceof Error ? e.message : String(e)).slice(0, 200);
+
+/**
+ * Bring the keychain in line with `session` (null = no session). Reads first
+ * and only writes when the stored copy differs, then verifies by reading back.
+ */
+export const syncKeychain = async (
+  invoke: KeychainInvoke,
+  session: Session | null,
+  timeoutMs = KEYCHAIN_TIMEOUT_MS,
+): Promise<KeychainMirrorStatus> => {
+  // A desktop build without the commands (older than this feature) rejects
+  // the call: that is "not supported", not an error to show the user.
+  let supported: unknown;
+  try {
+    supported = await withTimeout(invoke('secure_session_supported'), timeoutMs);
+  } catch {
+    supported = false;
+  }
+  if (supported !== true) return { state: 'unsupported' };
+  try {
+    if (!session) {
+      await withTimeout(invoke('secure_session_clear'), timeoutMs);
+      return { state: 'cleared' };
+    }
+    const tokens = tokensOf(session);
+    const stored = await withTimeout(invoke('secure_session_get'), timeoutMs);
+    if (sameTokens(stored, tokens)) return { state: 'ok' };
+    await withTimeout(invoke('secure_session_set', { tokens }), timeoutMs);
+    const back = await withTimeout(invoke('secure_session_get'), timeoutMs);
+    if (!sameTokens(back, tokens)) return { state: 'error', error: 'read-back did not match' };
+    return { state: 'ok' };
+  } catch (e) {
+    return { state: 'error', error: errorText(e) };
+  }
+};
+
+let status: KeychainMirrorStatus = { state: 'idle' };
+const statusListeners = new Set<(s: KeychainMirrorStatus) => void>();
+const setStatus = (next: KeychainMirrorStatus): void => {
+  status = next;
+  statusListeners.forEach((cb) => cb(next));
+};
+
+export const getKeychainMirrorStatus = (): KeychainMirrorStatus => status;
+
+let started = false;
+
+/** Start mirroring (desktop only; call once at boot). */
+export const startKeychainMirror = (invoke: KeychainInvoke | undefined): void => {
+  if (!invoke || started) return;
+  started = true;
+  let chain: Promise<unknown> = Promise.resolve();
+  const enqueue = (session: Session | null) => {
+    chain = chain.then(async () => setStatus(await syncKeychain(invoke, session)));
+  };
+  enqueue(getFallbackSession() ?? null);
+  onSessionPersisted((session) => enqueue(session));
+};
+
+export const useKeychainMirrorStatus = (): KeychainMirrorStatus => {
+  const [value, setValue] = useState(status);
+  useEffect(() => {
+    setValue(status);
+    statusListeners.add(setValue);
+    return () => {
+      statusListeners.delete(setValue);
+    };
+  }, []);
+  return value;
+};

src/app/state/plaintextCaches.test.ts

@@ -36,6 +36,7 @@ test('clearPlaintextCaches removes every plaintext/PII localStorage key', () =>
   store.set('cinny_recent_forward_targets_v1', '[]');
   store.set('cinny_recent_gifs_v1', '[]');
   store.set('cinny_recent_stickers_v1', '[]');
+  store.set('lotus_outbox_v1', '{"userId":"@me:server","entries":[]}');
   removed.length = 0;
 
   clearPlaintextCaches();
@@ -47,6 +48,7 @@ test('clearPlaintextCaches removes every plaintext/PII localStorage key', () =>
     'cinny_recent_forward_targets_v1',
     'cinny_recent_gifs_v1',
     'cinny_recent_stickers_v1',
+    'lotus_outbox_v1', // [Gitea #112] unsent message content
   ]) {
     assert.ok(removed.includes(key), `${key} cleared`);
   }

src/app/state/plaintextCaches.ts

@@ -7,6 +7,7 @@ import { clearRecentStickers } from './recentStickers';
 import { clearNavToActivePathStore } from './navToActivePath';
 import { DRAFT_MSG_KEY_PREFIX } from '../utils/draft';
 import { clearCallSession } from '../utils/callRejoin';
+import { clearOutbox } from '../utils/outbox';
 
 /**
  * [Gitea #41] Wipe every persisted composer draft (`draft-msg-<roomId>`). Drafts
@@ -44,6 +45,7 @@ const clearMsgDrafts = (): void => {
  * - `cinny_recent_forward_targets_v1` — recent forward contact/room graph (PII)
  * - `cinny_recent_gifs_v1` / `cinny_recent_stickers_v1` — media the user sent
  * - `navToActivePath<userId>` — per-space last-visited room paths (needs userId)
+ * - `lotus_outbox_v1` — decrypted content of messages not yet sent ([Gitea #112])
  * - `draft-msg-*` — unsent composer drafts (decrypted message text, unscoped by
  *   user — see [Gitea #41]; previously deliberately preserved across logout
  *   (N98), which let the next account on this device see/send a prior user's
@@ -93,6 +95,7 @@ export const clearPlaintextCaches = (userId?: string): void => {
   clearRecentGifs();
   clearRecentStickers();
   clearMsgDrafts();
+  clearOutbox();
   clearCallSession();
   clearStatusMessage();
   if (userId) clearNavToActivePathStore(userId);

src/app/state/sendOffline.ts

@@ -0,0 +1,9 @@
+import { atom } from 'jotai';
+
+/**
+ * [Gitea #112] True while the client can't reach the homeserver (sync is
+ * reconnecting / erroring, or the browser reports offline). Messages that
+ * failed for network reasons show "Queued" instead of "Failed to send" while
+ * this is set; the outbox sends them again once it clears.
+ */
+export const sendOfflineAtom = atom(false);

src/app/state/serverStatus.ts

@@ -0,0 +1,18 @@
+import { atom } from 'jotai';
+import { ServerStatus } from '../utils/kumaStatus';
+
+/**
+ * [Gitea #124] The homeserver's status from its Kuma status page (null: none
+ * configured, not fetched yet, or Kuma unreachable — all mean "no banner"),
+ * plus whether this client's own connection is currently lost.
+ */
+export const serverStatusAtom = atom<{
+  status: ServerStatus | null;
+  syncLost: boolean;
+  /** When this client's connection dropped (ms), null while connected. */
+  lostAt: number | null;
+}>({
+  status: null,
+  syncLost: false,
+  lostAt: null,
+});

src/app/state/sessions.test.ts

@@ -432,3 +432,20 @@ test('subscribeSessionChanges ignores unrelated storage keys', () => {
   listeners.forEach((cb) => cb({ key: 'some_unrelated_preference' }));
   assert.equal(fired, false);
 });
+
+test('onSessionPersisted: told about writes and removals; a throwing listener is harmless', async () => {
+  installStorage();
+  const { onSessionPersisted } = await import('./sessions');
+  const seen: (string | null)[] = [];
+  const offBad = onSessionPersisted(() => {
+    throw new Error('boom');
+  });
+  const off = onSessionPersisted((s) => seen.push(s ? s.accessToken : null));
+  setFallbackSession('tok-a', 'DEV', '@a:hs', 'https://hs', { refreshToken: 'ref-a' });
+  removeFallbackSession();
+  off();
+  offBad();
+  setFallbackSession('tok-b', 'DEV', '@a:hs', 'https://hs');
+  assert.deepEqual(seen, ['tok-a', null]);
+  assert.equal(getFallbackSession()?.accessToken, 'tok-b', 'write still happened');
+});

src/app/state/sessions.ts

@@ -233,6 +233,27 @@ export type SessionStoreName = {
 //   crypto: 'crypto-store',
 // } as const;
 
+// [Gitea #105] Listeners told about every session write in THIS tab (login,
+// token rotation) and removal (logout), e.g. the desktop keychain mirror.
+// A throwing listener never breaks the write.
+type PersistListener = (session: Session | null) => void;
+const persistListeners = new Set<PersistListener>();
+const notifyPersisted = (session: Session | null): void => {
+  persistListeners.forEach((cb) => {
+    try {
+      cb(session);
+    } catch {
+      /* listener errors must not affect login/logout */
+    }
+  });
+};
+export const onSessionPersisted = (cb: PersistListener): (() => void) => {
+  persistListeners.add(cb);
+  return () => {
+    persistListeners.delete(cb);
+  };
+};
+
 // Persist the session. Writes the atomic blob FIRST (so the consistent,
 // never-torn copy is established before the multi-key legacy write), then
 // dual-writes the legacy keys for rollback safety. Signature is unchanged —
@@ -249,6 +270,7 @@ export function setFallbackSession(
   localStorage.setItem(SESSION_BLOB_KEY, JSON.stringify(persisted));
   // Dual-write the legacy keys (removal of this half is a future release).
   writeLegacyKeys(persisted);
+  notifyPersisted(sessionFromPersisted(persisted));
 }
 
 // Clear BOTH the atomic blob and every legacy key so no reader (blob-preferring
@@ -257,6 +279,7 @@ export const removeFallbackSession = () => {
   localStorage.removeItem(SESSION_BLOB_KEY);
   Object.values(LEGACY_KEYS).forEach((key) => localStorage.removeItem(key));
   Object.values(OIDC_KEYS).forEach((key) => localStorage.removeItem(key));
+  notifyPersisted(null);
 };
 
 // Read the session, preferring the atomic blob. If the blob is absent or

src/app/utils/callInBrowser.test.ts

@@ -0,0 +1,32 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { getCallInBrowserUrl, resolveWebAppUrl } from './callInBrowser';
+
+test('resolveWebAppUrl keeps an https origin (+ path) without a trailing slash', () => {
+  assert.equal(resolveWebAppUrl('https://chat.example.org'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://example.org/chat/'), 'https://example.org/chat');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/?x=1#y'), 'https://chat.example.org');
+});
+
+test('resolveWebAppUrl rejects anything but absolute https', () => {
+  [
+    undefined,
+    null,
+    1,
+    '',
+    ' ',
+    '/home',
+    'http://chat.example.org',
+    'not a url',
+    ['javascript', 'alert(1)'].join(':'),
+    'data:text/html,x',
+  ].forEach((v) => assert.equal(resolveWebAppUrl(v), undefined, String(v)));
+});
+
+test('getCallInBrowserUrl points at the room in the web app (no auto-join)', () => {
+  const url = getCallInBrowserUrl('https://chat.example.org', '!room:example.org');
+  assert.equal(url, 'https://chat.example.org/home/!room%3Aexample.org');
+  assert.ok(!/join|call=/i.test(url ?? ''));
+  assert.equal(getCallInBrowserUrl(undefined, '!room:example.org'), undefined);
+});

src/app/utils/callInBrowser.ts

@@ -0,0 +1,27 @@
+import { getLotusRoomPermalink } from '../plugins/lotus-permalink';
+
+/**
+ * The public web app's address from config.json `webAppUrl` (the desktop app
+ * sets it; its own origin is a local server). Absolute https only; anything
+ * else is ignored.
+ */
+export const resolveWebAppUrl = (value: unknown): string | undefined => {
+  if (typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== 'https:') return undefined;
+    return url.origin + url.pathname.replace(/\/+$/, '');
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Where to send the user to take a call this app can't make: the room in the
+ * web app (they press Join there themselves — never an auto-join link, which
+ * a crafted URL could abuse to open someone's mic).
+ */
+export const getCallInBrowserUrl = (
+  webAppUrl: string | undefined,
+  roomId: string,
+): string | undefined => (webAppUrl ? getLotusRoomPermalink(webAppUrl, roomId) : undefined);

src/app/utils/clockSkew.test.ts

@@ -8,44 +8,96 @@ import {
   formatSkew,
 } from './clockSkew';
 
-// A live event received when the local clock is `skew` ms ahead of the server:
-// origin_server_ts = T (server clock), age = a, localTimestamp = (T + a + skew) - a.
-const feed = (m: ClockSkewMonitor, skew: number, age = 500, t = 1_700_000_000_000) =>
-  m.sample(t, age, t + skew);
+const T = 1_700_000_000_000;
 
-test('needs three samples, then reports the median with direction', () => {
+/**
+ * A live event received `atSec` seconds into the test, when the local clock is
+ * `skew` ms off the server and the response took `delay` ms to arrive:
+ * localTimestamp − origin_server_ts = skew + delay.
+ */
+const feed = (m: ClockSkewMonitor, skew: number, atSec = 0, delay = 0, wallJump = 0) =>
+  m.sample(T, 500, T + skew + delay, { wall: T + atSec * 1000 + wallJump, mono: atSec * 1000 });
+
+test('behind: reported as soon as there are three samples', () => {
   const m = new ClockSkewMonitor();
-  assert.equal(feed(m, 60_000).skewMs, null);
-  assert.equal(feed(m, 61_000).skewMs, null);
-  const s = feed(m, 59_000);
-  assert.equal(s.skewMs, 60_000);
+  assert.equal(feed(m, -60_000, 0).skewMs, null);
+  assert.equal(feed(m, -61_000, 1).skewMs, null);
+  const s = feed(m, -59_000, 2);
+  assert.equal(s.skewMs, -61_000);
   assert.equal(s.warning, true);
-  assert.equal(formatSkew(s.skewMs!), '60 seconds ahead');
+  assert.equal(formatSkew(s.skewMs!), '61 seconds behind');
 });
 
-test('one bad sample cannot trip the warning (median) and hysteresis clears only under 15 s', () => {
+test('ahead: only once it has held for a minute', () => {
   const m = new ClockSkewMonitor();
-  feed(m, 1000);
-  feed(m, 1500);
-  assert.equal(feed(m, 90_000).warning, false); // outlier
-  assert.equal(m.getState().skewMs, 1500);
+  feed(m, 60_000, 0);
+  feed(m, 60_000, 10);
+  assert.equal(feed(m, 60_000, 20).warning, false);
+  assert.equal(m.getState().skewMs, 60_000);
+  assert.equal(feed(m, 60_000, 59).warning, false);
+  assert.equal(feed(m, 60_000, 61).warning, true);
+});
 
+test('server stall (2026-09-29): a burst of late events does not read as a wrong clock', () => {
+  const m = new ClockSkewMonitor();
+  // Normal traffic, then the homeserver stalls and one /sync arrives 30 s late
+  // with a pile of events, then normal traffic again.
+  feed(m, 200, 0);
+  feed(m, 150, 5);
+  feed(m, 300, 10);
+  [1, 2, 3, 4, 5, 6].forEach(() => feed(m, 0, 130, 31_000));
+  assert.equal(m.getState().warning, false);
+  assert.ok(m.getState().skewMs! < 1000);
+
+  // Fresh client whose first samples are all from the late burst.
+  const fresh = new ClockSkewMonitor();
+  [1, 2, 3, 4, 5, 6].forEach(() => feed(fresh, 0, 0, 31_000));
+  assert.equal(fresh.getState().warning, false);
+  // …and the next timely event brings the estimate back down.
+  feed(fresh, 0, 70, 100);
+  assert.equal(fresh.getState().warning, false);
+  assert.equal(fresh.getState().skewMs, 100);
+});
+
+test('slow deliveries mixed with fast ones: the fastest one wins', () => {
+  const m = new ClockSkewMonitor();
+  [0, 20, 40, 60, 80].forEach((at, i) => feed(m, 45_000, at, i === 2 ? 0 : 20_000));
+  assert.equal(m.getState().skewMs, 45_000);
+  assert.equal(m.getState().warning, true);
+});
+
+test('hysteresis: once on, clears only under 15 s', () => {
   const w = new ClockSkewMonitor();
-  [40_000, 41_000, 39_000, 40_000, 40_000].forEach((s) => feed(w, s));
+  [0, 1, 2].forEach((at) => feed(w, -40_000, at));
   assert.equal(w.getState().warning, true);
-  // drifting down to 20 s: still >= 15 s → stays on
-  [20_000, 20_000, 20_000, 20_000, 20_000].forEach((s) => feed(w, s));
+  // Samples expire after 5 minutes; drifting to -20 s keeps it on (>= 15 s).
+  [400, 401, 402].forEach((at) => feed(w, -20_000, at));
+  assert.equal(w.getState().skewMs, -20_000);
   assert.equal(w.getState().warning, true);
-  [10_000, 10_000, 10_000, 10_000, 10_000].forEach((s) => feed(w, s));
+  [800, 801, 802].forEach((at) => feed(w, -10_000, at));
   assert.equal(w.getState().warning, false);
 });
 
+test('fixing the local clock starts the measurement afresh', () => {
+  const m = new ClockSkewMonitor();
+  [0, 1, 2].forEach((at) => feed(m, -14 * 60_000, at));
+  assert.equal(m.getState().warning, true);
+  // The user sets the clock forward 14 minutes: wall jumps vs the monotonic clock.
+  const jump = 14 * 60_000;
+  feed(m, 0, 10, 0, jump);
+  assert.equal(m.getState().warning, false);
+  assert.equal(m.getState().skewMs, null);
+  feed(m, 0, 11, 0, jump);
+  feed(m, 0, 12, 0, jump);
+  assert.equal(m.getState().skewMs, 0);
+  assert.equal(m.getState().warning, false);
+});
+
 test('stale or missing age is ignored (cache replay must not read as skew)', () => {
   const m = new ClockSkewMonitor();
-  const t = 1_700_000_000_000;
-  m.sample(t, undefined, t + 3_600_000);
-  m.sample(t, 40 * 24 * 60 * 60 * 1000, t + 3_600_000);
-  m.sample(t, -5, t);
+  m.sample(T, undefined, T + 3_600_000);
+  m.sample(T, 40 * 24 * 60 * 60 * 1000, T + 3_600_000);
+  m.sample(T, -5, T);
   assert.equal(m.getState().skewMs, null);
 });
 
@@ -53,10 +105,7 @@ test('subscribe fires on change only; reset clears', () => {
   const m = new ClockSkewMonitor();
   const seen: (number | null)[] = [];
   m.subscribe((s) => seen.push(s.skewMs));
-  feed(m, -120_000);
-  feed(m, -120_000);
-  feed(m, -120_000);
-  feed(m, -120_000);
+  [0, 1, 2, 3].forEach((at) => feed(m, -120_000, at));
   assert.deepEqual(seen, [-120_000]);
   assert.equal(formatSkew(-120_000), '2 minutes behind');
   m.reset();

src/app/utils/clockSkew.ts

@@ -22,8 +22,23 @@
 
 export const SKEW_WARN_MS = 30_000;
 export const SKEW_CLEAR_MS = 15_000;
-export const SKEW_SAMPLES = 5;
 export const SKEW_MIN_SAMPLES = 3;
+/** Samples older than this are forgotten. */
+export const SKEW_WINDOW_MS = 5 * 60 * 1000;
+export const SKEW_MAX_SAMPLES = 30;
+/**
+ * "Ahead" must hold across samples received at least this far apart.
+ *
+ * Incident 2026-09-29: the homeserver's host ran out of memory and stalled for
+ * ~2 minutes; the /sync that finally went out carried events whose `age` was
+ * computed ~30 s before it arrived, so every client read "your clock is 30 s
+ * ahead" — while the real problem was the server. A late delivery can only make
+ * the local clock look AHEAD (never behind), so the estimate is the LOWEST
+ * recent sample (the one delivered fastest), and "ahead" has to persist across
+ * a minute of fresh samples before it is reported. "Behind" can't come from a
+ * delay and is reported as soon as there are enough samples.
+ */
+export const SKEW_AHEAD_SPAN_MS = 60_000;
 /**
  * Sanity cap on `age`. Old events are still valid samples (the server computes
  * `age` at response time, so `ts + age` is its clock regardless of the event's
@@ -38,14 +53,21 @@ export type ClockSkewState = {
   warning: boolean;
 };
 
-const median = (xs: number[]): number => {
-  const s = [...xs].sort((a, b) => a - b);
-  const mid = Math.floor(s.length / 2);
-  return s.length % 2 ? s[mid] : (s[mid - 1] + s[mid]) / 2;
+/** A wall-clock change larger than this (vs the monotonic clock) resets the samples. */
+export const CLOCK_JUMP_MS = 5_000;
+
+type Sample = { skew: number; at: number };
+
+const currentClock = (): { wall: number; mono: number } => {
+  const wall = Date.now();
+  const mono = typeof performance !== 'undefined' ? performance.now() : wall;
+  return { wall, mono };
 };
 
 export class ClockSkewMonitor {
-  private samples: number[] = [];
+  private samples: Sample[] = [];
+
+  private clockOffset: number | undefined;
 
   private state: ClockSkewState = { skewMs: null, warning: false };
 
@@ -64,25 +86,47 @@ export class ClockSkewMonitor {
 
   /**
    * Feed one live event. `originServerTs` + `age` come from the event;
-   * `localTimestamp` is the SDK's `Date.now() − age` at construction.
+   * `localTimestamp` is the SDK's `Date.now() − age` at construction; `clock`
+   * is when the sample was taken: wall clock and a monotonic clock
+   * (performance.now()), so samples are aged by real elapsed time and a change
+   * of the local clock (someone fixing it) starts the measurement afresh.
+   * Only feed events stamped by OUR homeserver: another server's
+   * `origin_server_ts` carries that server's clock.
    * Returns the new state (unchanged object when nothing moved).
    */
   public sample(
     originServerTs: number,
     age: number | undefined,
     localTimestamp: number,
+    clock: { wall: number; mono: number } = currentClock(),
   ): ClockSkewState {
     if (age === undefined || !Number.isFinite(age) || age < 0 || age > SKEW_MAX_AGE_MS) {
       return this.state;
     }
     if (!Number.isFinite(originServerTs) || !Number.isFinite(localTimestamp)) return this.state;
-    this.samples.push(localTimestamp - originServerTs);
-    if (this.samples.length > SKEW_SAMPLES) this.samples.shift();
+    const now = clock.mono;
+    const offset = clock.wall - clock.mono;
+    if (this.clockOffset !== undefined && Math.abs(offset - this.clockOffset) > CLOCK_JUMP_MS) {
+      // The local clock was changed: earlier samples measured the old clock.
+      this.reset();
+    }
+    this.clockOffset = offset;
+    this.samples.push({ skew: localTimestamp - originServerTs, at: now });
+    this.samples = this.samples.filter((s) => now - s.at <= SKEW_WINDOW_MS);
+    if (this.samples.length > SKEW_MAX_SAMPLES) this.samples.shift();
     if (this.samples.length < SKEW_MIN_SAMPLES) return this.state;
 
-    const skewMs = median(this.samples);
+    // Delivery delay only ever adds to a sample: the smallest is the truest.
+    const skewMs = Math.min(...this.samples.map((s) => s.skew));
     const abs = Math.abs(skewMs);
-    const warning = this.state.warning ? abs >= SKEW_CLEAR_MS : abs > SKEW_WARN_MS;
+    let warning: boolean;
+    if (this.state.warning) warning = abs >= SKEW_CLEAR_MS;
+    else if (skewMs < -SKEW_WARN_MS) warning = true;
+    else if (skewMs > SKEW_WARN_MS) {
+      // Ahead: only if the fastest-delivered samples stayed high for a minute.
+      const span = now - Math.min(...this.samples.map((s) => s.at));
+      warning = span >= SKEW_AHEAD_SPAN_MS;
+    } else warning = false;
     if (skewMs === this.state.skewMs && warning === this.state.warning) return this.state;
     this.state = { skewMs, warning };
     this.listeners.forEach((cb) => cb(this.state));
@@ -91,6 +135,7 @@ export class ClockSkewMonitor {
 
   public reset(): void {
     this.samples = [];
+    this.clockOffset = undefined;
     if (this.state.skewMs !== null || this.state.warning) {
       this.state = { skewMs: null, warning: false };
       this.listeners.forEach((cb) => cb(this.state));

src/app/utils/copyImage.test.ts

@@ -0,0 +1,72 @@
+import { afterEach, test } from 'node:test';
+import assert from 'node:assert/strict';
+import { canCopyImage, copyImageFromUrl, toPngBlob } from './copyImage';
+
+const g = globalThis as Record<string, unknown>;
+const saved = {
+  ClipboardItem: Object.getOwnPropertyDescriptor(g, 'ClipboardItem'),
+  navigator: Object.getOwnPropertyDescriptor(g, 'navigator'),
+  fetch: Object.getOwnPropertyDescriptor(g, 'fetch'),
+};
+const stub = (key: keyof typeof saved, value: unknown) =>
+  Object.defineProperty(g, key, { value, configurable: true, writable: true });
+
+afterEach(() => {
+  (Object.keys(saved) as (keyof typeof saved)[]).forEach((key) => {
+    const desc = saved[key];
+    if (desc) Object.defineProperty(g, key, desc);
+    else delete g[key];
+  });
+});
+
+class FakeClipboardItem {
+  constructor(public data: Record<string, Promise<Blob>>) {}
+}
+
+test('canCopyImage is false without ClipboardItem', () => {
+  stub('ClipboardItem', undefined);
+  assert.equal(canCopyImage(), false);
+});
+
+test('canCopyImage is true with ClipboardItem and clipboard.write', () => {
+  stub('ClipboardItem', FakeClipboardItem);
+  stub('navigator', { clipboard: { write: async () => undefined } });
+  assert.equal(canCopyImage(), true);
+});
+
+test('toPngBlob passes a PNG through untouched', async () => {
+  const png = new Blob(['x'], { type: 'image/png' });
+  assert.equal(await toPngBlob(png), png);
+});
+
+test('copyImageFromUrl writes a single image/png item', async () => {
+  const png = new Blob(['x'], { type: 'image/png' });
+  stub('fetch', async () => ({ ok: true, blob: async () => png }));
+  stub('ClipboardItem', FakeClipboardItem);
+  const written: FakeClipboardItem[][] = [];
+  stub('navigator', {
+    clipboard: {
+      write: async (items: FakeClipboardItem[]) => {
+        written.push(items);
+      },
+    },
+  });
+
+  await copyImageFromUrl('blob:x');
+  assert.equal(written.length, 1);
+  assert.deepEqual(Object.keys(written[0][0].data), ['image/png']);
+  assert.equal(await written[0][0].data['image/png'], png);
+});
+
+test('copyImageFromUrl rejects when the fetch fails', async () => {
+  stub('fetch', async () => ({ ok: false, status: 404 }));
+  stub('ClipboardItem', FakeClipboardItem);
+  stub('navigator', {
+    clipboard: {
+      write: async (items: FakeClipboardItem[]) => {
+        await items[0].data['image/png'];
+      },
+    },
+  });
+  await assert.rejects(copyImageFromUrl('blob:x'), /404/);
+});

src/app/utils/copyImage.ts

@@ -0,0 +1,43 @@
+/**
+ * [Gitea #164] Copy an image to the system clipboard.
+ *
+ * The async Clipboard API only guarantees `image/png`, so anything else (JPEG,
+ * WebP, a GIF's first frame) is re-encoded through a canvas first. The blob is
+ * handed to `ClipboardItem` as a promise so the write starts inside the click's
+ * user activation — Safari rejects a write that begins after an await.
+ */
+export function canCopyImage(): boolean {
+  return (
+    typeof ClipboardItem !== 'undefined' &&
+    typeof navigator !== 'undefined' &&
+    typeof navigator.clipboard?.write === 'function'
+  );
+}
+
+export async function toPngBlob(blob: Blob): Promise<Blob> {
+  if (blob.type === 'image/png') return blob;
+  const bitmap = await createImageBitmap(blob);
+  try {
+    const canvas = document.createElement('canvas');
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('no 2d context');
+    ctx.drawImage(bitmap, 0, 0);
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('png encode failed'))), 'image/png');
+    });
+  } finally {
+    bitmap.close();
+  }
+}
+
+export async function copyImageFromUrl(url: string): Promise<void> {
+  const png = fetch(url)
+    .then((res) => {
+      if (!res.ok) throw new Error(`fetch failed: ${res.status}`);
+      return res.blob();
+    })
+    .then(toPngBlob);
+  await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]);
+}

src/app/utils/kumaStatus.test.ts

@@ -0,0 +1,262 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  DEFAULT_GROUPS,
+  kumaBeatTime,
+  kumaUrls,
+  parseKumaStatus,
+  pickBanner,
+  resolveStatusPage,
+  serverConfirmedUpSince,
+  ServerStatus,
+} from './kumaStatus';
+
+// The live `matrix` status page's groups (captured 2026-09-29).
+const PAGE = {
+  publicGroupList: [
+    { name: 'Homeserver', monitorList: [{ id: 30, name: 'Synapse HTTP' }] },
+    {
+      name: 'Voice calls',
+      monitorList: [
+        { id: 37, name: 'Matrix: LiveKit (public /rtc)' },
+        { id: 38, name: 'Matrix: call tokens (public /sfu/get)' },
+        { id: 39, name: 'Matrix: call page (call.chat)' },
+      ],
+    },
+    { name: 'Login', monitorList: [{ id: 15, name: 'Authentication Server' }] },
+  ],
+  maintenanceList: [],
+  incidents: [],
+};
+const UP = 1;
+const DOWN = 0;
+const PENDING = 2;
+/** Kuma's beat format: "YYYY-MM-DD HH:MM:SS.mmm" in UTC, oldest first. */
+const beats = (...statuses: number[]) =>
+  statuses.map((status, i) => ({
+    status,
+    time: `2026-09-29 14:${String(10 + i).padStart(2, '0')}:00.000`,
+    msg: '',
+  }));
+const hb = (over: Record<number, number[]> = {}) => ({
+  heartbeatList: {
+    30: beats(...(over[30] ?? [UP, UP, UP])),
+    37: beats(...(over[37] ?? [UP, UP])),
+    38: beats(...(over[38] ?? [UP, UP])),
+    39: beats(...(over[39] ?? [UP, UP])),
+    15: beats(...(over[15] ?? [UP, UP])),
+  },
+  uptimeList: {},
+});
+const parse = (page: unknown, heartbeat: unknown) =>
+  parseKumaStatus(page, heartbeat, DEFAULT_GROUPS);
+
+test('config: only a valid page for the listed homeserver', () => {
+  const cfg = {
+    'matrix.lotusguild.org': { url: 'https://isitup.lotusguild.org/', slug: 'matrix' },
+  };
+  const page = resolveStatusPage(cfg, 'matrix.lotusguild.org');
+  assert.deepEqual(page, {
+    url: 'https://isitup.lotusguild.org',
+    slug: 'matrix',
+    groups: DEFAULT_GROUPS,
+  });
+  assert.deepEqual(kumaUrls(page!), {
+    page: 'https://isitup.lotusguild.org/api/status-page/matrix',
+    heartbeat: 'https://isitup.lotusguild.org/api/status-page/heartbeat/matrix',
+  });
+  assert.equal(resolveStatusPage(cfg, 'matrix.org'), undefined, 'other homeservers: nothing');
+  assert.equal(resolveStatusPage(cfg, undefined), undefined);
+  assert.equal(resolveStatusPage(undefined, 'matrix.lotusguild.org'), undefined);
+  for (const bad of [
+    { url: 'http://isitup.lotusguild.org', slug: 'matrix' },
+    { url: ['javascript', 'alert(1)'].join(':'), slug: 'matrix' },
+    { url: 'https://isitup.lotusguild.org', slug: '../admin' },
+    { url: 'https://isitup.lotusguild.org', slug: '' },
+    { url: 'not a url', slug: 'matrix' },
+  ]) {
+    assert.equal(resolveStatusPage({ hs: bad }, 'hs'), undefined, JSON.stringify(bad));
+  }
+  assert.equal(
+    resolveStatusPage({ hs: { url: 'http://localhost:3001', slug: 'm' } }, 'hs')?.url,
+    'http://localhost:3001',
+    'http allowed for local development',
+  );
+});
+
+test('all green on the live page layout', () => {
+  const s = parse(PAGE, hb());
+  assert.equal(s.homeserver, 'up');
+  assert.equal(s.calls, 'up');
+  assert.equal(s.login, 'up');
+  assert.equal(pickBanner(s, { syncLost: false, where: 'client' }), undefined);
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' }), undefined);
+});
+
+test('down needs two failing checks: down+down or pending+down; one blip is not down', () => {
+  assert.equal(parse(PAGE, hb({ 30: [UP, UP, DOWN] })).homeserver, 'up', 'single failure');
+  assert.equal(parse(PAGE, hb({ 30: [UP, PENDING] })).homeserver, 'up', 'pending only');
+  assert.equal(parse(PAGE, hb({ 30: [UP, DOWN, DOWN] })).homeserver, 'down');
+  assert.equal(parse(PAGE, hb({ 30: [UP, PENDING, DOWN] })).homeserver, 'down');
+  assert.equal(parse(PAGE, hb({ 30: [DOWN, DOWN, UP] })).homeserver, 'up', 'recovered');
+});
+
+test('any failing monitor takes its group down (one piece breaks calls)', () => {
+  const s = parse(PAGE, hb({ 38: [DOWN, DOWN] }));
+  assert.equal(s.calls, 'down');
+  assert.equal(s.homeserver, 'up');
+});
+
+test('unknown when the group or its beats are missing, and unknown shows nothing', () => {
+  const s = parse({ publicGroupList: [] }, hb());
+  assert.deepEqual([s.homeserver, s.calls, s.login], ['unknown', 'unknown', 'unknown']);
+  assert.equal(parse(PAGE, { heartbeatList: {} }).homeserver, 'unknown');
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' }), undefined);
+});
+
+test('garbage from Kuma never throws and never shows a banner', () => {
+  for (const [page, heartbeat] of [
+    [null, null],
+    ['<html>', 42],
+    [{ publicGroupList: 'x', maintenanceList: {}, incidents: 7 }, { heartbeatList: [] }],
+    [{ publicGroupList: [{ name: 'Homeserver', monitorList: [{ id: {} }] }] }, hb()],
+  ]) {
+    const s = parse(page, heartbeat);
+    assert.equal(pickBanner(s, { syncLost: true, where: 'client' }), undefined);
+  }
+  assert.equal(pickBanner(null, { syncLost: true, where: 'client' }), undefined);
+});
+
+test('beat times are read as UTC; checkedAt is the oldest latest beat', () => {
+  assert.equal(kumaBeatTime('2026-09-29 14:16:11.804'), Date.UTC(2026, 8, 29, 14, 16, 11, 804));
+  assert.equal(kumaBeatTime('nope'), undefined);
+  const s = parse(PAGE, hb());
+  assert.equal(s.homeserverCheckedAt, Date.UTC(2026, 8, 29, 14, 12));
+});
+
+test('"your connection" only when Kuma checked AFTER the drop and the server was up', () => {
+  const s = parse(PAGE, hb());
+  const checked = s.homeserverCheckedAt!;
+  assert.equal(serverConfirmedUpSince(s, checked - 60_000), true, 'checked after the drop');
+  assert.equal(serverConfirmedUpSince(s, checked + 1), false, 'stale: checked before the drop');
+  assert.equal(serverConfirmedUpSince(s, null), false, 'not disconnected');
+  const down = parse(PAGE, hb({ 30: [UP, DOWN, DOWN] }));
+  assert.equal(serverConfirmedUpSince(down, checked - 60_000), false);
+  assert.equal(serverConfirmedUpSince(null, 1), false);
+});
+
+test('server down vs having problems depends on this client’s own connection', () => {
+  const s = parse(PAGE, hb({ 30: [DOWN, DOWN] }));
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' })?.kind, 'server-down');
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' })?.tone, 'Critical');
+  assert.equal(pickBanner(s, { syncLost: false, where: 'client' })?.kind, 'server-problems');
+  assert.equal(pickBanner(s, { syncLost: false, where: 'login' })?.kind, 'server-down');
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' })?.dismissable, false);
+});
+
+test('priority: server > maintenance > calls > announcement; one strip only', () => {
+  const s: ServerStatus = {
+    ...parse(PAGE, hb({ 30: [DOWN, DOWN], 37: [DOWN, DOWN] })),
+    maintenance: [{ id: '1', title: 'Upgrade', description: '' }],
+    incidents: [{ id: '2', title: 'Heads up', content: '', style: 'info', updated: 'x' }],
+  };
+  assert.equal(pickBanner(s, { syncLost: true, where: 'client' })?.kind, 'server-down');
+  assert.equal(
+    pickBanner({ ...s, homeserver: 'up' }, { syncLost: false, where: 'client' })?.kind,
+    'maintenance',
+  );
+  assert.equal(
+    pickBanner({ ...s, homeserver: 'up', maintenance: [] }, { syncLost: false, where: 'client' })
+      ?.kind,
+    'calls-down',
+  );
+  assert.equal(
+    pickBanner(
+      { ...s, homeserver: 'up', maintenance: [], calls: 'up' },
+      { syncLost: false, where: 'client' },
+    )?.kind,
+    'announcement',
+  );
+});
+
+test('calls-down is not shown on the login screen or when the whole server is down', () => {
+  const calls = parse(PAGE, hb({ 37: [DOWN, DOWN] }));
+  assert.equal(pickBanner(calls, { syncLost: false, where: 'login' }), undefined);
+  const both = parse(PAGE, hb({ 30: [DOWN, DOWN], 37: [DOWN, DOWN] }));
+  assert.equal(pickBanner(both, { syncLost: false, where: 'client' })?.kind, 'server-problems');
+});
+
+test('login-down only on the login screen', () => {
+  const s = parse(PAGE, hb({ 15: [DOWN, DOWN] }));
+  assert.equal(pickBanner(s, { syncLost: false, where: 'login' })?.kind, 'login-down');
+  assert.equal(pickBanner(s, { syncLost: false, where: 'client' }), undefined);
+});
+
+test('maintenance: title, end time and plain-text description', () => {
+  const end = '2026-09-29T22:15:00.000Z';
+  const s = parse(
+    {
+      ...PAGE,
+      maintenanceList: [
+        {
+          id: 7,
+          title: 'Homeserver upgrade',
+          description: '**Synapse 1.160**, see [notes](https://x)',
+          status: 'under-maintenance',
+          timeslotList: [{ startDate: '2026-09-29T22:00:00.000Z', endDate: end }],
+        },
+        { id: 8, title: 'Later', status: 'scheduled' },
+      ],
+    },
+    hb(),
+  );
+  assert.equal(s.maintenance.length, 1, 'only windows under maintenance');
+  assert.equal(s.maintenance[0].end, Date.parse(end));
+  const b = pickBanner(s, { syncLost: false, where: 'client' })!;
+  assert.equal(b.kind, 'maintenance');
+  assert.match(b.text, /^Maintenance in progress until .+: Homeserver upgrade\. /);
+  assert.equal(b.detail, 'Synapse 1.160, see notes');
+  assert.equal(b.dismissable, false);
+});
+
+test('announcements: tone from style, dismissable, a new edit comes back', () => {
+  const incident = {
+    id: 3,
+    style: 'danger',
+    title: 'Planned maintenance tonight',
+    content: 'Calls will drop briefly.',
+    active: true,
+    createdDate: '2026-09-29 15:00:00',
+    lastUpdatedDate: null,
+  };
+  const s = parse({ ...PAGE, incidents: [incident] }, hb());
+  const b = pickBanner(s, { syncLost: false, where: 'client' })!;
+  assert.equal(b.kind, 'announcement');
+  assert.equal(b.tone, 'Critical');
+  assert.equal(b.dismissable, true);
+  const dismissed = new Set([b.key]);
+  assert.equal(pickBanner(s, { syncLost: false, where: 'client', dismissed }), undefined);
+  const edited = parse(
+    { ...PAGE, incidents: [{ ...incident, lastUpdatedDate: '2026-09-29 16:00:00' }] },
+    hb(),
+  );
+  assert.equal(
+    pickBanner(edited, { syncLost: false, where: 'client', dismissed })?.kind,
+    'announcement',
+  );
+  const inactive = parse({ ...PAGE, incidents: [{ ...incident, active: false }] }, hb());
+  assert.equal(pickBanner(inactive, { syncLost: false, where: 'client' }), undefined);
+  const info = parse({ ...PAGE, incidents: [{ ...incident, style: 'info' }] }, hb());
+  assert.equal(pickBanner(info, { syncLost: false, where: 'client' })?.tone, 'Primary');
+});
+
+test('a dismissed calls-down banner lets the next one through, never hides server-down', () => {
+  const s = parse(PAGE, hb({ 37: [DOWN, DOWN] }));
+  const dismissed = new Set(['calls-down', 'server-down', 'server-problems']);
+  assert.equal(pickBanner(s, { syncLost: false, where: 'client', dismissed }), undefined);
+  const down = parse(PAGE, hb({ 30: [DOWN, DOWN] }));
+  assert.equal(
+    pickBanner(down, { syncLost: true, where: 'client', dismissed })?.kind,
+    'server-down',
+  );
+});

src/app/utils/kumaStatus.ts

@@ -0,0 +1,332 @@
+/**
+ * [Gitea #124] Homeserver status from an Uptime Kuma status page.
+ *
+ * config.json maps a homeserver to a Kuma status page:
+ *   "statusPages": { "matrix.lotusguild.org": { "url": "https://isitup.lotusguild.org",
+ *     "slug": "matrix", "groups": { "homeserver": "Homeserver", "calls": "Voice calls",
+ *     "login": "Login" } } }
+ * Users of any other homeserver never contact Kuma.
+ *
+ * Kuma 2.x public JSON:
+ * - GET /api/status-page/<slug>: publicGroupList[{name, monitorList[{id}]}],
+ *   maintenanceList (only windows UNDER maintenance right now), incidents
+ *   (announcements posted on the page).
+ * - GET /api/status-page/heartbeat/<slug>: heartbeatList{<monitorId>: [{status, time}]},
+ *   status 0 down, 1 up, 2 pending, 3 maintenance.
+ *
+ * Everything here is pure and defensive: anything unexpected reads as
+ * "unknown", and unknown never shows a banner.
+ */
+
+export type StatusGroups = { homeserver?: string; calls?: string; login?: string };
+export type StatusPageConfig = { url: string; slug: string; groups: StatusGroups };
+
+export type ServiceState = 'up' | 'down' | 'unknown';
+export type KumaMaintenance = { id: string; title: string; description: string; end?: number };
+export type KumaIncident = {
+  id: string;
+  title: string;
+  content: string;
+  style: string;
+  updated: string;
+};
+export type ServerStatus = {
+  homeserver: ServiceState;
+  /**
+   * When Kuma last checked every homeserver monitor (the OLDEST of their
+   * latest beats, ms). Lets the client tell "Kuma has looked since my
+   * connection dropped and the server was fine" from a stale "up".
+   */
+  homeserverCheckedAt?: number;
+  calls: ServiceState;
+  login: ServiceState;
+  maintenance: KumaMaintenance[];
+  incidents: KumaIncident[];
+};
+
+export const DEFAULT_GROUPS: Required<StatusGroups> = {
+  homeserver: 'Homeserver',
+  calls: 'Voice calls',
+  login: 'Login',
+};
+
+const obj = (v: unknown): Record<string, unknown> | undefined =>
+  v && typeof v === 'object' && !Array.isArray(v) ? (v as Record<string, unknown>) : undefined;
+const str = (v: unknown): string => (typeof v === 'string' ? v : '');
+
+/** The status page for `serverName`, if config.json names a valid one. */
+export const resolveStatusPage = (
+  statusPages: unknown,
+  serverName: string | undefined,
+): StatusPageConfig | undefined => {
+  if (!serverName) return undefined;
+  const entry = obj(obj(statusPages)?.[serverName]);
+  if (!entry) return undefined;
+  const slug = str(entry.slug);
+  if (!/^[a-z0-9-]{1,64}$/i.test(slug)) return undefined;
+  try {
+    const url = new URL(str(entry.url));
+    const local = url.hostname === 'localhost' || url.hostname === '127.0.0.1';
+    if (url.protocol !== 'https:' && !(url.protocol === 'http:' && local)) return undefined;
+    const g = obj(entry.groups) ?? {};
+    return {
+      url: url.origin,
+      slug,
+      groups: {
+        homeserver: str(g.homeserver) || DEFAULT_GROUPS.homeserver,
+        calls: str(g.calls) || DEFAULT_GROUPS.calls,
+        login: str(g.login) || DEFAULT_GROUPS.login,
+      },
+    };
+  } catch {
+    return undefined;
+  }
+};
+
+export const kumaUrls = (page: StatusPageConfig) => ({
+  page: `${page.url}/api/status-page/${page.slug}`,
+  heartbeat: `${page.url}/api/status-page/heartbeat/${page.slug}`,
+});
+
+const DOWN = 0;
+
+const PENDING = 2;
+
+/** Kuma beat time ("2026-09-29 14:16:11.804", UTC) → ms. */
+export const kumaBeatTime = (time: unknown): number | undefined => {
+  const t = Date.parse(`${str(time).trim().replace(' ', 'T')}Z`);
+  return Number.isFinite(t) ? t : undefined;
+};
+
+const sortedBeats = (list: unknown): Record<string, unknown>[] =>
+  (Array.isArray(list) ? list : [])
+    .map((b) => obj(b))
+    .filter((b): b is Record<string, unknown> => !!b && typeof b.status === 'number')
+    .sort((a, b) => str(a.time).localeCompare(str(b.time)));
+
+/**
+ * A group is down when ANY of its monitors is failing across two checks in a
+ * row: its latest beat is down and the one before is down or pending (Kuma
+ * marks a first failure "pending" when the monitor has a retry). One piece
+ * down, say the call token service, already breaks the feature; two checks so
+ * a single blip doesn't flash a banner. Up when every monitor we have beats
+ * for is fine; unknown when the group or its beats are missing.
+ */
+const groupState = (
+  groupName: string | undefined,
+  groups: Map<string, string[]>,
+  beats: Record<string, unknown>,
+): ServiceState => {
+  if (!groupName) return 'unknown';
+  const ids = groups.get(groupName);
+  if (!ids || ids.length === 0) return 'unknown';
+  let known = 0;
+  let down = false;
+  ids.forEach((id) => {
+    const statuses = sortedBeats(beats[id]).map((b) => b.status as number);
+    if (statuses.length === 0) return;
+    known += 1;
+    const [prev, last] = statuses.slice(-2);
+    if (statuses.length >= 2 && last === DOWN && (prev === DOWN || prev === PENDING)) down = true;
+  });
+  if (down) return 'down';
+  return known > 0 ? 'up' : 'unknown';
+};
+
+export const parseKumaStatus = (
+  pageJson: unknown,
+  heartbeatJson: unknown,
+  groupNames: StatusGroups,
+): ServerStatus => {
+  const page = obj(pageJson) ?? {};
+  const groups = new Map<string, string[]>();
+  (Array.isArray(page.publicGroupList) ? page.publicGroupList : []).forEach((g) => {
+    const group = obj(g);
+    if (!group) return;
+    const ids = (Array.isArray(group.monitorList) ? group.monitorList : [])
+      .map((m) => obj(m)?.id)
+      .filter((id): id is number | string => typeof id === 'number' || typeof id === 'string')
+      .map(String);
+    groups.set(str(group.name), ids);
+  });
+  const beats = obj(obj(heartbeatJson)?.heartbeatList) ?? {};
+
+  const maintenance: KumaMaintenance[] = (
+    Array.isArray(page.maintenanceList) ? page.maintenanceList : []
+  )
+    .map((m) => obj(m))
+    .filter((m): m is Record<string, unknown> => !!m && str(m.title) !== '')
+    .filter((m) => !m.status || m.status === 'under-maintenance')
+    .map((m) => {
+      const slot = obj((Array.isArray(m.timeslotList) ? m.timeslotList : [])[0]);
+      const end = Date.parse(str(slot?.endDate));
+      return {
+        id: String(m.id ?? str(m.title)),
+        title: str(m.title),
+        description: str(m.description),
+        ...(Number.isFinite(end) ? { end } : {}),
+      };
+    });
+
+  const incidents: KumaIncident[] = (Array.isArray(page.incidents) ? page.incidents : [])
+    .map((i) => obj(i))
+    .filter((i): i is Record<string, unknown> => !!i && str(i.title) !== '' && i.active !== false)
+    .map((i) => ({
+      id: String(i.id ?? str(i.title)),
+      title: str(i.title),
+      content: str(i.content),
+      style: str(i.style) || 'info',
+      updated: str(i.lastUpdatedDate) || str(i.createdDate),
+    }));
+
+  const hsIds = (groupNames.homeserver && groups.get(groupNames.homeserver)) || [];
+  const hsLatest = hsIds.map((id) => kumaBeatTime(sortedBeats(beats[id]).slice(-1)[0]?.time));
+  const homeserverCheckedAt =
+    hsLatest.length > 0 && hsLatest.every((t): t is number => t !== undefined)
+      ? Math.min(...hsLatest)
+      : undefined;
+
+  return {
+    homeserver: groupState(groupNames.homeserver, groups, beats),
+    ...(homeserverCheckedAt !== undefined ? { homeserverCheckedAt } : {}),
+    calls: groupState(groupNames.calls, groups, beats),
+    login: groupState(groupNames.login, groups, beats),
+    maintenance,
+    incidents,
+  };
+};
+
+/**
+ * Kuma checked the homeserver AFTER this client lost its connection, and it
+ * was fine: the problem is more likely on the user's side. A stale "up" from
+ * before the drop proves nothing (Kuma takes a minute or two to notice an
+ * outage), so it doesn't count.
+ */
+export const serverConfirmedUpSince = (
+  status: ServerStatus | null | undefined,
+  lostAt: number | null | undefined,
+): boolean =>
+  !!status &&
+  !!lostAt &&
+  status.homeserver === 'up' &&
+  status.homeserverCheckedAt !== undefined &&
+  status.homeserverCheckedAt > lostAt;
+
+export type BannerTone = 'Critical' | 'Warning' | 'Primary';
+export type BannerKind =
+  | 'server-down'
+  | 'server-problems'
+  | 'maintenance'
+  | 'calls-down'
+  | 'announcement'
+  | 'login-down';
+export type StatusBanner = {
+  kind: BannerKind;
+  /** Stable id for dismissing (announcements come back when edited). */
+  key: string;
+  tone: BannerTone;
+  text: string;
+  detail?: string;
+  dismissable: boolean;
+};
+
+const formatTime = (ms: number): string =>
+  new Date(ms).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+
+const incidentTone = (style: string): BannerTone => {
+  if (style === 'danger') return 'Critical';
+  if (style === 'warning') return 'Warning';
+  return 'Primary';
+};
+
+/** Markdown-ish incident text as plain text for the Details line. */
+const plain = (s: string): string =>
+  s
+    .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+    .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+    .replace(/[*_`#>]/g, '')
+    .replace(/\s+\n/g, '\n')
+    .trim();
+
+/**
+ * The one strip to show, highest priority first. `syncLost`: this client's
+ * connection is reconnecting/erroring. `where`: the logged-in app or the
+ * login screen.
+ */
+export const pickBanner = (
+  status: ServerStatus | null | undefined,
+  opts: { syncLost: boolean; where: 'client' | 'login'; dismissed?: ReadonlySet<string> },
+): StatusBanner | undefined => {
+  if (!status) return undefined;
+  const dismissed = opts.dismissed ?? new Set<string>();
+  const candidates: StatusBanner[] = [];
+
+  if (status.homeserver === 'down') {
+    if (opts.syncLost || opts.where === 'login') {
+      candidates.push({
+        kind: 'server-down',
+        key: 'server-down',
+        tone: 'Critical',
+        text:
+          opts.where === 'login'
+            ? "Lotus Chat's server is down. We're on it."
+            : "Lotus Chat's server is down. We're on it, reconnecting…",
+        dismissable: false,
+      });
+    } else {
+      candidates.push({
+        kind: 'server-problems',
+        key: 'server-problems',
+        tone: 'Warning',
+        text: "Lotus Chat's server is having problems. Messages may be slow to send or arrive.",
+        dismissable: false,
+      });
+    }
+  }
+
+  const maint = status.maintenance[0];
+  if (maint) {
+    const until = maint.end ? ` until ${formatTime(maint.end)}` : '';
+    candidates.push({
+      kind: 'maintenance',
+      key: `maintenance:${maint.id}`,
+      tone: 'Warning',
+      text: `Maintenance in progress${until}: ${maint.title}. Messages and calls may be interrupted.`,
+      detail: plain(maint.description) || undefined,
+      dismissable: false,
+    });
+  }
+
+  if (opts.where === 'login' && status.login === 'down') {
+    candidates.push({
+      kind: 'login-down',
+      key: 'login-down',
+      tone: 'Warning',
+      text: "Sign-in is having problems right now. If it doesn't work, try again in a few minutes.",
+      dismissable: false,
+    });
+  }
+
+  if (opts.where === 'client' && status.calls === 'down' && status.homeserver !== 'down') {
+    candidates.push({
+      kind: 'calls-down',
+      key: 'calls-down',
+      tone: 'Warning',
+      text: 'Voice calls are down right now. Messages still work.',
+      dismissable: true,
+    });
+  }
+
+  status.incidents.forEach((i) => {
+    candidates.push({
+      kind: 'announcement',
+      key: `announcement:${i.id}:${i.updated}`,
+      tone: incidentTone(i.style),
+      text: i.title,
+      detail: plain(i.content) || undefined,
+      dismissable: true,
+    });
+  });
+
+  return candidates.find((b) => !(b.dismissable && dismissed.has(b.key)));
+};

src/app/utils/notifications.test.ts

@@ -13,13 +13,16 @@ type ReceiptCall = { eventId: string; receiptType: ReceiptType; unthreaded?: boo
 
 const evt = (id: string, sending = false) => ({ getId: () => id, isSending: () => sending }) as any;
 
-const thread = (id: string, lastReply: any) => ({ id, lastReply: () => lastReply }) as any;
+const thread = (id: string, lastReply: any, extra: Record<string, unknown> = {}) =>
+  ({ id, lastReply: () => lastReply, ...extra }) as any;
 
 type RoomOpts = {
   timeline?: any[];
   readUpTo?: string | null;
   threads?: any[];
   threadUnread?: Record<string, number>;
+  threadHighlight?: Record<string, number>;
+  readEvents?: string[];
   markedUnread?: boolean;
 };
 
@@ -30,8 +33,12 @@ const setup = (opts: RoomOpts) => {
     getLiveTimeline: () => ({ getEvents: () => opts.timeline ?? [] }),
     getEventReadUpTo: () => opts.readUpTo ?? null,
     getThreads: () => opts.threads ?? [],
-    getThreadUnreadNotificationCount: (threadId: string, _type: NotificationCountType) =>
-      opts.threadUnread?.[threadId] ?? 0,
+    hasUserReadEvent: (_userId: string, eventId: string) =>
+      (opts.readEvents ?? []).includes(eventId),
+    getThreadUnreadNotificationCount: (threadId: string, type: NotificationCountType) =>
+      (type === NotificationCountType.Highlight ? opts.threadHighlight : opts.threadUnread)?.[
+        threadId
+      ] ?? 0,
     getAccountData: (type: string) =>
       opts.markedUnread && type === 'm.marked_unread'
         ? { getContent: () => ({ unread: true }) }
@@ -157,3 +164,127 @@ test('private receipt flag uses ReadPrivate', async () => {
   await markAsRead(mx, '!r:server', true);
   assert.equal(calls[0].receiptType, ReceiptType.ReadPrivate);
 });
+
+// [Gitea #217] A passive read (just looking at the room) keeps threads the user
+// follows unread; an explicit mark-as-read still clears everything.
+const sender = (userId: string) => ({ getSender: () => userId });
+
+test('passive: a thread I replied in stays unread; main receipt is scoped to main', async () => {
+  const mine = thread('$mine', evt('$r1'), { hasCurrentUserParticipated: true });
+  const other = thread('$other', evt('$r2'));
+  const { mx, calls } = setup({
+    timeline: [evt('a'), evt('b')],
+    readUpTo: 'a',
+    threads: [mine, other],
+    threadUnread: { $mine: 1, $other: 1 },
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [
+      ['b', false], // main-scoped: unthreaded would also read $mine's reply
+      ['$r2', false],
+    ],
+  );
+});
+
+test('passive: threads I started or was mentioned in stay unread', async () => {
+  const started = thread('$started', evt('$r1'), { rootEvent: sender('@me:server') });
+  const byTimeline = thread('$t', evt('$r2'), { timeline: [sender('@me:server')] });
+  const mentioned = thread('$mention', evt('$r3'));
+  const { mx, calls } = setup({
+    timeline: [evt('a')],
+    readUpTo: 'a',
+    threads: [started, byTimeline, mentioned],
+    threadUnread: { $started: 1, $t: 1, $mention: 1 },
+    threadHighlight: { $mention: 1 },
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.equal(calls.length, 0);
+});
+
+test('passive: no followed thread unread → main receipt stays unthreaded', async () => {
+  const other = thread('$other', evt('$r2'), { rootEvent: sender('@bob:server') });
+  const { mx, calls } = setup({
+    timeline: [evt('a'), evt('b')],
+    readUpTo: 'a',
+    threads: [other],
+    threadUnread: { $other: 1 },
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [
+      ['b', true],
+      ['$r2', false],
+    ],
+  );
+});
+
+test('explicit mark as read clears followed threads too', async () => {
+  const mine = thread('$mine', evt('$r1'), { hasCurrentUserParticipated: true });
+  const { mx, calls } = setup({
+    timeline: [evt('a'), evt('b')],
+    readUpTo: 'a',
+    threads: [mine],
+    threadUnread: { $mine: 1 },
+  });
+  await markAsRead(mx, '!r:server', false);
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [
+      ['b', true],
+      ['$r1', false],
+    ],
+  );
+});
+
+test('passive: the thread open in the panel is left to the panel', async () => {
+  const open = thread('$open', evt('$r1'));
+  const other = thread('$other', evt('$r2'));
+  const { mx, calls } = setup({
+    timeline: [evt('a')],
+    readUpTo: 'a',
+    threads: [open, other],
+    threadUnread: { $open: 1, $other: 1 },
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true, openThreadId: '$open' });
+  assert.deepEqual(
+    calls.map((c) => c.eventId),
+    ['$r2'],
+  );
+});
+
+test('passive: a followed thread whose count lags is still protected', async () => {
+  // The reply and a newer main message arrived in the same sync; the thread's
+  // count is still 0 but its latest reply (from bob) is unread.
+  const reply = { ...evt('$r1'), getSender: () => '@bob:server' };
+  const mine = thread('$mine', reply, { hasCurrentUserParticipated: true });
+  const { mx, calls } = setup({
+    timeline: [evt('a'), evt('b')],
+    readUpTo: 'a',
+    threads: [mine],
+    threadUnread: { $mine: 0 },
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [['b', false]],
+  );
+});
+
+test('passive: followed thread already read → main receipt stays unthreaded', async () => {
+  const reply = { ...evt('$r1'), getSender: () => '@bob:server' };
+  const mine = thread('$mine', reply, { hasCurrentUserParticipated: true });
+  const { mx, calls } = setup({
+    timeline: [evt('a'), evt('b')],
+    readUpTo: 'a',
+    threads: [mine],
+    readEvents: ['$r1'],
+  });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [['b', true]],
+  );
+});

src/app/utils/notifications.ts

@@ -1,8 +1,42 @@
-import { MatrixClient, NotificationCountType, ReceiptType } from 'matrix-js-sdk';
+import { MatrixClient, NotificationCountType, ReceiptType, Room, Thread } from 'matrix-js-sdk';
 import { getSettings } from '../state/settings';
 import { readMarkedUnread, setMarkedUnread } from '../state/room/markedUnread';
 
-export async function markAsRead(mx: MatrixClient, roomId: string, privateReceipt: boolean) {
+/**
+ * [Gitea #217] Threads the user is following: they started it, replied in it,
+ * or were mentioned in it. `hasCurrentUserParticipated` comes from the server's
+ * thread bundle and lags a reply we just sent, so our own loaded events count too.
+ */
+export function isThreadFollowed(room: Room, thread: Thread, userId: string | null): boolean {
+  if (thread.hasCurrentUserParticipated) return true;
+  if (userId && thread.rootEvent?.getSender() === userId) return true;
+  if (userId && thread.timeline?.some((e) => e.getSender() === userId)) return true;
+  return (
+    (room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Highlight) ?? 0) > 0
+  );
+}
+
+export type MarkAsReadOptions = {
+  /**
+   * [Gitea #217] The read comes from simply looking at the room (timeline at
+   * the bottom and focused), not an explicit "mark as read". Threads the user
+   * follows stay unread until their panel is opened, like Slack and Discord;
+   * the rest are cleared so they don't keep the room dot lit forever.
+   */
+  passive?: boolean;
+  /**
+   * The thread open in the thread panel, which sends its own receipts; skip it
+   * here so each reply isn't receipted twice.
+   */
+  openThreadId?: string;
+};
+
+export async function markAsRead(
+  mx: MatrixClient,
+  roomId: string,
+  privateReceipt: boolean,
+  { passive = false, openThreadId }: MarkAsReadOptions = {},
+) {
   const { privateReadReceipts } = getSettings();
   const room = mx.getRoom(roomId);
   if (!room) return;
@@ -29,12 +63,32 @@ export async function markAsRead(mx: MatrixClient, roomId: string, privateReceip
     return null;
   };
 
+  const threads = room.getThreads();
+  const threadUnread = (thread: Thread) =>
+    room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Total) ?? 0;
+  const keepThread = (thread: Thread) => passive && isThreadFollowed(room, thread, mx.getUserId());
+  // [Gitea #217] An unthreaded receipt also reads every thread reply older than
+  // it, so a passive read while a followed thread is unread must stay scoped
+  // to the main timeline or the next main message would clear that thread.
+  // The count can lag: a reply and a newer main message often arrive in the
+  // same sync, before the thread's count is updated, so also ask whether the
+  // latest reply has been read.
+  const myUserId = mx.getUserId();
+  const hasUnreadReply = (thread: Thread) => {
+    if (threadUnread(thread) > 0) return true;
+    const last = thread.lastReply();
+    const lastId = last?.getId();
+    if (!last || !lastId || !myUserId || last.getSender() === myUserId) return false;
+    return !room.hasUserReadEvent(myUserId, lastId);
+  };
+  const keepAnyThread = threads.some((thread) => keepThread(thread) && hasUnreadReply(thread));
+
   const latestEvent = timeline.length > 0 ? getLatestValidEvent() : null;
   if (latestEvent) {
     // Unthreaded receipt: with client threadSupport enabled the SDK would
     // otherwise scope this to the main timeline (thread_id: "main"). Unthreaded
     // clears the main timeline + every event up to this one.
-    await mx.sendReadReceipt(latestEvent, receiptType, true);
+    await mx.sendReadReceipt(latestEvent, receiptType, !keepAnyThread);
   }
 
   // Clear per-thread notification counts too — the room's unread dot sums them,
@@ -50,12 +104,10 @@ export async function markAsRead(mx: MatrixClient, roomId: string, privateReceip
   // returns null -> the room is reported unread on every mark-read call (this was
   // the P6 regression, amplified by the bulk mark-all-orphan-rooms-read callers).
   // If a thread's replies aren't loaded (lastReply() null), just skip it.
-  const threads = room.getThreads();
   await Promise.all(
     threads.map((thread) => {
-      const unread =
-        room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Total) ?? 0;
-      if (unread <= 0) return undefined;
+      if (threadUnread(thread) <= 0) return undefined;
+      if (keepThread(thread) || thread.id === openThreadId) return undefined;
       const lastReply = thread.lastReply();
       if (!lastReply || lastReply.isSending()) return undefined;
       // Threaded receipt (unthreaded = false → the SDK scopes it to this thread

src/app/utils/outbox.test.ts

@@ -0,0 +1,131 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  OUTBOX_AUTOSEND_MS,
+  OUTBOX_MAX_ENTRIES,
+  OutboxEntry,
+  isRetryableSendError,
+  outboxRetryDelayMs,
+  parseOutbox,
+  planRestore,
+  shouldKeepInOutbox,
+  withEntry,
+  withoutEntry,
+} from './outbox';
+
+const entry = (txnId: string, ts: number, roomId = '!a:hs'): OutboxEntry => ({
+  txnId,
+  roomId,
+  threadId: null,
+  type: 'm.room.message',
+  content: { msgtype: 'm.text', body: txnId },
+  ts,
+});
+
+test('keeps message-like events, not call signalling or redactions', () => {
+  assert.equal(shouldKeepInOutbox('m.room.message', { body: 'hi' }), true);
+  assert.equal(shouldKeepInOutbox('m.reaction', { 'm.relates_to': { event_id: '$x' } }), true);
+  assert.equal(shouldKeepInOutbox('org.matrix.msc3381.poll.start', {}), true);
+  assert.equal(shouldKeepInOutbox('org.matrix.msc4075.rtc.notification', {}), false);
+  assert.equal(shouldKeepInOutbox('m.call.invite', {}), false);
+  assert.equal(shouldKeepInOutbox('m.room.redaction', {}), false);
+});
+
+test('skips events that point at another unsent message (local id)', () => {
+  assert.equal(
+    shouldKeepInOutbox('m.reaction', { 'm.relates_to': { event_id: '~!a:hs:m123' } }),
+    false,
+  );
+  assert.equal(
+    shouldKeepInOutbox('m.room.message', {
+      body: 'reply',
+      'm.relates_to': { 'm.in_reply_to': { event_id: '~!a:hs:m1' } },
+    }),
+    false,
+  );
+  assert.equal(
+    shouldKeepInOutbox('m.room.message', {
+      body: 'reply',
+      'm.relates_to': { 'm.in_reply_to': { event_id: '$real' } },
+    }),
+    true,
+  );
+});
+
+test('retryable: connection loss, timeouts, rate limits, server errors', () => {
+  const connectionError = new Error('fetch failed');
+  Object.defineProperty(connectionError, 'name', { value: 'ConnectionError' });
+  assert.equal(isRetryableSendError(connectionError), true);
+  assert.equal(isRetryableSendError({ httpStatus: 429 }), true);
+  assert.equal(isRetryableSendError({ httpStatus: 408 }), true);
+  assert.equal(isRetryableSendError({ httpStatus: 502 }), true);
+});
+
+test('not retryable: client errors, consent, unknown or missing errors', () => {
+  assert.equal(isRetryableSendError({ httpStatus: 403, errcode: 'M_FORBIDDEN' }), false);
+  assert.equal(isRetryableSendError({ httpStatus: 403, errcode: 'M_CONSENT_NOT_GIVEN' }), false);
+  assert.equal(isRetryableSendError({ httpStatus: 400 }), false);
+  assert.equal(isRetryableSendError(new Error('encryption failed')), false);
+  assert.equal(isRetryableSendError(undefined), false);
+  assert.equal(isRetryableSendError(null), false);
+});
+
+test('parse: only this user, only well-formed entries, junk tolerated', () => {
+  const good = entry('m1', 1);
+  const raw = JSON.stringify({ userId: '@me:hs', entries: [good, { txnId: 5 }, null] });
+  assert.deepEqual(parseOutbox(raw, '@me:hs'), [good]);
+  assert.deepEqual(parseOutbox(raw, '@other:hs'), []);
+  assert.deepEqual(parseOutbox('{not json', '@me:hs'), []);
+  assert.deepEqual(parseOutbox(null, '@me:hs'), []);
+});
+
+test('withEntry: first write wins, sorted, capped (oldest dropped)', () => {
+  const a = entry('a', 2);
+  let list = withEntry([], a);
+  assert.equal(withEntry(list, { ...a, content: { body: 'changed' } }), list);
+  list = withEntry(list, entry('b', 1));
+  assert.deepEqual(
+    list.map((e) => e.txnId),
+    ['b', 'a'],
+  );
+  let many: OutboxEntry[] = [];
+  for (let i = 0; i < OUTBOX_MAX_ENTRIES + 5; i += 1) many = withEntry(many, entry(`t${i}`, i));
+  assert.equal(many.length, OUTBOX_MAX_ENTRIES);
+  assert.equal(many[0].txnId, 't5');
+});
+
+test('withoutEntry: removes, and returns the same list when absent', () => {
+  const list = [entry('a', 1), entry('b', 2)];
+  assert.deepEqual(
+    withoutEntry(list, 'a').map((e) => e.txnId),
+    ['b'],
+  );
+  assert.equal(withoutEntry(list, 'zzz'), list);
+});
+
+test('restore plan: drops delivered / left rooms, auto-sends only recent ones', () => {
+  const now = 10 * OUTBOX_AUTOSEND_MS;
+  const recent = entry('recent', now - 60_000);
+  const old = entry('old', now - OUTBOX_AUTOSEND_MS - 1);
+  const delivered = entry('delivered', now - 1000);
+  const left = entry('left', now - 1000, '!left:hs');
+  const plan = planRestore(
+    [recent, left, old, delivered],
+    now,
+    (roomId) => roomId !== '!left:hs',
+    (e) => e.txnId === 'delivered',
+  );
+  assert.deepEqual(
+    plan.restore.map((e) => e.txnId),
+    ['old', 'recent'],
+  );
+  assert.deepEqual([...plan.autoSend], ['recent']);
+  assert.deepEqual(plan.drop.map((e) => e.txnId).sort(), ['delivered', 'left']);
+});
+
+test('blip retry delay backs off and is capped at a minute', () => {
+  assert.deepEqual(
+    [0, 1, 2, 3, 4, 9].map(outboxRetryDelayMs),
+    [5000, 10000, 20000, 40000, 60000, 60000],
+  );
+});

src/app/utils/outbox.ts

@@ -0,0 +1,182 @@
+import { IContent } from 'matrix-js-sdk';
+
+/**
+ * [Gitea #112] Offline outbox: unsent messages survive a reload and are
+ * retried when the connection comes back.
+ *
+ * The SDK keeps local echoes in memory only (chronological pending ordering),
+ * so a reload used to drop every message that hadn't reached the server. Each
+ * own message send is mirrored here (type + clear content + txnId) from its
+ * first local echo until the server confirms it or the user cancels it. On
+ * the next start it is put back as a failed local echo (Retry / Cancel as
+ * usual) and, if it's recent, sent again with the SAME txnId — the server
+ * deduplicates a transaction it already accepted.
+ *
+ * The content is the decrypted message, like a composer draft: it lives in
+ * localStorage until sent and is wiped on logout (clearPlaintextCaches).
+ */
+
+export type OutboxEntry = {
+  txnId: string;
+  roomId: string;
+  threadId: string | null;
+  type: string;
+  content: IContent;
+  /** When the message was first sent (local echo timestamp, ms). */
+  ts: number;
+};
+
+type Stored = { userId: string; entries: OutboxEntry[] };
+
+const STORAGE_KEY = 'lotus_outbox_v1';
+/** Hard cap so a long offline stretch can't grow localStorage without bound. */
+export const OUTBOX_MAX_ENTRIES = 100;
+/**
+ * Restored messages younger than this are sent again automatically after a
+ * reload; older ones come back as "Failed to send" and wait for the user
+ * (sending a message typed hours ago without asking would surprise people).
+ */
+export const OUTBOX_AUTOSEND_MS = 60 * 60 * 1000;
+/** Auto-retries per message per session (one per reconnect). */
+export const OUTBOX_MAX_AUTO_RETRIES = 10;
+
+/** Delay before automatic retry number `attempt` (0-based) after a blip. */
+export const outboxRetryDelayMs = (attempt: number): number =>
+  Math.min(5000 * 2 ** Math.max(0, attempt), 60_000);
+
+/** Message-like events worth keeping. Not call signalling, not redactions. */
+export const OUTBOX_EVENT_TYPES: ReadonlySet<string> = new Set([
+  'm.room.message',
+  'm.sticker',
+  'm.reaction',
+  'm.poll.start',
+  'm.poll.response',
+  'm.poll.end',
+  'org.matrix.msc3381.poll.start',
+  'org.matrix.msc3381.poll.response',
+  'org.matrix.msc3381.poll.end',
+]);
+
+const relatesToPendingEvent = (content: IContent): boolean => {
+  const rel = content['m.relates_to'] as
+    | { event_id?: unknown; 'm.in_reply_to'?: { event_id?: unknown } }
+    | undefined;
+  const ids = [rel?.event_id, rel?.['m.in_reply_to']?.event_id];
+  // A local echo's id ("~!room:txn") means nothing after a reload.
+  return ids.some((id) => typeof id === 'string' && id.startsWith('~'));
+};
+
+/** Whether a send should be mirrored into the outbox. */
+export const shouldKeepInOutbox = (type: string, content: IContent): boolean =>
+  OUTBOX_EVENT_TYPES.has(type) && !relatesToPendingEvent(content);
+
+/**
+ * A failure the network is to blame for: no connection (the SDK's
+ * ConnectionError), a timeout, rate limiting or a server error. Anything else
+ * (403, consent, bad request, encryption failure) needs the user.
+ */
+export const isRetryableSendError = (err: unknown): boolean => {
+  if (!err || typeof err !== 'object') return false;
+  const { name, httpStatus } = err as { name?: unknown; httpStatus?: unknown };
+  if (name === 'ConnectionError') return true;
+  if (typeof httpStatus !== 'number') return false;
+  return httpStatus === 408 || httpStatus === 429 || httpStatus >= 500;
+};
+
+const isEntry = (e: unknown): e is OutboxEntry => {
+  if (!e || typeof e !== 'object') return false;
+  const o = e as Record<string, unknown>;
+  return (
+    typeof o.txnId === 'string' &&
+    typeof o.roomId === 'string' &&
+    (o.threadId === null || typeof o.threadId === 'string') &&
+    typeof o.type === 'string' &&
+    !!o.content &&
+    typeof o.content === 'object' &&
+    typeof o.ts === 'number'
+  );
+};
+
+/** Parse the stored outbox, keeping only this user's well-formed entries. */
+export const parseOutbox = (raw: string | null, userId: string): OutboxEntry[] => {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw) as Partial<Stored>;
+    if (parsed.userId !== userId || !Array.isArray(parsed.entries)) return [];
+    return parsed.entries.filter(isEntry);
+  } catch {
+    return [];
+  }
+};
+
+/** Add (or keep) an entry: first write wins, oldest dropped past the cap. */
+export const withEntry = (entries: OutboxEntry[], entry: OutboxEntry): OutboxEntry[] => {
+  if (entries.some((e) => e.txnId === entry.txnId)) return entries;
+  const next = [...entries, entry].sort((a, b) => a.ts - b.ts);
+  return next.length > OUTBOX_MAX_ENTRIES ? next.slice(next.length - OUTBOX_MAX_ENTRIES) : next;
+};
+
+export const withoutEntry = (entries: OutboxEntry[], txnId: string): OutboxEntry[] =>
+  entries.some((e) => e.txnId === txnId) ? entries.filter((e) => e.txnId !== txnId) : entries;
+
+export type RestorePlan = {
+  /** Put back as failed local echoes, oldest first. */
+  restore: OutboxEntry[];
+  /** Subset of `restore` to send again right away. */
+  autoSend: Set<string>;
+  /** Already delivered or no longer sendable: forget them. */
+  drop: OutboxEntry[];
+};
+
+/**
+ * Decide what to do with the stored outbox on start.
+ * `canSend(roomId)`: the user is still joined; `delivered(entry)`: the
+ * server already has it (the transaction id came back down /sync).
+ */
+export const planRestore = (
+  entries: OutboxEntry[],
+  now: number,
+  canSend: (roomId: string) => boolean,
+  delivered: (entry: OutboxEntry) => boolean,
+): RestorePlan => {
+  const restore: OutboxEntry[] = [];
+  const autoSend = new Set<string>();
+  const drop: OutboxEntry[] = [];
+  [...entries]
+    .sort((a, b) => a.ts - b.ts)
+    .forEach((entry) => {
+      if (!canSend(entry.roomId) || delivered(entry)) {
+        drop.push(entry);
+        return;
+      }
+      restore.push(entry);
+      if (now - entry.ts < OUTBOX_AUTOSEND_MS) autoSend.add(entry.txnId);
+    });
+  return { restore, autoSend, drop };
+};
+
+export const loadOutbox = (userId: string): OutboxEntry[] => {
+  try {
+    return parseOutbox(localStorage.getItem(STORAGE_KEY), userId);
+  } catch {
+    return [];
+  }
+};
+
+export const saveOutbox = (userId: string, entries: OutboxEntry[]): void => {
+  try {
+    if (entries.length === 0) localStorage.removeItem(STORAGE_KEY);
+    else localStorage.setItem(STORAGE_KEY, JSON.stringify({ userId, entries } satisfies Stored));
+  } catch {
+    // Storage full or blocked: the outbox is best-effort.
+  }
+};
+
+/** Wipe the outbox (logout): it holds decrypted message content. */
+export const clearOutbox = (): void => {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    /* localStorage unavailable — nothing to clear */
+  }
+};

src/app/utils/videoEmbed.test.ts

@@ -32,6 +32,7 @@ import {
   buildVideoEmbedUrl,
   spotifyEmbedHeight,
   parseMediaEmbed,
+  isTwitterNoResults,
 } from './videoEmbed';
 
 const HOST = 'chat.lotusguild.org';
@@ -403,3 +404,28 @@ test('parseMediaEmbed: Twitch embed carries the parent host', () => {
   const clip = parseMediaEmbed('https://clips.twitch.tv/Slug', HOST);
   assert.ok(clip?.embedUrl.startsWith('https://clips.twitch.tv/embed?clip=Slug'));
 });
+
+test('isTwitterNoResults: detects X reporting a missing post (string or parsed)', () => {
+  // Captured from platform.twitter.com/embed/Tweet.html?id=1 (no such post).
+  const msg = {
+    'twttr.embed': {
+      jsonrpc: '2.0',
+      method: 'twttr.private.no_results',
+      id: 'embed-0',
+      params: [{ data: { tweet_id: '1' } }],
+    },
+  };
+  assert.equal(isTwitterNoResults(msg), true);
+  assert.equal(isTwitterNoResults(JSON.stringify(msg)), true);
+  assert.equal(isTwitterNoResults({ 'twttr.embed': [msg['twttr.embed']] }), true);
+});
+
+test('isTwitterNoResults: ignores normal embed traffic and junk', () => {
+  const call = (method: string) => ({ 'twttr.embed': { jsonrpc: '2.0', method, params: [] } });
+  assert.equal(isTwitterNoResults(call('twttr.private.initialized')), false);
+  assert.equal(isTwitterNoResults(call('twttr.private.resize')), false);
+  assert.equal(isTwitterNoResults(call('twttr.private.rendered')), false);
+  assert.equal(isTwitterNoResults('not json'), false);
+  assert.equal(isTwitterNoResults(null), false);
+  assert.equal(isTwitterNoResults({ type: 'MEASURE' }), false);
+});

src/app/utils/videoEmbed.ts

@@ -168,6 +168,33 @@ export function extractEmbedHeight(data: unknown): number | undefined {
   return undefined;
 }
 
+// How long an embed iframe may take to fire `load` before the card offers
+// Retry / "Open on …". Only a hang trips it: a frame whose request was refused,
+// or whose provider shows its own error page, still fires `load`.
+export const EMBED_LOAD_TIMEOUT_MS = 20_000;
+
+/**
+ * X's post embed (platform.twitter.com/embed/Tweet.html) renders an empty frame
+ * for a deleted, private or suspended post and reports it only via this
+ * postMessage: `{"twttr.embed": {"method": "twttr.private.no_results"}}`.
+ * `data` may be the raw string or the parsed object.
+ */
+export function isTwitterNoResults(data: unknown): boolean {
+  let d = data;
+  if (typeof d === 'string') {
+    try {
+      d = JSON.parse(d);
+    } catch {
+      return false;
+    }
+  }
+  if (!d || typeof d !== 'object') return false;
+  const tw = (d as { 'twttr.embed'?: unknown })['twttr.embed'];
+  if (!tw) return false;
+  const calls = (Array.isArray(tw) ? tw : [tw]) as Array<{ method?: string }>;
+  return calls.some((c) => c?.method === 'twttr.private.no_results');
+}
+
 export function tiktokPlayerEmbedUrl(id: string): string {
   // Pure 9:16 video player. music_info/description default OFF (they'd switch
   // TikTok to a wide "video + info panel" layout); controls/progress/play/volume/

src/index.tsx

@@ -17,10 +17,16 @@ import App from './app/pages/App';
 import './app/i18n';
 import { pushSessionToSW } from './sw-session';
 import { getFallbackSession } from './app/state/sessions';
+import { startKeychainMirror } from './app/state/keychainMirror';
+import { tauriInvoke } from './app/hooks/useTauri';
 import { cleanupSearchCacheIfSignedOut } from './client/initMatrix';
 
 document.body.classList.add(configClass, varsClass);
 
+// [Gitea #105] Desktop: keep a copy of the login tokens in the OS keychain
+// (step 1: mirror only; the session is still read from localStorage).
+startKeychainMirror(tauriInvoke());
+
 // Register Service Worker
 // Service workers only register on http(s) pages. The desktop app loads from
 // `tauri://localhost` in debug builds (and on any platform where the localhost

src/lotus-terminal.css.ts

@@ -898,6 +898,14 @@ globalStyle(
     boxShadow: '0 0 10px rgba(255,107,0,0.10)',
   },
 );
+// [Gitea #246] The poll's winning answer (after it ends).
+globalStyle(
+  `body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
+  {
+    border: '1px solid rgba(0,255,136,0.55) !important',
+    boxShadow: '0 0 10px rgba(0,255,136,0.10)',
+  },
+);
 globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
   color: 'rgba(0,212,255,0.60) !important',
   opacity: '1 !important',