@remit/web-client 0.0.219 → 0.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.219",
+  "version": "0.0.221",
   "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/onboarding/OnboardingWizard.flow.test.ts

@@ -7,8 +7,12 @@
  */
 
 import assert from "node:assert/strict";
-import { afterEach, beforeEach, describe, it } from "node:test";
-import { createElement } from "react";
+import { afterEach, beforeEach, describe, it, mock } from "node:test";
+import { act, createElement } from "react";
+import {
+	REDIRECT_STALL_MESSAGE,
+	REDIRECT_STALL_MS,
+} from "../../hooks/useRedirectEnded";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, mockFetch } from "../../test-support/http";
 import { OnboardingWizard } from "./OnboardingWizard";
@@ -294,16 +298,31 @@ const settle = async (dom: DomHarness): Promise<void> => {
 	}
 };
 
-/** Welcome → Connector → the Microsoft step, with the redirect started. */
-const walkToRedirect = async (dom: DomHarness): Promise<void> => {
+/** Welcome → Connector → the Microsoft step, before the redirect starts. */
+const walkToMicrosoftStep = async (dom: DomHarness): Promise<void> => {
 	clickText(dom, "Add your first account");
 	clickText(dom, "Outlook / Microsoft 365");
 	clickText(dom, "Continue with Microsoft");
 	await settle(dom);
+};
+
+/** Welcome → Connector → the Microsoft step, with the redirect started. */
+const walkToRedirect = async (dom: DomHarness): Promise<void> => {
+	await walkToMicrosoftStep(dom);
 	clickText(dom, "Sign in with Microsoft");
 	await settle(dom);
 };
 
+/** `settle`, for a spec that has taken the clock over: tick instead of wait. */
+const settleOnMockedClock = async (dom: DomHarness): Promise<void> => {
+	for (let round = 0; round < 4; round += 1) {
+		await dom.flush();
+		await act(async () => {
+			mock.timers.tick(20);
+		});
+	}
+};
+
 /**
  * jsdom reports "prerender" unless it is pretending to be visual, and the
  * shared environment deliberately does not — so a spec that means "the window
@@ -325,9 +344,44 @@ const pageShow = (persisted: boolean): Event => {
 
 describe("OnboardingWizard — the Microsoft redirect and the way back (#646)", () => {
 	afterEach(() => {
+		mock.timers.reset();
 		Reflect.deleteProperty(document, "visibilityState");
 	});
 
+	it("states the failure when the redirect never leaves the page (#964)", async () => {
+		const dom = start();
+		await walkToMicrosoftStep(dom);
+
+		// The stall watch is armed inside the click, so the clock has to be the
+		// mocked one before the button is pressed.
+		setVisibility("visible");
+		mock.timers.enable({ apis: ["setTimeout"] });
+		clickText(dom, "Sign in with Microsoft");
+		await settleOnMockedClock(dom);
+
+		assert.match(dom.text(), /Redirecting…/);
+
+		// No `pagehide` and no restore: the window stays where it is, being
+		// looked at, past the point where a redirect that is going to happen has
+		// happened.
+		await act(async () => {
+			mock.timers.tick(REDIRECT_STALL_MS);
+		});
+		await dom.flush();
+
+		const button = dom.byText("button", "Sign in with Microsoft");
+		assert.equal(
+			button.getAttribute("disabled"),
+			null,
+			"an `assign` that never navigated held the button busy for good",
+		);
+		assert.doesNotMatch(dom.text(), /Redirecting…/);
+		assert.ok(
+			dom.text().includes(REDIRECT_STALL_MESSAGE),
+			"the button went live again without saying what failed",
+		);
+	});
+
 	it("stays busy while the redirect is only being looked at", async () => {
 		const dom = start();
 		await walkToRedirect(dom);

package/src/components/onboarding/OnboardingWizard.tsx

@@ -43,7 +43,10 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AtSign, Inbox, Loader2, Mail, Server } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useRedirectEnded } from "../../hooks/useRedirectEnded.js";
+import {
+	REDIRECT_STALL_MESSAGE,
+	useRedirectEnded,
+} from "../../hooks/useRedirectEnded.js";
 // useRef is kept for the hasCreatedRef guard — not for DOM refs
 import {
 	type DiscoveryResult,
@@ -313,8 +316,15 @@ function StepMicrosoftEmail({
 	// sign-in — a user who comes back mid-flow to read a password has not failed
 	// anything, so nothing here concludes and the check stays armed until an
 	// account appears or the user leaves the step.
-	const markRedirectStarted = useRedirectEnded(() => {
+	const markRedirectStarted = useRedirectEnded((end) => {
 		setPreparing(false);
+		// A redirect that never took the window says nothing about the account, so
+		// there is nothing to read the config for — only a failure to state.
+		if (end === "stalled") {
+			setAwaitingReturn(false);
+			setError(REDIRECT_STALL_MESSAGE);
+			return;
+		}
 		void refetchConfig().then(({ data, isError }) => {
 			if (!stepIsMounted.current) return;
 			if (isError || !data) {

package/src/hooks/useRedirectEnded.ts

@@ -1,6 +1,18 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useReturnFromRedirect } from "./useReturnFromRedirect";
 
+/** How the redirect ended: this window came back, or it never left. */
+export type RedirectEnd = "returned" | "stalled";
+
+/**
+ * Long enough for a slow provider fetch to take the page away, short enough
+ * that a control which is never going anywhere does not read as busy.
+ */
+export const REDIRECT_STALL_MS = 20_000;
+
+export const REDIRECT_STALL_MESSAGE =
+	"Couldn't open Microsoft's sign-in page. Check your connection, and anything blocking redirects, then try again.";
+
 /**
  * Run `onEnded` when the window that left for an external identity provider is
  * being looked at again, and hand back the marker to call as it leaves.
@@ -24,22 +36,41 @@ import { useReturnFromRedirect } from "./useReturnFromRedirect";
  * A page restored from the back-forward cache — browser Back out of the
  * provider's consent screen — is a return leg on its own evidence. Without it a
  * control that was left busy has nothing to clear it and stays busy for good.
+ *
+ * An `assign` that never navigates hides nothing and restores nothing, so no
+ * return leg is ever coming and the control would read as busy until a reload
+ * (#964). A page that has stayed visible for `REDIRECT_STALL_MS` since the
+ * redirect started is that case: the watch ends as `"stalled"` so the caller
+ * states the failure instead of settling in silence. Only visible time counts —
+ * any hide is evidence the redirect did happen, so it stops the watch and
+ * leaves the return leg to end it.
  */
-export const useRedirectEnded = (onEnded: () => void): (() => void) => {
+export const useRedirectEnded = (
+	onEnded: (end: RedirectEnd) => void,
+): (() => void) => {
 	const armed = useRef(false);
 	const hidden = useRef(false);
+	const stallTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const latest = useRef(onEnded);
 	latest.current = onEnded;
 
+	const stopStallWatch = useCallback((): void => {
+		if (stallTimer.current === null) return;
+		clearTimeout(stallTimer.current);
+		stallTimer.current = null;
+	}, []);
+
 	const settle = useCallback((): void => {
 		if (!armed.current || !hidden.current) return;
+		stopStallWatch();
 		hidden.current = false;
-		latest.current();
-	}, []);
+		latest.current("returned");
+	}, [stopStallWatch]);
 
 	useEffect(() => {
 		const markHidden = () => {
 			hidden.current = true;
+			stopStallWatch();
 		};
 		const handleVisibility = () => {
 			if (document.visibilityState !== "hidden") return;
@@ -60,8 +91,9 @@ export const useRedirectEnded = (onEnded: () => void): (() => void) => {
 			document.removeEventListener("visibilitychange", handleVisibility);
 			window.removeEventListener("pagehide", markHidden);
 			window.removeEventListener("pageshow", handlePageShow);
+			stopStallWatch();
 		};
-	}, [settle]);
+	}, [settle, stopStallWatch]);
 
 	// Always listening: the gate is the pair of refs above, which a redirect
 	// arms and a hidden interval satisfies, not whether this hook is mounted
