@remit/web-client 0.0.282 → 0.0.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.282",
+  "version": "0.0.283",
   "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/components/mail/DailyBrief.tsx

@@ -109,6 +109,7 @@ import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useSemanticSearch } from "@/hooks/useSemanticSearch";
+import { useSpamMatchCounts } from "@/hooks/useSpamMatchCounts";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { sortAccountsByCreatedAt } from "@/lib/account-order";
 import {
@@ -128,11 +129,13 @@ import { junkDestination } from "@/lib/junk-destination";
 import type { ListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
+import { shouldRequestResultCount } from "@/lib/result-count";
+import { junkMailboxIds } from "@/lib/result-folder";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
 import { showInlineSearchResults } from "@/lib/search-surface";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { resolveSelectionAccountScope } from "@/lib/selection-account-scope";
-import { spamOfferForResults } from "@/lib/spam-offer";
+import { spamOfferFromCounts } from "@/lib/spam-offer";
 import { dedupeByThread } from "@/lib/starred-rows";
 import { wizardSelectionFrom } from "@/lib/wizard-selection";
 import {
@@ -738,6 +741,30 @@ export function DailyBrief({
 	// same, or a committed search surfaces junk mail inline and drops the way back
 	// to it. A bare token query (e.g. `is:unread`) never reaches search mode, so
 	// there is nothing to hold out.
+	// What the offer states is the server's count of every junk folder the search
+	// reached, one request each, summed — not the junk share of the page below
+	// it, which is a page length wearing a folder total's clothes (#313). The
+	// page's own junk rows still decide what is held out of the list, and where
+	// "Go to Spam" lands whenever no count ranks the folders.
+	const junkIds = useMemo(
+		() => junkMailboxIds(resultFolderIndex),
+		[resultFolderIndex],
+	);
+	const spamCounts = useSpamMatchCounts({
+		criteria: searchCriteria,
+		junkMailboxIds: junkIds,
+		// The same two gates the mailbox list counts under: criteria the request
+		// carried in full, and free text long enough for the index to answer
+		// without a folder scan per character.
+		enabled:
+			counted &&
+			shouldRequestResultCount({
+				hasSearchQuery: underQuery,
+				freeText: sq,
+				residualTokenCount: residualTokens.length,
+			}),
+	});
+
 	const { spamIds, briefSpamOffer } = useMemo(() => {
 		const none = { spamIds: undefined, briefSpamOffer: undefined };
 		if (!sq) return none;
@@ -745,12 +772,25 @@ export function DailyBrief({
 			rowToSearchResult(row, resultFolderIndex),
 		);
 		const { spam } = partitionSpamResults(asResults);
-		if (spam.length === 0) return none;
+		// Per folder, not a total: with no count to rank them by, this is the only
+		// evidence of which account's Spam holds the mail, and a button landing on
+		// the wrong one shows "No matches" over rows this page is holding out.
+		const pageRowsByMailbox = new Map<string, number>();
+		for (const result of spam) {
+			if (!result.mailboxId) continue;
+			pageRowsByMailbox.set(
+				result.mailboxId,
+				(pageRowsByMailbox.get(result.mailboxId) ?? 0) + 1,
+			);
+		}
+		const offer = spamOfferFromCounts(spamCounts, { pageRowsByMailbox });
+		if (spam.length === 0 && !offer) return none;
 		return {
-			spamIds: new Set(spam.map((result) => result.id)),
-			briefSpamOffer: spamOfferForResults(asResults),
+			spamIds:
+				spam.length > 0 ? new Set(spam.map((result) => result.id)) : undefined,
+			briefSpamOffer: offer,
 		};
-	}, [filteredRows, sq, resultFolderIndex]);
+	}, [filteredRows, sq, resultFolderIndex, spamCounts]);
 
 	const sections = useMemo<ThreadSection[]>(() => {
 		const keep = (rows: ThreadRowData[]): ThreadRowData[] =>
@@ -1045,6 +1085,10 @@ export function DailyBrief({
 						relatedResults,
 						relatedLoading,
 						onSelectSearchResult: openResult,
+						// The read-only results panel holds spam out of the same
+						// committed search this body does, so it states the same
+						// server-counted number rather than counting its own page.
+						spamOffer: briefSpamOffer,
 						// The body already narrows to the committed query (the server
 						// `query` on every section request, plus `matchesSearchTokens` for
 						// the residue), so a committed search is a selectable list here

package/src/components/mail/MailListHeader.tsx

@@ -89,7 +89,7 @@ import {
 	removeSearchToken,
 	searchTokenLabel,
 } from "@/lib/search-tokens";
-import { spamOfferForResults } from "@/lib/spam-offer";
+import type { SpamOffer } from "@/lib/spam-offer";
 import {
 	useBrowsedList,
 	useOpenWizard,
@@ -152,6 +152,13 @@ export interface MailListHeaderProps {
 	 * leaves this unset and keeps the panel for every query.
 	 */
 	searchResultsInBody?: boolean;
+	/**
+	 * The Spam offer this view is making, if any: where "Go to Spam" lands and
+	 * how much of the search sits there, counted by the server over every junk
+	 * folder it reached. Only the global scope holds spam out, so only the brief
+	 * passes one; every other view leaves it unset and no offer is made.
+	 */
+	spamOffer?: SpamOffer;
 	/**
 	 * The refresh control for this view — the mailbox route and the brief pass
 	 * one, scoped to the account(s) they show; a view with nothing account-scoped
@@ -230,6 +237,7 @@ export function MailListHeader({
 	searchResultsLabel = "Top matches",
 	relatedResultsLabel = "Related",
 	searchResultsInBody = false,
+	spamOffer,
 	refreshControl,
 }: MailListHeaderProps) {
 	const {
@@ -393,26 +401,23 @@ export function MailListHeader({
 		[browsed, scope, scopedRole],
 	);
 
-	// The offer counts results for the *committed* query, so that is the query it
-	// carries into Spam. The count the banner states is the results list's own,
-	// over every row it held out; the app supplies only where "Go to Spam" goes.
-	const spamOffer = useMemo(
-		() =>
-			routeScope.kind === "global"
-				? spamOfferForResults([...topMatches, ...related])
-				: undefined,
-		[routeScope, topMatches, related],
-	);
+	// The offer is made for the *committed* query, so that is the query it carries
+	// into Spam. Both halves come from the view that owns the search: the number
+	// is the server's count of every junk folder it reached, and the destination
+	// the folder holding most of them. Counting the rows this panel happens to
+	// hold would count a page and call it a folder (#313).
+	const offer = routeScope.kind === "global" ? spamOffer : undefined;
 	const resultsScope = useMemo<SearchScope>(
 		() =>
-			spamOffer
+			offer
 				? {
 						kind: "global",
+						spamCount: offer.count,
 						onScopeToSpam: () =>
-							scopeSearchToMailbox(spamOffer.mailboxId, searchQuery),
+							scopeSearchToMailbox(offer.mailboxId, searchQuery),
 					}
 				: routeScope,
-		[spamOffer, routeScope, scopeSearchToMailbox, searchQuery],
+		[offer, routeScope, scopeSearchToMailbox, searchQuery],
 	);
 
 	// Make-this-a-filter (#477 clause 1.8): the search is the wizard's second

package/src/components/mail/spam-offer-server-count.render.test.ts

@@ -0,0 +1,349 @@
+/**
+ * The Spam offer's number comes from the server, one count per junk folder,
+ * summed (#313).
+ *
+ * The offer used to group the search rows the client had loaded, count the ones
+ * whose folder is `\Junk`, and state that figure as "N in Spam". The rows are a
+ * page, so the number was a count of a window offered as a count of a mailbox:
+ * a Spam match older than the page was missing from it, and the figure grew as
+ * further pages arrived.
+ *
+ * The seed here is that page. Every Spam match sits below the window the search
+ * request answers with, so the loaded rows hold no junk at all — a client that
+ * counts what it holds finds nothing and makes no offer. A client that asks each
+ * junk folder finds them, and with two accounts it has to add the two answers
+ * up: one number is stated, and each account has a Spam folder of its own.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { ResultFolder } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement, type ReactNode } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { MailContext, type MailContextValue } from "@/lib/mail-context";
+import { MailFreshnessProvider } from "@/lib/mail-freshness";
+import type { ResultFolderIndex } from "@/lib/result-folder";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeAccount, makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpCall, type HttpMock, mockFetch } from "@/test-support/http";
+import { DailyBrief } from "./DailyBrief";
+
+const ACCOUNT_A = "acc-a";
+const ACCOUNT_B = "acc-b";
+const JUNK_A = "mbx-junk-a";
+const JUNK_B = "mbx-junk-b";
+const INBOX_A = "mbx-inbox-a";
+
+const accounts = [
+	makeAccount({ accountId: ACCOUNT_A }),
+	makeAccount({ accountId: ACCOUNT_B }),
+];
+
+/** What the search says: a word the seeded rows carry. */
+const QUERY = "invoice";
+
+/** Matches in Spam, per account. Deliberately no round sum. */
+const SPAM_IN_A = 5;
+const SPAM_IN_B = 3;
+
+/**
+ * The page the search request answers with: matches from the INBOX only. Every
+ * Spam match is older than these, so none of them is here — which is exactly
+ * the case the old count could not see.
+ */
+const PAGE: RemitImapThreadMessageResponse[] = Array.from(
+	{ length: 4 },
+	(_, index) =>
+		makeThreadMessage({
+			messageId: `inbox-${index}`,
+			threadId: `thread-inbox-${index}`,
+			accountId: ACCOUNT_A,
+			mailboxId: INBOX_A,
+			subject: `Invoice ${index} from the office`,
+			sentDate: 1_767_225_600_000 - index * 1_000,
+		}),
+);
+
+/** The `\Junk` appointment is what holds a row out of a search and counts it. */
+const FOLDERS: ResultFolderIndex = new Map<string, ResultFolder>([
+	[INBOX_A, { role: "inbox" }],
+	[JUNK_A, { role: "junk" }],
+	[JUNK_B, { role: "junk" }],
+]);
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const paramsOf = (call: HttpCall): URLSearchParams =>
+	new URL(call.url, "http://localhost").searchParams;
+
+const threadCalls = (): HttpCall[] =>
+	(http?.calls ?? []).filter(
+		(call) => new URL(call.url, "http://localhost").pathname === "/threads",
+	);
+
+/**
+ * Params that say WHICH mail is being asked about, with everything about paging
+ * and response shape taken out. A count is right only if these match the rows
+ * request's exactly — same query, same account, same chips — because a count
+ * over a wider set than the list shows is a wrong number, not a rounded one.
+ */
+const CRITERIA_FREE_PARAMS = new Set([
+	"limit",
+	"continuationToken",
+	"mailboxId",
+	"count",
+	"results",
+	"order",
+]);
+
+const criteriaOf = (call: HttpCall): string => {
+	const criteria = [...paramsOf(call).entries()]
+		.filter(([name]) => !CRITERIA_FREE_PARAMS.has(name))
+		.map(([name, value]) => `${name}=${value}`)
+		.sort();
+	return criteria.join("&");
+};
+
+/** The count requests this render issued, by the folder each one scoped to. */
+const spamCountRequests = (): HttpCall[] =>
+	threadCalls()
+		.filter((call) => paramsOf(call).get("count") === "true")
+		.filter((call) => {
+			const mailboxId = paramsOf(call).get("mailboxId");
+			return mailboxId === JUNK_A || mailboxId === JUNK_B;
+		});
+
+const spamCountFolders = (): string[] =>
+	spamCountRequests().map((call) => paramsOf(call).get("mailboxId") ?? "");
+
+/** The request that fetched the rows the offer sits above. */
+const searchRowsRequest = (): HttpCall | undefined =>
+	threadCalls().find(
+		(call) =>
+			paramsOf(call).get("count") !== "true" &&
+			paramsOf(call).get("query") !== null,
+	);
+
+const context = (): MailContextValue => ({
+	accounts,
+	mailboxNameIndex: new Map(),
+	accountNameIndex: new Map(),
+	resultFolderIndex: FOLDERS,
+	searchQuery: QUERY,
+	searchInput: QUERY,
+	searchViewKey: "brief",
+	onSearchChange: () => undefined,
+	onSearchClear: () => undefined,
+	onSearchClearQuery: () => undefined,
+	intelligenceOpen: false,
+	onToggleIntelligence: () => undefined,
+	onRaiseIntelligence: () => undefined,
+});
+
+const brief = (): ReactNode =>
+	createElement(MailFreshnessProvider, {
+		accountIds: [ACCOUNT_A, ACCOUNT_B],
+		// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+		children: createElement(
+			MailContext.Provider,
+			{ value: context() },
+			createElement(DailyBrief, {
+				accounts,
+				onDeleteMessages: () => undefined,
+			}),
+		),
+	});
+
+const testRouter = (): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (query: Record<string, unknown>) => query,
+		component: Outlet,
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: Outlet,
+	});
+	const briefRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/brief",
+		component: brief,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => briefRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: Outlet,
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute,
+			briefRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/mail/brief"] }),
+	}) as unknown as AnyRouter;
+};
+
+/** What each junk folder answers `count: true` with; `undefined` counts nothing. */
+type JunkCounts = Record<string, number | undefined>;
+
+const mount = async (junk: JunkCounts): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		const url = new URL(call.url, "http://localhost");
+		if (url.pathname.endsWith("/config")) return { accounts };
+		if (url.pathname !== "/threads") return { items: [] };
+		const params = url.searchParams;
+		if (params.get("count") === "true") {
+			const mailboxId = params.get("mailboxId");
+			if (mailboxId === null) return { count: 0 };
+			// The server counts what it was asked about. A count request carrying
+			// different criteria from the rows request is answering a different
+			// question, so this one answers nothing rather than lending it a number
+			// — which is what fails the assertions below if the criteria stop being
+			// forwarded.
+			if (params.get("query") !== QUERY) return {};
+			const count = junk[mailboxId];
+			// A folder the server declines to count answers with no `count` at all,
+			// never with a zero — the distinction the offer has to keep.
+			return count === undefined ? {} : { count };
+		}
+		// The search answers with the page above. Its Spam matches are older than
+		// every row in it, so no junk row reaches the client.
+		if (params.get("query")) return { items: PAGE };
+		return { items: [] };
+	});
+
+	const router = testRouter();
+	await router.load();
+	const dom = createDomHarness({ viewportWidth: 1400 });
+	harness = dom;
+	dom.renderApp(createElement(RouterProvider, { router }));
+	await dom.flush();
+	await dom.wait(20);
+	await dom.flush();
+	await dom.waitFor(
+		() => dom.text().includes("from Spam") || dom.text().includes("Invoice 0"),
+		"the brief to render its matches",
+	);
+	return dom;
+};
+
+describe("the Spam offer's count comes from the server (#313)", () => {
+	// The regression. Every Spam match sits below the page the search returned,
+	// so a client counting its own rows offers nothing at all.
+	it("counts Spam matches the loaded page never held", async () => {
+		const mounted = await mount({ [JUNK_A]: SPAM_IN_A, [JUNK_B]: 0 });
+		await mounted.waitFor(
+			() => mounted.text().includes("from Spam"),
+			"the Spam offer to state a count",
+		);
+
+		assert.ok(
+			PAGE.every((row) => row.mailboxId !== JUNK_A && row.mailboxId !== JUNK_B),
+			"the page under test stopped being junk-free",
+		);
+		assert.match(
+			mounted.text(),
+			new RegExp(`${SPAM_IN_A}\\s*results from Spam`),
+		);
+		assert.match(mounted.text(), /Go to Spam/);
+	});
+
+	it("sums one count per junk folder, so several accounts read as one number", async () => {
+		const mounted = await mount({ [JUNK_A]: SPAM_IN_A, [JUNK_B]: SPAM_IN_B });
+		await mounted.waitFor(
+			() => mounted.text().includes("from Spam"),
+			"the Spam offer to state a count",
+		);
+
+		assert.deepEqual(
+			[...new Set(spamCountFolders())].sort(),
+			[JUNK_A, JUNK_B].sort(),
+			"the offer did not ask every junk folder for its own count",
+		);
+		// The invariant the whole fix rests on: each folder is counted under the
+		// search's own criteria, so the number is the size of what the reader is
+		// looking at rather than of every message that folder holds.
+		const rows = searchRowsRequest();
+		assert.ok(rows, "the brief never asked for the search's rows");
+		for (const call of spamCountRequests()) {
+			assert.equal(
+				criteriaOf(call),
+				criteriaOf(rows),
+				"a count asked about different mail from the list it sits above",
+			);
+		}
+		assert.match(
+			mounted.text(),
+			new RegExp(`${SPAM_IN_A + SPAM_IN_B}\\s*results from Spam`),
+			"the offer stated one account's share instead of the total",
+		);
+	});
+
+	it("makes no offer when every junk folder counted zero", async () => {
+		const mounted = await mount({ [JUNK_A]: 0, [JUNK_B]: 0 });
+		await mounted.waitFor(
+			() => mounted.text().includes("Invoice 0"),
+			"the brief to render its matches",
+		);
+
+		assert.ok(
+			!mounted.text().includes("from Spam"),
+			"the offer stood over a search that reaches no spam",
+		);
+	});
+
+	// Summing only the folders that answered would state a figure that is exact
+	// in form and short in fact, and nothing on screen tells the two apart.
+	it("states no number when a junk folder went uncounted", async () => {
+		const mounted = await mount({
+			[JUNK_A]: SPAM_IN_A,
+			[JUNK_B]: undefined,
+		});
+		await mounted.waitFor(
+			() => mounted.text().includes("from Spam"),
+			"the Spam offer to stand",
+		);
+
+		assert.match(mounted.text(), /Results from Spam/);
+		assert.doesNotMatch(
+			mounted.text(),
+			new RegExp(`${SPAM_IN_A}\\s*results from Spam`),
+		);
+	});
+});

package/src/hooks/useSpamMatchCounts.ts

@@ -0,0 +1,102 @@
+/**
+ * How much of a search sits in Spam: one `listAllThreads` count per junk folder
+ * the search reached, under the search's own criteria.
+ *
+ * One request per folder rather than one for all of them, because the scope
+ * parameter names a single mailbox — and because the offer needs the folders
+ * apart as well as together: the sum is what it states, the largest is where its
+ * button goes. Accounts have one junk folder each, so this is one request per
+ * account and it is issued when the committed criteria change, never on a
+ * keystroke.
+ *
+ * `accountId` rides along on the criteria whenever the account pill is set, and
+ * the server intersects the two scopes: a junk folder of another account counts
+ * nothing. That is what keeps the sum the size of the list the reader is looking
+ * at rather than of every account they have.
+ *
+ * A count that has not arrived, failed, or came back absent is `unknown` for
+ * that folder, and `spamOfferFromCounts` turns any one of those into an unknown
+ * total. Nothing here substitutes a page length for a count the server did not
+ * give (#313).
+ *
+ * A failure is reported apart from the rest, because the three are not the same
+ * answer: a folder that could not be counted has not said it holds nothing, and
+ * an offer that vanished on a failed request is indistinguishable from a search
+ * that reaches no spam. These queries carry no `meta.softError` and must not:
+ * a 401 or 403 here escalates on the fail-fast contract (`shouldEscalate`,
+ * #1059) and puts the reader in front of the signed-out surface, which is the
+ * one thing a read must never answer with an empty result.
+ */
+import { unifiedThreadOperationsListAllThreadsQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { unifiedThreadOperationsListAllThreads } from "@remit/api-http-client/sdk.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import type { BriefSearchCriteria } from "@/hooks/useBriefSections";
+import { toResultCount } from "@/lib/result-count";
+import type { SpamMailboxCount } from "@/lib/spam-offer";
+
+/** Half a minute, matching the searched brief's own rows. */
+const SPAM_COUNT_STALE_TIME_MS = 30_000;
+
+const UNCOUNTED: SpamMailboxCount["count"] = { kind: "unknown" };
+
+export interface UseSpamMatchCountsOptions {
+	/** The committed search, exactly as the rows beneath the offer were asked for. */
+	criteria: BriefSearchCriteria;
+	/** Every junk folder in the search's scope, in a stable order. */
+	junkMailboxIds: readonly string[];
+	/**
+	 * Whether a count is worth asking for. False while the view carries a term
+	 * the request cannot express — the server would count a wider set than the
+	 * list shows — and every folder reports no number.
+	 */
+	enabled: boolean;
+}
+
+// No `limit` and no cursor: the count is a property of the criteria, so no page
+// of mail is paid for and no expansion can ask for it again.
+const spamCountQuery = (criteria: BriefSearchCriteria, mailboxId: string) => ({
+	...criteria,
+	mailboxId,
+	order: "desc" as const,
+	count: true,
+	results: false,
+});
+
+export function useSpamMatchCounts({
+	criteria,
+	junkMailboxIds,
+	enabled,
+}: UseSpamMatchCountsOptions): SpamMailboxCount[] {
+	const countQueries = useQueries({
+		queries: junkMailboxIds.map((mailboxId) => {
+			const query = spamCountQuery(criteria, mailboxId);
+			return {
+				queryKey: unifiedThreadOperationsListAllThreadsQueryKey({ query }),
+				queryFn: async () => {
+					const { data } = await unifiedThreadOperationsListAllThreads({
+						query,
+						throwOnError: true,
+					});
+					return data;
+				},
+				enabled,
+				staleTime: SPAM_COUNT_STALE_TIME_MS,
+			};
+		}),
+	});
+
+	return useMemo(
+		() =>
+			junkMailboxIds.map((mailboxId, index) => ({
+				mailboxId,
+				// `enabled` gates the request, not the cache: an uncounted view must
+				// not state the number an earlier, differently-scoped one left behind.
+				count: enabled
+					? toResultCount(countQueries[index]?.data?.count)
+					: UNCOUNTED,
+				failed: enabled ? (countQueries[index]?.isError ?? false) : false,
+			})),
+		[junkMailboxIds, countQueries, enabled],
+	);
+}

package/src/lib/result-folder.ts

@@ -60,6 +60,22 @@ export function buildResultFolderIndex(
 	return index;
 }
 
+/**
+ * Every junk folder the index knows, in index order.
+ *
+ * The same `\Junk` appointment that holds a row out of a global search, read
+ * the other way round: these are the folders whose contents the Spam offer
+ * counts. Order is the accounts' own, so the offer's destination does not move
+ * between renders (#313).
+ */
+export function junkMailboxIds(folders: ResultFolderIndex): string[] {
+	const ids: string[] = [];
+	for (const [mailboxId, folder] of folders) {
+		if (folder.role === "junk") ids.push(mailboxId);
+	}
+	return ids;
+}
+
 export interface ResolvedResultFolder {
 	mailboxId?: string;
 	folder?: ResultFolder;

package/src/lib/spam-offer.test.ts

@@ -1,84 +1,192 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import type { SearchResult } from "@remit/ui";
-import { spamOfferForResults } from "./spam-offer";
-
-const row = (
-	id: string,
-	mailboxId: string,
-	role?: "junk" | "inbox",
-): SearchResult => ({
-	id,
-	sender: "Someone",
-	subject: "Subject",
-	snippet: "",
-	date: "",
+import { type SpamMailboxCount, spamOfferFromCounts } from "./spam-offer";
+
+const exact = (mailboxId: string, value: number): SpamMailboxCount => ({
+	mailboxId,
+	count: { kind: "exact", value },
+	failed: false,
+});
+
+const uncounted = (mailboxId: string): SpamMailboxCount => ({
+	mailboxId,
+	count: { kind: "unknown" },
+	failed: false,
+});
+
+const errored = (mailboxId: string): SpamMailboxCount => ({
 	mailboxId,
-	...(role ? { folder: { role } } : {}),
+	count: { kind: "unknown" },
+	failed: true,
+});
+
+/** The loaded page held no junk row of its own. */
+const NO_PAGE_ROWS = { pageRowsByMailbox: new Map<string, number>() };
+
+const pageRows = (
+	entries: Record<string, number>,
+): { pageRowsByMailbox: ReadonlyMap<string, number> } => ({
+	pageRowsByMailbox: new Map(Object.entries(entries)),
 });
 
-describe("spamOfferForResults", () => {
-	it("makes no offer when nothing came from Spam", () => {
+describe("spamOfferFromCounts", () => {
+	it("makes no offer when there is no junk folder to count", () => {
+		assert.equal(spamOfferFromCounts([], NO_PAGE_ROWS), undefined);
+	});
+
+	it("makes no offer when every junk folder counted zero", () => {
 		assert.equal(
-			spamOfferForResults([row("1", "mb-inbox", "inbox"), row("2", "mb-a")]),
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 0), exact("mb-junk-b", 0)],
+				NO_PAGE_ROWS,
+			),
 			undefined,
 		);
 	});
 
-	it("counts the spam rows and names their mailbox", () => {
+	it("states the server's count for the one junk folder", () => {
+		assert.deepEqual(
+			spamOfferFromCounts([exact("mb-junk", 42)], NO_PAGE_ROWS),
+			{
+				mailboxId: "mb-junk",
+				count: { kind: "exact", value: 42 },
+			},
+		);
+	});
+
+	it("sums every junk folder, so several accounts read as one number", () => {
+		assert.deepEqual(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 3), exact("mb-junk-b", 7), exact("mb-junk-c", 2)],
+				NO_PAGE_ROWS,
+			),
+			{ mailboxId: "mb-junk-b", count: { kind: "exact", value: 12 } },
+		);
+	});
+
+	it("sends the reader to the junk folder holding the most matches", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 1), exact("mb-junk-b", 9)],
+				NO_PAGE_ROWS,
+			)?.mailboxId,
+			"mb-junk-b",
+		);
+	});
+
+	it("breaks a tie on folder order, so the destination does not flip", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 4), exact("mb-junk-b", 4)],
+				NO_PAGE_ROWS,
+			)?.mailboxId,
+			"mb-junk-a",
+		);
+	});
+
+	it("states no number when one junk folder went uncounted", () => {
+		// Summing only the folders that answered would state a figure that is exact
+		// in form and short in fact.
 		assert.deepEqual(
-			spamOfferForResults([
-				row("1", "mb-inbox", "inbox"),
-				row("2", "mb-junk", "junk"),
-				row("3", "mb-junk", "junk"),
-			]),
-			{ mailboxId: "mb-junk", count: 2 },
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 5), uncounted("mb-junk-b")],
+				NO_PAGE_ROWS,
+			),
+			{ mailboxId: "mb-junk-a", count: { kind: "unknown" } },
+		);
+	});
+
+	it("stands down when nothing is known and the page held no spam either", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[uncounted("mb-junk-a"), uncounted("mb-junk-b")],
+				NO_PAGE_ROWS,
+			),
+			undefined,
 		);
 	});
 
