@rapidmx/web-client 0.4.0 → 0.5.0

package/dist/apps/www/index.js

@@ -14,7 +14,7 @@ import { parseSearchQuery } from "@rapidmx/react-shared/search/queryGrammar.js";
 import { normalizeServerScores } from "@rapidmx/react-shared/search/searchScoring.js";
 import { searchEncryptedCandidates } from "@rapidmx/react-shared/search/searchTier3.js";
 import { searchLocalIndex } from "../shared/search/searchTier2.js";
-import { getUnlockedKeys } from "@rapidmx/react-shared/crypto/keySession.js";
+import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import { evaluateMessageSecurity } from "@rapidmx/react-shared/crypto/messageSecurity.js";
 import { useMarkMessageRead, useMessageAttachments } from "@rapidmx/react-shared/mail/mailDetailHooks.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
@@ -123,8 +123,11 @@ function mergeSearchResults(tier1, tier2, tier3) {
  * (this inbox list only ever shows message rows; a real multi-entity-type results view is a separate,
  * larger UI project outside this pass). Shared by both the fresh-search orchestration and `loadMore()`
  * below, which each build this from the same `ParsedSearchQuery` differently only in `cursor`. */
-function tier1SearchParams(parsed, cursor) {
+function tier1SearchParams(parsed, cursor, mailboxUid) {
     return {
+        // The mailbox actually open - omitted, the server searches the caller's *own* mailbox, which is the
+        // wrong one whenever a shared mailbox's folder is being viewed.
+        mailboxUid,
         types: parsed.entityTypes ?? ["message"],
         cursor,
         limit: MESSAGE_PAGE_SIZE,
@@ -169,8 +172,12 @@ function capSkeletons(tier1Hits) {
  * extraction); a query whose true candidate set exceeds this simply pages out once this cache is
  * exhausted; `loadMore()` reflects that honestly via `hasMore`. */
 const TIER3_CANDIDATE_LIMIT = 200;
-function tier3CacheKey(mailboxUid, fingerprint, searchAllMail, unlocked) {
-    return `${mailboxUid}|${fingerprint}|${String(searchAllMail)}|${String(unlocked)}`;
+/** Keyed by the exact query windows Tier 3 actually ran (`tier3Windows()` - which already reflect the query,
+ * the "Search all mail" toggle, and Tier 2's coverage at the time), not just the query: the same query
+ * narrowed differently (a build finished, new mail moved the coverage end) must not reuse a result that was
+ * computed over a different date range. */
+function tier3CacheKey(mailboxUid, windows, unlocked) {
+    return `${mailboxUid}|${JSON.stringify(windows)}|${String(unlocked)}`;
 }
 /** A search query's cache/cursor identity - stable across re-parsing the identical raw text, and
  * distinct for anything else (§8's "a query fingerprint, so a cursor cannot be replayed against a
@@ -180,18 +187,44 @@ function tier3CacheKey(mailboxUid, fingerprint, searchAllMail, unlocked) {
 function queryFingerprint(parsed) {
     return JSON.stringify(parsed);
 }
-/** Tier 3's own `before` bound, tightened to Tier 2's already-covered window (`coverage.indexedFrom`)
- * unless the reader explicitly asked to "Search all mail" - Tier 2 already holds fully-decrypted,
- * current content for everything at least that recent, so re-fetching and re-decrypting the same range
- * through Tier 3's slower candidate-narrowing path would be pure waste. Never *widens* an existing
- * `before:` the query already specified. */
-function tightenBeforeToCoverage(parsed, coverage, searchAllMail) {
-    if (searchAllMail || !coverage?.indexedFrom) {
-        return parsed;
+/** The date windows Tier 3 still has to search: the query's own range minus Tier 2's guaranteed coverage
+ * `[coverage.indexedFrom, coverage.indexedUntil]`, unless the reader explicitly asked to "Search all mail".
+ * Tier 2 already holds fully-decrypted, current content for that range, so re-fetching and re-decrypting it
+ * through Tier 3's slower candidate-narrowing path would be pure waste. Yields up to two windows - older than
+ * the coverage (`before:` tightened to `indexedFrom`) and newer than it (`after:` raised to `indexedUntil`,
+ * since nothing indexes mail that arrived after the build pass started) - never *widening* a bound the query
+ * already specified, and none at all when the query lies entirely inside the coverage.
+ *
+ * Only narrows once Tier 2 reports a finished, complete build pass from this session: while it's still
+ * building (or a pass stopped early - a failed folder listing, the byte budget) `indexedFrom` is just the
+ * oldest row that happens to be present, not a guarantee every encrypted message since then is indexed, and
+ * narrowing on it would silently drop encrypted results neither tier returns. */
+function tier3Windows(parsed, coverage, searchAllMail) {
+    if (searchAllMail || !coverage?.indexedFrom || !coverage.indexedUntil || coverage.building || !coverage.complete) {
+        return [parsed];
+    }
+    const coveredFrom = new Date(coverage.indexedFrom);
+    const coveredUntil = new Date(coverage.indexedUntil);
+    const windows = [];
+    if (!parsed.after || parsed.after.getTime() < coveredFrom.getTime()) {
+        windows.push({ ...parsed, before: parsed.before && parsed.before.getTime() < coveredFrom.getTime() ? parsed.before : coveredFrom });
+    }
+    if (!parsed.before || parsed.before.getTime() > coveredUntil.getTime()) {
+        windows.push({ ...parsed, after: parsed.after && parsed.after.getTime() > coveredUntil.getTime() ? parsed.after : coveredUntil });
+    }
+    return windows;
+}
+/** Runs Tier 3 over each window and merges the candidates (a uid can't match in two disjoint windows, but a
+ * message whose date sits exactly on a boundary may come back from both). */
+async function searchTier3Windows(windows, unlocked, mailboxUid) {
+    const pages = await Promise.all(windows.map((window) => searchEncryptedCandidates(window, unlocked, TIER3_CANDIDATE_LIMIT, { mailboxUid })));
+    const merged = new Map();
+    for (const result of pages.flat()) {
+        if (!merged.has(result.entityUid)) {
+            merged.set(result.entityUid, result);
+        }
     }
-    const coverageBound = new Date(coverage.indexedFrom);
-    const effectiveBefore = parsed.before && parsed.before.getTime() < coverageBound.getTime() ? parsed.before : coverageBound;
-    return { ...parsed, before: effectiveBefore };
+    return [...merged.values()];
 }
 /** `undefined` for a missing, corrupted, or foreign-query cursor - every caller already treats "no
  * cursor" as "start this tier from the beginning," so there's no separate error path needed here. */
@@ -225,6 +258,37 @@ async function resolveHitsToMessages(hits, cache) {
     }
     return { messages, snippets };
 }
+/** How far outside the scroll container's visible area the load-more sentinel still counts as "in view". */
+const LOAD_MORE_ROOT_MARGIN_PX = 200;
+/** How many full pages in a row that added no new rows the list keeps loading on its own before it shows a
+ * "Load more" button instead. */
+const MAX_EMPTY_PAGE_CONTINUATIONS = 3;
+/** `true` when `more` has at least one uid `shown` doesn't - i.e. appending it actually adds rows. */
+function hasUnseenMessages(shown, more) {
+    const seen = new Set(shown.map((m) => m.uid));
+    return more.some((m) => !seen.has(m.uid));
+}
+/** The load-more sentinel's actual current geometry against its scroll container, with the same margin the
+ * IntersectionObserver uses. */
+function isWithinLoadMoreRange(sentinel, root) {
+    const rect = sentinel.getBoundingClientRect();
+    const rootRect = root.getBoundingClientRect();
+    return rect.top <= rootRect.bottom + LOAD_MORE_ROOT_MARGIN_PX && rect.bottom >= rootRect.top - LOAD_MORE_ROOT_MARGIN_PX;
+}
+/** Appends `more` to `shown`, skipping any uid already shown - a later page can repeat rows (Tier 1 and
+ * Tier 2/3 cursors advance independently, so the same message can come back from a different tier on a
+ * later page; a plain folder listing's pages shift when new mail arrives between fetches). */
+function appendUnseenMessages(shown, more) {
+    const seen = new Set(shown.map((m) => m.uid));
+    const unseen = [];
+    for (const message of more) {
+        if (!seen.has(message.uid)) {
+            seen.add(message.uid);
+            unseen.push(message);
+        }
+    }
+    return unseen.length === 0 ? shown : [...shown, ...unseen];
+}
 /** Flattens and sorts a per-mailbox fetch into one merged, newest-first list - the aggregate ("All
  * Inboxes" etc.) equivalent of `mergeSearchResults()` above, but simpler: an aggregated message has no
  * natural relevance score to normalize, so this only ever sorts by `receivedDate`. */
@@ -257,9 +321,9 @@ async function fetchAggregateMessages(mailboxFolders, type) {
     return mergeInboxMessages(perMailbox);
 }
 export default function InboxPage(props) {
-    return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, {}) }));
+    return (_jsx(MailShell, { ...props, children: _jsx(InboxContent, { userUid: props.userUid }) }));
 }
-function InboxContent() {
+function InboxContent({ userUid }) {
     const { folderUid, mailboxUid, mailboxes, mailboxFolders, aggregateFolderType } = useMailShell();
     const isMobile = useIsMobile();
     const { requestUnlock } = useUnlockPrompt();
@@ -281,8 +345,9 @@ function InboxContent() {
     // before Tier 2 has resolved yet for this search pass.
     const [coverage, setCoverage] = useState(undefined);
     // Keyed by message uid - see decryptEncryptedRows(). Never cleared on folder/search switches (a
-    // decrypted row stays decrypted for the rest of the session; re-decrypting on every navigation would
-    // waste work for no benefit), only ever added to.
+    // decrypted row stays decrypted while its keys stay unlocked; re-decrypting on every navigation would
+    // waste work for no benefit) - only cleared when the mailbox's keys are locked (see the
+    // `subscribeKeySession()` effect below).
     const [decryptedRows, setDecryptedRows] = useState({});
     // Bumped after a successful on-demand unlock to re-run the search effect below - it's not a
     // dependency the effect could otherwise react to (getUnlockedKeys() is a plain module-level read, not
@@ -301,21 +366,47 @@ function InboxContent() {
     const [tier3Done, setTier3Done] = useState(false);
     // Toggled by the "Search all mail" action next to the results count - removes Tier 3's own default
     // bound (tightened to Tier 2's coverage window otherwise - see tightenBeforeToCoverage()) for one
-    // re-run. Reset to false whenever the query itself changes (see the search effect's own dependency).
-    const [searchAllMail, setSearchAllMail] = useState(false);
+    // re-run. Stored as the mailbox/folder/query it was requested for, not a plain flag, so it resets the
+    // moment any of those change - derived in the same render, so the search effect never runs a new
+    // query with a previous query's unbounded Tier 3 window first.
+    const [searchAllMailKey, setSearchAllMailKey] = useState(null);
+    const searchAllMailScope = `${mailboxUid ?? ""}\n${folderUid ?? ""}\n${searchQuery}`;
+    const searchAllMail = searchAllMailKey === searchAllMailScope;
     // Search stays real-folder-only - Tier 1/2/3 are all deeply mailbox/folder-scoped, and extending them
     // to span an arbitrary number of mailboxes is out of scope for this pass (see the aggregate-fetch
     // branch below, which the search effect never reaches while `folderUid` is unset).
     const isSearching = viewMode === "date" && searchQuery.length > 0 && !aggregateFolderType;
-    const pageRef = useRef(0);
+    // How far into the folder's *current* server-side listing the rows fetched so far reach. Offset
+    // paging, not a cursor (`listMessages()` has none): a row removed locally (archived, scheduled send
+    // cancelled) also left the folder server-side, shifting every later message back by one - so each
+    // removal steps this back too, or the next page would silently skip a message. See `loadMore()`.
+    const listedOffsetRef = useRef(0);
     const scrollContainerRef = useRef(null);
-    const sentinelRef = useRef(null);
+    // State (via a callback ref), not a plain ref: the sentinel mounts and unmounts as the list loads,
+    // filters, and empties, and the observer effect below must re-attach to whichever node is current.
+    const [sentinel, setSentinel] = useState(null);
+    const [loadMoreError, setLoadMoreError] = useState(null);
+    const loadMoreErrorRef = useRef(null);
+    loadMoreErrorRef.current = loadMoreError;
+    const loadMoreInFlightRef = useRef(false);
+    // Bumped by `loadMore()` for each page that added at least one row - the only event the continuation
+    // effect below keeps loading after. A counter rather than watching `loadingMore` flip back to false: a
+    // fast response can settle before React ever renders the `true`, so that flip isn't reliably observable.
+    const [appendedPageCount, setAppendedPageCount] = useState(0);
+    // Consecutive full pages that added no new rows (every row was already shown - e.g. new mail shifted the
+    // folder's pages). Such a page still counts as progress for the continuation effect, up to
+    // `MAX_EMPTY_PAGE_CONTINUATIONS` in a row; past that, `loadMoreStalled` shows a "Load more" button
+    // instead, so a server that keeps repeating rows is never looped on.
+    const emptyPageStreakRef = useRef(0);
+    const [loadMoreStalled, setLoadMoreStalled] = useState(false);
+    const messagesRef = useRef(messages);
+    messagesRef.current = messages;
     // The mailbox unlock/decrypt call sites below treat as "the" mailbox when there's no single selected
     // one (aggregate mode) - mirrors `MailShell`'s own identical `defaultMailboxUid` fallback. An
     // aggregate-view row from a *different*, not-yet-unlocked mailbox stays locked until that mailbox's
     // own folder view is opened directly - an accepted limitation, not a bug (see `MailShell`'s own doc
     // comment on the same tradeoff for its `LocalIndexLifecycle`/`KeyEnrollmentGate` wiring).
-    const activeMailboxUid = mailboxUid ?? mailboxes.find((mb) => mb.ownerUserUid)?.uid ?? mailboxes[0]?.uid;
+    const activeMailboxUid = mailboxUid ?? mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const mailboxKeys = mailboxes.find((mb) => mb.uid === activeMailboxUid)?.keys ?? [];
     // Reset to a fresh Map at the start of every new search pass (see the search effect below) - see
     // resolveHitsToMessages()'s own doc comment on why this needs to persist *within* one pass but not
@@ -327,12 +418,15 @@ function InboxContent() {
     // of both the fresh-search orchestration and loadMore() itself. Not React state: it never drives a
     // render on its own, only what loadMore() does with it later.
     const compositeCursorRef = useRef(undefined);
-    // Guards every async stage of the search orchestration below against a stale, still-in-flight pass
-    // clobbering state for a newer one that started after it (the query changed again, or the folder
-    // did) - the same `loadSeq`-style monotonic-id pattern already used elsewhere in this codebase (e.g.
+    // Guards every async load below - each search stage, the plain folder/conversation/aggregate listings,
+    // and `loadMore()` - against a stale, still-in-flight pass clobbering state for a newer one that started
+    // after it (the query, folder, or view changed) - the same `loadSeq`-style monotonic-id pattern already used elsewhere in this codebase (e.g.
     // `settings/privacy/index.tsx`'s `ExportSection`), generalized here across three independently-timed
     // async stages instead of one.
     const searchRunIdRef = useRef(0);
+    // Bumped whenever `activeMailboxUid`'s keys are locked (see the `subscribeKeySession()` effect below) - a
+    // decrypt that started before the lock checks it before storing its now-stale plaintext rows.
+    const lockGenerationRef = useRef(0);
     // `messages` themselves aren't a dependency here on purpose - a message uid, once decrypted, is
     // never re-decrypted just because the list re-renders with the same rows (e.g. a folder-unrelated
     // state update elsewhere). New rows (a fresh page load, load-more, or a completed search) each
@@ -358,21 +452,45 @@ function InboxContent() {
             return;
         }
         let cancelled = false;
-        decryptEncryptedRows(messages.filter((m) => undecryptedEncryptedUids.includes(m.uid)), unlocked).then((decrypted) => {
-            if (!cancelled && Object.keys(decrypted).length > 0) {
+        const lockGeneration = lockGenerationRef.current;
+        void decryptEncryptedRows(messages.filter((m) => undecryptedEncryptedUids.includes(m.uid)), unlocked).then((decrypted) => {
+            // A lock while this was in flight already cleared `decryptedRows` - never put them back.
+            if (!cancelled && lockGeneration === lockGenerationRef.current && Object.keys(decrypted).length > 0) {
                 setDecryptedRows((prev) => ({ ...prev, ...decrypted }));
             }
         });
         return () => {
             cancelled = true;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages, unlockRefresh]);
+    // Locking a mailbox's keys (idle timeout, "Destroy keys on this device now", sign-out) must take its
+    // decrypted content off screen too, not just out of memory: decrypted subjects/previews, search
+    // snippets (Tier 2/3 snippets are decrypted content), and the already-decrypted Tier 3 candidates. A
+    // live search re-runs, so Tier 2/3 contribute nothing again until the user unlocks. Read through a ref
+    // so the subscription itself doesn't churn on every render.
+    const keyLockStateRef = useRef({ activeMailboxUid, isSearching });
+    keyLockStateRef.current = { activeMailboxUid, isSearching };
+    useEffect(() => subscribeKeySession(({ mailboxUid: changedMailboxUid, state }) => {
+        const current = keyLockStateRef.current;
+        if (state !== "locked" || changedMailboxUid !== current.activeMailboxUid) {
+            return;
+        }
+        lockGenerationRef.current += 1;
+        setDecryptedRows({});
+        setSnippets({});
+        tier3CacheRef.current.clear();
+        if (current.isSearching) {
+            setUnlockRefresh((n) => n + 1);
+        }
+    }), []);
     async function handleUnlockList() {
         try {
             const unlocked = await requestUnlock(activeMailboxUid, mailboxKeys);
+            const lockGeneration = lockGenerationRef.current;
             const decrypted = await decryptEncryptedRows(messages.filter((m) => m.subject === ENCRYPTED_SUBJECT_PLACEHOLDER && m.mailboxUid === activeMailboxUid), unlocked);
-            setDecryptedRows((prev) => ({ ...prev, ...decrypted }));
+            if (lockGeneration === lockGenerationRef.current) {
+                setDecryptedRows((prev) => ({ ...prev, ...decrypted }));
+            }
         }
         catch {
             // User dismissed the unlock dialog - rows stay exactly as they were.
@@ -388,19 +506,29 @@ function InboxContent() {
         }
     }
     // Labels are mailbox-wide, not folder-scoped - fetched once per mailbox rather than per message, and
-    // handed to every `MessageDetailPane` instance below. A failure here just means the Labels control
-    // stays hidden (an empty `labels` array) rather than blocking the rest of the inbox - it's a small
-    // enhancement, not critical path the way the message list itself is. Keyed on `activeMailboxUid`, which
-    // `MailShell` guarantees resolves (it never renders this component without at least one mailbox) even
-    // in aggregate mode, where there's no single selected `mailboxUid`.
+    // handed to the detail pane below. A failure here just means the Labels control stays hidden (an empty
+    // `labels` array) rather than blocking the rest of the inbox. Keyed on the *selected message's own*
+    // mailbox: aggregate views and search results can show messages from a mailbox other than
+    // `activeMailboxUid`, and offering that mailbox's labels would let a label from the wrong mailbox be
+    // applied. The conversation view stays scoped to `activeMailboxUid`, the mailbox its threads come from.
+    const selectedMessageMailboxUid = messages.find((m) => m.uid === selectedUid)?.mailboxUid;
+    const labelsMailboxUid = viewMode === "date" ? (selectedMessageMailboxUid ?? activeMailboxUid) : activeMailboxUid;
+    // `labelsMailboxUid` is always set: `MailShell` only renders this component once at least one mailbox
+    // exists, so `activeMailboxUid` (its fallback) always resolves.
     useEffect(() => {
-        if (!activeMailboxUid) {
-            return;
-        }
-        listLabels(activeMailboxUid, { limit: 200 })
-            .then(setLabels)
-            .catch(() => setLabels([]));
-    }, [activeMailboxUid]);
+        let cancelled = false;
+        setLabels([]);
+        listLabels(labelsMailboxUid, { limit: 200 })
+            .then((result) => {
+            if (!cancelled) {
+                setLabels(result);
+            }
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+        };
+    }, [labelsMailboxUid]);
     // Debounce the raw input into the query actually searched, so every keystroke doesn't fire a request.
     useEffect(() => {
         const handle = setTimeout(() => setSearchQuery(searchInput.trim()), SEARCH_DEBOUNCE_MS);
@@ -413,42 +541,63 @@ function InboxContent() {
         setSelectedUid(null);
         setSelectedConversationId(null);
         setClassificationFilter("all");
-        pageRef.current = 0;
+        listedOffsetRef.current = 0;
         compositeCursorRef.current = undefined;
         setHasMore(false);
+        setLoadMoreError(null);
+        setLoadMoreStalled(false);
+        emptyPageStreakRef.current = 0;
+        // Every run - search or not - supersedes whatever an earlier run (or a `loadMore()` it started)
+        // still has in flight; each async callback below checks this before touching state.
+        searchRunIdRef.current += 1;
+        const myRunId = searchRunIdRef.current;
+        const isCurrentRun = () => searchRunIdRef.current === myRunId;
+        // Also invalidates on unmount, so nothing lands after the component is gone. Unconditional: this
+        // cleanup only ever runs for the latest run of this effect (React runs it before the next run
+        // bumps the id, or on unmount), so the id is always still `myRunId` here.
+        const invalidate = () => {
+            searchRunIdRef.current += 1;
+        };
         if (viewMode === "conversation") {
             // Conversations stay single-mailbox (not aggregated across mailboxes in this pass) - in
-            // aggregate mode this falls back to `activeMailboxUid`, the same mailbox unlock/labels use.
-            if (!activeMailboxUid) {
-                return;
-            }
+            // aggregate mode this falls back to `activeMailboxUid`, the same mailbox unlock/labels use
+            // (always set - `MailShell` only renders this component once at least one mailbox exists).
             setLoading(true);
             setError(null);
             listConversations(activeMailboxUid)
-                .then(setConversations)
-                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load conversations."))
-                .finally(() => setLoading(false));
-            return;
+                .then((result) => {
+                if (isCurrentRun()) {
+                    setConversations(result);
+                }
+            })
+                .catch((err) => {
+                if (isCurrentRun()) {
+                    setError(err instanceof ApiRequestError ? err.message : "Could not load conversations.");
+                }
+            })
+                .finally(() => {
+                if (isCurrentRun()) {
+                    setLoading(false);
+                }
+            });
+            return invalidate;
         }
         if (aggregateFolderType) {
             setLoading(true);
             setError(null);
-            let cancelled = false;
             // hasMore stays false (set above) - see fetchAggregateMessages()'s own pagination scope trim.
-            fetchAggregateMessages(mailboxFolders, aggregateFolderType)
+            void fetchAggregateMessages(mailboxFolders, aggregateFolderType)
                 .then((results) => {
-                if (!cancelled) {
+                if (isCurrentRun()) {
                     setMessages(results);
                 }
             })
                 .finally(() => {
-                if (!cancelled) {
+                if (isCurrentRun()) {
                     setLoading(false);
                 }
             });
-            return () => {
-                cancelled = true;
-            };
+            return invalidate;
         }
         if (!folderUid) {
             setMessages([]);
@@ -464,8 +613,6 @@ function InboxContent() {
             setTier2Done(false);
             setTier3Done(false);
             resolvedMessageCacheRef.current = new Map();
-            searchRunIdRef.current += 1;
-            const myRunId = searchRunIdRef.current;
             const parsed = parseSearchQuery(searchQuery);
             const unlocked = getUnlockedKeys(mailboxUid);
             const fingerprint = queryFingerprint(parsed);
@@ -501,7 +648,7 @@ function InboxContent() {
             void (async () => {
                 try {
                     const [tier1Page, tier2Page] = await Promise.all([
-                        searchMailbox(parsed.text, tier1SearchParams(parsed, undefined)),
+                        searchMailbox(parsed.text, tier1SearchParams(parsed, undefined, mailboxUid)),
                         searchLocalIndex(mailboxUid, parsed, unlocked, MESSAGE_PAGE_SIZE, 0),
                     ]);
                     if (searchRunIdRef.current !== myRunId) {
@@ -512,11 +659,11 @@ function InboxContent() {
                     setCoverage(tier2Page.coverage);
                     setLoading(false);
                     await reveal(tier1Page.results, tier2Page.results, [], false);
-                    const tightened = tightenBeforeToCoverage(parsed, tier2Page.coverage, searchAllMail);
-                    const cacheKey = tier3CacheKey(mailboxUid, fingerprint, searchAllMail, !!unlocked);
+                    const windows = tier3Windows(parsed, tier2Page.coverage, searchAllMail);
+                    const cacheKey = tier3CacheKey(mailboxUid, windows, !!unlocked);
                     let tier3Full = tier3CacheRef.current.get(cacheKey);
                     if (!tier3Full) {
-                        tier3Full = await searchEncryptedCandidates(tightened, unlocked, TIER3_CANDIDATE_LIMIT);
+                        tier3Full = await searchTier3Windows(windows, unlocked, mailboxUid);
                         if (searchRunIdRef.current !== myRunId) {
                             return;
                         }
@@ -528,6 +675,7 @@ function InboxContent() {
                         tier1Cursor: tier1Page.nextCursor,
                         tier2Offset: tier2Page.results.length,
                         tier3Offset: tier3Page.length,
+                        tier3Key: cacheKey,
                         fingerprint,
                     };
                     setHasMore(!!tier1Page.nextCursor || tier2Page.hasMore || tier3Page.length < tier3Full.length);
@@ -540,15 +688,27 @@ function InboxContent() {
                     }
                 }
             })();
-            return;
+            return invalidate;
         }
         listMessages(folderUid, { limit: MESSAGE_PAGE_SIZE })
             .then((results) => {
-            setMessages(results);
-            setHasMore(results.length === MESSAGE_PAGE_SIZE);
+            if (isCurrentRun()) {
+                setMessages(results);
+                listedOffsetRef.current = results.length;
+                setHasMore(results.length === MESSAGE_PAGE_SIZE);
+            }
+        })
+            .catch((err) => {
+            if (isCurrentRun()) {
+                setError(err instanceof ApiRequestError ? err.message : "Could not load messages.");
+            }
         })
-            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load messages."))
-            .finally(() => setLoading(false));
+            .finally(() => {
+            if (isCurrentRun()) {
+                setLoading(false);
+            }
+        });
+        return invalidate;
         // `unlockRefresh`/`searchAllMail` are dependencies solely so `handleUnlockSearch()`/"Search all
         // mail" can force this effect to re-run the search above - Tier 3 (encrypted) results silently
         // contribute nothing without unlocked keys, so this is what actually makes them appear once the
@@ -557,26 +717,61 @@ function InboxContent() {
         // re-fetches the same page.
     }, [viewMode, folderUid, mailboxUid, isSearching, searchQuery, unlockRefresh, searchAllMail, aggregateFolderType, mailboxFolders, activeMailboxUid]);
     function handleSearchAllMail() {
-        setSearchAllMail(true);
+        setSearchAllMailKey(searchAllMailScope);
     }
     const loadMore = useCallback(async () => {
-        if (loadingMore || !hasMore || loading || viewMode !== "date" || !folderUid) {
+        const parsed = parseSearchQuery(searchQuery);
+        const fingerprint = queryFingerprint(parsed);
+        // While searching, a load-more continues from this query's own cursor - absent until its first page
+        // has fully finished (the ref may still hold an earlier query's), in which case there's nowhere to
+        // continue from yet.
+        const searchCursor = decodeCursor(compositeCursorRef.current, fingerprint);
+        if (loadMoreInFlightRef.current ||
+            !hasMore ||
+            loading ||
+            viewMode !== "date" ||
+            !folderUid ||
+            (isSearching && !searchCursor)) {
             return;
         }
+        // A ref, not `loadingMore` state: the observer and the continuation effect below can both call in the
+        // same tick, each closing over a render where `loadingMore` was still false.
+        loadMoreInFlightRef.current = true;
+        setLoadMoreError(null);
+        setLoadMoreStalled(false);
         setLoadingMore(true);
+        /** Records whether a landed page added rows, and whether the continuation effect should keep going. */
+        const notePageLanded = (addedRows, moreRemain) => {
+            if (addedRows) {
+                emptyPageStreakRef.current = 0;
+                setAppendedPageCount((n) => n + 1);
+            }
+            else if (moreRemain) {
+                emptyPageStreakRef.current += 1;
+                if (emptyPageStreakRef.current <= MAX_EMPTY_PAGE_CONTINUATIONS) {
+                    setAppendedPageCount((n) => n + 1);
+                }
+                else {
+                    emptyPageStreakRef.current = 0;
+                    setLoadMoreStalled(true);
+                }
+            }
+        };
+        // A query/folder/view change while this page is in flight bumps the run id (see the effect above) -
+        // its rows then belong to a list that's no longer on screen and must not be appended to the new one.
+        const myRunId = searchRunIdRef.current;
+        const isCurrentRun = () => searchRunIdRef.current === myRunId;
         try {
             if (isSearching) {
-                const parsed = parseSearchQuery(searchQuery);
                 const unlocked = getUnlockedKeys(mailboxUid);
-                const fingerprint = queryFingerprint(parsed);
-                const cursor = decodeCursor(compositeCursorRef.current, fingerprint);
+                const cursor = searchCursor;
                 const [tier1Page, tier2Page] = await Promise.all([
-                    searchMailbox(parsed.text, tier1SearchParams(parsed, cursor?.tier1Cursor)),
-                    searchLocalIndex(mailboxUid, parsed, unlocked, MESSAGE_PAGE_SIZE, cursor?.tier2Offset ?? 0),
+                    searchMailbox(parsed.text, tier1SearchParams(parsed, cursor.tier1Cursor, mailboxUid)),
+                    searchLocalIndex(mailboxUid, parsed, unlocked, MESSAGE_PAGE_SIZE, cursor.tier2Offset),
                 ]);
-                const cacheKey = tier3CacheKey(mailboxUid, fingerprint, searchAllMail, !!unlocked);
-                const tier3Full = tier3CacheRef.current.get(cacheKey) ?? [];
-                const tier3Offset = cursor?.tier3Offset ?? 0;
+                // The first page cached this pass under `tier3Key` before it created the cursor.
+                const tier3Full = tier3CacheRef.current.get(cursor.tier3Key);
+                const tier3Offset = cursor.tier3Offset;
                 const tier3Page = tier3Full.slice(tier3Offset, tier3Offset + MESSAGE_PAGE_SIZE);
                 // Unlike the fresh-search pass above, a load-more page is resolved and appended in one
                 // shot rather than progressively revealed - rows already on screen shouldn't reorder or
@@ -586,53 +781,90 @@ function InboxContent() {
                 // - a deliberate, documented scope trim of progressive reveal to the first page only.
                 const merged = mergeSearchResults(capSkeletons(tier1Page.results), tier2Page.results, tier3Page);
                 const { messages: more, snippets: moreSnippets } = await resolveHitsToMessages(merged, resolvedMessageCacheRef.current);
-                setMessages((prev) => [...prev, ...more]);
+                if (!isCurrentRun()) {
+                    return;
+                }
+                const addedRows = hasUnseenMessages(messagesRef.current, more);
+                setMessages((prev) => appendUnseenMessages(prev, more));
                 setSnippets((prev) => ({ ...prev, ...moreSnippets }));
                 const nextTier3Offset = tier3Offset + tier3Page.length;
                 compositeCursorRef.current = {
                     tier1Cursor: tier1Page.nextCursor,
-                    tier2Offset: (cursor?.tier2Offset ?? 0) + tier2Page.results.length,
+                    tier2Offset: cursor.tier2Offset + tier2Page.results.length,
                     tier3Offset: nextTier3Offset,
+                    tier3Key: cursor.tier3Key,
                     fingerprint,
                 };
-                setHasMore(!!tier1Page.nextCursor || tier2Page.hasMore || nextTier3Offset < tier3Full.length);
+                const moreRemain = !!tier1Page.nextCursor || tier2Page.hasMore || nextTier3Offset < tier3Full.length;
+                setHasMore(moreRemain);
+                notePageLanded(addedRows, moreRemain);
             }
             else {
-                const nextPage = pageRef.current + 1;
-                const more = await listMessages(folderUid, { page: nextPage, limit: MESSAGE_PAGE_SIZE });
-                setMessages((prev) => [...prev, ...more]);
+                // The page containing the first message not fetched yet. After a local removal that offset is
+                // no longer a page boundary, so this page overlaps rows already shown - `appendUnseenMessages()`
+                // drops those - rather than skipping the message that shifted back across the boundary.
+                const page = Math.floor(listedOffsetRef.current / MESSAGE_PAGE_SIZE);
+                const more = await listMessages(folderUid, { page, limit: MESSAGE_PAGE_SIZE });
+                if (!isCurrentRun()) {
+                    return;
+                }
+                const addedRows = hasUnseenMessages(messagesRef.current, more);
+                setMessages((prev) => appendUnseenMessages(prev, more));
                 setHasMore(more.length === MESSAGE_PAGE_SIZE);
-                pageRef.current = nextPage;
+                listedOffsetRef.current = page * MESSAGE_PAGE_SIZE + more.length;
+                notePageLanded(addedRows, more.length === MESSAGE_PAGE_SIZE);
             }
         }
         catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not load more messages.");
+            // Shown next to the sentinel with a Retry button - never auto-retried (see the continuation
+            // effect below), so a failing server isn't hammered while the sentinel stays in view.
+            if (isCurrentRun()) {
+                setLoadMoreError(err instanceof ApiRequestError ? err.message : "Could not load more messages.");
+            }
         }
         finally {
+            loadMoreInFlightRef.current = false;
             setLoadingMore(false);
         }
-    }, [loadingMore, hasMore, loading, viewMode, folderUid, isSearching, searchQuery, searchAllMail, mailboxUid]);
+    }, [hasMore, loading, viewMode, folderUid, isSearching, searchQuery, mailboxUid]);
     // Always calls the latest `loadMore` closure so the effect below doesn't need `loadMore` itself in its
     // dependency array (it changes on every keystroke/page load, which would otherwise mean nothing here).
     const loadMoreRef = useRef(loadMore);
     loadMoreRef.current = loadMore;
-    // `hasMore` is deliberately a dependency: the sentinel div only renders while `hasMore` is true (see
-    // the JSX below), so this effect must re-run when it flips - otherwise a run that fires before the
-    // first page of results has loaded (sentinel not in the DOM yet, `sentinelRef.current` still null)
-    // would bail out once and never attach an observer to the sentinel that appears moments later.
+    // Keyed on the sentinel node itself (see `sentinel`'s own comment): it unmounts whenever the list shows
+    // "Loading..." and remounts afterwards, so an observer attached once to an earlier node would watch a
+    // detached element forever. Only ever rendered in "By date" mode, so no view-mode check is needed.
     useEffect(() => {
-        const sentinel = sentinelRef.current;
-        if (!sentinel || viewMode !== "date") {
+        if (!sentinel) {
             return;
         }
         const observer = new IntersectionObserver((entries) => {
-            if (entries[0]?.isIntersecting) {
+            if (entries.some((entry) => entry.isIntersecting) && !loadMoreErrorRef.current) {
                 void loadMoreRef.current();
             }
-        }, { root: scrollContainerRef.current, rootMargin: "200px" });
+        }, { root: scrollContainerRef.current, rootMargin: `${LOAD_MORE_ROOT_MARGIN_PX}px` });
         observer.observe(sentinel);
         return () => observer.disconnect();
-    }, [viewMode, folderUid, isSearching, searchQuery, hasMore]);
+    }, [sentinel]);
+    // An observer only reports *changes* - a sentinel still in view after a page lands (the new rows didn't
+    // push it out of view, e.g. the Focused/Other filter hid every one of them) never reports again, so
+    // keep loading while it's still in view. Only after a page that appended rows, or a full page of rows
+    // already shown (bounded - see `emptyPageStreakRef`), never after a failure, and only when the sentinel's
+    // real geometry says it's still in view (the observer's last report may predate the rows that just landed).
+    useEffect(() => {
+        if (appendedPageCount === 0) {
+            return;
+        }
+        // The scroll container is always mounted whenever a sentinel is (the sentinel lives inside it).
+        if (sentinel && isWithinLoadMoreRange(sentinel, scrollContainerRef.current)) {
+            void loadMoreRef.current();
+        }
+    }, [appendedPageCount]);
+    function removeListedMessage(uid) {
+        setMessages((prev) => prev.filter((m) => m.uid !== uid));
+        listedOffsetRef.current = Math.max(0, listedOffsetRef.current - 1);
+        setSelectedUid(null);
+    }
     const selected = messages.find((m) => m.uid === selectedUid) ?? null;
     const selectedConversation = conversations.find((c) => c.conversationId === selectedConversationId) ?? null;
     const attachments = useMessageAttachments(selected);
@@ -659,6 +891,7 @@ function InboxContent() {
             ? m.inferenceClassification === "other"
             : m.inferenceClassification !== "other")
         : messages;
+    const loadMoreStatus = loadingMore ? ("Loading more…") : loadMoreError ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { role: "alert", className: "text-danger", children: loadMoreError }), _jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Retry" })] })) : loadMoreStalled ? (_jsx("button", { type: "button", onClick: () => void loadMoreRef.current(), className: "text-primary-dark hover:underline font-medium", children: "Load more" })) : null;
     function handleSelect(message) {
         if (isMobile) {
             window.location.href = `/messages/${encodeURIComponent(message.uid)}`;
@@ -702,11 +935,11 @@ function InboxContent() {
                                     ? `${visibleMessages.length} result${visibleMessages.length === 1 ? "" : "s"}`
                                     : `${visibleMessages.length} of ??` }), tier2Done && !searchAllMail && (_jsx("button", { type: "button", onClick: handleSearchAllMail, className: "text-primary-dark hover:underline font-medium shrink-0", children: "Search all mail" }))] })), isSearching && coverage?.indexedFrom && (_jsxs("div", { className: "px-4 py-1.5 text-xs text-text-muted border-b border-border", children: ["Local search covers messages back to ", new Date(coverage.indexedFrom).toLocaleDateString(), coverage.building ? " (still building)" : "", searchAllMail
                                 ? " - searching everything, not just recent mail."
-                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && viewMode === "date" && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : viewMode === "conversation" ? (_jsx(ConversationList, { conversations: conversations, selectedId: selectedConversationId, onSelect: handleSelectConversation })) : visibleMessages.length === 0 ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
-                            ? `No messages match "${searchQuery}".`
-                            : classificationFilter === "all"
-                                ? "No messages in this folder."
-                                : "No messages here." })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: visibleMessages.map((message) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
+                                : " - older encrypted mail is still searched, just slower."] })), isSearching && !getUnlockedKeys(mailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockSearch, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to include encrypted messages in these results"] }) })), !isSearching && viewMode === "date" && undecryptedEncryptedUids.length > 0 && !getUnlockedKeys(activeMailboxUid) && (_jsx("div", { className: "px-4 py-2 border-b border-border bg-surface-alt", children: _jsxs("button", { type: "button", onClick: handleUnlockList, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to show ", undecryptedEncryptedUids.length === 1 ? "an encrypted message's" : "encrypted messages'", " subject"] }) })), error && (_jsx("div", { className: "p-4", children: _jsx(Alert, { children: error }) })), loading ? (_jsx("p", { className: "p-4 text-sm text-text-muted", children: "Loading\u2026" })) : viewMode === "conversation" ? (_jsx(ConversationList, { conversations: conversations, selectedId: selectedConversationId, onSelect: handleSelectConversation })) : visibleMessages.length === 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "p-4 text-sm text-text-muted", children: isSearching
+                                    ? `No messages match "${searchQuery}".`
+                                    : classificationFilter === "all"
+                                        ? "No messages in this folder."
+                                        : "No messages here." }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus }))] })) : (_jsxs(_Fragment, { children: [_jsx("ul", { children: visibleMessages.map((message) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleSelect(message), className: [
                                             "w-full text-left px-4 py-3 border-b border-border",
                                             message.uid === selectedUid ? "bg-primary/10" : "hover:bg-surface-alt",
                                             message.flags.read ? "" : "font-semibold",
@@ -714,17 +947,15 @@ function InboxContent() {
                                                             (message.subject === ENCRYPTED_SUBJECT_PLACEHOLDER
                                                                 ? "Encrypted message"
                                                                 : message.subject) ||
-                                                            "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview })] }))] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: sentinelRef, className: "p-4 text-center text-xs text-text-muted", children: loadingMore ? "Loading more…" : "" })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [], labels: labels })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
+                                                            "(no subject)" }), _jsx("div", { className: "text-xs text-text-muted truncate font-normal", children: snippets[message.uid] || decryptedRows[message.uid]?.preview || message.bodyPreview })] }))] }) }, message.uid))) }), hasMore && (_jsx("div", { ref: setSentinel, "data-testid": "load-more-sentinel", className: "p-4 text-center text-xs text-text-muted", children: loadMoreStatus })), aggregateFolderType && (_jsx("p", { className: "p-4 text-center text-xs text-text-muted", children: "Showing the most recent mail from each mailbox. Open a specific mailbox\u2019s folder to see older mail." }))] }))] }), _jsx("div", { className: "hidden md:flex flex-1 min-w-0", children: viewMode === "conversation" ? (_jsx(ConversationThreadPane, { conversation: selectedConversation, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [], labels: labels })) : (_jsx(MessageDetailPane, { message: selected, attachments: attachments, isSentItems: isSentItems, onRecalled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), isOutbox: isOutbox, isInbox: isInbox, onClassified: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), onReceiptHandled: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))), draftsFolderUid: draftsFolderUid, onScheduledSendCanceled: (updated) => {
                         // The message moved out of the currently-viewed Outbox folder (into Drafts)
                         // — unlike a recall, which patches a message in place, this removes it from
                         // the list entirely, matching what a real folder switch would show.
-                        setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
-                        setSelectedUid(null);
+                        removeListedMessage(updated.uid);
                     }, onArchived: (updated) => {
                         // Same reasoning as onScheduledSendCanceled above — the message moved out of
                         // whichever folder is currently being viewed (into Archive), so it's removed
                         // from the list rather than patched in place.
-                        setMessages((prev) => prev.filter((m) => m.uid !== updated.uid));
-                        setSelectedUid(null);
+                        removeListedMessage(updated.uid);
                     }, labels: labels, onLabelsChanged: (updated) => setMessages((prev) => prev.map((m) => (m.uid === updated.uid ? updated : m))) })) })] }));
 }