fix(reminders): a reminder stays until you've seen it (#338)

ReminderMonitor pushed an ordinary toast (auto-dismissed after 4 s) and
deleted the reminder at once, with no OS notification — one that came due
while the app was in the background or the user was away was lost.

Now the reminder toast is sticky; clicking it opens the message and
dismissing it closes it, and only then is the reminder deleted (an unseen
one returns on the next start). When the window isn't focused it also
raises an OS notification (respecting "show notifications" and quiet
hours; no decrypted E2EE text, per N106).

Verified headless (notifications granted, window unfocused): due at
t+24 s, the toast stayed up for the remaining 51 s, one OS notification
"Reminder :: call the dentist before 5", the reminder stayed in
io.lotus.reminders until dismissed, then was removed.

Fixes #338

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

.cinny-config.json.bak

@@ -1,17 +0,0 @@
-{
-  "defaultHomeserver": 0,
-  "homeserverList": [
-    "matrix.lotusguild.org"
-  ],
-  "allowCustomHomeservers": false,
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [],
-    "rooms": [],
-    "servers": []
-  },
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
-}

.gitignore

@@ -14,3 +14,6 @@ test-results/
 # local dev homeserver (scripts/dev-homeserver.sh)
 .dev-homeserver/
 __pycache__/
+
+# Local config backups
+*.bak

e2e/security-nudge.spec.ts

@@ -0,0 +1,74 @@
+import { test, expect, Page } from '@playwright/test';
+import { HS, ensureUser, hsReachable, loginUI, TestUser, uniq } from './localHs';
+
+// [Gitea #110, #123] The device-security nudge. A fresh account has no key
+// backup and no cross-signing → "Set up key backup", but only after the 24 h
+// grace period on this device; "Not now" snoozes it.
+const strip = (page: Page) => page.getByRole('status').filter({ hasText: /encryption keys/ });
+
+/** Back-date this device's first-seen record past the 24 h grace period, then reload. */
+async function pastGrace(page: Page) {
+  await page.evaluate(() => {
+    const { deviceId } = JSON.parse(localStorage.getItem('cinny_session_v1') ?? '{}');
+    localStorage.setItem(
+      `lotus-security-nudge-${deviceId}`,
+      JSON.stringify({ firstSeen: Date.now() - 2 * 86_400_000, dismissals: {} }),
+    );
+  });
+  await page.reload();
+}
+
+/** The nudge waits until sync has settled (after "Connecting…"). */
+async function settled(page: Page) {
+  await page
+    .getByText('Connecting...')
+    .first()
+    .waitFor({ timeout: 30_000 })
+    .catch(() => undefined);
+  await page.getByText('Connecting...').first().waitFor({ state: 'detached', timeout: 90_000 });
+  await page.waitForTimeout(2000);
+}
+
+test.describe('security nudge (#110, #123)', () => {
+  let user: TestUser;
+
+  test.beforeAll(async () => {
+    test.skip(!(await hsReachable()), `no local homeserver at ${HS} (set E2E_LOCAL_HS)`);
+  });
+
+  test.beforeEach(async () => {
+    user = await ensureUser(uniq('e2e_nudge_'));
+  });
+
+  test('nothing during the first 24 h on a device', async ({ page }) => {
+    test.setTimeout(150_000);
+    await loginUI(page, user);
+    await settled(page);
+    // Past the point where the nudge shows once the grace period is over (~5 s).
+    await page.waitForTimeout(8000);
+    await expect(strip(page)).toHaveCount(0);
+  });
+
+  test('no key backup: "Set up key backup" opens Settings → Devices', async ({ page }) => {
+    test.setTimeout(150_000);
+    await loginUI(page, user);
+    await pastGrace(page);
+    await settled(page);
+    const nudge = strip(page);
+    await expect(nudge).toContainText("Your encryption keys aren't backed up");
+    await nudge.getByRole('button', { name: 'Set up' }).click();
+    await expect(page.getByText('Device Verification').first()).toBeVisible();
+  });
+
+  test('"Not now" snoozes it across a reload', async ({ page }) => {
+    test.setTimeout(200_000);
+    await loginUI(page, user);
+    await pastGrace(page);
+    await settled(page);
+    await strip(page).getByRole('button', { name: 'Not now' }).click();
+    await expect(strip(page)).toHaveCount(0);
+    await page.reload();
+    await settled(page);
+    await expect(strip(page)).toHaveCount(0);
+  });
+});

package-lock.json

@@ -45,12 +45,12 @@
         "html-react-parser": "6.1.2",
         "i18next": "26.2.0",
         "i18next-browser-languagedetector": "8.2.1",
