@remit/web-client 0.0.32 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/better-auth-config.ts

@@ -29,12 +29,78 @@ export const authClient = createAuthClient();
 
 const EXPIRY_SKEW_SECONDS = 60;
 
+// How long to stop reaching for the token endpoint after a mint is throttled.
+// A near-expiry token is still usable for `EXPIRY_SKEW_SECONDS`, so backing off
+// keeps a throttled window from turning every request into another mint attempt
+// against an endpoint that already said no.
+const REFRESH_BACKOFF_SECONDS = 30;
+
+// Survives page reloads and in-tab navigations so a fresh page load reuses the
+// session's token instead of minting a new one. Cleared on sign-out. Scoped to
+// the tab, not the origin: the token is short-lived and the httpOnly session
+// cookie remains the real credential.
+const STORAGE_KEY = "remit.better-auth.token";
+
 interface CachedToken {
 	value: string;
 	expiresAt: number;
 }
 
+const tokenStore = (): Storage | null => {
+	try {
+		return globalThis.sessionStorage ?? null;
+	} catch {
+		return null;
+	}
+};
+
+const readStore = (): CachedToken | null => {
+	const raw = tokenStore()?.getItem(STORAGE_KEY);
+	if (!raw) return null;
+	try {
+		const parsed: unknown = JSON.parse(raw);
+		if (
+			parsed &&
+			typeof parsed === "object" &&
+			typeof (parsed as CachedToken).value === "string" &&
+			typeof (parsed as CachedToken).expiresAt === "number"
+		) {
+			return {
+				value: (parsed as CachedToken).value,
+				expiresAt: (parsed as CachedToken).expiresAt,
+			};
+		}
+	} catch {
+		// A corrupt entry is treated as no token.
+	}
+	return null;
+};
+
+const writeStore = (token: CachedToken | null): void => {
+	const store = tokenStore();
+	if (!store) return;
+	try {
+		if (!token) {
+			store.removeItem(STORAGE_KEY);
+			return;
+		}
+		store.setItem(STORAGE_KEY, JSON.stringify(token));
+	} catch {
+		// Storage being unavailable (private mode, quota) is not fatal: the
+		// in-memory cache still serves the current page.
+	}
+};
+
 let cached: CachedToken | null = null;
+let backoffUntil = 0;
+
+// Hydrate the in-memory cache from storage on first read of a page load, so a
+// token minted before a reload is reused rather than re-minted.
+const currentCache = (): CachedToken | null => {
+	if (cached) return cached;
+	cached = readStore();
+	return cached;
+};
 
 const nowSeconds = (): number => Math.floor(Date.now() / 1000);
 