-	it("targets the Spam folder with the most matches when accounts compete", () => {
+	// A failed count is not a folder saying it holds nothing. Dropping the offer
+	// on one would make a lapsed session look exactly like a clean search.
+	it("keeps the offer when a count request failed", () => {
 		assert.deepEqual(
-			spamOfferForResults([
-				row("1", "mb-junk-a", "junk"),
-				row("2", "mb-junk-b", "junk"),
-				row("3", "mb-junk-b", "junk"),
-			]),
-			{ mailboxId: "mb-junk-b", count: 2 },
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 0), errored("mb-junk-b")],
+				NO_PAGE_ROWS,
+			),
+			{ mailboxId: "mb-junk-b", count: { kind: "unknown" } },
 		);
 	});
 
-	it("breaks a tie on result order, so the offer does not flip", () => {
+	it("does not read an uncounted folder as an empty one", () => {
 		assert.deepEqual(
-			spamOfferForResults([
-				row("1", "mb-junk-a", "junk"),
-				row("2", "mb-junk-b", "junk"),
-			]),
-			{ mailboxId: "mb-junk-a", count: 1 },
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 0), uncounted("mb-junk-b")],
+				pageRows({ "mb-junk-b": 1 }),
+			),
+			{ mailboxId: "mb-junk-b", count: { kind: "unknown" } },
+		);
+	});
+});
+
+describe("spamOfferFromCounts destination", () => {
+	// The regression: with counts switched off, every folder is `unknown` and the
+	// destination fell to whichever folder happened to be first. Two accounts,
+	// every held-out row in B's Spam, and the button opened A's — "No matches"
+	// over mail the list was holding out on the very same screen.
+	it("follows the page's junk rows when no folder was counted", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[uncounted("mb-junk-a"), uncounted("mb-junk-b")],
+				pageRows({ "mb-junk-b": 3 }),
+			)?.mailboxId,
+			"mb-junk-b",
+		);
+	});
+
+	// An exact zero is the one folder known to hold nothing, so it is the one
+	// destination guaranteed to show an empty list — below a folder that simply
+	// has not answered.
+	it("never sends the reader to a folder that counted zero", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 0), uncounted("mb-junk-b"), errored("mb-junk-c")],
+				NO_PAGE_ROWS,
+			)?.mailboxId,
+			"mb-junk-b",
 		);
 	});
 
