@remit/web-client 0.0.116 → 0.0.118

package/package.json

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

@@ -7,13 +7,12 @@
  * what wording is not decided here.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { ShellTopBar } from "@remit/ui";
+import { ShellTopBar, shortcutHintForAction } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
-import { shortcutHintForAction } from "@/lib/keymap";
 import { useMailContext } from "@/lib/mail-context";
 
 interface MailTopBarProps {

package/src/components/mail/MessageToolbar.tsx

@@ -2,9 +2,9 @@ import {
 	IntelligenceToggle,
 	type MailAction,
 	MailActionToolbar,
+	tooltipForAction,
 } from "@remit/ui";
 import { useState } from "react";
-import { tooltipForAction } from "@/lib/keymap";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 /**

package/src/components/mail/ThreadListInteraction.tsx

@@ -16,7 +16,7 @@
  * are not rendered: focus stops moving, the highlight disappears, and the next
  * verb acts on a message the user cannot see.
  */
-import { SelectionTopBar, type Verb } from "@remit/ui";
+import { SelectionTopBar, useListCursor, type Verb } from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -30,7 +30,6 @@ import {
 } from "react";
 import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
-import { useListCursor } from "@/hooks/useListCursor";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { formatDeleteToTrashTitle } from "@/lib/format";

package/src/components/self-update/SelfUpdateOverlay.tsx

@@ -4,8 +4,8 @@
  * Once consent is given the server is genuinely going away, so a quiet spinner
  * over a mailbox that cannot load would let a broken system look healthy. This
  * mounts at the app root and owns the window for the whole apply, and for the
- * "server never came back" verdict — from any route, so a reload mid-apply or a
- * second tab resumes straight into it.
+ * "server never came back" verdict — from any route, and in any tab the server
+ * tells about the run.
  */
 import {
 	SelfUpdateProgressOverlay,

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,7 +1,6 @@
-import { Kbd } from "@remit/ui";
+import { Kbd, KEY_HINT_GROUPS } from "@remit/ui";
 import { X } from "lucide-react";
 import { Fragment, useCallback, useEffect } from "react";
-import { KEY_HINT_GROUPS } from "@/lib/keymap";
 import { cn } from "@/lib/utils";
 
 interface KeyboardShortcutsModalProps {
@@ -11,7 +10,7 @@ interface KeyboardShortcutsModalProps {
 
 /**
  * The `?` help overlay (#429). Renders the full triage key map from the single
- * source of truth (`@/lib/keymap`) using the remit-ui `Kbd` component, so the
+ * source of truth (`@remit/ui`'s keymap) using the `Kbd` component, so the
  * displayed bindings can never drift from what the dispatcher actually routes.
  */
 export const KeyboardShortcutsModal = ({

package/src/hooks/use-system-update.test.ts

@@ -1,9 +1,9 @@
 /**
  * The self-update hook, wired end to end against the generated client through a
  * mocked fetch. The pure state machine is covered in `lib/self-update-state.test.ts`;
- * these exercise the parts only the live hook has: resuming a persisted run
- * across a request that fails, the poll that survives a dead server, and the
- * POST that persists a run id the reload will pick up.
+ * these exercise the parts only the live hook has: what a page claims before the
+ * server has answered, the run this page starts and holds, and the poll that
+ * survives a dead server.
  */
 import assert from "node:assert/strict";
 import { afterEach, beforeEach, describe, test } from "node:test";
@@ -17,9 +17,8 @@ import { SelfUpdateOverlay } from "../components/self-update/SelfUpdateOverlay";
 import { AdvancedNavIcon } from "../components/settings/AdvancedNavIcon";
 import { SelfUpdatePanel } from "../components/settings/SelfUpdatePanel";
 import {
-	loadHeldRun,
-	SELF_UPDATE_RUN_KEY,
-	saveHeldRun,
+	APPLY_BUDGET_SECONDS,
+	NEVER_CAME_BACK_MARGIN_SECONDS,
 } from "../lib/self-update-state";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
 import { type HttpMock, httpError, mockFetch } from "../test-support/http";
@@ -32,19 +31,12 @@ import {
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
 
-function installMemoryStorage(): void {
-	const store = new Map<string, string>();
-	globalThis.localStorage = {
-		getItem: (k: string) => store.get(k) ?? null,
-		setItem: (k: string, v: string) => void store.set(k, v),
-		removeItem: (k: string) => void store.delete(k),
-		clear: () => store.clear(),
-		key: () => null,
-		length: 0,
-	} as Storage;
-}
-
-beforeEach(installMemoryStorage);
+// The browser global, as the app would find it. Present so that "a reload
+// resumes nothing" is a claim about the app rather than about the harness.
+beforeEach(() => {
+	globalThis.localStorage = globalThis.window.localStorage;
+	localStorage.clear();
+});
 
 afterEach(() => {
 	http?.restore();
@@ -84,6 +76,8 @@ const available: RemitImapSystemUpdateResponse = {
 };
 
 const updateKey = systemOperationsGetSystemUpdateQueryKey();
+const BUDGET_MS =
+	(APPLY_BUDGET_SECONDS + NEVER_CAME_BACK_MARGIN_SECONDS) * 1000;
 
 async function settle(dom: DomHarness): Promise<void> {
 	for (let attempt = 0; attempt < 40; attempt += 1) {
@@ -105,6 +99,55 @@ async function settle(dom: DomHarness): Promise<void> {
 	}
 }
 
+/**
+ * Mount the provider with a probe on the hook, so a test can drive `install`
+ * and read the surface back. The POST answers with a run in flight, which is
+ * what the real seam returns the moment it accepts the request.
+ */
+function mountApi(
+	getResponse: () => unknown,
+	children: ReactNode = null,
+): { dom: DomHarness; api: () => SelfUpdateApi } {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/system/update") && call.method === "GET") {
+			return getResponse();
+		}
+		return {
+			currentVersion: "0.9.3",
+			check: { status: "ok", updateAvailable: true, latestVersion: "0.9.4" },
+			run: run({ outcome: null }),
+		};
+	});
+	let captured: SelfUpdateApi | undefined;
+	const Probe = () => {
+		captured = useSelfUpdate();
+		return null;
+	};
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(SelfUpdateProvider, null, createElement(Probe), children),
+	);
+	return {
+		dom: harness,
+		api: () => {
+			if (!captured) throw new Error("hook not mounted");
+			return captured;
+		},
+	};
+}
+
+async function startUpdate(
+	dom: DomHarness,
+	api: () => SelfUpdateApi,
+): Promise<void> {
+	await act(async () => {
+		api().install("0.9.4");
+		await dom.flush();
+		await dom.wait(1);
+		await dom.flush();
+	});
+}
+
 async function renderSurface(
 	getResponse: () => unknown,
 	children: ReactNode,
@@ -209,41 +252,122 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		assert.match(dom.html(), /Installing Remit 0\.9\.4/);
 	});
 
-	test("a held run resumes into applying when the request fails", async () => {
-		saveHeldRun({
-			runId: "upd_1",
-			attemptedVersion: "0.9.4",
-			previousVersion: "0.9.3",
-			startedAt: Date.now() - 20_000,
-		});
-		const dom = await renderSurface(() => {
-			throw new Error("connection refused");
+	test("a page that has heard nothing yet says nothing at all", async () => {
+		http = mockFetch(() => new Promise(() => {}));
+		harness = createDomHarness();
+		harness.renderApp(
+			createElement(
+				SelfUpdateProvider,
+				null,
+				createElement(SelfUpdateOverlay),
+				createElement(SelfUpdatePanel),
+			),
+		);
+		await harness.flush();
+		await harness.wait(1);
+		await harness.flush();
+
+		assert.equal(harness.html(), "");
+	});
+
+	test("the page that asked for the update rides out a failed request", async () => {
+		let failing = false;
+		const { dom, api } = mountApi(() => {
+			if (failing) throw new Error("connection refused");
+			return available;
 		}, createElement(SelfUpdateOverlay));
+		await settle(dom);
+		await startUpdate(dom, api);
+
+		failing = true;
+		await act(async () => {
+			api().onRetryConnection();
+			await dom.flush();
+			await dom.wait(1);
+			await dom.flush();
+		});
+
+		const surface = api().surface;
+		assert.equal(
+			surface.status === "ready" &&
+				surface.section.status === "applying" &&
+				surface.section.phase,
+			"reconnecting",
+		);
 		assert.match(dom.html(), /Installing Remit 0\.9\.4/);
 		assert.doesNotMatch(dom.html(), /has not answered since the restart/);
 	});
 
-	test("the budget elapsing flips a held run to never-came-back", async () => {
-		saveHeldRun({
-			runId: "upd_1",
-			attemptedVersion: "0.9.4",
-			previousVersion: "0.9.3",
-			startedAt: Date.now() - 60 * 60_000,
-		});
-		const dom = await renderSurface(() => {
-			throw new Error("connection refused");
+	test("a silence past the apply budget stops claiming an install is running", async () => {
+		let failing = false;
+		const { dom, api } = mountApi(() => {
+			if (failing) throw new Error("connection refused");
+			return available;
 		}, createElement(SelfUpdateOverlay));
-		assert.match(dom.html(), /has not answered since the restart/);
-		assert.match(dom.html(), /remit logs/);
+		await settle(dom);
+		await startUpdate(dom, api);
+
+		failing = true;
+		const realNow = Date.now;
+		Date.now = () => realNow() + BUDGET_MS + 60_000;
+		try {
+			await act(async () => {
+				api().onRetryConnection();
+				await dom.flush();
+				await dom.wait(1);
+				await dom.flush();
+			});
+			assert.doesNotMatch(dom.html(), /Installing Remit 0\.9\.4/);
+			assert.match(dom.html(), /has not answered since the restart/);
+			assert.match(dom.html(), /remit logs/);
+		} finally {
+			Date.now = realNow;
+		}
 	});
 
-	test("a poll that never answers gives up at the budget too", async () => {
-		saveHeldRun({
-			runId: "upd_1",
-			attemptedVersion: "0.9.4",
-			previousVersion: "0.9.3",
-			startedAt: Date.now() - 60 * 60_000,
+	test("a run the server reports finished ends the wait", async () => {
+		let finished = false;
+		const { dom, api } = mountApi(
+			() =>
+				finished
+					? {
+							currentVersion: "0.9.4",
+							check: { status: "ok", updateAvailable: false },
+							run: run({ outcome: "succeeded" }),
+						}
+					: available,
+			createElement(SelfUpdateOverlay),
+		);
+		await settle(dom);
+		await startUpdate(dom, api);
+
+		finished = true;
+		await act(async () => {
+			api().onRetryConnection();
+			await dom.flush();
+			await dom.wait(1);
+			await dom.flush();
 		});
+
+		const surface = api().surface;
+		assert.equal(
+			surface.status === "ready" && surface.section.status,
+			"succeeded",
+		);
+		assert.equal(dom.html(), "");
+	});
+
+	test("a reload during the silence resumes nothing", async () => {
+		const { dom, api } = mountApi(
+			() => available,
+			createElement(SelfUpdateOverlay),
+		);
+		await settle(dom);
+		await startUpdate(dom, api);
+		assert.match(dom.html(), /Installing Remit 0\.9\.4/);
+
+		http?.restore();
+		harness?.close();
 		http = mockFetch(() => new Promise(() => {}));
 		harness = createDomHarness();
 		harness.renderApp(
@@ -253,65 +377,28 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		await harness.wait(1);
 		await harness.flush();
 
-		assert.doesNotMatch(harness.html(), /Installing Remit 0\.9\.4/);
-		assert.match(harness.html(), /has not answered since the restart/);
-		assert.match(harness.html(), /remit logs/);
-		assert.equal(loadHeldRun(), null);
+		assert.equal(harness.html(), "");
 	});
 });
 
 describe("useSystemUpdate — actions", () => {
-	function mountApi(getResponse: () => unknown): {
-		dom: DomHarness;
-		api: () => SelfUpdateApi;
-	} {
-		http = mockFetch((call) => {
-			if (call.path.endsWith("/system/update") && call.method === "GET") {
-				return getResponse();
-			}
-			return {
-				currentVersion: "0.9.3",
-				check: { status: "ok", updateAvailable: true, latestVersion: "0.9.4" },
-				run: run({ outcome: null }),
-			};
-		});
-		let captured: SelfUpdateApi | undefined;
-		const Probe = () => {
-			captured = useSelfUpdate();
-			return null;
-		};
-		harness = createDomHarness();
-		harness.renderApp(
-			createElement(SelfUpdateProvider, null, createElement(Probe)),
-		);
-		return {
-			dom: harness,
-			api: () => {
-				if (!captured) throw new Error("hook not mounted");
-				return captured;
-			},
-		};
-	}
-
-	test("install persists the run id the surface returns", async () => {
+	test("install takes the run from the surface and writes nothing down", async () => {
 		const { dom, api } = mountApi(() => available);
 		await settle(dom);
+		await startUpdate(dom, api);
 
-		await act(async () => {
-			api().install("0.9.4");
-			await dom.flush();
-			await dom.wait(1);
-			await dom.flush();
-		});
-
-		const held = loadHeldRun();
-		assert.equal(held?.runId, "upd_1");
-		assert.equal(localStorage.getItem(SELF_UPDATE_RUN_KEY) !== null, true);
 		const surface = api().surface;
 		assert.equal(
 			surface.status === "ready" && surface.overlay.kind,
 			"applying",
 		);
+		assert.equal(
+			surface.status === "ready" &&
+				surface.section.status === "applying" &&
+				surface.section.runId,
+			"upd_1",
+		);
+		assert.equal(localStorage.length, 0);
 	});
 
 	test("dismissing a finished result clears the pane", async () => {

package/src/hooks/use-system-update.ts

@@ -1,14 +1,18 @@
 /**
  * The self-update surface, wired to the generated client.
  *
- * A single instance owns the query, the mutation, and the run id the client
- * persists across a restart, and hands the folded `SelfUpdateState` plus the
- * blocking-overlay state to every consumer through context — so the Advanced
- * pane, the root overlay, and the nav dot all read one source of truth. The
- * state machine itself lives in `lib/self-update-state.ts`.
+ * A single instance owns the query, the mutation, and the run this page asked
+ * for, and hands the folded `SelfUpdateState` plus the blocking-overlay state to
+ * every consumer through context — so the Advanced pane, the root overlay, and
+ * the nav dot all read one source of truth. The state machine itself lives in
+ * `lib/self-update-state.ts`.
+ *
+ * The held run lives here and nowhere else. A restart does not reload the page,
+ * so this state spans the whole window; a page that loads afterwards holds
+ * nothing and takes the server's answer as it finds it.
  *
  * Polling follows the run: every 30 seconds while idle, every 5 seconds while a
- * run is in flight or a persisted run is being resumed.
+ * run is in flight or this page is waiting on one it started.
  */
 import {
 	systemOperationsApplySystemUpdateMutation,
@@ -33,13 +37,11 @@ import {
 } from "react";
 import {
 	appliesSchemaMigration,
-	clearStoredRun,
 	deriveUpdateSurface,
 	type HeldRun,
 	isSurfaceAbsent,
-	loadHeldRun,
+	mapUpdatePhase,
 	releaseFromCheck,
-	saveHeldRun,
 	type UpdateSurface,
 } from "@/lib/self-update-state";
 
@@ -76,7 +78,7 @@ function pollInterval(
 
 export function useSystemUpdate(): SelfUpdateApi {
 	const queryClient = useQueryClient();
-	const [held, setHeld] = useState<HeldRun | null>(() => loadHeldRun());
+	const [held, setHeld] = useState<HeldRun | null>(null);
 	const [dismissedRunId, setDismissedRunId] = useState<string | null>(null);
 	const [checkRequested, setCheckRequested] = useState(false);
 
@@ -112,11 +114,7 @@ export function useSystemUpdate(): SelfUpdateApi {
 			? derived.surface.section.runId
 			: null;
 
-	const { clearStoredRun: shouldClearStored, releaseHeld } = derived;
-
-	useEffect(() => {
-		if (shouldClearStored) clearStoredRun();
-	}, [shouldClearStored]);
+	const { releaseHeld } = derived;
 
 	useEffect(() => {
 		if (releaseHeld) setHeld((current) => (current === null ? current : null));
@@ -143,14 +141,13 @@ export function useSystemUpdate(): SelfUpdateApi {
 		onSuccess: (response: RemitImapSystemUpdateResponse) => {
 			const run = response.run;
 			if (run !== null) {
-				const record: HeldRun = {
+				setHeld({
 					runId: run.runId,
 					attemptedVersion: run.targetVersion,
 					previousVersion: run.fromVersion,
+					phase: mapUpdatePhase(run.phase),
 					startedAt: Date.now(),
-				};
-				saveHeldRun(record);
-				setHeld(record);
+				});
 				setDismissedRunId(null);
 			}
 			queryClient.setQueryData(
@@ -174,7 +171,6 @@ export function useSystemUpdate(): SelfUpdateApi {
 	const onDismissResult = useCallback(() => {
 		if (shownRunIdRef.current !== null)
 			setDismissedRunId(shownRunIdRef.current);
-		clearStoredRun();
 		setHeld(null);
 	}, []);
 

package/src/hooks/useTriageLayer.ts

@@ -14,12 +14,9 @@
  * context comes first, the pane builds its handlers from it, and the keyboard
  * registration comes last.
  */
+import { type TriageHandlers, useTriageKeyboard } from "@remit/ui";
 import { type RefObject, useCallback, useRef, useState } from "react";
 import type { MessageListCommands } from "@/components/mail/MessageList";
-import {
-	type TriageHandlers,
-	useTriageKeyboard,
-} from "@/hooks/useTriageKeyboard";
 import { adjacentMessageId } from "@/lib/adjacent-message";
 
 export interface TriageContextUpdate {