@@ -71,5 +103,14 @@ export const useRedirectEnded = (onEnded: () => void): (() => void) => {
 	return useCallback(() => {
 		armed.current = true;
 		hidden.current = false;
-	}, []);
+		stopStallWatch();
+		stallTimer.current = setTimeout(() => {
+			stallTimer.current = null;
+			// The redirect is over as far as this window is concerned: it decided
+			// nothing, and a later look at a page that never left is not a return.
+			armed.current = false;
+			hidden.current = false;
+			latest.current("stalled");
+		}, REDIRECT_STALL_MS);
+	}, [stopStallWatch]);
 };

package/src/lib/organize/organize-model.ts

@@ -76,7 +76,7 @@ export const hasCommittableAction = (draft: OrganizeDraft): boolean =>
  * Whether the draft's predicate can be back-applied over the existing corpus. A
  * `HasWords` clause matches the full message body, which only the live
  * index-time filter and the vector widen evaluate — the vector-free back-apply
- * projection carries no body and rejects it (`assertNoBodyContentClause`,
+ * projection carries no body and rejects it (`bodyContentRejection`,
  * organize.ts). A rule that carries one is still a valid standing filter for
  * incoming mail, so the back-apply is skipped, not run into that guard.
  */

package/src/lib/organize/rule-model.ts

@@ -198,8 +198,9 @@ export const rulePredicate = (
  * Whether the matcher behind `/organize/preview` can evaluate this predicate at
  * all. Without an anchor it takes the vector-free literal arm, which reads no
  * message body and rejects a `HasWords` clause rather than narrowing the match
- * silently (`assertNoBodyContentClause`, backend/service/organize.ts). Asking it
- * anyway is a 500, so the caller must not ask.
+ * silently (`bodyContentRejection`, backend/service/organize.ts). Asking it
+ * anyway is refused — a 400 on preview, a failed job row on a back-apply — so
+ * the caller must not ask.
  */
 export const isEvaluablePredicate = (
 	predicate: OrganizeMatchPredicate,

package/src/routes/settings/-accounts.test.ts

@@ -1,6 +1,6 @@
 // biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
 import assert from "node:assert";
-import { afterEach, describe, test } from "node:test";
+import { afterEach, describe, mock, test } from "node:test";
 import {
 	type AnyRoute,
 	type AnyRouter,
@@ -10,7 +10,11 @@ import {
 	Outlet,
 	RouterProvider,
 } from "@tanstack/react-router";
-import { createElement } from "react";
+import { act, createElement } from "react";
+import {
+	REDIRECT_STALL_MESSAGE,
+	REDIRECT_STALL_MS,
+} from "@/hooks/useRedirectEnded";
 import { createDomHarness, type DomHarness } from "@/test-support/dom";
 import { type HttpMock, mockFetch } from "@/test-support/http";
 import { mapOauthError, Route } from "./accounts.tsx";
@@ -166,6 +170,16 @@ const mountAccounts = async (): Promise<DomHarness> => {
 	return mounted;
 };
 
+/** `settle`, for a spec that has taken the clock over: tick instead of wait. */
+const settleOnMockedClock = async (dom: DomHarness): Promise<void> => {
+	for (let round = 0; round < 4; round += 1) {
+		await dom.flush();
+		await act(async () => {
+			mock.timers.tick(20);
+		});
+	}
+};
+
 const startReconnect = async (dom: DomHarness): Promise<void> => {
 	dom.click(dom.byText("button", "Reconnect"));
 	await settle(dom);
@@ -173,6 +187,7 @@ const startReconnect = async (dom: DomHarness): Promise<void> => {
 
 describe("the Reconnect button and the redirect it starts", () => {
 	afterEach(() => {
+		mock.timers.reset();
 		harness?.close();
 		harness = undefined;
 		http?.restore();
@@ -195,6 +210,37 @@ describe("the Reconnect button and the redirect it starts", () => {
 		assert.match(dom.text(), /Redirecting…/);
 	});
 
+	test("states the failure when the redirect never leaves the page", async () => {
+		const dom = await mountAccounts();
+		// The stall timer is armed inside the click, so the clock has to be the
+		// mocked one before the button is pressed.
+		setVisibility("visible");
+		mock.timers.enable({ apis: ["setTimeout"] });
+		dom.click(dom.byText("button", "Reconnect"));
+		await settleOnMockedClock(dom);
+
+		assert.match(dom.text(), /Redirecting…/);
+
+		// No `pagehide` and no restore: the window stays where it is, being
+		// looked at, past the point where a redirect that is going to happen has
+		// happened.
+		await act(async () => {
+			mock.timers.tick(REDIRECT_STALL_MS);
+		});
+		await dom.flush();
+
+		assert.doesNotMatch(
+			dom.text(),
+			/Redirecting…/,
+			"an `assign` that never navigated held the button busy for good",
+		);
+		assert.ok(dom.byText("button", "Reconnect"));
+		assert.ok(
+			dom.text().includes(REDIRECT_STALL_MESSAGE),
+			"the button went live again without saying what failed",
+		);
+	});
+
 	test("re-arms when the restored page still needs re-authenticating", async () => {
 		const dom = await mountAccounts();
 		await startReconnect(dom);

package/src/routes/settings/accounts.tsx

@@ -24,7 +24,10 @@ import { OnboardingWizard } from "@/components/onboarding/OnboardingWizard";
 import { AccountFormPanel } from "@/components/settings/AccountFormPanel";
 import { DangerZone } from "@/components/settings/DangerZone";
 import { ErrorState } from "@/components/ui/ErrorState";
-import { useRedirectEnded } from "@/hooks/useRedirectEnded";
+import {
+	REDIRECT_STALL_MESSAGE,
+	useRedirectEnded,
+} from "@/hooks/useRedirectEnded";
 import { useReturnFromRedirect } from "@/hooks/useReturnFromRedirect";
 import { formatRelativeTime } from "@/lib/format";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
@@ -276,9 +279,12 @@ function AccountsSettings() {
 	// that still asks to be re-authenticated, so the watch above has nothing to
 	// clear the latch on and the button would read "Redirecting…" for good. This
 	// window being back is the evidence the redirect is over, whatever it
-	// decided, and the control it left behind is live again.
-	const markReconnectStarted = useRedirectEnded(() => {
+	// decided, and the control it left behind is live again. A redirect that
+	// never took the window has no such evidence coming, so the stall says so
+	// rather than handing back a button that looks like nothing happened.
+	const markReconnectStarted = useRedirectEnded((end) => {
 		setReconnectingAccountId(null);
+		if (end === "stalled") setOauthErrorMessage(REDIRECT_STALL_MESSAGE);
 	});
 
 	const reconnectMutation = useMutation({