-        "i18next-http-backend": "4.0.0",
+        "i18next-http-backend": "4.0.2",
         "immer": "11.1.8",
         "is-hotkey": "0.2.0",
         "jotai": "2.20.0",
         "jsqr": "1.4.0",
-        "katex": "0.16.47",
+        "katex": "0.18.11",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
         "matrix-js-sdk": "41.7.0",
@@ -8168,9 +8168,9 @@
       }
     },
     "node_modules/i18next-http-backend": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-4.0.0.tgz",
-      "integrity": "sha512-EgSjO3Q1G6f2Q5oy7u9mmxuesE0oSfzAD97NFBjC8EmkK4guBSYLljM0Fng3DarMWIIkU70jfo4+mUzmyVISTA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-4.0.2.tgz",
+      "integrity": "sha512-oay62dIB2kL7+WHzoUXBjWfL3+mwijD3pQkQkIEaRLhy6kjXxUhrRenV0gInwlCASAaJaDy94+XvYizK+cAGdA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -9162,28 +9162,29 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.47",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
-      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "version": "0.18.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.18.11.tgz",
+      "integrity": "sha512-yvyz/2VMKqoho/35Hat5w37wIEdWJ5ElVMidTAlWrxr5uW4aBGsEpveTmKh18/zw08v/7lGswCPon4OhqmqrTA==",
+      "deprecated": "Accidentally published with breaking changes. Use 0.19.0 instead.",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
       "license": "MIT",
       "dependencies": {
-        "commander": "^8.3.0"
+        "commander": "^15.0.0"
       },
       "bin": {
         "katex": "cli.js"
       }
     },
     "node_modules/katex/node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-15.0.0.tgz",
+      "integrity": "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==",
       "license": "MIT",
       "engines": {
-        "node": ">= 12"
+        "node": ">=22.12.0"
       }
     },
     "node_modules/keyv": {
@@ -12164,9 +12165,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }

package.json

@@ -72,12 +72,12 @@
     "html-react-parser": "6.1.2",
     "i18next": "26.2.0",
     "i18next-browser-languagedetector": "8.2.1",
-    "i18next-http-backend": "4.0.0",
+    "i18next-http-backend": "4.0.2",
     "immer": "11.1.8",
     "is-hotkey": "0.2.0",
     "jotai": "2.20.0",
     "jsqr": "1.4.0",
-    "katex": "0.16.47",
+    "katex": "0.18.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
     "matrix-js-sdk": "41.7.0",

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

@@ -1,5 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
 import { DefaultReset, color, config, toRem } from 'folds';
