feat(call): desktop without WebRTC offers "Open in browser" instead of a dead end

The Linux desktop app runs on WebKitGTK, which ships without WebRTC (2.52
has no RTCPeerConnection; 2.54 disables it outright pending a libwebrtc
backend around 2.56), so calls can't work there. Until now the call button
just disappeared, the call room said "Your browser does not support WebRTC"
with Join disabled, and an incoming call couldn't be answered.

In the desktop app (isTauri) without WebRTC:
- call rooms: "Calls aren't available in the desktop app on Linux yet: its
  web engine has no WebRTC" + an "Open in browser" button;
- incoming-call overlay: the same, with "Answer in browser";
- room header: the call button stays, and opens the room in the browser.

The link is the room in the web app (config.json `webAppUrl`, https only,
new key); the user presses Join there. Deliberately not an auto-join link:
a crafted URL must not be able to join a call and open someone's mic. It
opens through the desktop's new-window handler (web/mail schemes only → the
system browser). Without `webAppUrl` the explanation shows with no button;
browsers without WebRTC keep the old message.

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

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(

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": {

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

@@ -73,7 +73,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';
@@ -308,7 +308,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 +627,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 +652,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())
@@ -1051,11 +1082,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/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';
@@ -2581,6 +2582,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 +2689,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,18 @@ 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;
+
+  /**
+   * 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/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/pages/App.tsx

@@ -36,6 +36,7 @@ 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, 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 +221,27 @@ 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(resolveCallPageUrl(clientConfig.elementCallUrl, isTauri()));
+                    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/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,40 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolveCallPageUrl } 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)));
+});

src/app/plugins/call/callPageUrl.ts

@@ -0,0 +1,37 @@
+/**
+ * [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 (its CSP doesn't allow
+ * another frame origin, and a network copy could drift from the bundle).
+ * 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;
+  }
+};
+
+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/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/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/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/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/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/