-	it("picks a destination without claiming to have counted every account", () => {
-		// Three spam rows across two accounts: the destination is the bigger folder,
-		// and its share is 2 — deliberately not the total, which the results list
-		// states for itself so the banner cannot under-report.
-		const offer = spamOfferForResults([
-			row("1", "mb-junk-a", "junk"),
-			row("2", "mb-junk-b", "junk"),
-			row("3", "mb-junk-b", "junk"),
-		]);
-		assert.equal(offer?.mailboxId, "mb-junk-b");
-		assert.equal(offer?.count, 2);
+	it("prefers a counted match over the folder the page's rows came from", () => {
+		assert.equal(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 9), uncounted("mb-junk-b")],
+				pageRows({ "mb-junk-b": 4 }),
+			)?.mailboxId,
+			"mb-junk-a",
+		);
+	});
+
+	// The mailbox lists are still loading, or the folder arrived after the count
+	// requests went out. Its rows are already held out of the list, so it has to
+	// be reachable.
+	it("offers a junk folder the page names and the counts do not", () => {
+		assert.deepEqual(spamOfferFromCounts([], pageRows({ "mb-junk-late": 2 })), {
+			mailboxId: "mb-junk-late",
+			count: { kind: "unknown" },
+		});
 	});
 
-	it("ignores a spam row that carries no mailbox to navigate to", () => {
-		const orphan: SearchResult = {
-			id: "1",
-			sender: "Someone",
-			subject: "Subject",
-			snippet: "",
-			date: "",
-			folder: { role: "junk" },
-		};
-		assert.equal(spamOfferForResults([orphan]), undefined);
+	// A count that says nothing over a page that is holding junk rows is stale by
+	// up to its half-minute. The rows are on screen; the offer stands and states
+	// no figure rather than "0 results from Spam".
+	it("states no number when an exact zero contradicts the page's rows", () => {
+		assert.deepEqual(
+			spamOfferFromCounts(
+				[exact("mb-junk-a", 0), exact("mb-junk-b", 0)],
+				pageRows({ "mb-junk-b": 2 }),
+			),
+			{ mailboxId: "mb-junk-b", count: { kind: "unknown" } },
+		);
 	});
 });

