feat: add encrypted room cache panel with load/load-more buttons

Each encrypted room in scope shows:
- Message count and oldest cached date
- 'Load messages' if no cache, 'Load more' if more history available
- 'Fully cached' label when all history is loaded

Clicking load/load-more paginates backwards 100 messages at a time.
localResult re-computes via cacheVersion after each load so search
results update automatically without re-typing the query.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -1,10 +1,10 @@
-import React, { RefObject, useEffect, useMemo, useRef } from 'react';
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem } from 'folds';
+import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem, Button } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
-import { SearchOrderBy } from 'matrix-js-sdk';
+import { EventTimeline, EventType, Room, SearchOrderBy } from 'matrix-js-sdk';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { _SearchPathSearchParams } from '../../pages/paths';
@@ -37,6 +37,107 @@ const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSe
     [searchParams],
   );
 
+type EncryptedRoomCachePanelProps = {
+  roomIds: string[];
+  onLoaded: () => void;
+};
+function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelProps) {
+  const mx = useMatrixClient();
+  const [loadingRooms, setLoadingRooms] = useState<Set<string>>(new Set());
+
+  const encryptedRooms = useMemo(
+    () =>
+      roomIds
+        .map((id) => mx.getRoom(id))
+        .filter(
+          (room): room is Room =>
+            !!room && !!room.currentState.getStateEvents(EventType.RoomEncryption, ''),
+        ),
+    [mx, roomIds],
+  );
+
+  const handleLoad = useCallback(
+    async (roomId: string) => {
+      const room = mx.getRoom(roomId);
+      if (!room) return;
+      setLoadingRooms((prev) => new Set([...prev, roomId]));
+      try {
+        await mx.paginateEventTimeline(room.getLiveTimeline(), {
+          backwards: true,
+          limit: 100,
+        });
+        onLoaded();
+      } catch {
+        // ignore — room may have no more history or be rate-limited
+      } finally {
+        setLoadingRooms((prev) => {
+          const next = new Set(prev);
+          next.delete(roomId);
+          return next;
+        });
+      }
+    },
+    [mx, onLoaded],
+  );
+
+  if (encryptedRooms.length === 0) return null;
+
+  return (
+    <Box direction="Column" gap="100">
+      {encryptedRooms.map((room) => {
+        const events = room.getLiveTimeline().getEvents();
+        const msgEvents = events.filter((e) => !e.isDecryptionFailure() && !e.isRedacted());
+        const oldest = msgEvents.length > 0 ? msgEvents[0] : null;
+        const canLoadMore = !!room.getLiveTimeline().getPaginationToken(EventTimeline.BACKWARDS);
+        const isLoading = loadingRooms.has(room.roomId);
+
+        return (
+          <Box
+            key={room.roomId}
+            alignItems="Center"
+            gap="200"
+            style={{
+              padding: config.space.S200,
+              background: 'var(--bg-surface-variant)',
+              borderRadius: config.radii.R300,
+            }}
+          >
+            <Icon size="100" src={Icons.Lock} style={{ flexShrink: 0, opacity: 0.6 }} />
+            <Box grow="Yes" direction="Column" style={{ minWidth: 0 }}>
+              <Text size="T300" truncate>
+                {room.name}
+              </Text>
+              <Text size="T200" style={{ opacity: 0.55 }}>
+                {msgEvents.length > 0
+                  ? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
+                  : 'No messages cached yet'}
+              </Text>
+            </Box>
+            {(canLoadMore || events.length === 0) && (
+              <Button
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                onClick={() => handleLoad(room.roomId)}
+                disabled={isLoading}
+                before={isLoading ? <Spinner size="100" variant="Secondary" /> : undefined}
+              >
+                <Text size="B300">{events.length === 0 ? 'Load messages' : 'Load more'}</Text>
+              </Button>
+            )}
+            {!canLoadMore && events.length > 0 && (
+              <Text size="T200" style={{ opacity: 0.5, flexShrink: 0 }}>
+                Fully cached
+              </Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
 type MessageSearchProps = {
   defaultRoomsFilterName: string;
   allowGlobal?: boolean;
@@ -98,17 +199,24 @@ export function MessageSearch({
   const searchMessages = useMessageSearch(msgSearchParams);
   const searchLocalMessages = useLocalMessageSearch();
 
+  // Bump this whenever more messages are loaded so localResult re-computes
+  const [cacheVersion, setCacheVersion] = useState(0);
+  const handleCacheLoaded = useCallback(() => setCacheVersion((v) => v + 1), []);
+
   // The rooms actually in scope for this search (mirrors server-side logic)
   const localSearchRooms = useMemo(
     () => msgSearchParams.rooms ?? (searchPathSearchParams.global === 'true' ? allRooms : rooms),
     [msgSearchParams.rooms, searchPathSearchParams.global, allRooms, rooms],
   );
 
-  // Run synchronous client-side search over encrypted rooms immediately
+  // Run synchronous client-side search over encrypted rooms immediately.
+  // cacheVersion in deps so it re-runs after "Load more" paginates new events.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const localResult = useMemo(() => {
     if (!msgSearchParams.term) return null;
     return searchLocalMessages(localSearchRooms, msgSearchParams.term);
-  }, [searchLocalMessages, localSearchRooms, msgSearchParams.term]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchLocalMessages, localSearchRooms, msgSearchParams.term, cacheVersion]);
 
   const { status, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
     enabled: !!msgSearchParams.term,
@@ -358,7 +466,7 @@ export function MessageSearch({
         </Box>
       )}
 
-      {localResult && localResult.groups.length > 0 && (
+      {localResult && localResult.encryptedRoomsCount > 0 && (
         <Box direction="Column" gap="300">
           <Box direction="Column" gap="200">
             <Box alignItems="Center" gap="200">
@@ -366,10 +474,13 @@ export function MessageSearch({
               <Text size="H5">Encrypted Rooms</Text>
             </Box>
             <Text size="T300" priority="300">
-              {`Showing locally cached messages from ${localResult.searchedRoomsCount} encrypted room${localResult.searchedRoomsCount !== 1 ? 's' : ''}. Only recently viewed messages are available.`}
+              {localResult.groups.length > 0
+                ? `Showing locally cached messages from ${localResult.searchedRoomsCount} encrypted room${localResult.searchedRoomsCount !== 1 ? 's' : ''}. Load more history below to extend coverage.`
+                : `No matches in your local cache. Load messages below to search further back.`}
             </Text>
             <Line size="300" variant="Surface" />
           </Box>
+          {localResult.groups.length > 0 && (
             <Box direction="Column" gap="300">
               {localResult.groups.map((group) => {
                 const groupRoom = mx.getRoom(group.roomId);
@@ -390,6 +501,8 @@ export function MessageSearch({
                 );
               })}
             </Box>
+          )}
+          <EncryptedRoomCachePanel roomIds={localSearchRooms} onLoaded={handleCacheLoaded} />
         </Box>
       )}