@remit/web-client 0.0.206 → 0.0.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.206",
+  "version": "0.0.208",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MoveToTrigger.render.test.ts

@@ -65,8 +65,40 @@ const FOLDERS = [
 	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "Receipts" }),
 ];
 
+// The desktop picker renders through a portal into document.body, so its
+// content sits outside the render container these helpers normally scope to.
+const pickerRoot = (dom: DomHarness): ParentNode => {
+	const trigger = dom.byLabel("Move to folder");
+	return trigger.getAttribute("aria-haspopup") === "dialog"
+		? dom.container
+		: dom.document.body;
+};
+
 const rowText = (dom: DomHarness): string[] =>
-	dom.queryAll("[role=treeitem]").map((row) => row.textContent ?? "");
+	[...pickerRoot(dom).querySelectorAll("[role=treeitem]")].map(
+		(row) => row.textContent ?? "",
+	);
+
+const pickerText = (dom: DomHarness): string =>
+	pickerRoot(dom).textContent ?? "";
+
+const pickerByLabel = (dom: DomHarness, label: string): HTMLElement => {
+	const found = pickerRoot(dom).querySelector(`[aria-label="${label}"]`);
+	if (!found) throw new Error(`no picker element labelled "${label}"`);
+	return found as HTMLElement;
+};
+
+const pickerByText = (
+	dom: DomHarness,
+	selector: string,
+	text: string,
+): HTMLElement => {
+	const found = [...pickerRoot(dom).querySelectorAll(selector)].find((node) =>
+		(node.textContent ?? "").includes(text),
+	);
+	if (!found) throw new Error(`no picker ${selector} containing "${text}"`);
+	return found as HTMLElement;
+};
 
 describe("MoveToTrigger", () => {
 	it("reports itself as collapsed until it is opened", () => {
@@ -103,7 +135,7 @@ describe("MoveToTrigger", () => {
 			false,
 		);
 
-		dom.click(dom.byLabel("Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
 		assert.ok(rowText(dom).some((label) => label.includes("Clients")));
 	});
 
@@ -117,10 +149,10 @@ describe("MoveToTrigger", () => {
 
 		// Picking a folder also opens it, so the move is a separate press —
 		// otherwise the first tap would fire before anything nested was reachable.
-		dom.click(dom.byLabel("Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
 		assert.deepEqual(moved, []);
 
-		dom.click(dom.byText("button", "Move to Work"));
+		dom.click(pickerByText(dom, "button", "Move to Work"));
 		assert.deepEqual(moved, ["mbx-work"]);
 		assert.equal(
 			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
@@ -131,10 +163,10 @@ describe("MoveToTrigger", () => {
 	it("names the destination on the button that runs the move", () => {
 		const dom = mount({ mailboxes: FOLDERS });
 		dom.click(dom.byLabel("Move to folder"));
-		dom.click(dom.byLabel("Move to Work"));
-		dom.click(dom.byLabel("Move to Clients"));
+		dom.click(pickerByLabel(dom, "Move to Work"));
+		dom.click(pickerByLabel(dom, "Move to Clients"));
 
-		assert.match(dom.text(), /Move to Clients/);
+		assert.match(pickerText(dom), /Move to Clients/);
 	});
 
 	it("closes on Escape and on a click outside it", () => {
@@ -159,6 +191,56 @@ describe("MoveToTrigger", () => {
 		assert.equal(isOpen(), false);
 	});
 
+	it("renders the desktop picker outside its own subtree (#601)", () => {
+		// Regression: an in-place absolute popover is clipped by the reading
+		// pane's overflow-hidden shell and painted underneath the thread list.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		const trigger = dom.byLabel("Move to folder");
+		const tree = pickerRoot(dom).querySelector("[role=tree]");
+		assert.ok(tree, "the picker is open");
+		assert.ok(
+			!trigger.parentElement?.contains(tree),
+			"the picker escapes the trigger's subtree via a portal",
+		);
+	});
+
+	it("stays open when the press lands inside the portalled panel (#601)", () => {
+		// The panel is not in the trigger's subtree any more, so the outside-press
+		// guard has to recognise it by its own ref — otherwise the first press on
+		// a folder closes the picker before it can be picked.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		dom.dispatch(
+			pickerByLabel(dom, "Move to Work"),
+			new dom.window.MouseEvent("mousedown", { bubbles: true }),
+		);
+
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
+			"true",
+		);
+	});
+
+	it("takes the keyboard into the picker and hands it back on close", () => {
+		// Regression: with the panel on the body, Tab from the trigger walked on
+		// to the next toolbar button instead of entering the picker.
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		const filter = pickerRoot(dom).querySelector('input[type="search"]');
+		assert.ok(filter, "the picker has a filter field");
+		assert.equal(dom.document.activeElement, filter);
+
+		dom.dispatch(
+			dom.window.document,
+			new dom.window.KeyboardEvent("keydown", { key: "Escape" }),
+		);
+		assert.equal(dom.document.activeElement, dom.byLabel("Move to folder"));
+	});
+
 	it("refuses to open, and says why, when the selection spans accounts", () => {
 		const hint = "Select messages from one account to move them";
 		const dom = mount({ mailboxes: FOLDERS, disabledHint: hint });
@@ -212,6 +294,6 @@ describe("MoveToTrigger", () => {
 		dom.click(dom.byLabel("Move to folder"));
 		// No cached mailboxes and no network in the test harness: the picker
 		// shows its loading state rather than an empty list of destinations.
-		assert.match(dom.text(), /Loading folders/);
+		assert.match(pickerText(dom), /Loading folders/);
 	});
 });

package/src/components/mail/MoveToTrigger.tsx

@@ -1,5 +1,11 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { Button, cn, type FolderTreeNode, FolderTreePicker } from "@remit/ui";
+import {
+	Button,
+	cn,
+	type FolderTreeNode,
+	FolderTreePicker,
+	PopoverMenuPortal,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { FolderInput } from "lucide-react";
 import {
@@ -75,6 +81,8 @@ export const MoveToTrigger = ({
 	const [pickedId, setPickedId] = useState<string>();
 	const isDesktop = useIsDesktop();
 	const containerRef = useRef<HTMLDivElement>(null);
+	const panelRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
 	const triggerLabel = label ?? "Move to folder";
 	const popoverId = useId();
 	const { t } = useTranslation("mail", { useSuspense: false });
@@ -119,6 +127,13 @@ export const MoveToTrigger = ({
 	const close = useCallback(() => {
 		setIsOpen(false);
 		setPickedId(undefined);
+		// The panel is about to unmount. Where the keyboard was inside it, hand
+		// focus back to the trigger rather than dropping it on the body; where it
+		// was elsewhere — a press that landed outside — leave it where it is.
+		const active = document.activeElement;
+		if (active && panelRef.current?.contains(active)) {
+			triggerRef.current?.focus();
+		}
 	}, []);
 
 	// Tapping a folder both picks it and opens it, so the move waits for a
@@ -134,12 +149,13 @@ export const MoveToTrigger = ({
 	useEffect(() => {
 		if (!isOpen || !isDesktop) return;
 		const handlePointer = (event: MouseEvent) => {
-			if (
-				containerRef.current &&
-				!containerRef.current.contains(event.target as Node)
-			) {
-				close();
-			}
+			const target = event.target as Node;
+			if (containerRef.current?.contains(target)) return;
+			// The picker renders through a portal into document.body, so it
+			// sits outside the trigger's subtree — count presses on it as
+			// inside, or picking a folder would close the picker first.
+			if (panelRef.current?.contains(target)) return;
+			close();
 		};
 		// The popover owns Escape while it is open (#732). The global triage
 		// layer listens on window and maps Escape to `back`, which closes the
@@ -159,11 +175,15 @@ export const MoveToTrigger = ({
 		};
 	}, [isOpen, isDesktop, close]);
 
+	const anchorRect = () =>
+		containerRef.current?.getBoundingClientRect() ?? null;
+
 	const isTriggerDisabled = disabled || !!disabledHint;
 
 	const TriggerButton = (
 		<button
 			type="button"
+			ref={triggerRef}
 			onClick={(event) => {
 				event.stopPropagation();
 				if (isTriggerDisabled) return;
@@ -204,6 +224,10 @@ export const MoveToTrigger = ({
 			onSelect={setPickedId}
 			onCreateFolder={createFolderIn}
 			onCancel={close}
+			// The desktop panel is portalled onto the body, so Tab from the
+			// trigger would otherwise walk on to the next toolbar button. The
+			// drawer runs its own focus and must not raise a phone keyboard.
+			autoFocusFilter={isDesktop}
 			labels={{
 				filterPlaceholder: t("move_picker_filter_placeholder", {
 					defaultValue: "Filter folders…",
@@ -260,18 +284,27 @@ export const MoveToTrigger = ({
 	return (
 		<div ref={containerRef} className="relative inline-block">
 			{TriggerButton}
-			{isOpen && (
+			{/* Portalled + fixed-positioned: an in-place absolute popover is
+			    clipped by the reading pane's overflow-hidden shell and ends up
+			    painted underneath the thread list (#601). */}
+			<PopoverMenuPortal
+				open={isOpen}
+				align="end"
+				panelRef={panelRef}
+				getAnchor={anchorRect}
+			>
 				<div
 					id={popoverId}
+					ref={panelRef}
 					className={cn(
-						"absolute right-0 mt-1 z-50 w-72 max-h-96 flex flex-col",
+						"w-72 max-h-96 flex flex-col",
 						"bg-surface border border-line rounded-md shadow-lg",
 					)}
 				>
 					{pickerBody}
 					{confirmBar}
 				</div>
-			)}
+			</PopoverMenuPortal>
 		</div>
 	);
 };

package/src/components/onboarding/OnboardingWizard.flow.test.ts

@@ -25,6 +25,12 @@ interface TestConnectionResult {
 
 const OK: TestConnectionResult = { imapSuccess: true, smtpSuccess: true };
 
+/**
+ * Same-origin and hash-only: jsdom implements that navigation, so the redirect
+ * the wizard starts runs for real instead of logging an unimplemented one.
+ */
+const CONSENT_URL = "http://localhost/#microsoft-consent";
+
 interface Backend {
 	test?: TestConnectionResult;
 	syncPhase?: string;
@@ -39,6 +45,9 @@ const cancelled: string[] = [];
 const start = (backend: Backend = {}, skipWelcome = false): DomHarness => {
 	http = mockFetch((call) => {
 		if (call.path === "/accounts/test-connection") return backend.test ?? OK;
+		if (call.path.endsWith("/oauth/microsoft/start")) {
+			return { authorizationUrl: CONSENT_URL };
+		}
 		if (call.path === "/accounts") return { accountId: "acc-new" };
 		if (call.path === "/config") {
 			return {
@@ -277,6 +286,95 @@ describe("OnboardingWizard — a connection that does not work", () => {
 	});
 });
 
+/** Enough rounds for the config read, the start call and its redirect. */
+const settle = async (dom: DomHarness): Promise<void> => {
+	for (let round = 0; round < 4; round += 1) {
+		await dom.flush();
+		await dom.wait(20);
+	}
+};
+
+/** Welcome → Connector → the Microsoft step, with the redirect started. */
+const walkToRedirect = async (dom: DomHarness): Promise<void> => {
+	clickText(dom, "Add your first account");
+	clickText(dom, "Outlook / Microsoft 365");
+	clickText(dom, "Continue with Microsoft");
+	await settle(dom);
+	clickText(dom, "Sign in with Microsoft");
+	await settle(dom);
+};
+
+/**
+ * jsdom reports "prerender" unless it is pretending to be visual, and the
+ * shared environment deliberately does not — so a spec that means "the window
+ * is being looked at" has to say so.
+ */
+const setVisibility = (state: "hidden" | "visible"): void => {
+	Object.defineProperty(document, "visibilityState", {
+		configurable: true,
+		get: () => state,
+	});
+};
+
+/** jsdom has no `PageTransitionEvent`; `persisted` is what the hook reads. */
+const pageShow = (persisted: boolean): Event => {
+	const event = new Event("pageshow");
+	Object.defineProperty(event, "persisted", { value: persisted });
+	return event;
+};
+
+describe("OnboardingWizard — the Microsoft redirect and the way back (#646)", () => {
+	afterEach(() => {
+		Reflect.deleteProperty(document, "visibilityState");
+	});
+
+	it("stays busy while the redirect is only being looked at", async () => {
+		const dom = start();
+		await walkToRedirect(dom);
+
+		assert.match(dom.text(), /Redirecting…/);
+
+		// An app-switch away and back during the `assign` fetch: the window is
+		// looked at again without ever having left.
+		setVisibility("visible");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		dom.dispatch(dom.window, pageShow(false));
+		await settle(dom);
+
+		assert.match(
+			dom.text(),
+			/Redirecting…/,
+			"a look at a window that never left un-busied the button",
+		);
+	});
+
+	it("re-arms the button once the window has been away and come back", async () => {
+		const dom = start();
+		await walkToRedirect(dom);
+
+		setVisibility("hidden");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		dom.dispatch(dom.window, new Event("pagehide"));
+		setVisibility("visible");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		await settle(dom);
+
+		assert.doesNotMatch(dom.text(), /Redirecting…/);
+		assert.match(dom.text(), /Start over/);
+	});
+
+	it("re-arms the button on a page restored from the back-forward cache", async () => {
+		const dom = start();
+		await walkToRedirect(dom);
+
+		dom.dispatch(dom.window, pageShow(true));
+		await settle(dom);
+
+		assert.doesNotMatch(dom.text(), /Redirecting…/);
+		assert.match(dom.text(), /Start over/);
+	});
+});
+
 describe("OnboardingWizard — a sync that stalls", () => {
 	it("says the account is still there and offers a retry", async () => {
 		const dom = start({

package/src/components/onboarding/OnboardingWizard.tsx

@@ -43,7 +43,7 @@ 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 { useReturnFromRedirect } from "../../hooks/useReturnFromRedirect.js";
+import { useRedirectEnded } from "../../hooks/useRedirectEnded.js";
 // useRef is kept for the hasCreatedRef guard — not for DOM refs
 import {
 	type DiscoveryResult,
@@ -303,14 +303,43 @@ function StepMicrosoftEmail({
 		configOperationsGetConfigOptions(),
 	);
 
+	// Microsoft's answer comes back to whichever window the platform picks, and
+	// on iOS that is often the browser rather than the app launched from the
+	// home screen. So this window decides on the account list rather than on
+	// having been the one that got the redirect: an account that was not there
+	// before carries the wizard forward.
+	//
+	// Every return leg is a chance to find that account, not a verdict on the
+	// 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(() => {
+		setPreparing(false);
+		void refetchConfig().then(({ data, isError }) => {
+			if (!stepIsMounted.current) return;
+			if (isError || !data) {
+				setError(
+					"Couldn't check whether the sign-in finished. Open Settings › Accounts to see whether the account is connected.",
+				);
+				return;
+			}
+			setError(null);
+			const connected = data.accounts.find(
+				(account) => !accountIdsBeforeRedirect.current.has(account.accountId),
+			);
+			if (connected) onConnected(connected.accountId);
+		});
+	});
+
 	const startMutation = useMutation({
 		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
 		onSuccess: (data) => {
 			// A step the user left while this was in flight does not get to take the
 			// window with it. `assign` is not synchronous either — the page is still
 			// here while the browser fetches Microsoft's — so the control stays busy
-			// until the window is actually looked at again.
+			// until this window has been away and come back.
 			if (!stepIsMounted.current) return;
+			markRedirectStarted();
 			setAwaitingReturn(true);
 			window.location.assign(data.authorizationUrl);
 		},
@@ -320,39 +349,6 @@ function StepMicrosoftEmail({
 		},
 	});
 
-	// Microsoft's answer comes back to whichever window the platform picks, and
-	// on iOS that is often the browser rather than the app launched from the
-	// home screen. So this window decides on the account list rather than on
-	// having been the one that got the redirect: an account that was not there
-	// before carries the wizard forward.
-	//
-	// Every look at this window is a chance to find that account, not a verdict
-	// on the sign-in — a user who switches 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.
-	useReturnFromRedirect(
-		awaitingReturn,
-		useCallback(() => {
-			// Being looked at again is the proof the redirect is over, however it
-			// ended: the window that was leaving is back, so the button is too.
-			setPreparing(false);
-			void refetchConfig().then(({ data, isError }) => {
-				if (!stepIsMounted.current) return;
-				if (isError || !data) {
-					setError(
-						"Couldn't check whether the sign-in finished. Open Settings › Accounts to see whether the account is connected.",
-					);
-					return;
-				}
-				setError(null);
-				const connected = data.accounts.find(
-					(account) => !accountIdsBeforeRedirect.current.has(account.accountId),
-				);
-				if (connected) onConnected(connected.accountId);
-			});
-		}, [refetchConfig, onConnected]),
-	);
-
 	// The account list is read first and the redirect goes from what it says, so
 	// the window that comes back has something to recognise a new account
 	// against. A list that cannot be read stops the flow here, where it can be

package/src/hooks/useRedirectEnded.ts

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useReturnFromRedirect } from "./useReturnFromRedirect";
+
+/**
+ * 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.
+ *
+ * A control that starts a redirect stays busy until the redirect is over, and
+ * neither the mutation settling nor the next look at this window proves that:
+ * `window.location.assign` returns with the page still here while the browser
+ * fetches the provider's, and an app-switch away and back during that fetch is
+ * a look at a window that never left. Installed to a home screen there is no
+ * address bar and app-switching is how people move around, so that early look
+ * is the common case, not the corner one (#646). The page having actually been
+ * hidden is what separates the two.
+ *
+ * Every return leg, not just the first: a user who came back mid-sign-in to
+ * read a password has finished nothing, so the watch stays armed.
+ *
+ * The listeners are on from mount and `markRedirectStarted` runs synchronously
+ * on the line before `assign`, so nothing here depends on a render landing
+ * first.
+ *
+ * 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.
+ */
+export const useRedirectEnded = (onEnded: () => void): (() => void) => {
+	const armed = useRef(false);
+	const hidden = useRef(false);
+	const latest = useRef(onEnded);
+	latest.current = onEnded;
+
+	const settle = useCallback((): void => {
+		if (!armed.current || !hidden.current) return;
+		hidden.current = false;
+		latest.current();
+	}, []);
+
+	useEffect(() => {
+		const markHidden = () => {
+			hidden.current = true;
+		};
+		const handleVisibility = () => {
+			if (document.visibilityState !== "hidden") return;
+			markHidden();
+		};
+		const handlePageShow = (event: PageTransitionEvent) => {
+			if (!event.persisted) return;
+			// A restored page is the whole round trip in one event: the hide that
+			// preceded it belongs to the document this one resumes, and nothing
+			// else is going to report it.
+			markHidden();
+			settle();
+		};
+		document.addEventListener("visibilitychange", handleVisibility);
+		window.addEventListener("pagehide", markHidden);
+		window.addEventListener("pageshow", handlePageShow);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibility);
+			window.removeEventListener("pagehide", markHidden);
+			window.removeEventListener("pageshow", handlePageShow);
+		};
+	}, [settle]);
+
+	// 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
+	// with a flag already flipped.
+	useReturnFromRedirect(true, settle);
+
+	return useCallback(() => {
+		armed.current = true;
+		hidden.current = false;
+	}, []);
+};

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

@@ -1,7 +1,19 @@
 // biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
 import assert from "node:assert";
-import { describe, test } from "node:test";
-import { mapOauthError } from "./accounts.tsx";
+import { afterEach, describe, test } from "node:test";
+import {
+	type AnyRoute,
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { mapOauthError, Route } from "./accounts.tsx";
 
 describe("mapOauthError", () => {
 	test("access_denied returns cancellation message", () => {
@@ -63,3 +75,138 @@ describe("mapOauthError", () => {
 		assert.ok(typeof result === "string" && result.length > 0);
 	});
 });
+
+/**
+ * The Reconnect button and the redirect it starts (#646, PR #955).
+ *
+ * The busy state rides a latch, not the mutation settling, because
+ * `window.location.assign` returns with the page still here. The latch needs an
+ * end as well as a start: Back out of Microsoft's consent screen restores this
+ * page with the account still asking to be re-authenticated, so nothing else
+ * clears it and the button reads "Redirecting…" for good.
+ */
+
+/** Same-origin and hash-only, so jsdom performs it rather than logging it. */
+const CONSENT_URL = "http://localhost/#microsoft-consent";
+
+const REAUTH_ACCOUNT = {
+	accountId: "acc-1",
+	email: "matthijs@ischen.nl",
+	displayName: "Matthijs",
+	authType: "oauthMicrosoft",
+	connectionState: "reauth_required",
+};
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+const settle = async (dom: DomHarness): Promise<void> => {
+	for (let round = 0; round < 4; round += 1) {
+		await dom.flush();
+		await dom.wait(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
+ * is being looked at" has to say so.
+ */
+const setVisibility = (state: "hidden" | "visible"): void => {
+	Object.defineProperty(document, "visibilityState", {
+		configurable: true,
+		get: () => state,
+	});
+};
+
+/** jsdom has no `PageTransitionEvent`; `persisted` is what the hook reads. */
+const pageShow = (persisted: boolean): Event => {
+	const event = new Event("pageshow");
+	Object.defineProperty(event, "persisted", { value: persisted });
+	return event;
+};
+
+/** The real route, mounted the way the generated tree mounts it. */
+const mountAccounts = async (): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/oauth/microsoft/start")) {
+			return { authorizationUrl: CONSENT_URL };
+		}
+		if (call.path.endsWith("/config")) {
+			return { accounts: [REAUTH_ACCOUNT], mailboxes: [] };
+		}
+		return {};
+	});
+
+	const rootRoute = createRootRoute({ component: Outlet });
+	const accountsRoute = (
+		Route as unknown as { update: (options: unknown) => AnyRoute }
+	).update({
+		id: "/settings/accounts",
+		path: "/settings/accounts",
+		getParentRoute: () => rootRoute,
+	});
+	const routeTree = rootRoute.addChildren([
+		accountsRoute,
+	]) as unknown as AnyRoute;
+	const router = createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: ["/settings/accounts"] }),
+	}) as unknown as AnyRouter;
+	await router.load();
+
+	const mounted = createDomHarness();
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await settle(mounted);
+	return mounted;
+};
+
+const startReconnect = async (dom: DomHarness): Promise<void> => {
+	dom.click(dom.byText("button", "Reconnect"));
+	await settle(dom);
+};
+
+describe("the Reconnect button and the redirect it starts", () => {
+	afterEach(() => {
+		harness?.close();
+		harness = undefined;
+		http?.restore();
+		http = undefined;
+		Reflect.deleteProperty(document, "visibilityState");
+	});
+
+	test("goes busy and stays busy while the redirect is in flight", async () => {
+		const dom = await mountAccounts();
+		await startReconnect(dom);
+
+		assert.match(dom.text(), /Redirecting…/);
+
+		// A look at a window that never left is not the redirect ending.
+		setVisibility("visible");
+		dom.dispatch(dom.document, new Event("visibilitychange"));
+		dom.dispatch(dom.window, pageShow(false));
+		await settle(dom);
+
+		assert.match(dom.text(), /Redirecting…/);
+	});
+
+	test("re-arms when the restored page still needs re-authenticating", async () => {
+		const dom = await mountAccounts();
+		await startReconnect(dom);
+
+		dom.dispatch(dom.window, pageShow(true));
+		await settle(dom);
+
+		assert.doesNotMatch(
+			dom.text(),
+			/Redirecting…/,
+			"Back out of the consent screen left the button busy for good",
+		);
+		assert.ok(dom.byText("button", "Reconnect"));
+	});
+});

package/src/routes/settings/accounts.tsx

@@ -24,6 +24,7 @@ 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 { useReturnFromRedirect } from "@/hooks/useReturnFromRedirect";
 import { formatRelativeTime } from "@/lib/format";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
@@ -270,9 +271,20 @@ function AccountsSettings() {
 		if (!account || !needsReauth(account)) setReconnectingAccountId(null);
 	}, [config, reconnectingAccountId]);
 
+	// A redirect that ends without the reconnect landing — Back out of the
+	// consent screen, or an `assign` that never navigates — leaves an account
+	// 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(() => {
+		setReconnectingAccountId(null);
+	});
+
 	const reconnectMutation = useMutation({
 		...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
 		onSuccess: (data) => {
+			markReconnectStarted();
 			window.location.assign(data.authorizationUrl);
 		},
 		onError: (err) => {
@@ -393,9 +405,12 @@ function AccountsSettings() {
 					{config.accounts.map((account) => {
 						const isReauth = needsReauth(account);
 						const isOAuthAccount = account.authType === "oauthMicrosoft";
-						const isReconnecting =
-							reconnectingAccountId === account.accountId &&
-							reconnectMutation.isPending;
+						// The mutation settling does not mean the window has gone anywhere:
+						// `assign` leaves the page here while the browser fetches Microsoft's
+						// page. The busy state rides the latch instead, which only clears on
+						// evidence — the server saying the account no longer needs re-auth,
+						// or the start call failing.
+						const isReconnecting = reconnectingAccountId === account.accountId;
 
 						const primaryAction: RowAction =
 							isReauth && isOAuthAccount