package/src/lib/spam-offer.ts

@@ -1,37 +1,163 @@
 /**
- * Where taking the Spam offer lands.
+ * The Spam offer: how much of a search sits in Spam, and where taking the offer
+ * lands.
  *
- * Scoping is a route and a route names one mailbox, so the offer has to pick a
- * single Spam folder even when several accounts matched; it picks the one
- * holding the most matches. `count` is that folder's share, used only to choose
- * between folders — the banner states the full number of rows held out, which
- * the results list counts for itself.
+ * Both answers come from one server count per junk folder the search reached
+ * (`useSpamMatchCounts`). The number is their sum, because a search spans every
+ * account and every account has its own Spam folder — "N in Spam" that named
+ * one folder's share would be smaller than the mail the phrase describes.
+ *
+ * The destination is a single folder even so: scoping is a route and a route
+ * names one mailbox. It is the folder holding the most matches, which is the
+ * best a single click can do, and `SpamResultsOffer` says where the button goes
+ * rather than promising to show every match. Where no count ranks the folders —
+ * a short query, a residual token, a failed request — the page's own junk rows
+ * do, because they are the only evidence left of where the mail is.
+ *
+ * This used to group the search results the header held and count each group.
+ * That array is a page, so the figure was a count of the loaded window offered
+ * as a count of a mailbox: a Spam match below the page was missing from it, and
+ * the number climbed as further pages loaded (#313).
+ *
+ * A folder whose count did not arrive makes the total `unknown`. Summing the
+ * ones that did would state a figure that is exact in form and short in fact,
+ * and nothing distinguishes it from a true one on screen.
  */
