feat(rooms): Disappearing Messages (MSC1763 m.room.retention)

B1 of the Matrix protocol-gaps roadmap, gate-green (688 tests):
- StateEvent.RoomRetention + a shared utils/retention.ts (presets, isExpired,
  getRoomRetentionMs) with tests.
- RoomRetention settings control (PL-gated preset buttons Off/1d/1w/1m) in Room
  Settings → General → Message Retention.
- Timeline hides events past the room's max_lifetime (gated behind Show Hidden
  Events, like redactions) — messages visually disappear, losslessly.
- Opt-in setting enforceRetentionLocally (default OFF) + a headless
  RetentionSweeper that permanently redacts the user's OWN expired messages
  (own-only, loaded-timeline scope, dedupe + retry). Nothing auto-deletes unless
  the user opts in.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/common-settings/general/RoomRetention.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import { Box, Button, color, Spinner, Text } from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { RetentionContent, RETENTION_PRESETS } from '../../../utils/retention';
+
+type RoomRetentionProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomRetention({ permissions }: RoomRetentionProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEdit = permissions.stateEvent(StateEvent.RoomRetention, mx.getSafeUserId());
+
+  const event = useStateEvent(room, StateEvent.RoomRetention);
+  const currentMs = event?.getContent<RetentionContent>().max_lifetime ?? 0;
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (ms: number) => {
+        const content: RetentionContent = ms > 0 ? { max_lifetime: ms } : {};
+        // Lotus custom-state convention: cast the type key (RoomRetention isn't a
+        // typed key in the SDK's StateEvents map).
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        await mx.sendStateEvent(room.roomId, StateEvent.RoomRetention as any, content);
+      },
+      [mx, room.roomId],
+    ),
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Message Retention"
+        description="Messages older than this window disappear from the timeline. Each member can opt in to permanently delete their own expired messages in Settings → General; full server-side deletion also requires homeserver retention to be configured."
+      >
+        <Box gap="200" alignItems="Center" style={{ flexWrap: 'wrap' }}>
+          {RETENTION_PRESETS.map((preset) => {
+            const active = currentMs === preset.ms;
+            return (
+              <Button
+                key={preset.label}
+                type="button"
+                size="300"
+                variant={active ? 'Primary' : 'Secondary'}
+                fill={active ? 'Solid' : 'Soft'}
+                radii="300"
+                disabled={!canEdit || submitting}
+                onClick={() => submit(preset.ms)}
+              >
+                <Text size="B300">{preset.label}</Text>
+              </Button>
+            );
+          })}
+          {submitting && <Spinner size="100" variant="Secondary" />}
+        </Box>
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

src/app/features/common-settings/general/index.ts

@@ -5,6 +5,7 @@ export * from './RoomJoinRules';
 export * from './RoomProfile';
 export * from './RoomPublish';
 export * from './RoomQuality';
+export * from './RoomRetention';
 export * from './RoomShareInvite';
 export * from './RoomUpgrade';
 export * from './RoomVoiceLimit';

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

@@ -12,6 +12,7 @@ import {
   RoomPublishedAddresses,
   RoomPublish,
   RoomQuality,
+  RoomRetention,
   RoomShareInvite,
   RoomUpgrade,
   RoomVoiceLimit,
@@ -56,6 +57,10 @@ export function General({ requestClose }: GeneralProps) {
                 <RoomEncryption permissions={permissions} />
                 <RoomPublish permissions={permissions} />
               </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Message Retention</Text>
+                <RoomRetention permissions={permissions} />
+              </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Voice</Text>
                 <RoomVoiceLimit permissions={permissions} />

src/app/features/room/RoomTimeline.tsx

@@ -109,6 +109,8 @@ import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
 import { ThreadSummary } from './thread/ThreadSummary';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { RetentionContent, isExpired } from '../../utils/retention';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
@@ -468,6 +470,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  // MSC1763 retention: messages older than this window are hidden from the
+  // timeline (unless "show hidden events" is on). Reactive so a policy change
+  // re-renders. `undefined` = no policy.
+  const retentionEvent = useStateEvent(room, StateEvent.RoomRetention);
+  const retentionMs = retentionEvent?.getContent<RetentionContent>().max_lifetime;
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
   const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
 
@@ -2043,6 +2050,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     if (eventSender && ignoredUsersSet.has(eventSender)) {
       return null;
     }
+    // MSC1763: hide messages past the room's retention window (disappearing
+    // messages). Power users can still inspect via "show hidden events".
+    if (retentionMs && !showHiddenEvents && isExpired(mEvent.getTs(), retentionMs, Date.now())) {
+      return null;
+    }
     if (mEvent.isRedacted() && !showHiddenEvents) {
       // eslint-disable-next-line @typescript-eslint/no-shadow
       const t = mEvent.getType();

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

@@ -2251,6 +2251,10 @@ function Messages() {
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [enforceRetentionLocally, setEnforceRetentionLocally] = useSetting(
+    settingsAtom,
+    'enforceRetentionLocally',
+  );
 
   return (
     <Box direction="Column" gap="100">
@@ -2348,6 +2352,19 @@ function Messages() {
           }
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Enforce Message Retention"
+          description="Permanently delete your own messages once a room's retention window (Room Settings → Message Retention) has passed. Off by default; only affects your own messages."
+          after={
+            <Switch
+              variant="Primary"
+              value={enforceRetentionLocally}
+              onChange={setEnforceRetentionLocally}
+            />
+          }
+        />
+      </SequenceCard>
     </Box>
   );
 }