@remit/web-client 0.0.113 → 0.0.115

package/package.json

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

@@ -1,41 +1,20 @@
 /**
- * MailTopBar — the app's one search surface and its global actions.
+ * MailTopBar — the `/mail` shell's top bar, wired to the app.
  *
- * Mounted by the `/mail` shell across the top of the whole layout — the nav
- * column, the list, the reading pane and the intelligence rail. It is the app's
- * search, not the list's: the list header drops its own field wherever this bar
- * is mounted, so exactly one search input exists on the page and the "/"
- * shortcut has one target.
- *
- * The actions here are the ones that belong to the app rather than to whatever
- * is currently listed or open — the nav toggle, compose, bug report, settings,
- * account. Reply, delete, move and the rest stay on the reading pane's own
- * toolbar, under this bar.
- *
- * The field carries one chip: the scope of the view the user navigated into
- * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
- * searches everything. Typed `in:`/`from:` terms are not chipped here — they
- * are already visible as the text the user typed, and chipping them would show
- * the same term twice in one field; they render as chips over the result
- * sections instead, where the text is not repeated.
+ * The bar itself is `ShellTopBar` in the kit. This supplies what the kit cannot
+ * know: the search scope the route carries, the app's routes, its keymap and
+ * its signed-in session. Which actions the bar carries, in what order and with
+ * what wording is not decided here.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AppTopBar, Button, NavToggleButton, SearchBar } from "@remit/ui";
+import { ShellTopBar } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { Settings, SquarePen } from "lucide-react";
 import { AccountMenu } from "@/auth/AccountMenu";
-import { BugReportButton } from "@/components/ui/BugReportButton";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
 import { useSearchScope } from "@/hooks/useSearchScope";
-import { tooltipForAction } from "@/lib/keymap";
+import { openBugReport } from "@/lib/bug-report";
+import { shortcutHintForAction } from "@/lib/keymap";
 import { useMailContext } from "@/lib/mail-context";
-import type { SearchScopeState } from "@/lib/search-scope";
-
-const SEARCH_PLACEHOLDER: Record<SearchScopeState["kind"], string> = {
-	global: "Search all mail",
-	pending: "Search mail",
-	scoped: "Search this folder",
-};
 
 interface MailTopBarProps {
 	accounts: RemitImapAccountResponse[];
@@ -51,47 +30,23 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 		scope.kind === "scoped"
 			? [{ id: scope.chip.id, label: scope.chip.label, tone: "scope" as const }]
 			: undefined;
-	// Only the brief may claim to search all mail. A mailbox route whose name has
-	// not loaded yet has no chip to show but is already narrowed, so it gets the
-	// neutral wording rather than a placeholder that asserts the wrong scope.
-	const placeholder = SEARCH_PLACEHOLDER[scope.kind];
 
 	return (
-		<AppTopBar
-			leading={<NavToggleButton />}
-			search={
-				<SearchBar
-					value={searchInput}
-					onChange={onSearchChange}
-					onClear={onSearchClear}
-					onClearQuery={onSearchClearQuery}
-					chips={chips}
-					onRemoveChip={clearScope}
-					placeholder={placeholder}
-				/>
-			}
-			actions={
-				<>
-					<Button
-						variant="ghost"
-						size="sm"
-						icon={<SquarePen className="size-4" />}
-						title={`Compose ${tooltipForAction("compose")}`}
-						aria-label="Compose"
-						onClick={compose}
-					/>
-					<BugReportButton />
-					<Button
-						variant="ghost"
-						size="sm"
-						icon={<Settings className="size-4" />}
-						title="Settings"
-						aria-label="Settings"
-						onClick={() => navigate({ to: "/settings/accounts" })}
-					/>
-					<AccountMenu />
-				</>
-			}
+		<ShellTopBar
+			search={{
+				value: searchInput,
+				scope: scope.kind,
+				chips,
+				onChange: onSearchChange,
+				onClear: onSearchClear,
+				onClearQuery: onSearchClearQuery,
+				onRemoveChip: clearScope,
+			}}
+			onCompose={compose}
+			onReportBug={openBugReport}
+			onOpenSettings={() => navigate({ to: "/settings/accounts" })}
+			composeShortcut={shortcutHintForAction("compose")}
+			account={<AccountMenu />}
 		/>
 	);
 }

package/src/components/mail/MailNav.tsx

@@ -47,7 +47,7 @@ export function MailNav({ accounts, onMailboxSelect }: MailNavProps) {
 					<Settings className="size-4 shrink-0" />
 					<span className="flex-1 truncate text-left">Settings</span>
 				</Link>
-				<BugReportButton variant="drawer" />
+				<BugReportButton />
 				<AccountSession>
 					{({ signOut }) => (
 						<button

package/src/components/ui/BugReportButton.tsx

@@ -1,45 +1,20 @@
-import { Button } from "@remit/ui";
 import { Bug } from "lucide-react";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-
-interface BugReportButtonProps {
-	/**
-	 * `icon` (default) is the compact ghost icon button used in the desktop
-	 * message toolbar. `drawer` renders a full-width labeled row to sit beside
-	 * Settings in the mobile drawer footer, where an icon-only control would be
-	 * unreachable/ambiguous (#685).
-	 */
-	variant?: "icon" | "drawer";
-}
-
-const openBugReport = () => {
-	const ctx = buildBugReportContext();
-	const url = buildGitHubIssueUrl(ctx);
-	window.open(url, "_blank", "noopener,noreferrer");
-};
-
-export function BugReportButton({ variant = "icon" }: BugReportButtonProps) {
-	if (variant === "drawer") {
-		return (
-			<button
-				type="button"
-				onClick={openBugReport}
-				className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
-			>
-				<Bug className="size-4 shrink-0" />
-				<span className="flex-1 truncate text-left">Report a bug</span>
-			</button>
-		);
-	}
+import { openBugReport } from "@/lib/bug-report";
 
+/**
+ * The mobile drawer's bug-report row — a full-width labeled control beside
+ * Settings, where an icon-only button would be unreachable and ambiguous
+ * (#685). Above the drawer, the shell's top bar carries this action.
+ */
+export function BugReportButton() {
 	return (
-		<Button
-			variant="ghost"
-			size="sm"
-			icon={<Bug className="size-4" />}
-			title="Report a bug"
-			aria-label="Report a bug"
+		<button
+			type="button"
 			onClick={openBugReport}
-		/>
+			className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+		>
+			<Bug className="size-4 shrink-0" />
+			<span className="flex-1 truncate text-left">Report a bug</span>
+		</button>
 	);
 }

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

@@ -236,6 +236,28 @@ describe("SelfUpdateOverlay — the blocking screen", () => {
 		assert.match(dom.html(), /has not answered since the restart/);
 		assert.match(dom.html(), /remit logs/);
 	});
+
+	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,
+		});
+		http = mockFetch(() => new Promise(() => {}));
+		harness = createDomHarness();
+		harness.renderApp(
+			createElement(SelfUpdateProvider, null, createElement(SelfUpdateOverlay)),
+		);
+		await harness.flush();
+		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);
+	});
 });
 
 describe("useSystemUpdate — actions", () => {

package/src/lib/bug-report.ts

@@ -310,3 +310,8 @@ export function buildGitHubIssueUrl(ctx: BugReportContext): string {
 
 	return issueUrl(withoutComponentStack, overrides);
 }
+
+export function openBugReport(): void {
+	const url = buildGitHubIssueUrl(buildBugReportContext());
+	window.open(url, "_blank", "noopener,noreferrer");
+}

package/src/lib/keymap.test.ts

@@ -1,6 +1,11 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
-import { KEY_HINT_GROUPS, keysForAction, tooltipForAction } from "./keymap.ts";
+import {
+	KEY_HINT_GROUPS,
+	keysForAction,
+	shortcutHintForAction,
+	tooltipForAction,
+} from "./keymap.ts";
 
 describe("keymap module", () => {
 	test("exposes the documented groups in reading order", () => {
@@ -35,6 +40,20 @@ describe("keymap module", () => {
 		assert.strictEqual(tooltipForAction("compose"), "(c)");
 	});
 
+	test("shortcutHintForAction renders the binding without the parens", () => {
+		assert.strictEqual(shortcutHintForAction("reply"), "r");
+		assert.strictEqual(shortcutHintForAction("goBrief"), "g then b");
+		assert.strictEqual(shortcutHintForAction("compose"), "c");
+	});
+
+	test("an action with no binding gets no hint and no empty parens", () => {
+		const unbound = "totallyMissing" as Parameters<
+			typeof shortcutHintForAction
+		>[0];
+		assert.strictEqual(shortcutHintForAction(unbound), "");
+		assert.strictEqual(tooltipForAction(unbound), "");
+	});
+
 	test("every hint's action is a non-empty key list", () => {
 		for (const group of KEY_HINT_GROUPS) {
 			for (const hint of group.hints) {

package/src/lib/keymap.ts

@@ -188,14 +188,23 @@ export function keysForAction(action: TriageAction): string[] | undefined {
 }
 
 /**
- * Render an action's binding as a compact tooltip suffix, e.g. "(r)" or
- * "(g then b)". Returns "" when the action has no hint.
+ * Render an action's binding as it reads to a user, e.g. "r" or "g then b".
+ * Returns "" when the action has no hint.
  */
-export function tooltipForAction(action: TriageAction): string {
+export function shortcutHintForAction(action: TriageAction): string {
 	const keys = keysForAction(action);
 	if (!keys || keys.length === 0) return "";
-	if (keys.length === 1) return `(${keys[0]})`;
+	if (keys.length === 1) return keys[0] ?? "";
 	// Sequence (go-to) keys read as "g then b"; modifier combos as "⌘N".
-	if (keys[0] === "g") return `(${keys.join(" then ")})`;
-	return `(${keys.join("")})`;
+	if (keys[0] === "g") return keys.join(" then ");
+	return keys.join("");
+}
+
+/**
+ * Render an action's binding as a compact tooltip suffix, e.g. "(r)" or
+ * "(g then b)". Returns "" when the action has no hint.
+ */
+export function tooltipForAction(action: TriageAction): string {
+	const hint = shortcutHintForAction(action);
+	return hint === "" ? "" : `(${hint})`;
 }

package/src/lib/self-update-state.test.ts

@@ -470,6 +470,30 @@ describe("deriveUpdateSurface — a held run across a restart", () => {
 		assert.equal(result.releaseHeld, true);
 	});
 
+	test("a first poll still in flight keeps applying inside the budget", () => {
+		const result = deriveUpdateSurface(
+			input({ held: held({ startedAt: NOW - 20_000 }) }),
+		);
+		if (
+			result.surface.status !== "ready" ||
+			result.surface.overlay.kind !== "applying"
+		) {
+			assert.fail("expected the applying overlay");
+		}
+		assert.equal(result.surface.overlay.phase, "preparing");
+		assert.equal(result.clearStoredRun, false);
+	});
+
+	test("a poll that never answers gives up at the budget", () => {
+		const result = deriveUpdateSurface(
+			input({ held: held({ startedAt: NOW - BUDGET_MS - 60_000 }) }),
+		);
+		assert.equal(result.surface.status, "ready");
+		if (result.surface.status !== "ready") return;
+		assert.equal(result.surface.overlay.kind, "neverCameBack");
+		assert.equal(result.clearStoredRun, true);
+	});
+
 	test("an early server answer with no run yet keeps applying", () => {
 		const result = deriveUpdateSurface(
 			input({ data: response({ run: null }), held: held() }),

package/src/lib/self-update-state.ts

@@ -9,9 +9,10 @@
  *
  * The design constraints (RFC 037 Interface, issue #135) live here:
  *  - A held run id turns a failed request into `applying`, never `unreachable`.
- *  - Once the apply budget plus a margin has passed with no answer, the same
- *    failure becomes "the server never came back" — a state that never claims
- *    the rollback ran, because from a dead connection the client cannot know.
+ *  - Once the apply budget plus a margin has passed with no answer — a failed
+ *    request or one still in flight — that silence becomes "the server never
+ *    came back", a state that never claims the rollback ran, because from a
+ *    dead connection the client cannot know.
  *  - The check block and the run block are independent: a check that cannot
  *    reach the update source is a failed check, never a failed update.
  */
@@ -325,6 +326,35 @@ function ready(
 	};
 }
 
+/**
+ * The client gave up waiting. The stored token goes so a reload cannot resume
+ * the same dead wait, while the in-memory hold stays: the screen has to sit
+ * still, and its retry has to keep polling, until the server answers for itself.
+ */
+function neverCameBack(held: HeldRun, elapsedSeconds: number): DeriveResult {
+	return {
+		surface: {
+			status: "ready",
+			section: applyingSection(
+				held.runId,
+				held.previousVersion,
+				held.attemptedVersion,
+				"reconnecting",
+				elapsedSeconds,
+			),
+			overlay: {
+				kind: "neverCameBack",
+				attemptedVersion: held.attemptedVersion,
+				previousVersion: held.previousVersion,
+				elapsedSeconds,
+				logsCommand: FALLBACK_LOGS_COMMAND,
+			},
+		},
+		clearStoredRun: true,
+		releaseHeld: false,
+	};
+}
+
 /**
  * A held run resolves to one of: still applying, gave up ("never came back"),
  * recovered but unaccountable, or — returning `null` — resolved terminally on
@@ -360,32 +390,17 @@ function deriveHeld(
 	}
 
 	if (isError) {
-		const section = applyingSection(
-			held.runId,
-			held.previousVersion,
-			held.attemptedVersion,
-			"reconnecting",
-			elapsedSeconds,
-		);
 		if (elapsedSeconds > budgetLimitSeconds()) {
-			return {
-				surface: {
-					status: "ready",
-					section,
-					overlay: {
-						kind: "neverCameBack",
-						attemptedVersion: held.attemptedVersion,
-						previousVersion: held.previousVersion,
-						elapsedSeconds,
-						logsCommand: FALLBACK_LOGS_COMMAND,
-					},
-				},
-				clearStoredRun: true,
-				releaseHeld: false,
-			};
+			return neverCameBack(held, elapsedSeconds);
 		}
 		return ready(
-			section,
+			applyingSection(
+				held.runId,
+				held.previousVersion,
+				held.attemptedVersion,
+				"reconnecting",
+				elapsedSeconds,
+			),
 			{
 				kind: "applying",
 				target: held.attemptedVersion,
@@ -397,9 +412,14 @@ function deriveHeld(
 		);
 	}
 
-	// No answer yet — the resume request is still in flight. Stay applying; only
-	// a real error or a real answer moves off it, never a pending first poll.
+	// No answer yet — the resume request is still in flight. A request that is
+	// pending looks exactly like one that will never settle, so the budget bounds
+	// this wait too: within it the client stays applying, past it it stops
+	// claiming an install is running and says what it cannot account for.
 	if (data === undefined) {
+		if (elapsedSeconds > budgetLimitSeconds()) {
+			return neverCameBack(held, elapsedSeconds);
+		}
 		return ready(
 			applyingSection(
 				held.runId,

package/src/test-support/http.ts

@@ -22,7 +22,8 @@ type Responder = (call: HttpCall) => unknown;
 
 /**
  * Answer every request with `responder`'s return value as JSON. Throwing from
- * the responder, or returning a `Response`, is how a test drives a failure.
+ * the responder, or returning a `Response`, is how a test drives a failure;
+ * returning a promise that never settles is how it drives a request that hangs.
  */
 export const mockFetch = (responder: Responder = () => ({})): HttpMock => {
 	const original = globalThis.fetch;
@@ -43,7 +44,7 @@ export const mockFetch = (responder: Responder = () => ({})): HttpMock => {
 		};
 		calls.push(call);
 
-		const result = responder(call);
+		const result = await responder(call);
 		if (result instanceof Response) return result;
 		return new Response(JSON.stringify(result ?? {}), {
 			status: 200,