-import { partitionSpamResults, type SearchResult } from "@remit/ui";
+import type { ResultCount } from "@remit/ui";
+
+export interface SpamMailboxCount {
+	mailboxId: string;
+	count: ResultCount;
+	/**
+	 * The count request failed. Distinct from `unknown`, which also covers a
+	 * request still in flight or one nobody made: a failure is a folder that
+	 * could not answer, and it must never read as a folder holding nothing.
+	 */
+	failed: boolean;
+}
 
 export interface SpamOffer {
+	/** The junk folder "Go to Spam" scopes the search to. */
+	mailboxId: string;
+	/** Matches across every junk folder, or `unknown` if any went uncounted. */
+	count: ResultCount;
+}
+
+export interface SpamOfferEvidence {
+	/**
+	 * Junk rows the loaded page held, per junk folder.
+	 *
+	 * Never the number the offer states — a page is a page. It is what says
+	 * spam was reached at all while the counts are absent, and, crucially, WHICH
+	 * folder the reader is being sent to: with no count to rank the folders by,
+	 * the rows on screen are the only evidence of where the mail is, and a
+	 * "Go to Spam" that lands on the wrong account's folder shows "No matches"
+	 * over mail this very page is holding out.
+	 */
+	pageRowsByMailbox: ReadonlyMap<string, number>;
+}
+
+interface Candidate {
 	mailboxId: string;
-	count: number;
+	count: ResultCount;
+	failed: boolean;
+	pageRows: number;
 }
 
