@remit/web-client 0.0.225 → 0.0.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.225",
+  "version": "0.0.227",
   "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/layout/MailTopBar.tsx

@@ -8,6 +8,7 @@
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { RefreshButton, ShellTopBar, shortcutHintForAction } from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
@@ -15,6 +16,10 @@ import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
+import {
+	invalidateThreadListQueries,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 import { useGoToSection, useOpenCompose } from "@/routing";
 
 interface MailTopBarProps {
@@ -22,8 +27,14 @@ interface MailTopBarProps {
 }
 
 export function MailTopBar({ accounts }: MailTopBarProps) {
-	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
-		useMailContext();
+	const {
+		searchInput,
+		onSearchChange,
+		onSearchClear,
+		onSearchClearQuery,
+		resultFolderIndex,
+	} = useMailContext();
+	const queryClient = useQueryClient();
 	const goToSection = useGoToSection();
 	const compose = useOpenCompose();
 	const { scope, clearScope } = useSearchScope(accounts);
@@ -43,7 +54,17 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 		state: refreshState,
 		errorMessage: refreshError,
 		refresh,
-	} = useRefreshControl(allAccountIds);
+	} = useRefreshControl(allAccountIds, {
+		// Without this the bar's refresh confirmed against a thread list it
+		// never reloaded: the sync landed, the button ticked, and the mail it
+		// fetched stayed off screen until something else invalidated the list.
+		// Every open account's folders, so whichever list is on screen reloads.
+		onSettled: () =>
+			invalidateThreadListQueries(
+				queryClient,
+				threadListCacheKeys(resultFolderIndex.keys()),
+			),
+	});
 
 	return (
 		<ShellTopBar

package/src/components/settings/QuarantinePanel.tsx

@@ -7,6 +7,7 @@
  * failure to read it at all. None of them is an empty panel.
  */
 import { meOperationsListQuarantineOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
 	QuarantineBugDialog,
@@ -17,11 +18,15 @@ import {
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { Bug } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { useAccountDelimiters } from "@/hooks/useAccountDelimiters";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { toQuarantineEntry } from "@/lib/quarantine-entries";
 
+/** Stable identity, so an empty list does not rebuild the memos below. */
+const EMPTY_WIRE_ENTRIES: readonly RemitImapQuarantineResponse[] = [];
+
 function openIssue(url: string): void {
 	window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -126,9 +131,23 @@ export function QuarantinePanel() {
 		meOperationsListQuarantineOptions(),
 	);
 
+	const wireEntries = data?.entries ?? EMPTY_WIRE_ENTRIES;
+	const accountIds = useMemo(
+		() => [...new Set(wireEntries.map((entry) => entry.accountId))],
+		[wireEntries],
+	);
+	const delimiters = useAccountDelimiters(accountIds);
+	const entries = useMemo(
+		() =>
+			wireEntries.map((entry) =>
+				toQuarantineEntry(entry, delimiters.get(entry.accountId) ?? "/"),
+			),
+		[wireEntries, delimiters],
+	);
+
 	return (
 		<QuarantinePanelView
-			entries={(data?.entries ?? []).map(toQuarantineEntry)}
+			entries={entries}
 			isPending={isPending}
 			error={error}
 		/>

package/src/hooks/useAccountDelimiters.ts

@@ -0,0 +1,41 @@
+/**
+ * The hierarchy separator each account's own server reports, for surfaces that
+ * hold a provider path but not the mailbox row it came from — quarantine, so
+ * far. Fans out the same per-account mailbox-list query as
+ * `useResultFolderIndex` (cached forever, react-query dedupes the identical key
+ * across call sites) and keeps only the delimiter.
+ */
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { folderDelimiter } from "@/lib/move-options";
+
+/**
+ * Hoisted so `useQueries` treats this as a memo rather than a per-render
+ * reduce — see `useResultFolderIndex`.
+ */
+const combineDelimiters = (
+	results: { data?: { items: RemitImapMailboxResponse[] } }[],
+): string[] =>
+	results.map((result) => folderDelimiter(result.data?.items ?? []));
+
+export function useAccountDelimiters(
+	accountIds: readonly string[],
+): ReadonlyMap<string, string> {
+	const delimiters = useQueries({
+		queries: accountIds.map((accountId) => ({
+			...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+			staleTime: Infinity,
+		})),
+		combine: combineDelimiters,
+	});
+
+	return useMemo(
+		() =>
+			new Map(
+				accountIds.map((accountId, i) => [accountId, delimiters[i] ?? "/"]),
+			),
+		[accountIds, delimiters],
+	);
+}

package/src/hooks/useRefreshControl.test.ts

@@ -1,6 +1,10 @@
 import assert from "node:assert/strict";
 import { describe, test } from "node:test";
-import { type SyncStatusReading, waitForSettled } from "./useRefreshControl.js";
+import {
+	inboxSyncedAt,
+	type SyncStatusReading,
+	waitForSettled,
+} from "./useRefreshControl.js";
 
 const BASELINE = 1_700_000_000_000;
 const LATER = BASELINE + 5_000;
@@ -127,3 +131,157 @@ describe("waitForSettled", () => {
 		assert.deepEqual(outcome, { accountId: "a-1", message: "signed out" });
 	});
 });
+
+const inbox = (lastSyncedAt: number) => ({
+	fullPath: "INBOX",
+	lastSyncedAt,
+});
+const junk = (lastSyncedAt: number) => ({
+	fullPath: "Junk",
+	lastSyncedAt,
+});
+
+describe("inboxSyncedAt", () => {
+	test("reads the INBOX stamp whatever case the server spells it in", () => {
+		assert.equal(
+			inboxSyncedAt({
+				mailboxes: [junk(LATER), { fullPath: "Inbox", lastSyncedAt: BASELINE }],
+			}),
+			BASELINE,
+		);
+	});
+
+	test("is zero for an account with no INBOX or no stamp yet", () => {
+		assert.equal(inboxSyncedAt({ mailboxes: [junk(LATER)] }), 0);
+		assert.equal(inboxSyncedAt({ mailboxes: [{ fullPath: "INBOX" }] }), 0);
+		assert.equal(inboxSyncedAt({}), 0);
+	});
+});
+
+describe("waitForSettled inbox handoff", () => {
+	// A round is every folder in queue order, but the mail somebody pressed
+	// refresh for is in their inbox. Waiting for the whole round meant the new
+	// mail sat unshown while Junk and Trash went by.
+	test("announces the inbox while the round is still running", async () => {
+		const announced: number[] = [];
+		const { state, readStatus } = scriptedReader([
+			{
+				syncPhase: "syncing_inbox",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(BASELINE)],
+			},
+			{
+				syncPhase: "syncing_others",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+			{
+				syncPhase: "syncing_others",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+			{
+				syncPhase: "complete",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+		]);
+
+		const outcome = await waitForSettled({
+			accountId: "a-1",
+			readStatus,
+			baselineLastSyncAt: BASELINE,
+			baselineInboxSyncedAt: BASELINE,
+			onInboxSynced: () => announced.push(state.reads),
+			deadline: Date.now() + 10_000,
+			pollMs: 0,
+		});
+
+		assert.equal(outcome, undefined);
+		// Second reading, two readings before the round confirmed.
+		assert.deepEqual(announced, [2]);
+		assert.equal(state.reads, 4);
+	});
+
+	test("announces the inbox once, not on every poll", async () => {
+		let announced = 0;
+		const { readStatus } = scriptedReader([
+			{
+				syncPhase: "syncing_others",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+			{
+				syncPhase: "syncing_others",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+			{
+				syncPhase: "complete",
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			},
+		]);
+
+		await waitForSettled({
+			accountId: "a-1",
+			readStatus,
+			baselineLastSyncAt: BASELINE,
+			baselineInboxSyncedAt: BASELINE,
+			onInboxSynced: () => {
+				announced += 1;
+			},
+			deadline: Date.now() + 10_000,
+			pollMs: 0,
+		});
+
+		assert.equal(announced, 1);
+	});
+
+	// The caller already treats a settled round as the confirmed state and
+	// reloads there, so announcing on the same reading would double the work.
+	test("does not announce when the round settles first", async () => {
+		let announced = 0;
+
+		await waitForSettled({
+			accountId: "a-1",
+			readStatus: async () => ({
+				syncPhase: "complete" as const,
+				lastSyncAt: LATER,
+				mailboxes: [inbox(LATER)],
+			}),
+			baselineLastSyncAt: BASELINE,
+			baselineInboxSyncedAt: BASELINE,
+			onInboxSynced: () => {
+				announced += 1;
+			},
+			deadline: Date.now() + 10_000,
+			pollMs: 0,
+		});
+
+		assert.equal(announced, 0);
+	});
+
+	// A folder other than INBOX syncing is not the mail being waited for.
+	test("does not announce on another folder's stamp moving", async () => {
+		let announced = 0;
+
+		await waitForSettled({
+			accountId: "a-1",
+			readStatus: async () => ({
+				syncPhase: "syncing_others" as const,
+				lastSyncAt: LATER,
+				mailboxes: [inbox(BASELINE), junk(LATER)],
+			}),
+			baselineLastSyncAt: BASELINE,
+			baselineInboxSyncedAt: BASELINE,
+			onInboxSynced: () => {
+				announced += 1;
+			},
+			deadline: Date.now() - 1,
+			pollMs: 0,
+		});
+
+		assert.equal(announced, 0);
+	});
+});

package/src/hooks/useRefreshControl.ts

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { isSyncingPhase } from "@/hooks/useInitialSyncProgress";
 import { shouldEscalate } from "@/lib/error-classifier";
 import { reportFatalError } from "@/lib/fatal-error";
+import { startHotSyncWindow } from "@/lib/hot-sync-window";
 import { useMailFreshness } from "@/lib/mail-freshness";
 import { useTelemetry } from "@/lib/telemetry-context";
 
@@ -68,18 +69,35 @@ export interface AccountOutcome {
 	message?: string;
 }
 
-/** The two fields of `getSyncStatus` that identify a round, named so the wait
- * below can be driven from a scripted sequence of readings. */
+/** The fields of `getSyncStatus` this wait reads, named so it can be driven
+ * from a scripted sequence of readings. */
 export interface SyncStatusReading {
 	syncPhase?: RemitImapSyncPhase;
 	lastSyncAt?: number;
+	mailboxes?: readonly { fullPath?: string; lastSyncedAt?: number }[];
 }
 
+/**
+ * The account's INBOX stamp, or 0 when the account has no INBOX or has never
+ * synced one. `getSyncStatus` reports `lastSyncedAt` per mailbox, which is what
+ * lets the wait answer "the inbox is current" ahead of "the round is done".
+ */
+export const inboxSyncedAt = (reading: SyncStatusReading): number =>
+	reading.mailboxes?.find(
+		(mailbox) => mailbox.fullPath?.toUpperCase() === "INBOX",
+	)?.lastSyncedAt ?? 0;
+
 export interface WaitForSettledOptions {
 	accountId: string;
 	readStatus: () => Promise<SyncStatusReading>;
 	/** `lastSyncAt` as it read immediately before this refresh triggered. */
 	baselineLastSyncAt: number;
+	/** The INBOX `lastSyncedAt` from that same pre-trigger reading. */
+	baselineInboxSyncedAt?: number;
+	/** Called at most once, the moment INBOX's own stamp passes the baseline
+	 * while the round is still running — never after the round has settled,
+	 * which the caller already treats as the confirmed state. */
+	onInboxSynced?: () => void;
 	deadline: number;
 	pollMs?: number;
 }
@@ -101,6 +119,12 @@ export interface WaitForSettledOptions {
  * still shows the previous round — including a previous round's `error` phase,
  * which is why that phase only speaks once the stamp has moved.
  *
+ * A round is the whole account — every folder, in queue order — but the mail
+ * a person pressed refresh for is in their inbox. `onInboxSynced` fires the
+ * moment that one mailbox's own stamp passes the baseline, so the list on
+ * screen reloads then rather than after Junk and Trash have also gone by. The
+ * round-level stamp still decides the button's confirmed state.
+ *
  * Read-only (`getSyncStatus`, no IMAP call, no queue write), so waiting costs
  * a handful of cheap GETs — never a refetch of the account's own message
  * list.
@@ -109,9 +133,12 @@ export const waitForSettled = async ({
 	accountId,
 	readStatus,
 	baselineLastSyncAt,
+	baselineInboxSyncedAt = 0,
+	onInboxSynced,
 	deadline,
 	pollMs = REFRESH_POLL_MS,
 }: WaitForSettledOptions): Promise<AccountOutcome | undefined> => {
+	let inboxAnnounced = false;
 	for (;;) {
 		const outcome = await readStatus()
 			.then((data) => ({ ok: true as const, data }))
@@ -127,6 +154,13 @@ export const waitForSettled = async ({
 			}
 			return undefined;
 		}
+		if (
+			!inboxAnnounced &&
+			inboxSyncedAt(outcome.data) > baselineInboxSyncedAt
+		) {
+			inboxAnnounced = true;
+			onInboxSynced?.();
+		}
 		if (Date.now() >= deadline) {
 			return { accountId, message: "Refresh is taking longer than usual" };
 		}
@@ -149,11 +183,13 @@ const refreshOneAccount = async (
 	telemetry: { recordEvent: (name: string) => void },
 	accountId: string,
 	deadline: number,
+	onInboxSynced: (accountId: string) => void,
 ): Promise<AccountResult> => {
 	const baseline = await fetchStatus(queryClient, accountId)
 		.then((data) => ({
 			ok: true as const,
 			lastSyncAt: data.lastSyncAt ?? 0,
+			inboxSyncedAt: inboxSyncedAt(data),
 		}))
 		.catch((error: unknown) => ({ ok: false as const, error }));
 	if (!baseline.ok) {
@@ -186,6 +222,8 @@ const refreshOneAccount = async (
 		accountId,
 		readStatus: () => fetchStatus(queryClient, accountId),
 		baselineLastSyncAt: baseline.lastSyncAt,
+		baselineInboxSyncedAt: baseline.inboxSyncedAt,
+		onInboxSynced: () => onInboxSynced(accountId),
 		deadline,
 	});
 	if (settled)
@@ -194,11 +232,14 @@ const refreshOneAccount = async (
 };
 
 export interface UseRefreshControlOptions {
-	/** Called once every enqueued account's sync round has settled, alongside
-	 * the unconditional invalidation of each enqueued account's own
-	 * mailbox-list query — the caller's chance to invalidate whatever
-	 * view-specific query (a mailbox's thread list, the brief's unified list)
-	 * the sync may have changed. */
+	/** The caller's chance to invalidate whatever view-specific query (a
+	 * mailbox's thread list, the brief's unified list) the sync may have
+	 * changed, alongside the invalidation of the account's own mailbox-list
+	 * query.
+	 *
+	 * Called more than once per press: once per account the moment its INBOX
+	 * is current, and again once its whole round has settled. It must
+	 * therefore be idempotent — an invalidation is. */
 	onSettled?: () => void;
 }
 
@@ -253,11 +294,33 @@ export const useRefreshControl = (
 		setState("refreshing");
 		setErrorMessage(undefined);
 
+		startHotSyncWindow();
+
+		// The account's own lists, reloaded. Called once as soon as that
+		// account's INBOX is current and again when its round confirms: the
+		// first is what puts the new mail on screen without waiting for Junk
+		// and Trash, the second is the settled state.
+		const showAccount = (accountId: string): void => {
+			if (runIdRef.current !== runId) return;
+			queryClient.invalidateQueries({
+				queryKey: mailboxOperationsListMailboxesQueryKey({
+					path: { accountId },
+				}),
+			});
+			optionsRef.current.onSettled?.();
+		};
+
 		void (async () => {
 			const deadline = Date.now() + REFRESH_TIMEOUT_MS;
 			const results = await Promise.all(
 				ids.map((accountId) =>
-					refreshOneAccount(queryClient, telemetry, accountId, deadline),
+					refreshOneAccount(
+						queryClient,
+						telemetry,
+						accountId,
+						deadline,
+						showAccount,
+					),
 				),
 			);
 			if (runIdRef.current !== runId) return;
@@ -265,15 +328,8 @@ export const useRefreshControl = (
 			const enqueued = results
 				.filter((result) => result.enqueued)
 				.map((result) => result.accountId);
-			for (const accountId of enqueued) {
-				queryClient.invalidateQueries({
-					queryKey: mailboxOperationsListMailboxesQueryKey({
-						path: { accountId },
-					}),
-				});
-			}
+			for (const accountId of enqueued) showAccount(accountId);
 			if (enqueued.length > 0) {
-				optionsRef.current.onSettled?.();
 				acknowledge(enqueued);
 			}
 

package/src/hooks/useStaleAccountSync.test.ts

@@ -2,10 +2,17 @@ import assert from "node:assert/strict";
 import { afterEach, describe, test } from "node:test";
 import { ApiError } from "../lib/api.js";
 import { __resetFatalError, subscribeFatalError } from "../lib/fatal-error.js";
+import {
+	__resetHotSyncWindow,
+	HOT_POLL_INTERVAL_MS,
+	HOT_WINDOW_MS,
+	startHotSyncWindow,
+} from "../lib/hot-sync-window.js";
 import { NetworkError } from "../lib/network-error.js";
 import {
 	__peekStaleAccountSyncGuard,
 	__resetStaleAccountSyncGuard,
+	currentPollIntervalMs,
 	handleBackgroundSyncFailure,
 	hasPollIntervalElapsed,
 	MIN_POLL_INTERVAL_MS,
@@ -102,8 +109,9 @@ describe("selectStaleAccountIds", () => {
 });
 
 describe("POLL_INTERVAL_MS", () => {
-	test("defaults to 5 minutes when mailboxPollIntervalSeconds is unset in this test run", () => {
-		assert.equal(POLL_INTERVAL_MS, 5 * 60 * 1000);
+	// How stale an open tab's mail may be with nobody touching anything.
+	test("defaults to 30 seconds when mailboxPollIntervalSeconds is unset in this test run", () => {
+		assert.equal(POLL_INTERVAL_MS, 30 * 1000);
 	});
 });
 
@@ -111,19 +119,13 @@ describe("resolvePollIntervalMs", () => {
 	// This poll shares POST /sync with the refresh control, and that endpoint's
 	// triggers skip the server's per-mailbox freshness gate
 	// (MAILBOX_FRESHNESS_MS in imap-worker's sync-mailboxes fan-out). A timer is
-	// not a person: without this floor, configuring a sub-window interval turns
-	// every tick into a full folder-by-folder re-enumeration for every open
-	// account, which is exactly the fan-out storm the gate prevents. The floor
-	// is what stops a config value from reintroducing it.
-	test("never returns less than the server's freshness window", () => {
+	// not a person: every tick is a full folder-by-folder re-enumeration for
+	// every open account, so the floor is what bounds that work against a config
+	// value.
+	test("never returns less than the floor", () => {
 		assert.equal(resolvePollIntervalMs("10"), MIN_POLL_INTERVAL_MS);
-		assert.equal(resolvePollIntervalMs("59"), MIN_POLL_INTERVAL_MS);
-	});
-
-	test("matches the freshness window the fan-out gate uses", () => {
-		// Keep in step with MAILBOX_FRESHNESS_MS in
-		// packages/imap-worker/src/handlers/sync-mailboxes.ts.
-		assert.equal(MIN_POLL_INTERVAL_MS, 60_000);
+		assert.equal(resolvePollIntervalMs("29"), MIN_POLL_INTERVAL_MS);
+		assert.equal(MIN_POLL_INTERVAL_MS, 30_000);
 	});
 
 	test("honours a configured interval above the floor", () => {
@@ -131,8 +133,45 @@ describe("resolvePollIntervalMs", () => {
 	});
 
 	test("falls back to the default when unset or unparseable", () => {
-		assert.equal(resolvePollIntervalMs(undefined), 5 * 60 * 1000);
-		assert.equal(resolvePollIntervalMs("not-a-number"), 5 * 60 * 1000);
+		assert.equal(resolvePollIntervalMs(undefined), 30 * 1000);
+		assert.equal(resolvePollIntervalMs("not-a-number"), 30 * 1000);
+	});
+});
+
+describe("currentPollIntervalMs", () => {
+	afterEach(__resetHotSyncWindow);
+
+	test("is the configured ambient interval with no recent press", () => {
+		assert.equal(currentPollIntervalMs(NOW, 900_000), 900_000);
+	});
+
+	// Pressing refresh means "and keep looking": the next few minutes run on the
+	// hot cadence even where the deployment has lengthened the ambient one.
+	test("drops to the hot cadence for the whole window after a press", () => {
+		startHotSyncWindow(NOW);
+
+		assert.equal(currentPollIntervalMs(NOW, 900_000), HOT_POLL_INTERVAL_MS);
+		assert.equal(
+			currentPollIntervalMs(NOW + HOT_WINDOW_MS - 1, 900_000),
+			HOT_POLL_INTERVAL_MS,
+		);
+	});
+
+	test("falls back to ambient once the window expires", () => {
+		startHotSyncWindow(NOW);
+
+		assert.equal(currentPollIntervalMs(NOW + HOT_WINDOW_MS, 900_000), 900_000);
+		assert.equal(
+			currentPollIntervalMs(NOW + HOT_WINDOW_MS + 60_000, 900_000),
+			900_000,
+		);
+	});
+
+	// A deployment already polling faster than the hot cadence keeps its own.
+	test("never lengthens an ambient interval shorter than the hot one", () => {
+		startHotSyncWindow(NOW);
+
+		assert.equal(currentPollIntervalMs(NOW, 10_000), 10_000);
 	});
 });
 

package/src/hooks/useStaleAccountSync.ts

@@ -6,6 +6,11 @@ import pMap from "p-map";
 import { useEffect, useRef } from "react";
 import { shouldEscalate } from "@/lib/error-classifier";
 import { reportFatalError } from "@/lib/fatal-error";
+import {
+	HOT_POLL_INTERVAL_MS,
+	isHotSyncWindowActive,
+	subscribeHotSyncWindow,
+} from "@/lib/hot-sync-window";
 import { getRuntimeConfig } from "@/runtime-config";
 
 /**
@@ -14,7 +19,7 @@ import { getRuntimeConfig } from "@/runtime-config";
  */
 export const STALENESS_THRESHOLD_MS = 15 * 60 * 1000;
 
-const DEFAULT_POLL_INTERVAL_SECONDS = 5 * 60;
+const DEFAULT_POLL_INTERVAL_SECONDS = 30;
 
 const parsePositiveIntSeconds = (
 	raw: string | undefined,
@@ -26,19 +31,18 @@ const parsePositiveIntSeconds = (
 };
 
 /**
- * Floor for the poll interval, matching `MAILBOX_FRESHNESS_MS` in the
- * imap-worker's sync-mailboxes fan-out.
+ * Floor for the poll interval.
  *
  * This poll uses POST /sync, the same endpoint as a person pressing refresh,
- * and that endpoint's triggers skip the server's per-mailbox freshness gate.
- * A timer is not a person: polling faster than the gate's own window would
- * make every tick a full folder-by-folder re-enumeration for every open
- * account — the fan-out storm the gate exists to prevent, reintroduced by a
- * config value. `mailboxPollIntervalSeconds` can lengthen the interval, never
- * shorten it past this: below the window there is nothing to gain, since no
- * mailbox can have become stale in the meantime.
+ * and that endpoint's triggers skip the server's per-mailbox freshness gate
+ * (`MAILBOX_FRESHNESS_MS`, 60s). A timer is not a person: every tick is a full
+ * folder-by-folder re-enumeration for every open account, so the interval is
+ * what bounds that work. Thirty seconds is the answer to how stale an open
+ * tab's mail may be, and buys it at twice the fan-out the gate's own window
+ * would allow. `mailboxPollIntervalSeconds` can lengthen the interval, never
+ * shorten it past this.
  */
-export const MIN_POLL_INTERVAL_MS = 60 * 1000;
+export const MIN_POLL_INTERVAL_MS = 30 * 1000;
 
 /**
  * Resolve the configured poll interval, never returning less than
@@ -62,6 +66,21 @@ export const POLL_INTERVAL_MS = resolvePollIntervalMs(
 	getRuntimeConfig().mailboxPollIntervalSeconds,
 );
 
+/**
+ * The interval this tab is currently due on: the hot one while a refresh press
+ * is still recent, the configured ambient one otherwise. A deployment that has
+ * lengthened `mailboxPollIntervalSeconds` still gets the hot cadence for the
+ * few minutes after a press, which is what makes a press mean "and keep
+ * looking".
+ */
+export const currentPollIntervalMs = (
+	now: number = Date.now(),
+	ambientMs: number = POLL_INTERVAL_MS,
+): number =>
+	isHotSyncWindowActive(now)
+		? Math.min(HOT_POLL_INTERVAL_MS, ambientMs)
+		: ambientMs;
+
 /**
  * Bounded concurrency for the per-poll fan-out across open accounts —
  * mirrors `SCHEDULER_ENQUEUE_CONCURRENCY` in
@@ -186,6 +205,8 @@ const runBackgroundSync = (
  * first time MailLayout mounts in a session, then keep it fresh with a
  * recurring online poll for as long as the mail app stays open (#1251) —
  * the client-side replacement for the server's removed "online" sync tier.
+ * The poll runs on the ambient interval, or the hot one for the few minutes
+ * after somebody presses refresh, and only while the tab is visible.
  * Fire-and-forget: does not block render, and silently logs failures (this
  * is a best-effort background refresh — the user-visible UI for triggering
  * is the "Refresh mailboxes" button in Settings).
@@ -250,27 +271,48 @@ export const useStaleAccountSync = (
 		const tick = () => {
 			if (document.visibilityState === "visible") {
 				poll();
-				timeoutId = setTimeout(tick, POLL_INTERVAL_MS);
+				timeoutId = setTimeout(tick, currentPollIntervalMs());
 				return;
 			}
 			// Hidden: don't reschedule. `handleVisibilityChange` resumes the loop
 			// (with an immediate catch-up poll) once the tab is visible again.
+			// A hot window running out while the tab is away costs nothing —
+			// there is nobody watching a list to keep current.
 		};
 
 		const handleVisibilityChange = () => {
 			if (document.visibilityState !== "visible") return;
-			if (!hasPollIntervalElapsed(Date.now(), lastPollAt)) return;
+			if (
+				!hasPollIntervalElapsed(Date.now(), lastPollAt, currentPollIntervalMs())
+			) {
+				return;
+			}
 			if (timeoutId !== undefined) clearTimeout(timeoutId);
 			poll();
-			timeoutId = setTimeout(tick, POLL_INTERVAL_MS);
+			timeoutId = setTimeout(tick, currentPollIntervalMs());
+		};
+
+		// A press opens the hot window, but this loop may already be asleep on a
+		// long ambient interval — reschedule onto the hot one rather than sit
+		// out the rest of that wait. The press has just triggered its own sync,
+		// so this only moves the *next* tick: never a poll on the press itself,
+		// and never a tighter loop than the interval (POST /sync is deliberately
+		// never coalesced, #37).
+		const handleHotWindow = () => {
+			if (document.visibilityState !== "visible") return;
+			if (timeoutId !== undefined) clearTimeout(timeoutId);
+			lastPollAt = Date.now();
+			timeoutId = setTimeout(tick, currentPollIntervalMs());
 		};
 
-		timeoutId = setTimeout(tick, POLL_INTERVAL_MS);
+		timeoutId = setTimeout(tick, currentPollIntervalMs());
 		document.addEventListener("visibilitychange", handleVisibilityChange);
+		const unsubscribeHotWindow = subscribeHotSyncWindow(handleHotWindow);
 
 		return () => {
 			if (timeoutId !== undefined) clearTimeout(timeoutId);
 			document.removeEventListener("visibilitychange", handleVisibilityChange);
+			unsubscribeHotWindow();
 		};
 	}, [stableKey, queryClient]);
 };

package/src/lib/hot-sync-window.test.ts

@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, test } from "node:test";
+import {
+	__resetHotSyncWindow,
+	HOT_POLL_INTERVAL_MS,
+	HOT_WINDOW_MS,
+	isHotSyncWindowActive,
+	startHotSyncWindow,
+	subscribeHotSyncWindow,
+} from "./hot-sync-window.js";
+
+const NOW = 1_700_000_000_000;
+
+describe("hot sync window", () => {
+	afterEach(__resetHotSyncWindow);
+
+	test("is closed until somebody presses refresh", () => {
+		assert.equal(isHotSyncWindowActive(NOW), false);
+	});
+
+	test("stays open for a few minutes after a press", () => {
+		startHotSyncWindow(NOW);
+
+		assert.equal(isHotSyncWindowActive(NOW), true);
+		assert.equal(isHotSyncWindowActive(NOW + HOT_WINDOW_MS - 1), true);
+	});
+
+	test("expires on its own", () => {
+		startHotSyncWindow(NOW);
+
+		assert.equal(isHotSyncWindowActive(NOW + HOT_WINDOW_MS), false);
+		assert.equal(isHotSyncWindowActive(NOW + HOT_WINDOW_MS + 1), false);
+	});
+
+	// Someone still pressing refresh is still waiting on mail.
+	test("a second press extends the window from that press", () => {
+		startHotSyncWindow(NOW);
+		startHotSyncWindow(NOW + 60_000);
+
+		assert.equal(isHotSyncWindowActive(NOW + HOT_WINDOW_MS), true);
+		assert.equal(isHotSyncWindowActive(NOW + HOT_WINDOW_MS + 60_000), false);
+	});
+
+	// The poll loop may already be asleep on a long ambient interval when the
+	// press lands; without this it would sit out the rest of that wait before
+	// the hot cadence took effect at all.
+	test("notifies subscribers on a press, and stops after unsubscribe", () => {
+		let presses = 0;
+		const unsubscribe = subscribeHotSyncWindow(() => {
+			presses += 1;
+		});
+
+		startHotSyncWindow(NOW);
+		assert.equal(presses, 1);
+
+		unsubscribe();
+		startHotSyncWindow(NOW);
+		assert.equal(presses, 1);
+	});
+
+	test("the hot cadence is thirty seconds", () => {
+		assert.equal(HOT_POLL_INTERVAL_MS, 30_000);
+	});
+});

package/src/lib/hot-sync-window.ts

@@ -0,0 +1,48 @@
+/**
+ * A short window of faster background syncing, opened by a person pressing
+ * refresh.
+ *
+ * Pressing refresh says "I am waiting on mail", and the reply people expect is
+ * not one round but the next few minutes: a reply lands, a colleague answers,
+ * the transfer confirms. The ambient cadence alone would leave that mail up to
+ * a full interval away, so the press widens the tab's own poll for a few
+ * minutes and then lets it fall back.
+ *
+ * Module state rather than context: the press happens in the refresh control
+ * and the polling happens in `useStaleAccountSync`, two hooks with no common
+ * ancestor that owns this, and the window belongs to the tab either way.
+ */
+
+/** How long a press keeps the tab polling on the hot cadence. */
+export const HOT_WINDOW_MS = 3 * 60 * 1000;
+
+/** The cadence inside the window. Never faster: `POST /sync` skips the
+ * server's per-mailbox freshness gate, so every tick is a real folder-by-folder
+ * fan-out for every open account. */
+export const HOT_POLL_INTERVAL_MS = 30 * 1000;
+
+let hotUntil = 0;
+const listeners = new Set<() => void>();
+
+/** Open (or re-open) the window. Called on a refresh press, never on a timer. */
+export const startHotSyncWindow = (now: number = Date.now()): void => {
+	hotUntil = now + HOT_WINDOW_MS;
+	for (const listener of listeners) listener();
+};
+
+export const isHotSyncWindowActive = (now: number = Date.now()): boolean =>
+	now < hotUntil;
+
+/** Notifies on every press so a poll loop already asleep on the ambient
+ * interval can reschedule onto the hot one instead of finishing its long wait
+ * first. */
+export const subscribeHotSyncWindow = (listener: () => void): (() => void) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+
+export const __resetHotSyncWindow = (): void => {
+	hotUntil = 0;
+};

package/src/lib/mail-freshness.test.ts

@@ -3,7 +3,7 @@ import { describe, test } from "node:test";
 import type { RemitImapMailboxSyncProgress } from "@remit/api-http-client/types.gen.ts";
 import type { NavMailboxRole } from "@remit/ui";
 import type { ResultFolderIndex } from "@/lib/result-folder";
-import { hasGrown, totalsFrom } from "./mail-freshness.js";
+import { grownMailboxIds, hasGrown, totalsFrom } from "./mail-freshness.js";
 
 const mailbox = (
 	mailboxId: string,
@@ -114,3 +114,33 @@ describe("totalsFrom", () => {
 		assert.equal(hasGrown(baseline, afterArrivalAndDelete), true);
 	});
 });
+
+describe("grownMailboxIds", () => {
+	// The invalidation half of the same reading: which folders' listings are
+	// now behind the server, so an open tab reloads exactly those.
+	test("names only the mailboxes whose totals moved up", () => {
+		const baseline = new Map([
+			["mb-1", 10],
+			["mb-2", 4],
+			["mb-3", 7],
+		]);
+		const current = new Map([
+			["mb-1", 12],
+			["mb-2", 4],
+			["mb-3", 6],
+		]);
+
+		assert.deepEqual(grownMailboxIds(baseline, current), ["mb-1"]);
+	});
+
+	test("counts a folder absent from the baseline from zero", () => {
+		assert.deepEqual(grownMailboxIds(new Map(), new Map([["mb-new", 3]])), [
+			"mb-new",
+		]);
+	});
+
+	test("is empty when nothing moved", () => {
+		const totals = new Map([["mb-1", 10]]);
+		assert.deepEqual(grownMailboxIds(totals, new Map(totals)), []);
+	});
+});

package/src/lib/mail-freshness.tsx

@@ -14,6 +14,10 @@ import {
 } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import type { ResultFolderIndex } from "@/lib/result-folder";
+import {
+	invalidateThreadListQueries,
+	threadListCacheKeys,
+} from "@/lib/thread-list-cache";
 
 /**
  * How often the background poll re-reads each open account's sync status.
@@ -55,22 +59,29 @@ export const totalsFrom = (
 };
 
 /**
- * Whether any mailbox's message total grew since the baseline. Pure so the
- * "did mail arrive" call is unit-testable without a DOM or a QueryClient. A
- * mailbox missing from the baseline (new folder, first-ever reading) counts
- * from zero rather than being skipped, so mail landing in a folder created
- * since the last look still counts as an arrival.
+ * Which mailboxes' totals grew since the baseline. Pure so the "did mail
+ * arrive" call is unit-testable without a DOM or a QueryClient. A mailbox
+ * missing from the baseline (new folder, first-ever reading) counts from zero
+ * rather than being skipped, so mail landing in a folder created since the last
+ * look still counts as an arrival.
  */
-export const hasGrown = (
+export const grownMailboxIds = (
 	baseline: MailboxTotals,
 	current: MailboxTotals,
-): boolean => {
+): string[] => {
+	const grown: string[] = [];
 	for (const [mailboxId, total] of current) {
-		if (total > (baseline.get(mailboxId) ?? 0)) return true;
+		if (total > (baseline.get(mailboxId) ?? 0)) grown.push(mailboxId);
 	}
-	return false;
+	return grown;
 };
 
+/** Whether any mailbox grew at all — the dot's own question. */
+export const hasGrown = (
+	baseline: MailboxTotals,
+	current: MailboxTotals,
+): boolean => grownMailboxIds(baseline, current).length > 0;
+
 interface MailFreshnessContextValue {
 	/** True once any of these accounts has grown since it was last acknowledged. */
 	hasNewMail: (accountIds: readonly string[]) => boolean;
@@ -102,10 +113,13 @@ interface MailFreshnessProviderProps {
 /**
  * Watches every open account's sync status once a minute and flags which
  * accounts have grown since they were last shown to the user (#582 clause
- * 4). The flag is sticky until acknowledged — a background tick never
- * invalidates or reorders anything on its own, it only lights the dot on
- * whichever `RefreshButton` reads this context, leaving the choice to load
- * it with the user.
+ * 4). The flag is sticky until acknowledged: it lights the dot on whichever
+ * `RefreshButton` reads this context and stays lit until a refresh clears it.
+ *
+ * A tick that sees a folder's total move also invalidates that folder's thread
+ * listing. It reorders nothing and asks the mail server for nothing — the
+ * message is already on our side, so an open list showing it is a cache read,
+ * not IMAP work. The dot is still the account-level signal.
  */
 export function MailFreshnessProvider({
 	accountIds,
@@ -115,6 +129,10 @@ export function MailFreshnessProvider({
 	const { resultFolderIndex } = useMailContext();
 	const baselineRef = useRef(new Map<string, MailboxTotals>());
 	const seededRef = useRef(new Set<string>());
+	// The previous tick's reading, distinct from the dot's baseline: the dot's
+	// baseline is sticky until acknowledged, so comparing against it would
+	// re-invalidate on every tick for as long as the dot stays lit.
+	const previousTotalsRef = useRef(new Map<string, MailboxTotals>());
 	const [newMail, setNewMail] = useState<ReadonlySet<string>>(new Set());
 
 	const queries = useQueries({
@@ -136,6 +154,20 @@ export function MailFreshnessProvider({
 			const data = queries[index]?.data;
 			if (!data) return;
 			const current = totalsFrom(data.mailboxes ?? [], resultFolderIndex);
+
+			// Mail that has already landed on the server costs nothing more to
+			// show, so a folder whose total moved since the last tick reloads
+			// its listing here. That caps how stale an open tab's list can get
+			// at this poll's own interval, without a single extra IMAP round.
+			const previous = previousTotalsRef.current.get(accountId);
+			previousTotalsRef.current.set(accountId, current);
+			if (previous) {
+				const grown = grownMailboxIds(previous, current);
+				if (grown.length > 0) {
+					invalidateThreadListQueries(queryClient, threadListCacheKeys(grown));
+				}
+			}
+
 			if (!seededRef.current.has(accountId)) {
 				seededRef.current.add(accountId);
 				baselineRef.current.set(accountId, current);

package/src/lib/quarantine-entries.test.ts

@@ -34,16 +34,16 @@ const wire: RemitImapQuarantineResponse = {
 
 describe("toQuarantineEntry", () => {
 	it("spells the folder role the way the kit does", () => {
-		assert.equal(toQuarantineEntry(wire).mailboxRole, "junk");
+		assert.equal(toQuarantineEntry(wire, "/").mailboxRole, "junk");
 	});
 
 	it("leaves the role absent when the folder has none appointed", () => {
 		const { mailboxRole: _dropped, ...roleless } = wire;
-		assert.equal(toQuarantineEntry(roleless).mailboxRole, undefined);
+		assert.equal(toQuarantineEntry(roleless, "/").mailboxRole, undefined);
 	});
 
 	it("carries every field the report and the row are built from", () => {
-		const entry = toQuarantineEntry(wire);
+		const entry = toQuarantineEntry(wire, "/");
 		assert.equal(entry.quarantineId, wire.quarantineId);
 		assert.equal(entry.uid, wire.uid);
 		assert.equal(entry.uidValidity, wire.uidValidity);
@@ -63,8 +63,13 @@ describe("toQuarantineEntry", () => {
 		assert.deepEqual(entry.structure, wire.structure);
 	});
 
+	it("carries the delimiter the caller resolved, which the wire has not", () => {
+		assert.equal("mailboxDelimiter" in wire, false);
+		assert.equal(toQuarantineEntry(wire, ".").mailboxDelimiter, ".");
+	});
+
 	it("drops the fields the settings surface has no use for", () => {
-		const entry = toQuarantineEntry(wire);
+		const entry = toQuarantineEntry(wire, "/");
 		assert.equal("accountConfigId" in entry, false);
 		assert.equal("createdAt" in entry, false);
 		assert.equal("updatedAt" in entry, false);

package/src/lib/quarantine-entries.ts

@@ -7,9 +7,14 @@ import { CANONICAL_TO_NAV_ROLE } from "./folder-roles";
  * the settings surface has no use for, and spells the folder role in the
  * canonical PascalCase the API uses everywhere. Both differences are resolved
  * here rather than by widening the kit's entry type.
+ *
+ * The record carries no hierarchy delimiter either, so the caller resolves the
+ * account's own from its mailbox list and hands it in — the row shows a folder
+ * name, and a path cannot be cut into one without it.
  */
 export function toQuarantineEntry(
 	wire: RemitImapQuarantineResponse,
+	mailboxDelimiter: string,
 ): QuarantineEntry {
 	return {
 		quarantineId: wire.quarantineId,
@@ -21,6 +26,7 @@ export function toQuarantineEntry(
 			? CANONICAL_TO_NAV_ROLE[wire.mailboxRole]
 			: undefined,
 		mailboxPath: wire.mailboxPath,
+		mailboxDelimiter,
 		failureStage: wire.failureStage,
 		failureCode: wire.failureCode,
 		failureMessage: wire.failureMessage,

package/src/lib/result-folder.test.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { provenanceFolderLabel } from "@remit/ui";
 import {
 	type AccountMailboxes,
 	buildResultFolderIndex,
@@ -9,10 +10,11 @@ import {
 const account = (
 	appointments: { role: string; mailboxId: string }[],
 	mailboxes: { mailboxId: string; fullPath: string }[],
+	hierarchyDelimiter = "/",
 ): AccountMailboxes =>
 	({
 		folderAppointments: appointments,
-		mailboxes,
+		mailboxes: mailboxes.map((mailbox) => ({ ...mailbox, hierarchyDelimiter })),
 	}) as unknown as AccountMailboxes;
 
 describe("buildResultFolderIndex", () => {
@@ -30,9 +32,11 @@ describe("buildResultFolderIndex", () => {
 		assert.deepEqual(index.get("mb-junk"), {
 			role: "junk",
 			providerPath: "Bulk Mail",
+			hierarchyDelimiter: "/",
 		});
 		assert.deepEqual(index.get("mb-work"), {
 			providerPath: "Projects/Bookkeeping",
+			hierarchyDelimiter: "/",
 		});
 	});
 
@@ -72,7 +76,7 @@ describe("resolveResultFolder", () => {
 	it("skips a virtual folder for one that names a real place", () => {
 		assert.deepEqual(resolveResultFolder(index, ["mb-all", "mb-inbox"]), {
 			mailboxId: "mb-inbox",
-			folder: { role: "inbox", providerPath: "INBOX" },
+			folder: { role: "inbox", providerPath: "INBOX", hierarchyDelimiter: "/" },
 		});
 	});
 
@@ -83,7 +87,11 @@ describe("resolveResultFolder", () => {
 	it("falls back to the first id when none names a real place", () => {
 		assert.deepEqual(resolveResultFolder(index, ["mb-all"]), {
 			mailboxId: "mb-all",
-			folder: { role: "all", providerPath: "[Gmail]/All Mail" },
+			folder: {
+				role: "all",
+				providerPath: "[Gmail]/All Mail",
+				hierarchyDelimiter: "/",
+			},
 		});
 	});
 
@@ -113,3 +121,13 @@ describe("buildResultFolderIndex before the mailbox list arrives", () => {
 		assert.deepEqual(index.get("mb-junk"), { role: "junk" });
 	});
 });
+
+describe("buildResultFolderIndex on a dotted server", () => {
+	it("carries the delimiter the account reports, so the chip reads the leaf", () => {
+		const index = buildResultFolderIndex([
+			account([], [{ mailboxId: "mb-q3", fullPath: "INBOX.Projects.Q3" }], "."),
+		]);
+
+		assert.equal(provenanceFolderLabel(index.get("mb-q3") ?? {}), "Q3");
+	});
+});

package/src/lib/result-folder.ts

@@ -7,6 +7,10 @@
  * sidebar already loads: the id → folder map here is the only thing either
  * needs, so neither the search API nor the semantic index has to carry a folder.
  *
+ * The mailbox row carries the hierarchy delimiter its own server reports, and it
+ * is kept alongside the path: a chip labelled by path shows the folder's own
+ * name, which on a `.`-delimited account cannot be cut on a slash.
+ *
  * The role comes from the account's `folderAppointments` map (RFC 032), which
  * the server resolves from the IMAP SPECIAL-USE attributes — so `junk` means the
  * folder the account advertises as `\Junk`, whatever it is called. Names are
@@ -27,7 +31,7 @@ export interface AccountMailboxes {
 	folderAppointments: readonly RemitImapFolderAppointment[];
 	mailboxes: readonly Pick<
 		RemitImapMailboxResponse,
-		"mailboxId" | "fullPath"
+		"mailboxId" | "fullPath" | "hierarchyDelimiter"
 	>[];
 }
 
@@ -46,10 +50,11 @@ export function buildResultFolderIndex(
 		for (const [mailboxId, role] of roles) index.set(mailboxId, { role });
 		for (const mailbox of account.mailboxes) {
 			const role = roles.get(mailbox.mailboxId);
-			index.set(mailbox.mailboxId, {
-				...(role ? { role } : {}),
+			const path = {
 				providerPath: mailbox.fullPath,
-			});
+				hierarchyDelimiter: mailbox.hierarchyDelimiter,
+			};
+			index.set(mailbox.mailboxId, role ? { role, ...path } : path);
 		}
 	}
 	return index;