@remit/web-client 0.0.31 → 0.0.33

package/package.json

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

@@ -244,6 +244,7 @@ export const MessageList = ({
 		setAnchor,
 		selectAll,
 		toggleAll,
+		intersectWith,
 	} = useSelection();
 
 	// Pending delete, awaiting confirmation. `null` means the dialog is closed.
@@ -829,28 +830,26 @@ export const MessageList = ({
 		[],
 	);
 
-	// Clear selection when threads change (e.g., after delete). Skipped while
-	// an escalated run is active: `selectedIds` there is a stale loaded-rows
-	// snapshot from the moment escalation started (the real selection is the
-	// predicate, D2), not something a background refetch reshuffling `threads`
-	// should be allowed to blow away out from under a count or a delete in
-	// progress — that would silently exit selection mode mid-run.
+	// Narrow the selection when threads change (e.g., after delete), dropping
+	// only the ids that left and keeping every survivor — K-9's
+	// `selected.intersect(uniqueIds)`, the reference behavior #92's D2 cites.
+	// Wiping the whole selection because one id left (#111) cost the other 49
+	// rows on an ordinary refresh, and could take the post-delete Retry
+	// selection with it: `processDeleteOutcome` materializes the failed ids as
+	// the new selection and resets this effect to live by returning escalation
+	// to idle, so the cache invalidation's refetch ran this same effect against
+	// the retry set — a clear here would have dropped the Retry notice
+	// (gated on `selectedCount > 0`) along with it.
+	// Skipped while an escalated run is active: `selectedIds` there is a stale
+	// loaded-rows snapshot from the moment escalation started (the real
+	// selection is the predicate, D2), not something a background refetch
+	// reshuffling `threads` should be allowed to narrow out from under a count
+	// or a delete in progress — that would silently exit selection mode
+	// mid-run.
 	useEffect(() => {
 		if (escalation.phase.kind !== "idle" || escalation.isDeleting) return;
-		const threadIds = new Set(threads.map((t) => t.messageId));
-		const hasOrphanedSelection = Array.from(selectedIds).some(
-			(id) => !threadIds.has(id),
-		);
-		if (hasOrphanedSelection) {
-			clearSelection();
-		}
-	}, [
-		threads,
-		selectedIds,
-		clearSelection,
-		escalation.phase,
-		escalation.isDeleting,
-	]);
+		intersectWith(threads.map((t) => t.messageId));
+	}, [threads, intersectWith, escalation.phase, escalation.isDeleting]);
 
 	// Load more when scrolling near the bottom
 	useEffect(() => {
@@ -1210,6 +1209,14 @@ export const MessageList = ({
 			: pendingDelete.total
 		: 0;
 
+	// The predicate case (#109): `pendingDelete.total` is `countMatches`'s
+	// frozen page-through, and the delete itself re-pages the same predicate a
+	// second, independent time. Mail arriving or leaving between the two can
+	// make them differ, so the dialog says "about" instead of promising an
+	// exact number it may not honour. A materialized (bounded) selection's
+	// count is exact — it's the delete's own input, not an estimate of it.
+	const pendingDeleteIsEstimate = pendingDelete?.source === "predicate";
+
 	return (
 		<>
 			{completionBanner && !isDesktop && (
@@ -1249,8 +1256,15 @@ export const MessageList = ({
 			/>
 			<ConfirmDialog
 				isOpen={pendingDelete !== null}
-				title={formatDeleteToTrashTitle(pendingDeleteCount)}
-				description="You can restore them from Trash later."
+				title={formatDeleteToTrashTitle(
+					pendingDeleteCount,
+					pendingDeleteIsEstimate,
+				)}
+				description={
+					pendingDeleteIsEstimate
+						? "This count is a snapshot — new mail arriving during the delete won't be included. You can restore what's deleted from Trash later."
+						: "You can restore them from Trash later."
+				}
 				confirmLabel="Move to Trash"
 				destructive
 				isBusy={isDeleting}

package/src/components/ui/ConfirmDialog.stories.tsx

@@ -34,6 +34,21 @@ export const OneMessage: Story = {
 	},
 };
 
+/**
+ * An escalated (search-predicate) delete: the count was paged once by
+ * `countMatches` and the delete re-pages the same predicate independently, so
+ * it is not provably the number that gets deleted (#109). "about" and the
+ * description say so up front rather than stating an exact number the run may
+ * not honour.
+ */
+export const EscalatedEstimate: Story = {
+	args: {
+		title: "Move about 3,412 messages to Trash?",
+		description:
+			"This count is a snapshot — new mail arriving during the delete won't be included. You can restore what's deleted from Trash later.",
+	},
+};
+
 /** The mutation is in flight: the confirm button disables rather than
  *  allowing a second concurrent delete request. */
 export const Busy: Story = {

package/src/hooks/useEscalatedDelete.ts

@@ -17,6 +17,7 @@ import {
 	countMatches,
 	type DeleteRunOutcome,
 	type FetchIdsPage,
+	honestProgress,
 	runChunkedDelete,
 	runPredicateDelete,
 } from "@/lib/bulk-delete";
@@ -190,8 +191,11 @@ export const useEscalatedDelete = ({
 		async (ids?: string[]): Promise<DeleteRunOutcome> => {
 			cancelRef.current = false;
 			setIsDeleting(true);
+			// `honestProgress` widens `total` if `done` overtakes it (#109) — the
+			// predicate can match more by the time the delete re-pages it than
+			// `countMatches` saw, and the bar must never show more done than out of.
 			const onProgress = (progress: BulkDeleteProgress) =>
-				setDeleteProgress(progress);
+				setDeleteProgress(honestProgress(progress));
 
 			const outcome =
 				ids !== undefined

package/src/hooks/useSelection.test.ts

@@ -1,6 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
-import { computeRange, nextFocusId } from "./useSelection.js";
+import {
+	computeRange,
+	intersectSelectedIds,
+	nextFocusId,
+} from "./useSelection.js";
 
 const ids = ["a", "b", "c", "d", "e"];
 
@@ -73,3 +77,60 @@ describe("nextFocusId", () => {
 		assert.strictEqual(nextFocusId([], "a", 1), undefined);
 	});
 });
+
+describe("intersectSelectedIds", () => {
+	test("a refresh that drops some selected ids and adds new rows keeps only the survivors (#111)", () => {
+		// Regression for #111: the effect used to clear the WHOLE selection the
+		// moment any single selected id left the list. Here "b" leaves (deleted
+		// elsewhere) while "f" arrives (new mail) — "a" and "c" must survive.
+		const selected = new Set(["a", "b", "c"]);
+		const refreshedThreadIds = ["a", "c", "d", "f"];
+		assert.deepStrictEqual(
+			intersectSelectedIds(selected, refreshedThreadIds),
+			new Set(["a", "c"]),
+		);
+	});
+
+	test("never adds an id that wasn't already selected", () => {
+		const selected = new Set(["a"]);
+		assert.deepStrictEqual(
+			intersectSelectedIds(selected, ["a", "b", "c"]),
+			new Set(["a"]),
+		);
+	});
+
+	test("every selected id surviving is a no-op (same members, not just same size)", () => {
+		const selected = new Set(["a", "b"]);
+		assert.deepStrictEqual(
+			intersectSelectedIds(selected, ["a", "b", "z"]),
+			new Set(["a", "b"]),
+		);
+	});
+
+	test("a post-delete retry selection survives a refetch that still contains it, minus what actually left", () => {
+		// Mirrors processDeleteOutcome materializing the failed ids as the new
+		// selection, then the cache-invalidation refetch running this same
+		// intersection against the freshly reloaded `threads`. One retry id
+		// ("fail-2") is momentarily missing from the refreshed page; the other
+		// two must stay selected so the Retry notice (gated on
+		// `selectedCount > 0`) doesn't disappear with it.
+		const retrySelection = new Set(["fail-1", "fail-2", "fail-3"]);
+		const refetchedThreadIds = ["fail-1", "fail-3", "unrelated-1"];
+		assert.deepStrictEqual(
+			intersectSelectedIds(retrySelection, refetchedThreadIds),
+			new Set(["fail-1", "fail-3"]),
+		);
+	});
+
+	test("everything in the selection leaving empties it, rather than leaving stale ids behind", () => {
+		const selected = new Set(["a", "b"]);
+		assert.deepStrictEqual(intersectSelectedIds(selected, ["z"]), new Set());
+	});
+
+	test("an empty selection stays empty", () => {
+		assert.deepStrictEqual(
+			intersectSelectedIds(new Set(), ["a", "b"]),
+			new Set(),
+		);
+	});
+});

package/src/hooks/useSelection.ts

@@ -52,6 +52,12 @@ interface UseSelectionReturn {
 	 * nothing has been selected yet.
 	 */
 	anchorId: string | undefined;
+	/**
+	 * Narrows the selection to whatever in it is still present in `currentIds`
+	 * — drops ids that left, keeps every survivor. Never adds anything, and
+	 * never clears the selection just because one id is gone (#111).
+	 */
+	intersectWith: (currentIds: readonly string[]) => void;
 }
 
 /**
@@ -79,6 +85,25 @@ export const computeRange = (
 	return orderedIds.slice(start, end + 1);
 };
 
+/**
+ * The ids from `selectedIds` that are still present in `currentIds` — the
+ * survivor set after a list refresh. Only ever narrows: an id absent from
+ * `selectedIds` is never added just because it's in `currentIds`. Pure so the
+ * "drop what left, keep the rest" behavior (K-9's `selected.intersect
+ * (uniqueIds)`, cited by #92 D2) can be unit-tested without a DOM.
+ */
+export const intersectSelectedIds = (
+	selectedIds: ReadonlySet<string>,
+	currentIds: readonly string[],
+): Set<string> => {
+	const present = new Set(currentIds);
+	const next = new Set<string>();
+	for (const id of selectedIds) {
+		if (present.has(id)) next.add(id);
+	}
+	return next;
+};
+
 /**
  * Compute the id one step from `focusId` in `orderedIds`, clamped at the ends.
  * Pure so the shift-arrow range-extend math can be unit-tested without a DOM.
@@ -174,6 +199,17 @@ export const useSelection = <T>(
 		setAnchorId(id);
 	}, []);
 
+	// Bails out to the same `prev` reference when nothing was dropped, so a
+	// caller can run this on every list refresh (e.g. an effect keyed on
+	// `threads`) without forcing a render each time.
+	const intersectWith = useCallback((currentIds: readonly string[]) => {
+		setSelectedIds((prev) => {
+			if (prev.size === 0) return prev;
+			const next = intersectSelectedIds(prev, currentIds);
+			return next.size === prev.size ? prev : next;
+		});
+	}, []);
+
 	const selectRange = useCallback(
 		(orderedIds: string[], targetId: string) => {
 			setSelectedIds((prev) => {
@@ -207,5 +243,6 @@ export const useSelection = <T>(
 		selectRange,
 		setAnchor,
 		anchorId,
+		intersectWith,
 	};
 };

package/src/lib/bulk-delete.test.ts

@@ -6,6 +6,7 @@ import {
 	countMatches,
 	type DeleteBatchResult,
 	type FetchIdsPageResult,
+	honestProgress,
 	resolveSelectionAfterDelete,
 	runChunkedDelete,
 	runPredicateDelete,
@@ -454,3 +455,36 @@ describe("resolveSelectionAfterDelete", () => {
 		);
 	});
 });
+
+describe("honestProgress", () => {
+	// Regression for #109: `countMatches` and `runPredicateDelete` page the
+	// same predicate independently, so the delete can outrun the frozen
+	// `total` it started with when the result set grows in between.
+	test("leaves an on-track progress reading untouched", () => {
+		assert.deepEqual(honestProgress({ done: 50, total: 100 }), {
+			done: 50,
+			total: 100,
+		});
+	});
+
+	test("widens total to match done once done overtakes it, instead of reading past 100%", () => {
+		assert.deepEqual(honestProgress({ done: 1340, total: 1284 }), {
+			done: 1340,
+			total: 1340,
+		});
+	});
+
+	test("done equal to total stays put", () => {
+		assert.deepEqual(honestProgress({ done: 100, total: 100 }), {
+			done: 100,
+			total: 100,
+		});
+	});
+
+	test("never reports a total below zero-progress done", () => {
+		assert.deepEqual(honestProgress({ done: 0, total: 0 }), {
+			done: 0,
+			total: 0,
+		});
+	});
+});

package/src/lib/bulk-delete.ts

@@ -177,6 +177,24 @@ export const runPredicateDelete = async (
 	return { done, failedIds, cancelled: false };
 };
 
+/**
+ * Corrects a progress reading so its `total` can never read as less than
+ * `done` (#109). `runPredicateDelete`'s `total` is `countMatches`'s frozen
+ * page-through, taken before the delete re-pages the same predicate a second,
+ * independent time; if more matches arrived in between, `done` can overtake
+ * it mid-run and a raw "Deleting 1,340 of 1,284" would follow. Widening the
+ * denominator to match keeps the bar's ratio sane (never past 100%) without
+ * claiming the original count was exact — the honest fix is admitting the
+ * estimate grew, not re-paging to reconcile it (the result set is live; a
+ * second count taken any later is no less stale than the first).
+ */
+export const honestProgress = (
+	progress: BulkDeleteProgress,
+): BulkDeleteProgress => ({
+	done: progress.done,
+	total: Math.max(progress.total, progress.done),
+});
+
 export interface CountMatchesResult {
 	total: number;
 	cancelled: boolean;

package/src/lib/format.test.ts

@@ -119,4 +119,31 @@ describe("formatDeleteToTrashTitle", () => {
 			"Move 3,412 messages to Trash?",
 		);
 	});
+
+	// #109: an escalated-predicate count is paged once by `countMatches` and
+	// re-paged independently by the delete itself — never provably the number
+	// that gets deleted. `isEstimate` says so instead of stating an exact
+	// number the run may not honour.
+	describe("isEstimate (#109 — an escalated-predicate count, not a materialized selection)", () => {
+		test("prefixes 'about' for a plural estimate", () => {
+			assert.strictEqual(
+				formatDeleteToTrashTitle(3412, true),
+				"Move about 3,412 messages to Trash?",
+			);
+		});
+
+		test("prefixes 'about' for a singular estimate", () => {
+			assert.strictEqual(
+				formatDeleteToTrashTitle(1, true),
+				"Move about 1 message to Trash?",
+			);
+		});
+
+		test("defaults to false — a bounded selection's count stays exact", () => {
+			assert.strictEqual(
+				formatDeleteToTrashTitle(3412),
+				formatDeleteToTrashTitle(3412, false),
+			);
+		});
+	});
 });

package/src/lib/format.ts

@@ -195,8 +195,19 @@ export const formatList = (
  * moves messages to Trash (not a permanent delete) and pluralizes on count.
  * Thousands-separated: at escalated-selection scale this is exactly the digit
  * count someone checks against what they meant to select.
+ *
+ * `isEstimate` marks an escalated-predicate count (#109): it was paged to a
+ * total once, and the delete itself re-pages the same predicate independently
+ * — mail arriving or leaving between the two can make them differ. "about"
+ * says so up front instead of stating a number the run may not honour; a
+ * materialized (bounded) selection's count is exact and never passes it.
  */
-export const formatDeleteToTrashTitle = (count: number): string =>
-	count === 1
-		? "Move 1 message to Trash?"
-		: `Move ${formatNumber(count)} messages to Trash?`;
+export const formatDeleteToTrashTitle = (
+	count: number,
+	isEstimate = false,
+): string => {
+	const quantity = count === 1 ? "1" : formatNumber(count);
+	const noun = count === 1 ? "message" : "messages";
+	const prefix = isEstimate ? "about " : "";
+	return `Move ${prefix}${quantity} ${noun} to Trash?`;
+};