-export function spamOfferForResults(
-	results: readonly SearchResult[],
+/**
+ * How good a destination a folder is, before ties are broken.
+ *
+ * A counted match is the best evidence; junk rows on the page are the next
+ * best, and they outrank the folder's own count because the rows are on screen
+ * while the count may be half a minute old. A folder that answered zero and
+ * shows no row ranks LAST — it is the only one known to hold nothing, so
+ * sending the reader there is the one choice guaranteed to show an empty list.
+ */
+const tier = (candidate: Candidate): number => {
+	if (candidate.count.kind === "exact" && candidate.count.value > 0) return 3;
+	if (candidate.pageRows > 0) return 2;
+	return candidate.count.kind === "unknown" ? 1 : 0;
+};
+
+const exactValue = (candidate: Candidate): number =>
+	candidate.count.kind === "exact" ? candidate.count.value : 0;
+
+/** Strict, so equal candidates leave the earlier one standing. */
+const isBetterDestination = (
+	candidate: Candidate,
+	standing: Candidate,
+): boolean => {
+	if (tier(candidate) !== tier(standing)) {
+		return tier(candidate) > tier(standing);
+	}
+	if (exactValue(candidate) !== exactValue(standing)) {
+		return exactValue(candidate) > exactValue(standing);
+	}
+	return candidate.pageRows > standing.pageRows;
+};
+
+/**
+ * The offer these per-folder counts support, or none.
+ *
+ * None when every junk folder answered and they sum to zero with no junk row on
+ * the page either — the search reaches no spam. Anything else is an offer: rows
+ * held out of the list are always offered a way back, because hiding mail
+ * without one is worse than hiding a number.
+ *
+ * The figure is the sum, and only when every folder answered. One folder
+ * missing takes it off, because summing the folders that replied states a
+ * number exact in form and short in fact. A sum of zero over a page that is
+ * holding junk rows takes it off too: the two disagree, so neither is stated.
+ */
+export function spamOfferFromCounts(
+	counts: readonly SpamMailboxCount[],
+	{ pageRowsByMailbox }: SpamOfferEvidence,
 ): SpamOffer | undefined {
-	const { spam } = partitionSpamResults([...results]);
-	const countByMailbox = new Map<string, number>();
-	for (const result of spam) {
-		if (!result.mailboxId) continue;
-		countByMailbox.set(
-			result.mailboxId,
-			(countByMailbox.get(result.mailboxId) ?? 0) + 1,
-		);
+	const candidates: Candidate[] = counts.map((entry) => ({
+		...entry,
+		pageRows: pageRowsByMailbox.get(entry.mailboxId) ?? 0,
+	}));
+	// A folder the page names but the counts do not — the mailbox lists are still
+	// loading, or the folder arrived after the requests went out. Its rows are
+	// already being held out of the list, so it has to be reachable.
+	for (const [mailboxId, pageRows] of pageRowsByMailbox) {
+		if (pageRows <= 0) continue;
+		if (candidates.some((entry) => entry.mailboxId === mailboxId)) continue;
+		candidates.push({
+			mailboxId,
+			count: { kind: "unknown" },
+			failed: false,
+			pageRows,
+		});
+	}
+
+	const first = candidates[0];
+	if (!first) return undefined;
+
+	let total = 0;
+	let everyFolderAnswered = true;
+	let best = first;
+	for (const candidate of candidates) {
+		if (candidate.count.kind === "unknown") everyFolderAnswered = false;
+		else total += candidate.count.value;
+		if (isBetterDestination(candidate, best)) best = candidate;
 	}
 
-	let offer: SpamOffer | undefined;
-	// Insertion order is result order, so the first-seen folder wins a tie and
-	// the offer does not flip between renders of the same results.
-	for (const [mailboxId, count] of countByMailbox) {
-		if (!offer || count > offer.count) offer = { mailboxId, count };
+	const pageHeldSpam = candidates.some((candidate) => candidate.pageRows > 0);
+	const anyFailed = candidates.some((candidate) => candidate.failed);
+	if (total === 0 && !pageHeldSpam && (everyFolderAnswered || !anyFailed)) {
+		return undefined;
 	}
-	return offer;
+
+	// The count and the page disagree: an exact zero under rows the list is
+	// holding out. The rows are on screen and the count is up to half a minute
+	// old, so the offer stands and states nothing.
+	const contradicted = everyFolderAnswered && total === 0 && pageHeldSpam;
+	return {
+		mailboxId: best.mailboxId,
+		count:
+			everyFolderAnswered && !contradicted
+				? { kind: "exact", value: total }
+				: { kind: "unknown" },
+	};
 }