+import { GIF_PREVIEW_MAX_HEIGHT } from '../../utils/gifPreviewSize';
 
 export const UrlPreview = style([
   DefaultReset,
@@ -955,12 +956,14 @@ export const PortraitSideLayout = style([
 // GIF card (Giphy / Tenor)
 // ---------------------------------------------------------------------------
 
+// Full card width; a GIF narrower than the card (portrait, square, small) is
+// centred on the surface colour instead of being stretched and cropped.
 export const GifThumbnailWrapper = style([
   DefaultReset,
   {
-    position: 'relative',
+    display: 'flex',
+    justifyContent: 'center',
     width: '100%',
-    maxHeight: toRem(200),
     overflow: 'hidden',
     flexShrink: 0,
     backgroundColor: color.Surface.Container,
@@ -972,14 +975,26 @@ export const GifThumbnailWrapper = style([
   },
 ]);
 
+// Wraps just the GIF so the "GIF" badge sits on the GIF's own corner.
+export const GifFrame = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    display: 'block',
+    maxWidth: '100%',
+  },
+]);
+
+// The inline width/aspect-ratio (from og:image:width/height) sets the size;
+// max-width lets a phone's narrower card shrink it, keeping the ratio.
 export const GifThumbnailImg = style([
   DefaultReset,
   {
-    width: '100%',
-    maxHeight: toRem(200),
-    objectFit: 'cover',
-    objectPosition: 'center',
     display: 'block',
+    maxWidth: '100%',
+    maxHeight: toRem(GIF_PREVIEW_MAX_HEIGHT),
+    height: 'auto',
+    objectFit: 'contain',
   },
 ]);
 

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

@@ -13,6 +13,7 @@ import {
   as,
   color,
   config,
+  toRem,
 } from 'folds';
 import { ImageOverlay } from '../ImageOverlay';
 import { MobileTouchTarget } from '../../styles/mobile.css';
@@ -48,6 +49,11 @@ import {
   tiktokOembedUrl,
   tiktokPlayerEmbedUrl,
 } from '../../utils/videoEmbed';
+import {
+  GIF_PREVIEW_MAX_HEIGHT,
+  GIF_PREVIEW_MAX_WIDTH,
+  gifPreviewBox,
+} from '../../utils/gifPreviewSize';
 
 const linkStyles = { color: color.Success.Main };
 
@@ -2277,6 +2283,9 @@ function GifCard({
 }) {
   const title = (prev['og:title'] as string | undefined) ?? '';
   const mxcImage = prev['og:image'] as string | undefined;
+  // Size the GIF from its own dimensions (Giphy and Tenor publish them) rather
+  // than forcing every GIF into one cropped band.
+  const box = gifPreviewBox(prev['og:image:width'], prev['og:image:height']);
 
   // A GIF card exists to show a moving GIF, so request the original rather than
   // a thumbnail — the thumbnail endpoint would return a frozen first frame.
@@ -2284,7 +2293,15 @@ function GifCard({
   const thumbSrc = mxcImage
     ? shouldServeGifOriginal(url, prev)
       ? mxcUrlToHttp(mx, mxcImage, useAuthentication)
-      : mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
+      : mxcUrlToHttp(
+          mx,
+          mxcImage,
+          useAuthentication,
+          GIF_PREVIEW_MAX_WIDTH * 2,
+          GIF_PREVIEW_MAX_HEIGHT * 2,
+          'scale',
+          false,
+        )
     : null;
 
   // If there's no image, fall back to a generic-style layout
@@ -2316,7 +2333,9 @@ function GifCard({
 
   return (
     <Box direction="Column" style={{ width: '100%' }}>
-      {/* GIF thumbnail — full width */}
+      {/* The whole GIF at its own aspect ratio, centred; never cropped. With a
+          known size the box is reserved before it loads (no layout jump);
+          without one it shows at its natural size, capped by the card. */}
       <a
         href={url}
         target="_blank"
@@ -2324,8 +2343,22 @@ function GifCard({
         className={previewCss.GifThumbnailWrapper}
         aria-label={`View GIF on ${siteBadgeLabel}: ${title}`}
       >
-        <img className={previewCss.GifThumbnailImg} src={thumbSrc} alt={title} loading="lazy" />
-        <span className={previewCss.GifBadge}>GIF</span>
+        <span className={previewCss.GifFrame}>
+          <img
+            className={previewCss.GifThumbnailImg}
+            src={thumbSrc}
+            alt={title}
+            loading="lazy"
+            width={box?.width}
+            height={box?.height}
+            style={
+              box
+                ? { width: toRem(box.width), aspectRatio: `${box.width} / ${box.height}` }
+                : undefined
+            }
+          />
+          <span className={previewCss.GifBadge}>GIF</span>
+        </span>
       </a>
       {/* Footer row */}
       <UrlPreviewContent>

src/app/features/security-nudge/SecurityBanner.tsx

@@ -0,0 +1,137 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { SyncState } from 'matrix-js-sdk';
+import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
+import { Icons } from 'folds';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useCrossSigningActive } from '../../hooks/useCrossSigning';
+import {
+  useDeviceVerificationStatus,
+  VerificationStatus,
+} from '../../hooks/useDeviceVerificationStatus';
+import { useKeyBackupInfo, useKeyBackupStatusChange } from '../../hooks/useKeyBackup';
+import { useAlive } from '../../hooks/useAlive';
+import { useSyncState } from '../../hooks/useSyncState';
+import { settingsRequestAtom } from '../../state/settingsRequest';
+import { serverStatusAtom } from '../../state/serverStatus';
+import { pickBanner } from '../../utils/kumaStatus';
+import {
+  dismissNudge,
+  NUDGE_COPY,
+  NUDGE_KEY_PREFIX,
+  nudgeFor,
+  NudgeRecord,
+  parseNudgeRecord,
+  shouldShowNudge,
+} from '../../utils/securityNudge';
+import { StatusStrip } from '../server-status/ServerStatusBanner';
+
+/** This device's backup connection: undefined until known, then true/false. */
+const useBackupActive = (crypto: CryptoApi): boolean | undefined => {
+  const alive = useAlive();
+  const [active, setActive] = useState<boolean>();
+  useEffect(() => {
+    crypto.getActiveSessionBackupVersion().then((v) => {
+      if (alive()) setActive(typeof v === 'string');
+    });
+  }, [crypto, alive]);
+  useKeyBackupStatusChange(useCallback((enabled: boolean) => setActive(enabled), []));
+  return active;
+};
+
+const readRecord = (key: string): NudgeRecord => {
+  let raw: string | null = null;
+  try {
+    raw = localStorage.getItem(key);
+  } catch {
+    /* storage unavailable */
+  }
+  const record = parseNudgeRecord(raw, Date.now());
+  if (!raw) {
+    try {
+      localStorage.setItem(key, JSON.stringify(record));
+    } catch {
+      /* best effort */
+    }
+  }
+  return record;
+};
+
+function SecurityBannerFor({ crypto }: { crypto: CryptoApi }) {
+  const mx = useMatrixClient();
+  const deviceId = mx.getDeviceId() ?? undefined;
+  const crossSigning = useCrossSigningActive();
+  const status = useDeviceVerificationStatus(crypto, mx.getSafeUserId(), deviceId);
+  const backupInfo = useKeyBackupInfo(crypto);
+  const backupActive = useBackupActive(crypto);
+  const { status: serverStatus, syncLost } = useAtomValue(serverStatusAtom);
+  const requestSettings = useSetAtom(settingsRequestAtom);
+  // Not urgent: wait until sync has settled (two SYNCING in a row), so it
+  // never stacks under the "Connecting…" strip at startup.
+  const [settled, setSettled] = useState(false);
+  useSyncState(
+    mx,
+    useCallback((state: SyncState | null, prev?: SyncState | null) => {
+      setSettled(state === SyncState.Syncing && prev === SyncState.Syncing);
+    }, []),
+  );
+
+  const key = `${NUDGE_KEY_PREFIX}${deviceId ?? 'unknown'}`;
+  const [record, setRecord] = useState(() => readRecord(key));
+
+  let deviceVerified: boolean | undefined;
+  if (status === VerificationStatus.Verified) deviceVerified = true;
+  else if (status === VerificationStatus.Unverified) deviceVerified = false;
+  const kind = nudgeFor({
+    crossSigning,
+    deviceVerified,
+    backupOnServer: backupInfo === undefined ? undefined : backupInfo !== null,
+    backupActive,
+  });
+
+  // One strip at a time: outages, maintenance and a lost connection win.
+  const otherStrip = syncLost || !!pickBanner(serverStatus, { syncLost, where: 'client' });
+  if (!settled || !deviceId || !kind || otherStrip || !shouldShowNudge(kind, record, Date.now()))
+    return null;
+
+  const copy = NUDGE_COPY[kind];
+  const dismiss = () => {
+    const next = dismissNudge(kind, record, Date.now());
+    try {
+      localStorage.setItem(key, JSON.stringify(next));
+    } catch {
+      /* dismissed for this session only */
+    }
+    setRecord(next);
+  };
+  return (
+    <StatusStrip
+      banner={{ key: kind, tone: 'Primary', text: copy.text, dismissable: true }}
+      icon={Icons.ShieldUser}
+      action={{ label: copy.action, onClick: () => requestSettings('devices') }}
+      dismissLabel="Not now"
+      onDismiss={dismiss}
+    />
+  );
+}
+
+/**
+ * [Gitea #110, #123] The device-security nudge: verify this device, connect
+ * it to the key backup, or set up key backup. See utils/securityNudge.ts.
+ */
+function SecurityBannerInner() {
+  const mx = useMatrixClient();
+  const crypto = mx.getCrypto();
+  if (!crypto) return null;
+  return <SecurityBannerFor crypto={crypto} />;
+}
+
+// A nudge must never take the app down: any error just hides it.
+export function SecurityBanner() {
+  return (
+    <ErrorBoundary fallback={null}>
+      <SecurityBannerInner />
+    </ErrorBoundary>
+  );
+}

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

@@ -22,7 +22,7 @@ const readDismissed = (): string[] => {
   }
 };
 
-const bannerIcon = (b: StatusBanner): IconSrc => {
+const bannerIcon = (b: StripContent): IconSrc => {
   if (b.kind === 'maintenance') return Icons.Setting;
   if (b.tone === 'Primary') return Icons.Info;
   return Icons.Warning;
@@ -32,12 +32,28 @@ const bannerIcon = (b: StatusBanner): IconSrc => {
  * [Gitea #124] One status strip, in the same slot and style as the sync and
  * clock banners. Presentational: the caller picks the banner.
  */
+export type StripContent = Pick<
+  StatusBanner,
+  'key' | 'tone' | 'text' | 'detail' | 'dismissable'
+> & {
+  kind?: StatusBanner['kind'];
+};
+
 export function StatusStrip({
   banner,
   onDismiss,
+  icon,
+  action,
+  dismissLabel,
 }: {
-  banner: StatusBanner;
+  banner: StripContent;
   onDismiss?: () => void;
+  /** Overrides the icon picked from the banner's tone/kind. */
+  icon?: IconSrc;
+  /** A primary action button (e.g. "Verify"). */
+  action?: { label: string; onClick: () => void };
+  /** A text button instead of the ✕ for dismissing (e.g. "Not now"). */
+  dismissLabel?: string;
 }) {
   const [open, setOpen] = useState(false);
   const mobile = useScreenSizeContext() === ScreenSize.Mobile;
@@ -59,8 +75,8 @@ export function StatusStrip({
           gap="200"
           style={{ minHeight: config.size.X300 }}
         >
-          <Icon size="100" src={bannerIcon(banner)} />
-          <Text size="L400" truncate={mobile && !open} style={{ minWidth: 0 }}>
+          <Icon size="100" src={icon ?? bannerIcon(banner)} />
+          <Text size="L400" truncate={mobile && !!banner.detail && !open} style={{ minWidth: 0 }}>
             {banner.text}
           </Text>
           {banner.detail && (
@@ -78,7 +94,31 @@ export function StatusStrip({
               </Text>
             </Button>
           )}
-          {banner.dismissable && onDismiss && (
+          {action && (
+            <Button
+              size="300"
+              variant={banner.tone}
+              fill="Solid"
+              radii="300"
+              onClick={action.onClick}
+              style={{ flexShrink: 0 }}
+            >
+              <Text size="B300">{action.label}</Text>
+            </Button>
+          )}
+          {banner.dismissable && onDismiss && dismissLabel && (
+            <Button
+              size="300"
+              variant={banner.tone}
+              fill="None"
+              radii="300"
+              onClick={onDismiss}
+              style={{ flexShrink: 0 }}
+            >
+              <Text size="B300">{dismissLabel}</Text>
+            </Button>
+          )}
+          {banner.dismissable && onDismiss && !dismissLabel && (
             <IconButton
               size="300"
               variant={banner.tone}

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -783,15 +783,20 @@ function ReminderMonitor() {
   const { reminders, removeReminder } = useReminders();
   const setToast = useSetAtom(toastQueueAtom);
   const mDirects = useAtomValue(mDirectAtom);
+  const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
+  const quietActive = useNotificationsQuiet();
   const firedRef = useRef<Set<string>>(new Set());
   const removingRef = useRef<Set<string>>(new Set());
-  // Read the latest reminders / DM map via refs so the poll interval below is
-  // created once — not torn down and restarted (which resets its 30s countdown
-  // and can indefinitely defer a near-due reminder) on every reminder sync (N115).
+  // Read the latest reminders / DM map / notification prefs via refs so the poll
+  // interval below is created once — not torn down and restarted (which resets
+  // its 30s countdown and can indefinitely defer a near-due reminder) on every
+  // reminder sync (N115).
   const remindersRef = useRef(reminders);
   remindersRef.current = reminders;
   const mDirectsRef = useRef(mDirects);
   mDirectsRef.current = mDirects;
+  const osNotifyRef = useRef(false);
+  osNotifyRef.current = showNotifications && !quietActive;
 
   useEffect(() => {
     const check = () => {
@@ -815,6 +820,23 @@ function ReminderMonitor() {
           const hashPath = mDirectsRef.current.has(r.roomId)
             ? getDirectRoomPath(r.roomId, r.eventId)
             : getHomeRoomPath(r.roomId, r.eventId);
+          // [Gitea #338] A reminder is only done once the user has SEEN it: the
+          // toast stays until clicked or dismissed (it used to vanish after 4 s
+          // and the reminder was deleted at once, so one due while the user was
+          // away was lost). The removal is persisted on that click/dismiss; an
+          // unseen reminder comes back on the next start.
+          const done = () => {
+            if (removingRef.current.has(key)) return;
+            removingRef.current.add(key);
+            removeReminder(r.eventId, r.timestamp).catch(() => {
+              removingRef.current.delete(key);
+            });
+          };
+          const open = () => {
+            done();
+            // window.location.hash setter auto-prepends '#' (as the toast does)
+            window.location.hash = hashPath;
+          };
           setToast({
             id: `reminder-${key}`,
             displayName: 'Reminder',
@@ -822,16 +844,30 @@ function ReminderMonitor() {
             roomName,
             roomId: r.roomId,
             hashPath,
+            sticky: true,
+            onClick: open,
+            onDismiss: done,
           });
-        }
-        // Persist the removal, retrying on a later tick if it fails — without
-        // re-showing the toast (N114). The server echo drops it from
-        // `reminders` once the write lands.
-        if (!removingRef.current.has(key)) {
-          removingRef.current.add(key);
-          removeReminder(r.eventId, r.timestamp).catch(() => {
-            removingRef.current.delete(key);
-          });
+          // Away from the window: also raise an OS notification (the reminder is
+          // an explicit request, but quiet hours / notifications-off win). Never
+          // put decrypted E2EE text in it (N106).
+          if (osNotifyRef.current && notificationPermission('granted') && !document.hasFocus()) {
+            const encrypted = !!room?.hasEncryptionStateEvent();
+            showOsNotification(
+              'Reminder',
+              {
+                icon: LogoSVG,
+                badge: LogoSVG,
+                body: encrypted ? `A message in ${roomName}` : body,
+                tag: `reminder-${key}`,
+                data: { path: hashPath, roomId: r.roomId },
+              },
+              () => {
+                window.focus();
+                open();
+              },
+            ).catch(() => undefined);
+          }
         }
       });
     };

src/app/pages/client/ClientRoot.tsx

@@ -48,6 +48,7 @@ import {
   ServerStatusBanner,
   ServerStatusFeature,
 } from '../../features/server-status/ServerStatusBanner';
+import { SecurityBanner } from '../../features/security-nudge/SecurityBanner';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
 import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
 import { pushSessionToSW } from '../../../sw-session';
@@ -313,6 +314,8 @@ export function ClientRoot({ children }: ClientRootProps) {
           <ClientRootLoading />
         ) : (
           <MatrixClientProvider value={mx}>
+            {/* [Gitea #110/#123] Needs the client context (its hooks read it). */}
+            {!syncError && <SecurityBanner />}
             <ServerConfigsLoader>
               {(serverConfigs) => (
                 <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>

src/app/state/plaintextCaches.ts

@@ -8,6 +8,7 @@ import { clearNavToActivePathStore } from './navToActivePath';
 import { DRAFT_MSG_KEY_PREFIX } from '../utils/draft';
 import { clearCallSession } from '../utils/callRejoin';
 import { clearOutbox } from '../utils/outbox';
+import { NUDGE_KEY_PREFIX } from '../utils/securityNudge';
 
 /**
  * [Gitea #41] Wipe every persisted composer draft (`draft-msg-<roomId>`). Drafts
@@ -77,7 +78,11 @@ const clearStatusMessage = (): void => {
     return;
   }
   keys.forEach((key) => {
-    if (key.startsWith('lotus-status-msg-') || key.startsWith('lotus-status-expiry-')) {
+    if (
+      key.startsWith('lotus-status-msg-') ||
+      key.startsWith('lotus-status-expiry-') ||
+      key.startsWith(NUDGE_KEY_PREFIX)
+    ) {
       try {
         localStorage.removeItem(key);
       } catch {

src/app/utils/gifPreviewSize.test.ts

@@ -0,0 +1,36 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { gifPreviewBox } from './gifPreviewSize';
+
+test('gifPreviewBox: a landscape GIF wider than the card fills its width', () => {
+  assert.deepEqual(gifPreviewBox(480, 270), { width: 400, height: 225 });
+  assert.deepEqual(gifPreviewBox(480, 200), { width: 400, height: 167 });
+});
+
+test('gifPreviewBox: square and portrait GIFs keep their shape instead of being cropped', () => {
+  assert.deepEqual(gifPreviewBox(300, 300), { width: 320, height: 320 });
+  assert.deepEqual(gifPreviewBox(480, 480), { width: 320, height: 320 });
+  assert.deepEqual(gifPreviewBox(240, 480), { width: 160, height: 320 });
+});
+
+test('gifPreviewBox: a small GIF is enlarged at most 2×', () => {
+  assert.deepEqual(gifPreviewBox(100, 80), { width: 200, height: 160 });
+  assert.deepEqual(gifPreviewBox(150, 150), { width: 300, height: 300 });
+});
+
+test('gifPreviewBox: extreme aspect ratios stay inside the box and never collapse to 0', () => {
+  assert.deepEqual(gifPreviewBox(2000, 50), { width: 400, height: 10 });
+  assert.deepEqual(gifPreviewBox(1, 10000), { width: 1, height: 320 });
+});
+
+test('gifPreviewBox: accepts numeric strings and rejects unknown sizes', () => {
+  assert.deepEqual(gifPreviewBox('480', '270'), { width: 400, height: 225 });
+  assert.equal(gifPreviewBox(undefined, 270), undefined);
+  assert.equal(gifPreviewBox(480, 0), undefined);
+  assert.equal(gifPreviewBox('wide', 270), undefined);
+  assert.equal(gifPreviewBox(Number.NaN, 270), undefined);
+});
+
+test('gifPreviewBox: custom limits', () => {
+  assert.deepEqual(gifPreviewBox(480, 270, 200, 200, 1), { width: 200, height: 113 });
+});

src/app/utils/gifPreviewSize.ts

@@ -0,0 +1,39 @@
+/**
+ * Display size for a Giphy / Tenor link-preview GIF. The card used to force
+ * every GIF into a full-width × 200px band with `object-fit: cover`, so square
+ * and portrait GIFs lost most of their height and small ones were blown up.
+ * Fit the GIF inside `maxWidth × maxHeight` keeping its aspect ratio, and
+ * enlarge a small GIF at most `maxUpscale`× so it stays sharp.
+ */
+
+/** The GIF card's width (UrlPreview is 25rem); a phone shrinks it further via CSS. */
+export const GIF_PREVIEW_MAX_WIDTH = 400;
+export const GIF_PREVIEW_MAX_HEIGHT = 320;
+export const GIF_PREVIEW_MAX_UPSCALE = 2;
+
+export type GifPreviewBox = { width: number; height: number };
+
+// og:image:width / og:image:height are numbers from Synapse, but some sites
+// publish them as strings; anything else (missing, 0, NaN) means "unknown".
+const dimension = (value: unknown): number | undefined => {
+  const n = typeof value === 'string' ? Number(value) : value;
+  return typeof n === 'number' && Number.isFinite(n) && n > 0 ? n : undefined;
+};
+
+/** The box to render the GIF in, or `undefined` when its size isn't known. */
+export const gifPreviewBox = (
+  rawWidth: unknown,
+  rawHeight: unknown,
+  maxWidth = GIF_PREVIEW_MAX_WIDTH,
+  maxHeight = GIF_PREVIEW_MAX_HEIGHT,
+  maxUpscale = GIF_PREVIEW_MAX_UPSCALE,
+): GifPreviewBox | undefined => {
+  const width = dimension(rawWidth);
+  const height = dimension(rawHeight);
+  if (!width || !height) return undefined;
+  const scale = Math.min(maxWidth / width, maxHeight / height, maxUpscale);
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  };
+};

src/app/utils/securityNudge.test.ts

@@ -0,0 +1,81 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  dismissNudge,
+  NUDGE_GRACE_MS,
+  NUDGE_SNOOZE_MS,
+  nudgeFor,
+  parseNudgeRecord,
+  SecurityState,
+  shouldShowNudge,
+} from './securityNudge';
+
+const healthy: SecurityState = {
+  crossSigning: true,
+  deviceVerified: true,
+  backupOnServer: true,
+  backupActive: true,
+};
+
+test('the #123 table: which nudge for which state', () => {
+  // E: healthy → nothing, ever.
+  assert.equal(nudgeFor(healthy), undefined);
+  // B: cross-signing, this device unverified, backup on server → verify first.
+  assert.equal(nudgeFor({ ...healthy, deviceVerified: false }), 'verify-device');
+  // C: cross-signing, unverified, no backup → still verify first.
+  assert.equal(
+    nudgeFor({ ...healthy, deviceVerified: false, backupOnServer: false }),
+    'verify-device',
+  );
+  // D: verified, no backup → #110's set-up nudge.
+  assert.equal(nudgeFor({ ...healthy, backupOnServer: false }), 'setup-backup');
+  // #110 state 2: backup exists, this device not using it.
+  assert.equal(nudgeFor({ ...healthy, backupActive: false }), 'connect-backup');
+  // A: never set up cross-signing, no backup → set up (the flow does both).
+  assert.equal(
+    nudgeFor({
+      crossSigning: false,
+      deviceVerified: false,
+      backupOnServer: false,
+      backupActive: false,
+    }),
+    'setup-backup',
+  );
+});
+
+test('nothing while crypto is still loading (F)', () => {
+  assert.equal(nudgeFor({ ...healthy, deviceVerified: undefined }), undefined);
+  assert.equal(nudgeFor({ ...healthy, backupOnServer: undefined }), undefined);
+  assert.equal(nudgeFor({ ...healthy, backupActive: undefined }), undefined);
+  // Unknown backup connection doesn't hide a known "no backup at all".
+  assert.equal(
+    nudgeFor({ ...healthy, backupOnServer: false, backupActive: undefined }),
+    'setup-backup',
+  );
+});
+
+test('timing: 24 h grace, 7-day snooze, stop after 3 dismissals', () => {
+  const t0 = 1_700_000_000_000;
+  let record = parseNudgeRecord(null, t0);
+  assert.equal(shouldShowNudge('verify-device', record, t0), false, 'first launch');
+  assert.equal(shouldShowNudge('verify-device', record, t0 + NUDGE_GRACE_MS - 1), false);
+  let now = t0 + NUDGE_GRACE_MS;
+  assert.equal(shouldShowNudge('verify-device', record, now), true, 'after 24 h');
+  for (let i = 1; i <= 3; i += 1) {
+    record = dismissNudge('verify-device', record, now);
+    assert.equal(shouldShowNudge('verify-device', record, now), false, `snoozed after #${i}`);
+    now += NUDGE_SNOOZE_MS;
+    assert.equal(shouldShowNudge('verify-device', record, now), i < 3, `after 7 days (#${i})`);
+  }
+  // Dismissing one nudge doesn't hide another.
+  assert.equal(shouldShowNudge('setup-backup', record, now), true);
+});
+
+test('stored record: round trip, and garbage starts a fresh grace period', () => {
+  const t0 = 1_700_000_000_000;
+  const r = dismissNudge('setup-backup', parseNudgeRecord(null, t0 - 5), t0);
+  assert.deepEqual(parseNudgeRecord(JSON.stringify(r), t0 + 1), r);
+  for (const bad of ['{', 'null', '"x"', '{"firstSeen":"yesterday"}', '{"firstSeen":1}']) {
+    assert.deepEqual(parseNudgeRecord(bad, t0), { firstSeen: t0, dismissals: {} }, bad);
+  }
+});

src/app/utils/securityNudge.ts

@@ -0,0 +1,94 @@
+/**
+ * [Gitea #110, #123] One "security" nudge for this device, in priority order:
+ *
+ * - verify-device: the account has cross-signing but THIS device isn't signed.
+ *   It can't unlock backed-up history and shows as untrusted to others.
+ *   Verifying with the recovery key also connects the backup, so it comes first.
+ * - connect-backup: a key backup exists on the server but this device isn't
+ *   backing up to it (`getActiveSessionBackupVersion()` null).
+ * - setup-backup: no key backup at all (includes accounts that never set up
+ *   cross-signing: the setup flow does both).
+ *
+ * Anything not yet known (crypto still loading) → no nudge. Timing: not in
+ * the first 24 h on a device (onboarding), "Not now" snoozes 7 days, three
+ * dismissals of a nudge stop it for good; a healthy device never sees one.
+ */
+
+export type NudgeKind = 'verify-device' | 'connect-backup' | 'setup-backup';
+
+export type SecurityState = {
+  /** m.cross_signing.master account data present. */
+  crossSigning: boolean;
+  /** This device cross-signing-verified; undefined while crypto isn't ready. */
+  deviceVerified: boolean | undefined;
+  /** A key backup version on the server; undefined while loading. */
+  backupOnServer: boolean | undefined;
+  /** This device is backing up to it; undefined while loading. */
+  backupActive: boolean | undefined;
+};
+
+export const nudgeFor = (s: SecurityState): NudgeKind | undefined => {
+  if (s.crossSigning) {
+    if (s.deviceVerified === undefined) return undefined;
+    if (!s.deviceVerified) return 'verify-device';
+  }
+  if (s.backupOnServer === undefined) return undefined;
+  if (!s.backupOnServer) return 'setup-backup';
+  if (s.backupActive === undefined) return undefined;
+  return s.backupActive ? undefined : 'connect-backup';
+};
+
+export const NUDGE_GRACE_MS = 24 * 60 * 60 * 1000;
+export const NUDGE_SNOOZE_MS = 7 * 24 * 60 * 60 * 1000;
+export const NUDGE_MAX_DISMISSALS = 3;
+
+export type NudgeRecord = {
+  /** When this device was first seen by the nudge (ms). */
+  firstSeen: number;
+  dismissals: Partial<Record<NudgeKind, { count: number; last: number }>>;
+};
+
+export const shouldShowNudge = (kind: NudgeKind, record: NudgeRecord, now: number): boolean => {
+  if (now - record.firstSeen < NUDGE_GRACE_MS) return false;
+  const d = record.dismissals[kind];
+  if (!d) return true;
+  return d.count < NUDGE_MAX_DISMISSALS && now - d.last >= NUDGE_SNOOZE_MS;
+};
+
+export const dismissNudge = (kind: NudgeKind, record: NudgeRecord, now: number): NudgeRecord => ({
+  ...record,
+  dismissals: {
+    ...record.dismissals,
+    [kind]: { count: (record.dismissals[kind]?.count ?? 0) + 1, last: now },
+  },
+});
+
+export const NUDGE_KEY_PREFIX = 'lotus-security-nudge-';
+
+/** Parse a stored record; anything unexpected starts a fresh one (grace period from now). */
+export const parseNudgeRecord = (raw: string | null, now: number): NudgeRecord => {
+  try {
+    const v = JSON.parse(raw ?? '');
+    if (v && typeof v.firstSeen === 'number' && v.dismissals && typeof v.dismissals === 'object') {
+      return { firstSeen: v.firstSeen, dismissals: v.dismissals };
+    }
+  } catch {
+    /* fresh record below */
+  }
+  return { firstSeen: now, dismissals: {} };
+};
+
+export const NUDGE_COPY: Record<NudgeKind, { text: string; action: string }> = {
+  'verify-device': {
+    text: 'Verify this device so you can read your older encrypted messages and others see it as trusted.',
+    action: 'Verify',
+  },
+  'connect-backup': {
+    text: "This device isn't using your key backup yet. Connect it so your encrypted messages stay readable if you lose it.",
+    action: 'Connect',
+  },
+  'setup-backup': {
+    text: "Your encryption keys aren't backed up. Set up key backup so you don't lose your encrypted messages if you log out or lose this device.",
+    action: 'Set up',
+  },
+};