feat: reaction TDS styling, debounce read receipts, Escape to skip boot, type fixes

- lotus-terminal.css.ts: add reaction chip styles for dark + light TDS modes (cyan border/bg for unselected, orange accent for own/pressed reactions) - useRoomReadPositions: debounce receipt handler at 150ms (M-3) - lotus-boot.ts: Escape key skips boot animation (I-3) - RoomInput.tsx: replace (uploadRes as any) with typed assertion (M-7) - CallEmbedProvider: call mention detection, audio cleanup, display name (C-1, C-2, M-5) - EventReaders: timestamps in seen-by modal, filter self, TDS styling - ReadReceiptAvatars: StackedAvatar pill, TDS visual treatment - chatBackground: add waves/neon/aurora backgrounds - RoomView: auto-apply tactical bg when TDS active and bg is none - settings: extend ChatBackground union type
2026-05-16 01:34:20 -04:00
parent 6648ec68a2
commit 4249150100
10 changed files with 270 additions and 68 deletions
@@ -49,7 +49,8 @@ import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
 import { mxcUrlToHttp } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { getStateEvent } from '../utils/room';
+import { getStateEvent, getMemberDisplayName } from '../utils/room';
+import { getMxIdLocalPart } from '../utils/matrix';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -119,13 +120,19 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr

  const playSound = useCallback(() => {
    const audioElement = audioRef.current;
-    audioElement?.play();
+    audioElement?.play().catch(() => undefined);
  }, []);

  useEffect(() => {
    if (info.notificationType === 'ring') {
      playSound();
    }
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+      }
+    };
  }, [playSound, info.notificationType]);

  useEffect(() => {
@@ -150,7 +157,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
            <Dialog style={{ maxWidth: toRem(324) }}>
              <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
                <Text size="T200" align="Center">
-                  {info.sender}
+                  {getMemberDisplayName(info.room, info.sender) ?? getMxIdLocalPart(info.sender) ?? info.sender}
                </Text>
                <Box direction="Column" gap="500" alignItems="Center">
                  <Box shrink="No">
@@ -287,7 +294,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
      const refEventId = relation?.event_id;

      const mention =
-        content['m.mentions'].room || content['m.mentions'].user_ids?.includes(mx.getSafeUserId());
+        content['m.mentions']?.room || content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
        return;
      }
@@ -16,7 +16,7 @@ import {
 import { Room } from 'matrix-js-sdk';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UserAvatar } from '../user-avatar';
@@ -24,6 +24,19 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { today, yesterday, timeHourMinute, timeMon, timeDay, timeYear } from '../../utils/time';
+
+function formatReadTs(ts: number, hour24Clock: boolean): string {
+  const timeStr = timeHourMinute(ts, hour24Clock);
+  if (today(ts)) return `Today at ${timeStr}`;
+  if (yesterday(ts)) return `Yesterday at ${timeStr}`;
+  const sameYear = timeYear(ts) === timeYear(Date.now());
+  return sameYear
+    ? `${timeMon(ts)} ${timeDay(ts)} at ${timeStr}`
+    : `${timeMon(ts)} ${timeDay(ts)} ${timeYear(ts)} at ${timeStr}`;
+}

 export type EventReadersProps = {
  room: Room;
@@ -34,9 +47,12 @@ export const EventReaders = as<'div', EventReadersProps>(
  ({ className, room, eventId, requestClose, ...props }, ref) => {
    const mx = useMatrixClient();
    const useAuthentication = useMediaAuthentication();
-    const latestEventReaders = useRoomEventReaders(room, eventId);
+    const myUserId = mx.getUserId();
+    const latestEventReaders = useRoomEventReaders(room, eventId).filter((id) => id !== myUserId);
    const openProfile = useOpenUserRoomProfile();
    const space = useSpaceOptionally();
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

    const getName = (userId: string) =>
      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -48,9 +64,14 @@ export const EventReaders = as<'div', EventReadersProps>(
        {...props}
        ref={ref}
      >
-        <Header className={css.Header} variant="Surface" size="600">
+        <Header
+          className={css.Header}
+          variant="Surface"
+          size="600"
+          style={lotusTerminal ? { borderBottom: '1px solid rgba(0,212,255,0.30)', boxShadow: '0 2px 12px rgba(0,212,255,0.08)' } : undefined}
+        >
          <Box grow="Yes">
-            <Text size="H3">Seen by</Text>
+            <Text size="H3" style={lotusTerminal ? { color: '#00D4FF', textShadow: '0 0 6px rgba(0,212,255,0.45)', letterSpacing: '0.05em' } : undefined}>Seen by</Text>
          </Box>
          <IconButton size="300" onClick={requestClose}>
            <Icon src={Icons.Cross} />
@@ -63,16 +84,9 @@ export const EventReaders = as<'div', EventReadersProps>(
                const name = getName(readerId);
                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
                const avatarUrl = avatarMxcUrl
-                  ? mx.mxcUrlToHttp(
-                      avatarMxcUrl,
-                      100,
-                      100,
-                      'crop',
-                      undefined,
-                      false,
-                      useAuthentication
-                    )
+                  ? mxcUrlToHttp(mx, avatarMxcUrl, useAuthentication, 100, 100, 'crop') ?? undefined
                  : undefined;
+                const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;

                return (
                  <MenuItem
@@ -92,16 +106,28 @@ export const EventReaders = as<'div', EventReadersProps>(
                      <Avatar size="200">
                        <UserAvatar
                          userId={readerId}
-                          src={avatarUrl ?? undefined}
+                          src={avatarUrl}
                          alt={name}
                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
                        />
                      </Avatar>
                    }
                  >
-                    <Text size="T400" truncate>
-                      {name}
-                    </Text>
+                    <Box direction="Column" grow="Yes">
+                      <Text size="T400" truncate>
+                        {name}
+                      </Text>
+                      {receiptTs !== undefined && (
+                        <Text
+                          size="T200"
+                          style={lotusTerminal
+                            ? { color: '#FFB300', textShadow: '0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40)', fontSize: '0.72rem' }
+                            : { opacity: 0.6 }}
+                        >
+                          {formatReadTs(receiptTs, hour24Clock)}
+                        </Text>
+                      )}
+                    </Box>
                  </MenuItem>
                );
              })}
@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Avatar, Icon, Icons, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
+import { Icon, Icons, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, color } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { UserAvatar } from '../user-avatar';
+import { StackedAvatar } from '../stacked-avatar';
 import { EventReaders } from '../event-readers';
 import { stopPropagation } from '../../utils/keyboard';

@@ -24,15 +27,17 @@ export function ReadReceiptAvatars({
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const [open, setOpen] = useState(false);
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

  if (userIds.length === 0) return null;

  const displayed = userIds.slice(0, MAX_DISPLAY);
  const extra = userIds.length - MAX_DISPLAY;
-  const tooltipNames = userIds
-    .slice(0, 5)
-    .map((id) => getMemberDisplayName(room, id) ?? getMxIdLocalPart(id) ?? id)
-    .join(', ') + (extra > 0 ? ` +${extra} more` : '');
+  const tooltipNames =
+    userIds
+      .slice(0, 5)
+      .map((id) => getMemberDisplayName(room, id) ?? getMxIdLocalPart(id) ?? id)
+      .join(', ') + (extra > 0 ? ` +${extra} more` : '');

  return (
    <>
@@ -56,58 +61,65 @@ export function ReadReceiptAvatars({
        type="button"
        onClick={() => setOpen(true)}
        title={tooltipNames}
+        aria-label={tooltipNames}
        style={{
          background: 'none',
          border: 'none',
          cursor: 'pointer',
-          padding: '1px 0 0',
+          padding: 0,
+          marginLeft: 'auto',
+          marginTop: '4px',
          display: 'flex',
          alignItems: 'center',
-          gap: '3px',
-          marginLeft: 'auto',
+          gap: '4px',
        }}
      >
-        <span style={{ display: 'flex', alignItems: 'center' }}>
-          {displayed.map((userId, i) => {
+        {/* Pill wrapper ensures visibility on any wallpaper/background */}
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: lotusTerminal ? 'rgba(0,212,255,0.07)' : color.SurfaceVariant.Container,
+            border: lotusTerminal ? '1px solid rgba(0,212,255,0.30)' : '1px solid transparent',
+            boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none',
+            borderRadius: '999px',
+            padding: '2px 6px 2px 2px',
+            gap: '0px',
+          }}
+        >
+          {displayed.map((userId) => {
            const name =
              getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
            const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();
            const avatarUrl = avatarMxc
-              ? mx.mxcUrlToHttp(avatarMxc, 32, 32, 'crop', undefined, false, useAuthentication) ??
-                undefined
+              ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined
              : undefined;
            return (
-              <span
+              <StackedAvatar
                key={userId}
                title={name}
-                style={{
-                  marginLeft: i === 0 ? 0 : -5,
-                  display: 'block',
-                  width: 16,
-                  height: 16,
-                  borderRadius: '50%',
-                  border: '1.5px solid var(--bg-surface)',
-                  overflow: 'hidden',
-                  flexShrink: 0,
-                }}
+                variant="SurfaceVariant"
+                size="200"
+                radii="Pill"
              >
-                <Avatar size="100">
-                  <UserAvatar
-                    userId={userId}
-                    src={avatarUrl}
-                    alt={name}
-                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                  />
-                </Avatar>
-              </span>
+                <UserAvatar
+                  userId={userId}
+                  src={avatarUrl}
+                  alt={name}
+                  renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                />
+              </StackedAvatar>
            );
          })}
+          {extra > 0 && (
+            <Text
+              size="T100"
+              style={{ paddingLeft: '4px', color: color.SurfaceVariant.OnContainer }}
+            >
+              +{extra}
+            </Text>
+          )}
        </span>
-        {extra > 0 && (
-          <Text size="T100" style={{ opacity: 0.6 }}>
-            +{extra}
-          </Text>
-        )}
      </button>
    </>
  );
@@ -16,6 +16,9 @@ export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
  { value: 'tactical', label: 'Tactical' },
  { value: 'circuit', label: 'Circuit' },
  { value: 'hexgrid', label: 'Hex Grid' },
+  { value: 'waves', label: 'Waves' },
+  { value: 'neon', label: 'Neon Grid' },
+  { value: 'aurora', label: 'Aurora' },
 ];

 const DARK: Record<ChatBackground, CSSProperties> = {
@@ -147,6 +150,39 @@ const DARK: Record<ChatBackground, CSSProperties> = {
    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C212%2C255%2C0.13%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
    backgroundSize: '29px 50px',
  },
+
+  // Flowing sine-wave lines
+  waves: {
+    backgroundColor: '#080c18',
+    backgroundImage: [
+      'repeating-radial-gradient(ellipse at 0% 50%, transparent 0, transparent 18px, rgba(80,130,255,0.07) 19px, transparent 20px)',
+      'repeating-radial-gradient(ellipse at 100% 50%, transparent 0, transparent 28px, rgba(80,130,255,0.05) 29px, transparent 30px)',
+      'repeating-radial-gradient(ellipse at 50% 0%, transparent 0, transparent 22px, rgba(100,60,200,0.06) 23px, transparent 24px)',
+    ].join(','),
+  },
+
+  // Neon cyberpunk grid — orange/cyan TDS colors
+  neon: {
+    backgroundColor: '#020408',
+    backgroundImage: [
+      'linear-gradient(rgba(255,107,0,0.10) 1px, transparent 1px)',
+      'linear-gradient(90deg, rgba(255,107,0,0.10) 1px, transparent 1px)',
+      'linear-gradient(rgba(0,212,255,0.05) 1px, transparent 1px)',
+      'linear-gradient(90deg, rgba(0,212,255,0.05) 1px, transparent 1px)',
+    ].join(','),
+    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
+  },
+
+  // Aurora borealis — flowing gradient bands
+  aurora: {
+    backgroundColor: '#030810',
+    backgroundImage: [
+      'radial-gradient(ellipse at 20% 30%, rgba(0,255,136,0.08) 0%, transparent 55%)',
+      'radial-gradient(ellipse at 80% 70%, rgba(0,100,255,0.08) 0%, transparent 55%)',
+      'radial-gradient(ellipse at 50% 10%, rgba(120,0,255,0.06) 0%, transparent 50%)',
+      'radial-gradient(ellipse at 60% 90%, rgba(0,212,255,0.06) 0%, transparent 50%)',
+    ].join(','),
+  },
 };

 const LIGHT: Record<ChatBackground, CSSProperties> = {
@@ -272,6 +308,36 @@ const LIGHT: Record<ChatBackground, CSSProperties> = {
    backgroundImage: 'url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2229%22%20height%3D%2250%22%3E%3Cpath%20d%3D%22M14.5%200L29%208L29%2025L14.5%2033L0%2025L0%208Z%20M14.5%2033L29%2041V50%20M14.5%2033L0%2041V50%22%20fill%3D%22none%22%20stroke%3D%22rgba%2850%2C100%2C220%2C0.11%29%22%20stroke-width%3D%220.8%22/%3E%3C/svg%3E")',
    backgroundSize: '29px 50px',
  },
+
+  waves: {
+    backgroundColor: '#eef3ff',
+    backgroundImage: [
+      'repeating-radial-gradient(ellipse at 0% 50%, transparent 0, transparent 18px, rgba(50,100,220,0.09) 19px, transparent 20px)',
+      'repeating-radial-gradient(ellipse at 100% 50%, transparent 0, transparent 28px, rgba(50,100,220,0.07) 29px, transparent 30px)',
+      'repeating-radial-gradient(ellipse at 50% 0%, transparent 0, transparent 22px, rgba(80,40,180,0.07) 23px, transparent 24px)',
+    ].join(','),
+  },
+
+  neon: {
+    backgroundColor: '#fafafa',
+    backgroundImage: [
+      'linear-gradient(rgba(196,78,0,0.12) 1px, transparent 1px)',
+      'linear-gradient(90deg, rgba(196,78,0,0.12) 1px, transparent 1px)',
+      'linear-gradient(rgba(0,98,184,0.06) 1px, transparent 1px)',
+      'linear-gradient(90deg, rgba(0,98,184,0.06) 1px, transparent 1px)',
+    ].join(','),
+    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
+  },
+
+  aurora: {
+    backgroundColor: '#f4faf8',
+    backgroundImage: [
+      'radial-gradient(ellipse at 20% 30%, rgba(0,160,80,0.09) 0%, transparent 55%)',
+      'radial-gradient(ellipse at 80% 70%, rgba(0,80,200,0.09) 0%, transparent 55%)',
+      'radial-gradient(ellipse at 50% 10%, rgba(100,0,200,0.07) 0%, transparent 50%)',
+      'radial-gradient(ellipse at 60% 90%, rgba(0,160,200,0.07) 0%, transparent 50%)',
+    ].join(','),
+  },
 };

 export const getChatBg = (bg: ChatBackground, isDark: boolean): CSSProperties =>
@@ -475,7 +475,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
            new File([blob], 'image.gif', { type: 'image/gif' }),
            { type: 'image/gif', name: 'image.gif', includeFilename: false }
          );
-          const mxcUrl = (uploadRes as any).content_uri;
+          const mxcUrl = (uploadRes as { content_uri: string }).content_uri;
          if (!mxcUrl) return;
          mx.sendMessage(roomId, {
            msgtype: MsgType.Image,
@@ -62,6 +62,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
  const roomInputRef = useRef<HTMLDivElement>(null);
  const roomViewRef = useRef<HTMLDivElement>(null);
  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const theme = useTheme();
  const isDark = theme.kind === ThemeKind.Dark;

@@ -98,7 +99,7 @@ export function RoomView({ eventId }: { eventId?: string }) {
  );

  return (
-    <Page ref={roomViewRef} style={getChatBg(chatBackground, isDark)}>
+    <Page ref={roomViewRef} style={getChatBg(lotusTerminal && chatBackground === 'none' ? 'tactical' : chatBackground, isDark)}>
      <Box grow="Yes" direction="Column">
        <RoomTimeline
          key={roomId}
@@ -1,16 +1,32 @@
-import { Room, RoomEvent } from 'matrix-js-sdk';
+import { Room, RoomEvent, MatrixEvent } from 'matrix-js-sdk';
 import { useEffect, useState } from 'react';
 import { useMatrixClient } from './useMatrixClient';
+import { reactionOrEditEvent } from '../utils/room';
+
+// Receipts can land on reaction/edit events which RoomTimeline skips (renders null).
+// Walk backwards from the receipt event to find the nearest event that IS rendered.
+function nearestRenderableId(liveEvents: MatrixEvent[], evtId: string): string | null {
+  const idx = liveEvents.findIndex(e => e.getId() === evtId);
+  if (idx === -1) return null;
+  for (let i = idx; i >= 0; i--) {
+    const e = liveEvents[i];
+    if (!reactionOrEditEvent(e)) return e.getId() ?? null;
+  }
+  return null;
+}

 function computePositions(room: Room, myUserId: string): Map<string, string[]> {
  const map = new Map<string, string[]>();
+  const liveEvents = room.getLiveTimeline().getEvents();
  for (const member of room.getJoinedMembers()) {
    if (member.userId === myUserId) continue;
    const evtId = room.getEventReadUpTo(member.userId);
    if (!evtId) continue;
-    const arr = map.get(evtId);
+    const targetId = nearestRenderableId(liveEvents, evtId);
+    if (!targetId) continue;
+    const arr = map.get(targetId);
    if (arr) arr.push(member.userId);
-    else map.set(evtId, [member.userId]);
+    else map.set(targetId, [member.userId]);
  }
  return map;
 }
@@ -22,9 +38,17 @@ export function useRoomReadPositions(room: Room): Map<string, string[]> {

  useEffect(() => {
    setPositions(computePositions(room, myUserId));
-    const onReceipt = () => setPositions(computePositions(room, myUserId));
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+    const onReceipt = (): void => {
+      if (debounceTimer !== null) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        setPositions(computePositions(room, myUserId));
+        debounceTimer = null;
+      }, 150);
+    };
    room.on(RoomEvent.Receipt, onReceipt);
    return () => {
+      if (debounceTimer !== null) clearTimeout(debounceTimer);
      room.removeListener(RoomEvent.Receipt, onReceipt);
    };
  }, [room, myUserId]);
@@ -9,7 +9,7 @@ export type DateFormat =
  | 'YYYY-MM-DD'
  | '';
 export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500';
-export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch' | 'chevron' | 'polka' | 'triangles' | 'plaid' | 'tactical' | 'circuit' | 'hexgrid';
+export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch' | 'chevron' | 'polka' | 'triangles' | 'plaid' | 'tactical' | 'circuit' | 'hexgrid' | 'waves' | 'neon' | 'aurora';
 export enum MessageLayout {
  Modern = 0,
  Compact = 1,
@@ -29,6 +29,7 @@ export function resetBootSequence(): void {

 export function runLotusBootSequence(force = false): void {
  if (!force && sessionStorage.getItem(STORAGE_KEY)) return;
+  if (document.getElementById('lt-boot')) return;
  sessionStorage.setItem(STORAGE_KEY, '1');

  const overlay = document.createElement('div');
@@ -58,11 +59,25 @@ export function runLotusBootSequence(force = false): void {
  overlay.appendChild(pre);
  document.body.appendChild(overlay);

+  const dismiss = (): void => {
+    clearInterval(interval);
+    document.removeEventListener('keydown', onKey);
+    overlay.style.transition = 'opacity 0.4s ease';
+    overlay.style.opacity = '0';
+    setTimeout(() => overlay.remove(), 400);
+  };
+
+  const onKey = (e: KeyboardEvent): void => {
+    if (e.key === 'Escape') dismiss();
+  };
+  document.addEventListener('keydown', onKey);
+
  let i = 0;
  let text = '';
  const interval = setInterval(() => {
    if (i >= BOOT_MESSAGES.length) {
      clearInterval(interval);
+      document.removeEventListener('keydown', onKey);
      setTimeout(() => {
        overlay.style.transition = 'opacity 0.5s ease';
        overlay.style.opacity = '0';
@@ -325,8 +325,8 @@ globalStyle(`body.${lotusTerminalBodyClass} kbd`, {
  boxShadow: '0 1px 3px rgba(0,0,0,0.6)',
 });

-// Tooltip / title popups: if browser renders them, style if possible
-globalStyle(`body.${lotusTerminalBodyClass} [title]`, {
+// Tooltip / title popups: abbr only — avoid cursor:help on buttons/links
+globalStyle(`body.${lotusTerminalBodyClass} abbr[title]`, {
  textDecoration: 'underline dotted rgba(0,212,255,0.35)',
  cursor: 'help',
 });
@@ -354,6 +354,32 @@ globalStyle(`body.${lotusTerminalBodyClass}`, {
 });


+
+// ── Reaction chips (emoji reactions on messages) ────────────────────────────
+globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
+  backgroundColor: 'rgba(0,212,255,0.06)',
+  border: '1px solid rgba(0,212,255,0.22)',
+  borderRadius: '6px',
+  color: 'rgba(0,212,255,0.85)',
+  transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
+});
+globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`, {
+  backgroundColor: 'rgba(0,212,255,0.13)',
+  borderColor: 'rgba(0,212,255,0.45)',
+  boxShadow: '0 0 8px rgba(0,212,255,0.18)',
+});
+// Own reaction (aria-pressed = true) → orange accent
+globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`, {
+  backgroundColor: 'rgba(255,107,0,0.12)',
+  border: '1px solid rgba(255,107,0,0.38)',
+  color: 'rgba(255,140,0,0.90)',
+});
+globalStyle(`body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`, {
+  backgroundColor: 'rgba(255,107,0,0.20)',
+  borderColor: 'rgba(255,107,0,0.60)',
+  boxShadow: '0 0 8px rgba(255,107,0,0.22)',
+});
+
 // ═══════════════════════════════════════════════════════════════════════════
 // LIGHT MODE — TDS "daylight reading" variant
 // html[data-theme="light"] + body.lotusTerminalBodyClass
@@ -575,3 +601,28 @@ globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} img:hover`,
  outline: '1px solid rgba(0,98,184,0.28)',
  boxShadow: '0 1px 8px rgba(0,98,184,0.08)',
 });
+
+// Reaction chips — light TDS
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]`, {
+  backgroundColor: 'rgba(0,98,184,0.06)',
+  border: '1px solid rgba(0,98,184,0.22)',
+  borderRadius: '6px',
+  color: '#0062b8',
+  transition: 'background 0.12s, border-color 0.12s, box-shadow 0.12s',
+});
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key]:hover`, {
+  backgroundColor: 'rgba(0,98,184,0.12)',
+  borderColor: 'rgba(0,98,184,0.42)',
+  boxShadow: '0 0 7px rgba(0,98,184,0.16)',
+});
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]`, {
+  backgroundColor: 'rgba(196,78,0,0.10)',
+  border: '1px solid rgba(196,78,0,0.35)',
+  color: '#c44e00',
+});
+globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} button[data-reaction-key][aria-pressed="true"]:hover`, {
+  backgroundColor: 'rgba(196,78,0,0.18)',
+  borderColor: 'rgba(196,78,0,0.55)',
+  boxShadow: '0 0 7px rgba(196,78,0,0.18)',
+});
+