@@ -103,6 +169,8 @@ const mint = (): Promise<string> => {
 	inFlight = requestToken()
 		.then((token) => {
 			cached = { value: token, expiresAt: decodeExp(token) };
+			writeStore(cached);
+			backoffUntil = 0;
 			return token;
 		})
 		.finally(() => {
@@ -111,23 +179,49 @@ const mint = (): Promise<string> => {
 	return inFlight;
 };
 
+const isFresh = (token: CachedToken): boolean =>
+	token.expiresAt - EXPIRY_SKEW_SECONDS > nowSeconds();
+
+const isUsable = (token: CachedToken): boolean =>
+	token.expiresAt > nowSeconds();
+
 /**
  * Return a valid RS256 JWT for the current session, minting a fresh one only
  * when the cached token is missing or within the skew window of expiry. The API
  * interceptor attaches it as a Bearer token; the backend verifies it against the
  * JWKS.
  *
- * Never resolves to null: a failed mint throws. Returning null would put the
- * request on the wire without an Authorization header, and the backend answers
- * that with a 401 that names a missing token rather than the mint that failed.
+ * A throttled or failed refresh never discards a token that is still usable: the
+ * request keeps the session it already holds and the endpoint is left alone
+ * until the backoff clears. Only a mint with nothing usable to fall back to
+ * throws — returning null would put the request on the wire without an
+ * Authorization header, and the backend answers that with a 401 that names a
+ * missing token rather than the mint that failed.
  */
 export const fetchBetterAuthToken = async (): Promise<string> => {
-	if (cached && cached.expiresAt - EXPIRY_SKEW_SECONDS > nowSeconds()) {
-		return cached.value;
+	const current = currentCache();
+
+	if (current && isFresh(current)) {
+		return current.value;
+	}
+
+	if (current && isUsable(current) && nowSeconds() < backoffUntil) {
+		return current.value;
+	}
+
+	try {
+		return await mint();
+	} catch (error) {
+		if (current && isUsable(current)) {
+			backoffUntil = nowSeconds() + REFRESH_BACKOFF_SECONDS;
+			return current.value;
+		}
+		throw error;
 	}
-	return mint();
 };
 
 export const resetBetterAuthTokenCache = (): void => {
+	backoffUntil = 0;
+	writeStore(null);
 	cached = null;
 };

package/src/auth/better-auth-token.test.ts

@@ -13,12 +13,21 @@ const base64url = (value: string): string =>
 		.replace(/\//g, "_")
 		.replace(/=+$/, "");
 
-/** A token shaped like the one better-auth mints, valid for an hour. */
-const jwt = (label: string): string =>
+/** A token shaped like the one better-auth mints, expiring after `ttl` seconds. */
+const jwtExpiringIn = (label: string, ttl: number): string =>
 	`header.${base64url(
-		JSON.stringify({ exp: Math.floor(Date.now() / 1000) + 3600, label }),
+		JSON.stringify({ exp: Math.floor(Date.now() / 1000) + ttl, label }),
 	)}.signature`;
 
+/** A token shaped like the one better-auth mints, valid for an hour. */
+const jwt = (label: string): string => jwtExpiringIn(label, 3600);
+
+/**
+ * A token past its comfortable-refresh window but not yet expired: `getToken`
+ * treats it as needing a refresh while still holding it as a usable fallback.
+ */
+const nearExpiryJwt = (label: string): string => jwtExpiringIn(label, 30);
+
 const realFetch = globalThis.fetch;
 
 interface Stub {
@@ -149,4 +158,64 @@ describe("fetchBetterAuthToken", () => {
 			/could not be completed|Failed to fetch/i,
 		);
 	});
+
+	test("a throttled refresh keeps the still-valid token instead of discarding it", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("still-valid")),
+		);
+		seed.release();
+		const held = await fetchBetterAuthToken();
+
+		const throttled = stubTokenEndpoint(
+			() => new Response("", { status: 429, statusText: "Too Many Requests" }),
+		);
+		throttled.release();
+		const afterThrottle = await fetchBetterAuthToken();
+
+		assert.equal(throttled.calls, 1);
+		assert.equal(afterThrottle, held);
+	});
+
+	test("after a throttled refresh it backs off rather than hammering the endpoint", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("still-valid")),
+		);
+		seed.release();
+		const held = await fetchBetterAuthToken();
+
+		const throttled = stubTokenEndpoint(
+			() => new Response("", { status: 429, statusText: "Too Many Requests" }),
+		);
+		throttled.release();
+		await fetchBetterAuthToken();
+
+		const first = await fetchBetterAuthToken();
+		const second = await fetchBetterAuthToken();
+
+		assert.equal(throttled.calls, 1);
+		assert.equal(first, held);
+		assert.equal(second, held);
+	});
+
+	test("a throttled refresh with no usable token to fall back on still throws", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(jwtExpiringIn("already-expired", -10)),
+		);
+		seed.release();
+		await fetchBetterAuthToken();
+
+		const throttled = stubTokenEndpoint(
+			() => new Response("", { status: 429, statusText: "Too Many Requests" }),
+		);
+		throttled.release();
+
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 429);
+				return true;
+			},
+		);
+	});
 });

package/src/hooks/useDeleteMessages.ts

