@remit/web-client 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "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

@@ -1,5 +1,5 @@
 import { createAuthClient } from "better-auth/react";
-import { taggedFetch } from "../lib/network-error";
+import { NetworkError, taggedFetch } from "../lib/network-error";
 import { getRuntimeConfig } from "../runtime-config";
 
 /**
@@ -185,18 +185,47 @@ const isFresh = (token: CachedToken): boolean =>
 const isUsable = (token: CachedToken): boolean =>
 	token.expiresAt > nowSeconds();
 
+/**
+ * A mint failure the held token is allowed to ride out: a request timeout (408),
+ * throttling (429), a server-side fault (5xx), or a transport failure that never
+ * reached the server. These say nothing about the session's validity, so keeping
+ * the token the tab already holds is correct. A 4xx that is not 408 or 429 does
+ * not qualify — least of all a 401/403, which is the server revoking the session.
+ */
+const isTransientMintFailure = (error: unknown): boolean => {
+	if (error instanceof NetworkError) return true;
+	if (error instanceof AuthTokenError) {
+		return (
+			error.status === 408 || error.status === 429 || (error.status ?? 0) >= 500
+		);
+	}
+	return false;
+};
+
+/**
+ * The mint was refused because the session is no longer valid. The held token is
+ * signed for that same revoked session, so it must be discarded rather than
+ * served until it expires.
+ */
+const isRevocation = (error: unknown): boolean =>
+	error instanceof AuthTokenError &&
+	(error.status === 401 || error.status === 403);
+
 /**
  * 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.
  *
- * 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.
+ * A throttled, faulted, or unreachable 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. A revocation (401/403) is the opposite
+ * — the session behind the held token is gone, so it is cleared and the failure
+ * propagates to re-authentication rather than serving a dead token until expiry.
+ * Only a mint with nothing usable to fall back to throws otherwise — 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> => {
 	const current = currentCache();
@@ -212,7 +241,11 @@ export const fetchBetterAuthToken = async (): Promise<string> => {
 	try {
 		return await mint();
 	} catch (error) {
-		if (current && isUsable(current)) {
+		if (isRevocation(error)) {
+			resetBetterAuthTokenCache();
+			throw error;
+		}
+		if (current && isUsable(current) && isTransientMintFailure(error)) {
 			backoffUntil = nowSeconds() + REFRESH_BACKOFF_SECONDS;
 			return current.value;
 		}

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

@@ -197,6 +197,134 @@ describe("fetchBetterAuthToken", () => {
 		assert.equal(second, held);
 	});
 
+	test("a network failure keeps the still-valid token instead of discarding it", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("still-valid")),
+		);
+		seed.release();
+		const held = await fetchBetterAuthToken();
+
+		globalThis.fetch = (async () => {
+			throw new TypeError("Failed to fetch");
+		}) as typeof fetch;
+		const afterNetworkFailure = await fetchBetterAuthToken();
+
+		assert.equal(afterNetworkFailure, held);
+	});
+
+	test("a 5xx 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 faulted = stubTokenEndpoint(
+			() =>
+				new Response("", { status: 503, statusText: "Service Unavailable" }),
+		);
+		faulted.release();
+		const afterFault = await fetchBetterAuthToken();
+
+		assert.equal(faulted.calls, 1);
+		assert.equal(afterFault, held);
+	});
+
+	test("a 408 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 timedOut = stubTokenEndpoint(
+			() => new Response("", { status: 408, statusText: "Request Timeout" }),
+		);
+		timedOut.release();
+		const afterTimeout = await fetchBetterAuthToken();
+
+		assert.equal(timedOut.calls, 1);
+		assert.equal(afterTimeout, held);
+	});
+
+	test("an unclassified 4xx refresh throws without serving the held token", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("still-valid")),
+		);
+		seed.release();
+		await fetchBetterAuthToken();
+
+		const rejected = stubTokenEndpoint(
+			() => new Response("", { status: 400, statusText: "Bad Request" }),
+		);
+		rejected.release();
+
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 400);
+				return true;
+			},
+		);
+		assert.equal(rejected.calls, 1);
+	});
+
+	test("a revoked mint (401) clears the held token and re-authenticates", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("revoked-soon")),
+		);
+		seed.release();
+		const held = await fetchBetterAuthToken();
+
+		const revoked = stubTokenEndpoint(
+			() => new Response("", { status: 401, statusText: "Unauthorized" }),
+		);
+		revoked.release();
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 401);
+				return true;
+			},
+		);
+		assert.equal(revoked.calls, 1);
+
+		const reissued = stubTokenEndpoint(() => tokenResponse(jwt("reissued")));
+		reissued.release();
+		const afterReauth = await fetchBetterAuthToken();
+
+		assert.equal(reissued.calls, 1);
+		assert.notEqual(afterReauth, held);
+	});
+
+	test("a revoked mint (403) clears the held token and re-authenticates", async () => {
+		const seed = stubTokenEndpoint(() =>
+			tokenResponse(nearExpiryJwt("forbidden-soon")),
+		);
+		seed.release();
+		await fetchBetterAuthToken();
+
+		const forbidden = stubTokenEndpoint(
+			() => new Response("", { status: 403, statusText: "Forbidden" }),
+		);
+		forbidden.release();
+		await assert.rejects(
+			() => fetchBetterAuthToken(),
+			(error: unknown) => {
+				assert.ok(error instanceof AuthTokenError);
+				assert.equal(error.status, 403);
+				return true;
+			},
+		);
+
+		const reissued = stubTokenEndpoint(() => tokenResponse(jwt("reissued")));
+		reissued.release();
+		assert.ok(await fetchBetterAuthToken());
+		assert.equal(reissued.calls, 1);
+	});
+
 	test("a throttled refresh with no usable token to fall back on still throws", async () => {
 		const seed = stubTokenEndpoint(() =>
 			tokenResponse(jwtExpiringIn("already-expired", -10)),

package/src/components/mail/MessageList.tsx

@@ -423,7 +423,10 @@ export const MessageList = ({
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
 			if (modifiers.shiftKey) {
-				selectRange(orderedIds, messageId);
+				// The open/focused row is the fallback origin when the stored anchor
+				// has been filtered or searched out of the visible list, so the first
+				// shift-click still ranges from where the user is (#142, #144).
+				selectRange(orderedIds, messageId, focusedMessageId);
 				return true;
 			}
 			if (modifiers.metaKey || modifiers.ctrlKey) {
@@ -438,7 +441,14 @@ export const MessageList = ({
 			setAnchor(messageId);
 			return false;
 		},
-		[orderedIds, selectRange, toggleCheck, clearSelection, setAnchor],
+		[
+			orderedIds,
+			focusedMessageId,
+			selectRange,
+			toggleCheck,
+			clearSelection,
+			setAnchor,
+		],
 	);
 
 	// Open the delete confirmation for an explicit set of ids. All delete

package/src/hooks/useSelection.test.ts

@@ -4,10 +4,43 @@ import {
 	computeRange,
 	intersectSelectedIds,
 	nextFocusId,
+	resolveRangeAnchor,
 } from "./useSelection.js";
 
 const ids = ["a", "b", "c", "d", "e"];
 
+// Mirrors the hook's `selectRange` state transition (anchor + selection) using
+// the same pure helpers it runs, so the mouse/keyboard sequences below exercise
+// the real logic without an interactive DOM. Returns the next {selected, anchor}.
+const applyRange = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	orderedIds: string[],
+	targetId: string,
+	fallbackAnchor?: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const anchor = resolveRangeAnchor(
+		orderedIds,
+		state.anchor,
+		fallbackAnchor,
+		targetId,
+	);
+	const range = computeRange(orderedIds, anchor, targetId);
+	const selected = new Set(state.selected);
+	for (const id of range) selected.add(id);
+	return { selected, anchor };
+};
+
+// Mirrors a cmd/ctrl-click: toggle membership and re-anchor on the clicked row.
+const applyToggle = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	targetId: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const selected = new Set(state.selected);
+	if (selected.has(targetId)) selected.delete(targetId);
+	else selected.add(targetId);
+	return { selected, anchor: targetId };
+};
+
 describe("computeRange", () => {
 	test("forward range: anchor above target selects the inclusive slice", () => {
 		assert.deepStrictEqual(computeRange(ids, "b", "d"), ["b", "c", "d"]);
@@ -44,6 +77,81 @@ describe("computeRange", () => {
 	});
 });
 
+describe("resolveRangeAnchor", () => {
+	test("keeps a still-visible stored anchor so consecutive shift-clicks extend from it", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "b", undefined, "d"), "b");
+	});
+
+	test("a stored anchor no longer visible falls back to the open/focused row", () => {
+		// The stored anchor "z" was filtered/searched out of the visible list; the
+		// open row "b" is still visible, so the range anchors there.
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "b", "d"), "b");
+	});
+
+	test("with neither a visible stored anchor nor a visible fallback, the target anchors itself", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "y", "d"), "d");
+	});
+
+	test("no stored anchor and no fallback selects just the target", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, undefined, undefined, "c"), "c");
+	});
+
+	test("a stored anchor beats the fallback while it stays visible", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "a", "c", "e"), "a");
+	});
+});
+
+describe("shift-click range over a filtered/search-narrowed list (#142, #144)", () => {
+	test("shift-click range with an active filter builds the range within the visible rows", () => {
+		// Full inbox is a..h; the "Automated" filter leaves only these rows.
+		const filtered = ["b", "d", "f", "g"];
+		// The open row "d" is visible; nothing selected yet, no stored anchor.
+		let state = {
+			selected: new Set<string>(),
+			anchor: undefined as string | undefined,
+		};
+		// Shift-click "g": ranges from the open/focused row "d" to "g".
+		state = applyRange(state, filtered, "g", "d");
+		assert.deepStrictEqual([...state.selected], ["d", "f", "g"]);
+		assert.strictEqual(state.anchor, "d");
+	});
+
+	test("range where the anchor left the visible set re-anchors instead of no-oping", () => {
+		const filtered = ["b", "d", "f", "g"];
+		// Stored anchor "a" was selected before the filter narrowed the list and is
+		// no longer visible; there is no open/focused fallback row.
+		let state = {
+			selected: new Set<string>(),
+			anchor: "a" as string | undefined,
+		};
+		// First shift-click adopts the clicked row as the new visible anchor.
+		state = applyRange(state, filtered, "f");
+		assert.deepStrictEqual([...state.selected], ["f"]);
+		assert.strictEqual(state.anchor, "f");
+		// Second shift-click now builds a real range from that adopted anchor.
+		state = applyRange(state, filtered, "b");
+		assert.deepStrictEqual([...state.selected].sort(), ["b", "d", "f"]);
+		assert.strictEqual(state.anchor, "f");
+	});
+
+	test("multi-select across a search-results list: cmd-click then shift-click", () => {
+		// Search "npm" yields these results; the inbox anchor is gone from this set.
+		const results = ["m1", "m2", "m3", "m4", "m5"];
+		let state = {
+			selected: new Set<string>(),
+			anchor: "inbox-row" as string | undefined,
+		};
+		// Cmd-click "m2": toggles it in and re-anchors on it (a visible row).
+		state = applyToggle(state, "m2");
+		assert.deepStrictEqual([...state.selected], ["m2"]);
+		assert.strictEqual(state.anchor, "m2");
+		// Shift-click "m4": ranges from the cmd-clicked anchor across the results.
+		state = applyRange(state, results, "m4");
+		assert.deepStrictEqual([...state.selected].sort(), ["m2", "m3", "m4"]);
+		assert.strictEqual(state.anchor, "m2");
+	});
+});
+
 describe("nextFocusId", () => {
 	test("moves down one row", () => {
 		assert.strictEqual(nextFocusId(ids, "b", 1), "c");

package/src/hooks/useSelection.ts

@@ -37,11 +37,19 @@ interface UseSelectionReturn {
 	/** Toggle selection for all items */
 	toggleAll: (ids: string[]) => void;
 	/**
-	 * Add the contiguous range of ids from the current anchor to `targetId`
-	 * (inclusive) to the selection, using `orderedIds` for display order. If
-	 * no anchor exists, selects only `targetId` and makes it the anchor.
+	 * Add the contiguous range of ids from the anchor to `targetId` (inclusive)
+	 * to the selection, using `orderedIds` for display order. The anchor is the
+	 * stored one when it is still visible in `orderedIds`; otherwise
+	 * `fallbackAnchor` when that is visible (the open/focused row); otherwise
+	 * `targetId`. Whatever anchors the range becomes the new stored anchor, so a
+	 * filtered or search-narrowed list can still build a range within what's
+	 * visible (#142, #144).
 	 */
