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 { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem } from 'folds';
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -19,6 +19,7 @@ import { useRooms } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
 import { MessageSearchParams, useMessageSearch } from './useMessageSearch';
+import { useLocalMessageSearch } from './useLocalMessageSearch';
 import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
@@ -36,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;
@@ -95,6 +197,26 @@ export function MessageSearch({
   }, [searchPathSearchParams, searchParamRooms, searchParamsSenders, rooms, senders]);
 
   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.
+  // 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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchLocalMessages, localSearchRooms, msgSearchParams.term, cacheVersion]);
 
   const { status, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
     enabled: !!msgSearchParams.term,
@@ -237,6 +359,7 @@ export function MessageSearch({
       )}
 
       {msgSearchParams.term && groups.length === 0 && status === 'success' && (
+        <Box direction="Column" gap="200">
           <Box
             className={ContainerColor({ variant: 'Warning' })}
             style={{ padding: config.space.S300, borderRadius: config.radii.R400 }}
@@ -248,6 +371,25 @@ export function MessageSearch({
               No results found for <b>{`"${msgSearchParams.term}"`}</b>
             </Text>
           </Box>
+          {localResult &&
+            localResult.encryptedRoomsCount > 0 &&
+            localResult.groups.length === 0 && (
+              <Box
+                className={ContainerColor({ variant: 'Surface' })}
+                style={{ padding: config.space.S300, borderRadius: config.radii.R400 }}
+                alignItems="Center"
+                gap="200"
+              >
+                <Icon size="200" src={Icons.Lock} />
+                <Text size="T300" priority="300">
+                  {`${localResult.encryptedRoomsCount} encrypted room${localResult.encryptedRoomsCount !== 1 ? 's' : ''} in scope — the server cannot search E2EE messages. `}
+                  {localResult.searchedRoomsCount > 0
+                    ? `No matches found in your locally cached messages from ${localResult.searchedRoomsCount} room${localResult.searchedRoomsCount !== 1 ? 's' : ''}.`
+                    : `Open those rooms to cache messages locally, then search again.`}
+                </Text>
+              </Box>
+            )}
+        </Box>
       )}
 
       {((msgSearchParams.term && status === 'pending') ||
@@ -259,6 +401,23 @@ export function MessageSearch({
         </Box>
       )}
 
+      {msgSearchParams.term &&
+        localResult &&
+        localResult.encryptedRoomsCount > 0 &&
+        vItems.length > 0 && (
+          <Box
+            className={ContainerColor({ variant: 'Surface' })}
+            style={{ padding: config.space.S300, borderRadius: config.radii.R400 }}
+            alignItems="Center"
+            gap="200"
+          >
+            <Icon size="200" src={Icons.Lock} />
+            <Text size="T300" priority="300">
+              {`${localResult.encryptedRoomsCount} encrypted room${localResult.encryptedRoomsCount !== 1 ? 's' : ''} in scope — server results are from unencrypted rooms only. Encrypted room results appear below from your local cache.`}
+            </Text>
+          </Box>
+        )}
+
       {vItems.length > 0 && (
         <Box direction="Column" gap="300">
           <Box direction="Column" gap="200">
@@ -307,6 +466,46 @@ export function MessageSearch({
         </Box>
       )}
 
+      {localResult && localResult.encryptedRoomsCount > 0 && (
+        <Box direction="Column" gap="300">
+          <Box direction="Column" gap="200">
+            <Box alignItems="Center" gap="200">
+              <Icon size="200" src={Icons.Lock} />
+              <Text size="H5">Encrypted Rooms</Text>
+            </Box>
+            <Text size="T300" priority="300">
+              {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);
+                if (!groupRoom) return null;
+                return (
+                  <SearchResultGroup
+                    key={group.roomId}
+                    room={groupRoom}
+                    highlights={[msgSearchParams.term ?? '']}
+                    items={group.items}
+                    mediaAutoLoad={mediaAutoLoad}
+                    urlPreview={urlPreview}
+                    onOpen={navigateRoom}
+                    legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                  />
+                );
+              })}
+            </Box>
+          )}
+          <EncryptedRoomCachePanel roomIds={localSearchRooms} onLoaded={handleCacheLoaded} />
+        </Box>
+      )}
+
       {error && (
         <Box
           className={ContainerColor({ variant: 'Critical' })}

src/app/features/message-search/useLocalMessageSearch.ts

@@ -0,0 +1,107 @@
+import { EventType } from 'matrix-js-sdk';
+import { useCallback } from 'react';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { ResultGroup, ResultItem } from './useMessageSearch';
+
+export type LocalSearchResult = {
+  groups: ResultGroup[];
+  /** How many rooms in scope are encrypted */
+  encryptedRoomsCount: number;
+  /** How many of those had locally cached events to scan */
+  searchedRoomsCount: number;
+};
+
+/**
+ * Client-side full-text search over locally cached events in encrypted rooms.
+ * The homeserver cannot search E2EE message content, so we scan whatever the
+ * client has already received and decrypted in memory.
+ *
+ * Limitation: only messages present in the live timeline window are covered.
+ * Rooms that haven't been opened yet will return no results.
+ */
+export const useLocalMessageSearch = () => {
+  const mx = useMatrixClient();
+
+  const search = useCallback(
+    (roomIds: string[], term: string): LocalSearchResult => {
+      const trimmedTerm = term.trim();
+      if (!trimmedTerm) {
+        return { groups: [], encryptedRoomsCount: 0, searchedRoomsCount: 0 };
+      }
+
+      const termLower = trimmedTerm.toLowerCase();
+      const groups: ResultGroup[] = [];
+      let encryptedRoomsCount = 0;
+      let searchedRoomsCount = 0;
+
+      for (const roomId of roomIds) {
+        const room = mx.getRoom(roomId);
+        if (!room) continue;
+
+        const isEncrypted = !!room.currentState.getStateEvents(EventType.RoomEncryption, '');
+        if (!isEncrypted) continue;
+
+        encryptedRoomsCount += 1;
+
+        const events = room.getLiveTimeline().getEvents();
+        if (events.length === 0) continue;
+
+        searchedRoomsCount += 1;
+
+        const items: ResultItem[] = [];
+
+        for (let i = 0; i < events.length; i += 1) {
+          const event = events[i];
+
+          if (event.getType() !== EventType.RoomMessage) continue;
+          if (event.isDecryptionFailure()) continue;
+          if (event.isRedacted()) continue;
+
+          // getContent() returns decrypted plaintext regardless of encryption
+          const content = event.getContent();
+          const body = (content.body as string | undefined) ?? '';
+          const formattedBody = (content.formatted_body as string | undefined) ?? '';
+
+          if (
+            !body.toLowerCase().includes(termLower) &&
+            !formattedBody.toLowerCase().includes(termLower)
+          )
+            continue;
+
+          // Build a synthetic IEventWithRoomId using decrypted content so the
+          // existing SearchResultGroup renderer works without modification.
+          const syntheticEvent = {
+            room_id: roomId,
+            event_id: event.getId() ?? '',
+            type: event.getType(),
+            sender: event.getSender() ?? '',
+            origin_server_ts: event.getTs(),
+            content,
+            unsigned: event.getUnsigned(),
+          };
+
+          items.push({
+            rank: 0,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            event: syntheticEvent as any,
+            context: {
+              events_before: [],
+              events_after: [],
+              profile_info: {},
+            },
+          });
+        }
+
+        if (items.length > 0) {
+          items.sort((a, b) => (b.event.origin_server_ts ?? 0) - (a.event.origin_server_ts ?? 0));
+          groups.push({ roomId, items });
+        }
+      }
+
+      return { groups, encryptedRoomsCount, searchedRoomsCount };
+    },
+    [mx],
+  );
+
+  return search;
+};

src/app/features/message-search/useMessageSearch.ts

@@ -80,7 +80,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
           highlights: [],
           groups: [],
         };
-      const limit = 20;
+      const limit = 50;
 
       const requestBody: ISearchRequestBody = {
         search_categories: {

src/app/hooks/usePresenceUpdater.ts

@@ -15,10 +15,8 @@ export function usePresenceUpdater() {
   const lastActivityRef = useRef(0);
 
   useEffect(() => {
-    const setOnline = () =>
-      mx.setPresence({ presence: 'online' }).catch(() => undefined);
-    const setUnavailable = () =>
-      mx.setPresence({ presence: 'unavailable' }).catch(() => undefined);
+    const setOnline = () => mx.setPresence({ presence: 'online' }).catch(() => undefined);
+    const setUnavailable = () => mx.setPresence({ presence: 'unavailable' }).catch(() => undefined);
 
     // When the user hides presence, broadcast offline and do nothing else.
     if (hidePresence) {