@@ -2,15 +2,21 @@ import {
 	mailboxOperationsListMailboxesQueryKey,
 	messageBulkOperationsDeleteMessagesMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
-import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
+import {
+	cancelThreadListQueries,
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	type ThreadListSnapshotEntry,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 interface UseDeleteMessagesOptions {
 	mailboxId: string;
@@ -29,13 +35,6 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-/**
- * Either shape a thread list/search query caches — the infinite mailbox list
- * or a single-shot page. `setQueriesData` matches by key prefix, so the
- * optimistic updater sees both.
- */
-type ThreadsListData = ThreadListCache;
-
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
 	data: T;
@@ -43,10 +42,9 @@ interface SnapshotEntry<T> {
 
 interface DeleteContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
+	listPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
-	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+	previousThreadsList: ThreadListSnapshotEntry[];
 }
 
 /**
@@ -94,17 +92,14 @@ export const useDeleteMessages = ({
 						path: { threadId },
 					})
 				: [];
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
-			});
+			// The browsed mailbox's lists plus the unified cross-account listing
+			// that backs the daily brief — deleting from the brief has to remove the
+			// row there too, not only from the per-mailbox lists (#140, part of #149).
+			const listPrefixes = threadListCacheKeys([mailboxId]);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				cancelThreadListQueries(queryClient, listPrefixes),
 			]);
 
 			const previousThreadMessages = threadId
@@ -119,18 +114,10 @@ export const useDeleteMessages = ({
 						.map(([queryKey, data]) => ({ queryKey, data }))
 				: [];
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
-				)
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadsListData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
+			const previousThreadsList = snapshotThreadListQueries(
+				queryClient,
+				listPrefixes,
+			);
 
 			if (threadId) {
 				queryClient.setQueriesData<ThreadMessagesData>(
@@ -145,26 +132,15 @@ export const useDeleteMessages = ({
 				);
 			}
 
-			const patchListData = (old: unknown) =>
-				patchThreadListCache(old, (items) =>
-					removeMessagesFromItems(items, messageIds),
-				);
-
-			queryClient.setQueriesData(
-				{ queryKey: threadsListPrefix },
-				patchListData,
-			);
-			queryClient.setQueriesData(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
+			patchThreadListQueries(queryClient, listPrefixes, (items) =>
+				removeMessagesFromItems(items, messageIds),
 			);
 
 			onAfterOptimisticRemove?.(Array.from(messageIds));
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
+				listPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -174,9 +150,7 @@ export const useDeleteMessages = ({
 				for (const entry of context.previousThreadMessages) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
-				for (const entry of context.previousThreadsList) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
+				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
 			const count = vars.body.messageIds?.length ?? 0;
 			pushError({
@@ -195,8 +169,7 @@ export const useDeleteMessages = ({
 					queryKey: context.threadMessagesPrefix,
 				});
 			}
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			invalidateThreadListQueries(queryClient, context.listPrefixes);
 			if (accountId) {
 				queryClient.invalidateQueries({
 					queryKey: mailboxOperationsListMailboxesQueryKey({

package/src/hooks/useMarkAsRead.test.ts

@@ -1,9 +1,13 @@
 import assert from "node:assert";
-import { describe, test } from "node:test";
+import { afterEach, beforeEach, describe, mock, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { patchThreadListCache } from "../lib/thread-cache.js";
 import {
+	MARK_READ_DELAY_MS,
 	resolveMailboxesForMessages,
+	scheduleMarkRead,
 	selectMessagesToMarkRead,
+	setReadOnItems,
 } from "./useMarkAsRead.js";
 
 const make = (
@@ -167,6 +171,92 @@ describe("selectMessagesToMarkRead", () => {
 	});
 });
 
+describe("marking read across the unified-threads cache shapes", () => {
+	// The daily brief reads from the unified cross-account listing, a different
+	// cache than the per-mailbox lists the regular inboxes render. Marking a
+	// message read has to patch that cache too, or the brief keeps its unread
+	// dot until reload (#140). The unified prefix carries both cache shapes — the
+	// brief's single page and the Flagged view's infinite query — so the patch
+	// has to survive whichever it is handed.
+	const patch = (old: unknown) =>
+		patchThreadListCache(old, (items) =>
+			setReadOnItems(items, new Set(["m1"]), true),
+		);
+
+	test("patches the brief's single-shot page", () => {
+		const patched = patch({
+			items: [
+				make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+				make({ messageId: "m2", threadMessageId: "tm2", isRead: false }),
+			],
+		}) as { items: RemitImapThreadMessageResponse[] };
+		assert.equal(patched.items[0].isRead, true);
+		assert.equal(patched.items[1].isRead, false);
+	});
+
+	test("patches the Flagged view's infinite query instead of throwing", () => {
+		const patched = patch({
+			pages: [
+				{
+					items: [
+						make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+					],
+				},
+				{
+					items: [
+						make({ messageId: "m2", threadMessageId: "tm2", isRead: false }),
+					],
+				},
+			],
+			pageParams: [undefined, "next"],
+		}) as { pages: Array<{ items: RemitImapThreadMessageResponse[] }> };
+		assert.equal(patched.pages[0].items[0].isRead, true);
+		assert.equal(patched.pages[1].items[0].isRead, false);
+	});
+});
+
+describe("scheduleMarkRead", () => {
+	beforeEach(() => {
+		mock.timers.enable({ apis: ["setTimeout"] });
+	});
+	afterEach(() => {
+		mock.timers.reset();
+	});
+
+	test("marks read once the dwell elapses", () => {
+		const marked: string[][] = [];
+		scheduleMarkRead(["m1"], MARK_READ_DELAY_MS, (ids) => marked.push(ids));
+		mock.timers.tick(MARK_READ_DELAY_MS - 1);
+		assert.deepStrictEqual(marked, []);
+		mock.timers.tick(1);
+		assert.deepStrictEqual(marked, [["m1"]]);
+	});
+
+	test("does not mark when the selection changes before the dwell", () => {
+		const marked: string[][] = [];
+		const cancel = scheduleMarkRead(["m1"], MARK_READ_DELAY_MS, (ids) =>
+			marked.push(ids),
+		);
+		mock.timers.tick(2000);
+		cancel();
+		mock.timers.tick(MARK_READ_DELAY_MS);
+		assert.deepStrictEqual(marked, []);
+	});
+
+	test("schedules nothing for an already-read (empty) selection", () => {
+		const marked: string[][] = [];
+		scheduleMarkRead([], MARK_READ_DELAY_MS, (ids) => marked.push(ids));
+		mock.timers.tick(MARK_READ_DELAY_MS);
+		assert.deepStrictEqual(marked, []);
+	});
+
+	test("marks at once when the delay is not positive", () => {
+		const marked: string[][] = [];
+		scheduleMarkRead(["m1"], 0, (ids) => marked.push(ids));
+		assert.deepStrictEqual(marked, [["m1"]]);
+	});
+});
+
 describe("resolveMailboxesForMessages", () => {
 	const messages = [
 		make({

package/src/hooks/useMarkAsRead.ts

@@ -2,15 +2,21 @@ import {
 	mailboxOperationsListMailboxesQueryKey,
 	messageBulkOperationsUpdateFlagsMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
-import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
+import {
+	cancelThreadListQueries,
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	type ThreadListSnapshotEntry,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 interface UseMarkAsReadOptions {
 	messages: RemitImapThreadMessageResponse[];
@@ -25,13 +31,6 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-/**
- * Either shape a thread list/search query caches — the infinite mailbox list
- * or a single-shot page. `setQueriesData` matches by key prefix, so the
- * optimistic updater sees both.
- */
-type ThreadsListData = ThreadListCache;
-
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
 	data: T;
@@ -39,12 +38,38 @@ interface SnapshotEntry<T> {
 
 interface MarkAsReadContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefixes: ReadonlyArray<readonly unknown[]>;
-	threadsSearchPrefixes: ReadonlyArray<readonly unknown[]>;
+	listPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
-	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+	previousThreadsList: ThreadListSnapshotEntry[];
 }
 
+/**
+ * Dwell before a message the user is viewing is marked read. A glance closed
+ * within this window leaves it unread (#140). Applied by the single shared
+ * trigger below, so the daily brief and the mailbox thread views agree.
+ */
+export const MARK_READ_DELAY_MS = 3000;
+
+/**
+ * Fire `markRead` for `messageIds` after `delayMs`. Returns a canceller the
+ * caller runs on unmount or when the selection changes before the dwell
+ * elapses; an empty list schedules nothing, and a non-positive delay fires at
+ * once. Framework-agnostic so the timing can be exercised with fake timers.
+ */
+export const scheduleMarkRead = (
+	messageIds: string[],
+	delayMs: number,
+	markRead: (ids: string[]) => void,
+): (() => void) => {
+	if (messageIds.length === 0) return () => {};
+	if (delayMs <= 0) {
+		markRead(messageIds);
+		return () => {};
+	}
+	const timer = setTimeout(() => markRead(messageIds), delayMs);
+	return () => clearTimeout(timer);
+};
+
 /**
  * The mailboxes whose cached listings a batch of message mutations affects.
  *
@@ -68,7 +93,7 @@ export const resolveMailboxesForMessages = (
 	return [...mailboxIds];
 };
 
-const setReadOnItems = (
+export const setReadOnItems = (
 	items: RemitImapThreadMessageResponse[],
 	messageIds: Set<string>,
 	isRead: boolean,
@@ -122,26 +147,13 @@ export const useMarkAsRead = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
-			const affectedMailboxIds = resolveMailboxesForMessages(
-				messageIds,
-				messages,
-				mailboxId,
-			);
-			const threadsListPrefixes = affectedMailboxIds.map((id) =>
-				threadOperationsListThreadsQueryKey({ path: { mailboxId: id } }),
-			);
-			const threadsSearchPrefixes = affectedMailboxIds.map((id) =>
-				threadOperationsSearchThreadsQueryKey({ path: { mailboxId: id } }),
+			const listPrefixes = threadListCacheKeys(
+				resolveMailboxesForMessages(messageIds, messages, mailboxId),
 			);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				...threadsListPrefixes.map((queryKey) =>
-					queryClient.cancelQueries({ queryKey }),
-				),
-				...threadsSearchPrefixes.map((queryKey) =>
-					queryClient.cancelQueries({ queryKey }),
-				),
+				cancelThreadListQueries(queryClient, listPrefixes),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -152,18 +164,10 @@ export const useMarkAsRead = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
-			const previousThreadsList = [
-				...threadsListPrefixes,
-				...threadsSearchPrefixes,
-			]
-				.flatMap((queryKey) =>
-					queryClient.getQueriesData<ThreadsListData>({ queryKey }),
-				)
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadsListData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
+			const previousThreadsList = snapshotThreadListQueries(
+				queryClient,
+				listPrefixes,
+			);
 
 			queryClient.setQueriesData<ThreadMessagesData>(
 				{ queryKey: threadMessagesPrefix },
@@ -176,22 +180,13 @@ export const useMarkAsRead = ({
 				},
 			);
 
-			const patchListData = (old: unknown) =>
-				patchThreadListCache(old, (items) =>
-					setReadOnItems(items, messageIds, isRead),
-				);
-
-			for (const queryKey of [
-				...threadsListPrefixes,
-				...threadsSearchPrefixes,
-			]) {
-				queryClient.setQueriesData({ queryKey }, patchListData);
-			}
+			patchThreadListQueries(queryClient, listPrefixes, (items) =>
+				setReadOnItems(items, messageIds, isRead),
+			);
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefixes,
-				threadsSearchPrefixes,
+				listPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -212,9 +207,7 @@ export const useMarkAsRead = ({
 				for (const entry of context.previousThreadMessages) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
-				for (const entry of context.previousThreadsList) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
+				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
 			const isRead = variables.body.isRead ?? true;
 			pushError({
@@ -226,12 +219,7 @@ export const useMarkAsRead = ({
 		onSettled: (_data, _err, _vars, context) => {
 			if (!context) return;
 			queryClient.invalidateQueries({ queryKey: context.threadMessagesPrefix });
-			for (const queryKey of [
-				...context.threadsListPrefixes,
-				...context.threadsSearchPrefixes,
-			]) {
-				queryClient.invalidateQueries({ queryKey });
-			}
+			invalidateThreadListQueries(queryClient, context.listPrefixes);
 			// Refresh the sidebar mailbox list so the unread badge picks up the
 			// next backend `unseenCount` (which is owned by IMAP sync).
 			if (accountId) {
@@ -276,13 +264,13 @@ export const useMarkAsRead = ({
 		[messages, expandedIds],
 	);
 
-	// Mark as read immediately when a message is expanded — match Gmail
-	// behaviour. The previous implementation used a 10s delay plus an
-	// "all expanded" gate that meant most reads silently never fired.
-	useEffect(() => {
-		if (eligibleIds.length === 0) return;
-		markMessagesRead(eligibleIds);
-	}, [eligibleIds, markMessagesRead]);
+	// Mark as read after a short dwell on the open message. Changing the
+	// selection or leaving the view before the dwell elapses cancels the pending
+	// mark, so a glance stays unread (#140).
+	useEffect(
+		() => scheduleMarkRead(eligibleIds, MARK_READ_DELAY_MS, markMessagesRead),
+		[eligibleIds, markMessagesRead],
+	);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: intentionally clears state on threadId change; adding threadId to deps causes stale closure issues
 	useEffect(() => {
@@ -315,16 +303,10 @@ export const useToggleReadFor = (options: {
 			});
 		},
 		onSettled: () => {
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsListThreadsQueryKey({
-					path: { mailboxId },
-				}),
-			});
-			queryClient.invalidateQueries({
-				queryKey: threadOperationsSearchThreadsQueryKey({
-					path: { mailboxId },
-				}),
-			});
+			invalidateThreadListQueries(
+				queryClient,
+				threadListCacheKeys([mailboxId]),
+			);
 			if (accountId) {
 				queryClient.invalidateQueries({
 					queryKey: mailboxOperationsListMailboxesQueryKey({

package/src/hooks/useMoveMessages.ts

@@ -2,15 +2,21 @@ import {
 	mailboxOperationsListMailboxesQueryKey,
 	messageBulkOperationsMoveMessagesMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
-import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
+import {
+	cancelThreadListQueries,
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	type ThreadListSnapshotEntry,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 interface UseMoveMessagesOptions {
 	mailboxId: string;
@@ -29,13 +35,6 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-/**
- * Either shape a thread list/search query caches — the infinite mailbox list
- * or a single-shot page. `setQueriesData` matches by key prefix, so the
- * optimistic updater sees both.
- */
-type ThreadsListData = ThreadListCache;
-
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
 	data: T;
@@ -43,10 +42,9 @@ interface SnapshotEntry<T> {
 
 interface MoveContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
+	listPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
-	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+	previousThreadsList: ThreadListSnapshotEntry[];
 }
 
 /**
@@ -82,24 +80,20 @@ export const useMoveMessages = ({
 						path: { threadId },
 					})
 				: [];
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId },
-			});
+			// The source mailbox's lists plus the unified cross-account listing that
+			// backs the daily brief — moving from the brief has to remove the row
+			// there too, not only from the per-mailbox lists (#140, part of #149).
+			const listPrefixes = threadListCacheKeys([mailboxId]);
 
 			// Only cancel the thread-messages query when we actually have a
 			// threadId — passing an empty queryKey here would match every
 			// query in the cache and cancel unrelated work (Copilot review,
-			// PR #287). The list/search prefixes are always scoped to the
-			// current mailbox so they're safe to cancel as-is.
+			// PR #287). The list prefixes are always scoped so they're safe.
 			await Promise.all([
 				...(threadId
 					? [queryClient.cancelQueries({ queryKey: threadMessagesPrefix })]
 					: []),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+				cancelThreadListQueries(queryClient, listPrefixes),
 			]);
 
 			const previousThreadMessages = threadId
@@ -114,18 +108,10 @@ export const useMoveMessages = ({
 						.map(([queryKey, data]) => ({ queryKey, data }))
 				: [];
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
-				)
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadsListData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
+			const previousThreadsList = snapshotThreadListQueries(
+				queryClient,
+				listPrefixes,
+			);
 
 			if (threadId) {
 				queryClient.setQueriesData<ThreadMessagesData>(
@@ -140,26 +126,15 @@ export const useMoveMessages = ({
 				);
 			}
 
-			const patchListData = (old: unknown) =>
-				patchThreadListCache(old, (items) =>
-					removeMovedMessagesFromItems(items, messageIds),
-				);
-
-			queryClient.setQueriesData(
-				{ queryKey: threadsListPrefix },
-				patchListData,
-			);
-			queryClient.setQueriesData(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
+			patchThreadListQueries(queryClient, listPrefixes, (items) =>
+				removeMovedMessagesFromItems(items, messageIds),
 			);
 
 			onAfterOptimisticRemove?.(Array.from(messageIds));
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
+				listPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
 			};
@@ -169,9 +144,7 @@ export const useMoveMessages = ({
 				for (const entry of context.previousThreadMessages) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
-				for (const entry of context.previousThreadsList) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
+				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
 			const count = vars.body.messageIds?.length ?? 0;
 			pushError({
@@ -190,8 +163,7 @@ export const useMoveMessages = ({
 					queryKey: context.threadMessagesPrefix,
 				});
 			}
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
+			invalidateThreadListQueries(queryClient, context.listPrefixes);
 			if (accountId) {
 				queryClient.invalidateQueries({
 					queryKey: mailboxOperationsListMailboxesQueryKey({

package/src/hooks/useToggleStar.ts

@@ -1,15 +1,21 @@
 import {
 	messageOperationsUpdateMessageFlagsMutation,
 	threadDetailOperationsListThreadMessagesQueryKey,
-	threadOperationsListThreadsQueryKey,
-	threadOperationsSearchThreadsQueryKey,
-	unifiedThreadOperationsListAllThreadsQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
-import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
+import { patchThreadListCache } from "@/lib/thread-cache";
+import {
+	cancelThreadListQueries,
+	invalidateThreadListQueries,
+	patchThreadListQueries,
+	restoreThreadListQueries,
+	snapshotThreadListQueries,
+	type ThreadListSnapshotEntry,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 interface UseToggleStarOptions {
 	threadId: string;
@@ -47,13 +53,6 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-/**
- * Either shape a thread list/search query caches — the infinite mailbox list
- * or a single-shot page. `setQueriesData` matches by key prefix, so the
- * optimistic updater sees both.
- */
-type ThreadsListData = ThreadListCache;
-
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
 	data: T;
@@ -61,12 +60,9 @@ interface SnapshotEntry<T> {
 
 interface ToggleStarContext {
 	threadMessagesPrefix: readonly unknown[];
-	threadsListPrefix: readonly unknown[];
-	threadsSearchPrefix: readonly unknown[];
-	unifiedThreadsPrefix: readonly unknown[];
+	listPrefixes: ReadonlyArray<readonly unknown[]>;
 	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
-	previousThreadsList: SnapshotEntry<ThreadsListData>[];
-	previousUnifiedThreads: SnapshotEntry<ThreadMessagesData>[];
+	previousThreadsList: ThreadListSnapshotEntry[];
 }
 
 export const toggleStarsInItems = (
@@ -100,29 +96,17 @@ export const useToggleStar = ({
 				threadDetailOperationsListThreadMessagesQueryKey({
 					path: { threadId },
 				});
-			const affectedMailboxId = resolveMailboxForMessage(
-				messageId,
-				messages,
-				mailboxId,
-			);
-			const threadsListPrefix = threadOperationsListThreadsQueryKey({
-				path: { mailboxId: affectedMailboxId },
-			});
-			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
-				path: { mailboxId: affectedMailboxId },
-			});
-			// The unified cross-account listing backs the daily brief and the
-			// Starred mailbox, so a star toggled from an inbox has to land there
-			// too — without this the starred view keeps serving a stale page for
-			// its whole staleTime and the message never appears.
-			const unifiedThreadsPrefix =
-				unifiedThreadOperationsListAllThreadsQueryKey();
+			// The list caches to patch: the message's own mailbox plus the unified
+			// cross-account listing that backs the daily brief and the Flagged view.
+			// Resolved from the shared source so this hook can never fall behind the
+			// others on which listings exist (#149).
+			const listPrefixes = threadListCacheKeys([
+				resolveMailboxForMessage(messageId, messages, mailboxId),
+			]);
 
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
-				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
-				queryClient.cancelQueries({ queryKey: unifiedThreadsPrefix }),
+				cancelThreadListQueries(queryClient, listPrefixes),
 			]);
 
 			const previousThreadMessages = queryClient
@@ -133,69 +117,27 @@ export const useToggleStar = ({
 				)
 				.map(([queryKey, data]) => ({ queryKey, data }));
 
-			const previousThreadsList = queryClient
-				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
-				.concat(
-					queryClient.getQueriesData<ThreadsListData>({
-						queryKey: threadsSearchPrefix,
-					}),
-				)
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadsListData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
-
-			const previousUnifiedThreads = queryClient
-				.getQueriesData<ThreadMessagesData>({ queryKey: unifiedThreadsPrefix })
-				.filter(
-					(entry): entry is [readonly unknown[], ThreadMessagesData] =>
-						entry[1] !== undefined,
-				)
-				.map(([queryKey, data]) => ({ queryKey, data }));
-
-			// The unified-threads prefix carries both shapes too: the Flagged view
-			// runs an infinite query on `listAllThreads({ starred: true })`, which
-			// sits under the same prefix as the single-shot readers. Patching it as
-			// a plain `{ items }` threw on that entry and failed the star before it
-			// was sent — the same defect as the mailbox list (issues #51, #55), so
-			// it goes through the same helper.
-			const patchItemsData = (old: unknown) =>
-				patchThreadListCache(old, (items) =>
-					toggleStarsInItems(items, messageId, nextStarred),
-				);
-
-			queryClient.setQueriesData(
-				{ queryKey: threadMessagesPrefix },
-				patchItemsData,
-			);
-			queryClient.setQueriesData(
-				{ queryKey: unifiedThreadsPrefix },
-				patchItemsData,
+			const previousThreadsList = snapshotThreadListQueries(
+				queryClient,
+				listPrefixes,
 			);
 
-			const patchListData = (old: unknown) =>
+			// The thread-detail cache carries the `{ items }` shape too, so it goes
+			// through the same shape-tolerant helper as the listings.
+			queryClient.setQueriesData({ queryKey: threadMessagesPrefix }, (old) =>
 				patchThreadListCache(old, (items) =>
 					toggleStarsInItems(items, messageId, nextStarred),
-				);
-
-			queryClient.setQueriesData(
-				{ queryKey: threadsListPrefix },
-				patchListData,
+				),
 			);
-			queryClient.setQueriesData(
-				{ queryKey: threadsSearchPrefix },
-				patchListData,
+			patchThreadListQueries(queryClient, listPrefixes, (items) =>
+				toggleStarsInItems(items, messageId, nextStarred),
 			);
 
 			return {
 				threadMessagesPrefix,
-				threadsListPrefix,
-				threadsSearchPrefix,
-				unifiedThreadsPrefix,
+				listPrefixes,
 				previousThreadMessages,
 				previousThreadsList,
-				previousUnifiedThreads,
 			};
 		},
 		onError: (err, vars, context) => {
@@ -203,12 +145,7 @@ export const useToggleStar = ({
 				for (const entry of context.previousThreadMessages) {
 					queryClient.setQueryData(entry.queryKey, entry.data);
 				}
-				for (const entry of context.previousThreadsList) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
-				for (const entry of context.previousUnifiedThreads) {
-					queryClient.setQueryData(entry.queryKey, entry.data);
-				}
+				restoreThreadListQueries(queryClient, context.previousThreadsList);
 			}
 			const nextStarred = vars.body.isStarred ?? false;
 			pushError({
@@ -222,9 +159,7 @@ export const useToggleStar = ({
 		onSettled: (_data, _err, _vars, context) => {
 			if (!context) return;
 			queryClient.invalidateQueries({ queryKey: context.threadMessagesPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
-			queryClient.invalidateQueries({ queryKey: context.threadsSearchPrefix });
-			queryClient.invalidateQueries({ queryKey: context.unifiedThreadsPrefix });
+			invalidateThreadListQueries(queryClient, context.listPrefixes);
 		},
 	});
 

package/src/lib/thread-list-cache.test.ts

@@ -0,0 +1,44 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import {
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+	unifiedThreadOperationsListAllThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { threadListCacheKeys } from "./thread-list-cache.js";
+
+describe("threadListCacheKeys", () => {
+	test("resolves each mailbox's list and search caches plus the unified one", () => {
+		const keys = threadListCacheKeys(["mb1"]);
+		assert.deepStrictEqual(keys, [
+			threadOperationsListThreadsQueryKey({ path: { mailboxId: "mb1" } }),
+			threadOperationsSearchThreadsQueryKey({ path: { mailboxId: "mb1" } }),
+			unifiedThreadOperationsListAllThreadsQueryKey(),
+		]);
+	});
+
+	test("always includes the unified cross-account listing the daily brief reads", () => {
+		// #140: the brief kept its unread dot because the read mutation never
+		// reached this key. Every caller of the shared source now does.
+		const keys = threadListCacheKeys(["mb1", "mb2"]);
+		assert.ok(
+			keys.some(
+				(key) =>
+					JSON.stringify(key) ===
+					JSON.stringify(unifiedThreadOperationsListAllThreadsQueryKey()),
+			),
+		);
+	});
+
+	test("emits one list and one search key per distinct mailbox", () => {
+		const keys = threadListCacheKeys(["mb1", "mb2"]);
+		// two mailboxes -> two list + two search + one unified
+		assert.strictEqual(keys.length, 5);
+	});
+
+	test("dedupes repeated mailbox ids", () => {
+		const keys = threadListCacheKeys(["mb1", "mb1"]);
+		// one mailbox -> one list + one search + one unified
+		assert.strictEqual(keys.length, 3);
+	});
+});

package/src/lib/thread-list-cache.ts

@@ -0,0 +1,97 @@
+import {
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+	unifiedThreadOperationsListAllThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { QueryClient } from "@tanstack/react-query";
+import { patchThreadListCache, type ThreadListCache } from "./thread-cache.js";
+
+export interface ThreadListSnapshotEntry {
+	queryKey: readonly unknown[];
+	data: ThreadListCache;
+}
+
+/**
+ * Every cached thread listing the given mailboxes feed, as query-key prefixes:
+ * each mailbox's list and search caches, plus the unified cross-account listing
+ * that backs the daily brief and the Flagged view.
+ *
+ * A thread-list mutation (mark read, star, delete, move) has to reach all of
+ * them. When a hook hand-copies a subset, a view reading from a listing it
+ * forgot serves a stale page until reload: the daily brief kept its unread dot
+ * after a message was read because the read mutation patched the per-mailbox
+ * caches but not the unified one (#140). This is the single source every
+ * mutation hook resolves its keys from, so the set can never drift between them
+ * (part of #149). React Query matches by prefix, so each key also covers its
+ * option variants (order, pagination) without enumerating them.
+ */
+export const threadListCacheKeys = (
+	mailboxIds: Iterable<string>,
+): ReadonlyArray<readonly unknown[]> => {
+	const keys: Array<readonly unknown[]> = [];
+	for (const mailboxId of new Set(mailboxIds)) {
+		keys.push(threadOperationsListThreadsQueryKey({ path: { mailboxId } }));
+		keys.push(threadOperationsSearchThreadsQueryKey({ path: { mailboxId } }));
+	}
+	keys.push(unifiedThreadOperationsListAllThreadsQueryKey());
+	return keys;
+};
+
+export const cancelThreadListQueries = (
+	queryClient: QueryClient,
+	prefixes: ReadonlyArray<readonly unknown[]>,
+): Promise<unknown> =>
+	Promise.all(
+		prefixes.map((queryKey) => queryClient.cancelQueries({ queryKey })),
+	);
+
+export const snapshotThreadListQueries = (
+	queryClient: QueryClient,
+	prefixes: ReadonlyArray<readonly unknown[]>,
+): ThreadListSnapshotEntry[] =>
+	prefixes
+		.flatMap((queryKey) =>
+			queryClient.getQueriesData<ThreadListCache>({ queryKey }),
+		)
+		.filter(
+			(entry): entry is [readonly unknown[], ThreadListCache] =>
+				entry[1] !== undefined,
+		)
+		.map(([queryKey, data]) => ({ queryKey, data }));
+
+/**
+ * Run `patchItems` over every cached listing under `prefixes`, whichever shape
+ * each holds — the shape-tolerant `patchThreadListCache` covers both the
+ * single-shot page (brief) and the infinite query (Flagged, mailbox list).
+ */
+export const patchThreadListQueries = (
+	queryClient: QueryClient,
+	prefixes: ReadonlyArray<readonly unknown[]>,
+	patchItems: (
+		items: RemitImapThreadMessageResponse[],
+	) => RemitImapThreadMessageResponse[],
+): void => {
+	const updater = (old: unknown) => patchThreadListCache(old, patchItems);
+	for (const queryKey of prefixes) {
+		queryClient.setQueriesData({ queryKey }, updater);
+	}
+};
+
+export const restoreThreadListQueries = (
+	queryClient: QueryClient,
+	snapshot: ThreadListSnapshotEntry[],
+): void => {
+	for (const entry of snapshot) {
+		queryClient.setQueryData(entry.queryKey, entry.data);
+	}
+};
+
+export const invalidateThreadListQueries = (
+	queryClient: QueryClient,
+	prefixes: ReadonlyArray<readonly unknown[]>,
+): void => {
+	for (const queryKey of prefixes) {
+		queryClient.invalidateQueries({ queryKey });
+	}
+};