-	selectRange: (orderedIds: string[], targetId: string) => void;
+	selectRange: (
+		orderedIds: string[],
+		targetId: string,
+		fallbackAnchor?: string,
+	) => void;
 	/**
 	 * Set the range anchor without changing the selection set. Used by a plain
 	 * click that navigates but should seed the anchor for a later shift-click.
@@ -85,6 +93,34 @@ export const computeRange = (
 	return orderedIds.slice(start, end + 1);
 };
 
+/**
+ * Resolve which id a shift-range selection anchors from, given the stored
+ * anchor and the ids currently visible (`orderedIds`). Pure so the
+ * filtered/search anchor behavior can be unit-tested without a DOM.
+ *
+ * - The stored anchor wins while it is still visible — consecutive shift-clicks
+ *   keep extending from the same origin (Apple Mail / Gmail).
+ * - Once the stored anchor leaves the visible set (filtered out, or a search
+ *   changed the list), it can't anchor a range in that set, so fall back to
+ *   `fallbackAnchor` (the open/focused row) when it is visible.
+ * - With neither available, the target anchors itself: the clicked row is
+ *   selected alone and becomes the origin for the next shift-click.
+ */
+export const resolveRangeAnchor = (
+	orderedIds: string[],
+	storedAnchor: string | undefined,
+	fallbackAnchor: string | undefined,
+	targetId: string,
+): string => {
+	if (storedAnchor !== undefined && orderedIds.includes(storedAnchor)) {
+		return storedAnchor;
+	}
+	if (fallbackAnchor !== undefined && orderedIds.includes(fallbackAnchor)) {
+		return fallbackAnchor;
+	}
+	return targetId;
+};
+
 /**
  * The ids from `selectedIds` that are still present in `currentIds` — the
  * survivor set after a list refresh. Only ever narrows: an id absent from
@@ -211,9 +247,15 @@ export const useSelection = <T>(
 	}, []);
 
 	const selectRange = useCallback(
-		(orderedIds: string[], targetId: string) => {
+		(orderedIds: string[], targetId: string, fallbackAnchor?: string) => {
+			const effectiveAnchor = resolveRangeAnchor(
+				orderedIds,
+				anchorId,
+				fallbackAnchor,
+				targetId,
+			);
 			setSelectedIds((prev) => {
-				const range = computeRange(orderedIds, anchorId, targetId);
+				const range = computeRange(orderedIds, effectiveAnchor, targetId);
 				if (range.length === 0) return prev;
 				const next = new Set(prev);
 				for (const id of range) {
@@ -221,10 +263,12 @@ export const useSelection = <T>(
 				}
 				return next;
 			});
-			// Keep the original anchor so subsequent shift-clicks extend from the
-			// same origin (Apple Mail / Gmail behavior). Only seed the anchor when
-			// none exists yet.
-			setAnchorId((prev) => prev ?? targetId);
+			// Whatever anchored the range becomes the stored anchor. A still-visible
+			// stored anchor resolves to itself (unchanged), so consecutive
+			// shift-clicks keep extending from the same origin; a stored anchor that
+			// left the visible set is replaced by the row the range actually used, so
+			// a filtered/search-narrowed list can build a range within what's visible.
+			setAnchorId(effectiveAnchor);
 		},
 		[anchorId],
 	);