@remit/web-client 0.0.323 → 0.0.324

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.323",
+  "version": "0.0.324",
   "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,6 @@
 import { createAuthClient } from "better-auth/react";
 import { NetworkError, taggedFetch } from "../lib/network-error";
+import { sessionStore } from "../lib/session-storage";
 import { getRuntimeConfig } from "../runtime-config";
 
 /**
@@ -46,16 +47,8 @@ interface CachedToken {
 	expiresAt: number;
 }
 
-const tokenStore = (): Storage | null => {
-	try {
-		return globalThis.sessionStorage ?? null;
-	} catch {
-		return null;
-	}
-};
-
 const readStore = (): CachedToken | null => {
-	const raw = tokenStore()?.getItem(STORAGE_KEY);
+	const raw = sessionStore()?.getItem(STORAGE_KEY);
 	if (!raw) return null;
 	try {
 		const parsed: unknown = JSON.parse(raw);
@@ -77,7 +70,7 @@ const readStore = (): CachedToken | null => {
 };
 
 const writeStore = (token: CachedToken | null): void => {
-	const store = tokenStore();
+	const store = sessionStore();
 	if (!store) return;
 	try {
 		if (!token) {

package/src/components/settings/self-update.stories.tsx

@@ -9,6 +9,7 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { AppStory } from "@/mocks/story-frame/AppStory";
 import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
 import { mailWorld } from "@/mocks/story-frame/mail-world";
+import { withRuntimeConfig } from "@/mocks/story-frame/session";
 
 const CURRENT = "0.9.3";
 const NEXT = "1.0.0";
@@ -107,6 +108,23 @@ export const AdvancedUpdateAvailable: Story = {
 	},
 };
 
+export const AdvancedManagedByHost: Story = {
+	beforeEach: withRuntimeConfig({ updateMode: "managed" }),
+	parameters: answering(update({ check: released })),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(
+				"Notification rules are coming in a future release.",
+			),
+		).toBeVisible();
+		await expect(
+			canvas.queryByRole("button", { name: `Install ${NEXT}` }),
+		).toBeNull();
+		await expect(canvas.queryByText("update available")).toBeNull();
+	},
+};
+
 export const AdvancedCheckFailed: Story = {
 	parameters: answering(
 		update({

package/src/lib/session-storage.ts

@@ -0,0 +1,7 @@
+export const sessionStore = (): Storage | null => {
+	try {
+		return globalThis.sessionStorage ?? null;
+	} catch {
+		return null;
+	}
+};

package/src/lib/stale-build.test.ts

@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	reloadOnceForChunkFailure,
+	STALE_BUILD_RELOAD_KEY_PREFIX,
+} from "./stale-build";
+
+const memoryGuard = (): Pick<Storage, "getItem" | "setItem"> => {
+	const store = new Map<string, string>();
+	return {
+		getItem: (key) => store.get(key) ?? null,
+		setItem: (key, value) => {
+			store.set(key, value);
+		},
+	};
+};
+
+describe("reloadOnceForChunkFailure", () => {
+	it("reloads once per build, keyed by its commit", () => {
+		const guard = memoryGuard();
+		let reloads = 0;
+		const ports = {
+			reload: () => {
+				reloads += 1;
+			},
+			guard,
+			commit: "aaa",
+		};
+		assert.equal(reloadOnceForChunkFailure(ports), true);
+		assert.equal(reloadOnceForChunkFailure(ports), false);
+		assert.equal(reloads, 1);
+		assert.notEqual(guard.getItem(`${STALE_BUILD_RELOAD_KEY_PREFIX}aaa`), null);
+	});
+
+	it("reloads again for a different build", () => {
+		const guard = memoryGuard();
+		guard.setItem(`${STALE_BUILD_RELOAD_KEY_PREFIX}aaa`, "1");
+		let reloads = 0;
+		const reload = () => {
+			reloads += 1;
+		};
+		assert.equal(
+			reloadOnceForChunkFailure({ reload, guard, commit: "aaa" }),
+			false,
+		);
+		assert.equal(
+			reloadOnceForChunkFailure({ reload, guard, commit: "bbb" }),
+			true,
+		);
+		assert.equal(reloads, 1);
+	});
+});

package/src/lib/stale-build.ts

@@ -0,0 +1,36 @@
+import { APP_SHA } from "@/lib/app-info";
+import { sessionStore } from "@/lib/session-storage";
+
+export const STALE_BUILD_RELOAD_KEY_PREFIX = "remit.stale-build-reload:";
+
+type ReloadGuard = Pick<Storage, "getItem" | "setItem">;
+
+export interface StaleBuildPorts {
+	reload: () => void;
+	guard: ReloadGuard | null;
+	commit: string;
+}
+
+export const reloadOnceForChunkFailure = ({
+	reload,
+	guard,
+	commit,
+}: StaleBuildPorts): boolean => {
+	if (guard === null) return false;
+	const key = `${STALE_BUILD_RELOAD_KEY_PREFIX}${commit}`;
+	if (guard.getItem(key) !== null) return false;
+	guard.setItem(key, String(Date.now()));
+	reload();
+	return true;
+};
+
+export const installStaleBuildReload = (): void => {
+	window.addEventListener("vite:preloadError", (event) => {
+		const reloaded = reloadOnceForChunkFailure({
+			reload: () => window.location.reload(),
+			guard: sessionStore(),
+			commit: APP_SHA,
+		});
+		if (reloaded) event.preventDefault();
+	});
+};

package/src/routes/__root.tsx

@@ -3,7 +3,7 @@ import {
 	type ErrorComponentProps,
 	Outlet,
 } from "@tanstack/react-router";
-import { Suspense } from "react";
+import { type ReactNode, Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { ComposeProvider } from "@/components/compose/ComposeProvider";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
@@ -19,6 +19,7 @@ import { SelfUpdateProvider } from "@/hooks/use-system-update";
 import { isServerError } from "@/lib/error-classifier";
 import { reportFatalError } from "@/lib/fatal-error";
 import type { RouterContext } from "@/router";
+import { getRuntimeConfig } from "@/runtime-config";
 
 const RootErrorComponent = ({ error, reset, info }: ErrorComponentProps) => {
 	// Everything that bubbles to the route boundary escalates to the loud
@@ -56,6 +57,16 @@ const SkipLink = () => {
 	);
 };
 
+const SelfUpdates = ({ children }: { children: ReactNode }) => {
+	if (getRuntimeConfig().updateMode === "managed") return children;
+	return (
+		<SelfUpdateProvider>
+			{children}
+			<SelfUpdateOverlay />
+		</SelfUpdateProvider>
+	);
+};
+
 function RootLayout() {
 	return (
 		<ErrorBannerProvider>
@@ -63,7 +74,7 @@ function RootLayout() {
 				{/* A bulk run outlives the route that started it, so its owner sits
 				    above the router rather than inside the list (#112). */}
 				<BulkRunProvider>
-					<SelfUpdateProvider>
+					<SelfUpdates>
 						<ComposeProvider>
 							<SkipLink />
 							<main id="main-content" className="h-dvh overflow-hidden">
@@ -72,8 +83,7 @@ function RootLayout() {
 								</Suspense>
 							</main>
 						</ComposeProvider>
-						<SelfUpdateOverlay />
-					</SelfUpdateProvider>
+					</SelfUpdates>
 				</BulkRunProvider>
 			</RoleAppointmentPromptProvider>
 			<FatalErrorOverlay />

package/src/routes/settings/advanced.tsx

@@ -10,6 +10,7 @@ import { SelfUpdatePanel } from "@/components/settings/SelfUpdatePanel";
 import { TlsRootCaDownload } from "@/components/settings/TlsRootCaDownload";
 import { AppVersion } from "@/components/ui/AppVersion";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+import { getRuntimeConfig } from "@/runtime-config";
 import { advancedHelp } from "./-shared/help-copy";
 
 export const Route = createFileRoute("/settings/advanced")({
@@ -37,7 +38,7 @@ function AdvancedSettings() {
 			onSelect={handleSelectNav}
 			onBackToMail={() => void navigate({ to: "/mail" })}
 		>
-			<SelfUpdatePanel />
+			{getRuntimeConfig().updateMode === "self" && <SelfUpdatePanel />}
 			<div className="mt-6 border-t border-line pt-4">
 				<ConfigTransferPanel />
 			</div>

package/src/runtime-config.test.ts

@@ -24,3 +24,20 @@ describe("getRuntimeConfig tlsMode", () => {
 		assert.equal(getRuntimeConfig().tlsMode, "off");
 	});
 });
+
+describe("getRuntimeConfig updateMode", () => {
+	it("defaults to self when config.js sets nothing", () => {
+		globalThis.__REMIT_CONFIG__ = {};
+		assert.equal(getRuntimeConfig().updateMode, "self");
+	});
+
+	it("passes through managed", () => {
+		globalThis.__REMIT_CONFIG__ = { updateMode: "managed" };
+		assert.equal(getRuntimeConfig().updateMode, "managed");
+	});
+
+	it("falls back to self for a value config.js never declares", () => {
+		globalThis.__REMIT_CONFIG__ = { updateMode: "auto" };
+		assert.equal(getRuntimeConfig().updateMode, "self");
+	});
+});

package/src/runtime-config.ts

@@ -26,12 +26,19 @@ export interface RumConfig {
  */
 export type TlsMode = "internal" | "acme" | "tailscale" | "off";
 
+export type UpdateMode = "self" | "managed";
+
 const DEFAULT_ISSUES_URL = "https://github.com/remit-mail/reader/issues/new";
 
 const TLS_MODES: readonly TlsMode[] = ["internal", "acme", "tailscale", "off"];
 
-const isTlsMode = (value: unknown): value is TlsMode =>
-	typeof value === "string" && (TLS_MODES as readonly string[]).includes(value);
+const UPDATE_MODES: readonly UpdateMode[] = ["self", "managed"];
+
+const oneOf = <T extends string>(
+	values: readonly T[],
+	raw: unknown,
+	fallback: T,
+): T => values.find((value) => value === raw) ?? fallback;
 
 export interface RemitRuntimeConfig {
 	apiUrl: string;
@@ -43,6 +50,7 @@ export interface RemitRuntimeConfig {
 	disableDevtools: boolean;
 	tlsMode: TlsMode;
 	issuesUrl: string;
+	updateMode: UpdateMode;
 }
 
 interface RawRuntimeConfig {
@@ -55,6 +63,7 @@ interface RawRuntimeConfig {
 	disableDevtools?: boolean;
 	tlsMode?: string;
 	issuesUrl?: string;
+	updateMode?: string;
 }
 
 declare global {
@@ -88,7 +97,8 @@ export const getRuntimeConfig = (): RemitRuntimeConfig => {
 				? String(raw.mailboxPollIntervalSeconds)
 				: undefined,
 		disableDevtools: raw.disableDevtools ?? false,
-		tlsMode: isTlsMode(raw.tlsMode) ? raw.tlsMode : "off",
+		tlsMode: oneOf(TLS_MODES, raw.tlsMode, "off"),
 		issuesUrl: raw.issuesUrl ?? DEFAULT_ISSUES_URL,
+		updateMode: oneOf(UPDATE_MODES, raw.updateMode, "self"),
 	};
 };

package/src/shell/index.tsx

@@ -17,6 +17,7 @@ import {
 	handleQueryCacheError,
 } from "@/lib/query-error-handler";
 import { initRum } from "@/lib/rum-adapter";
+import { installStaleBuildReload } from "@/lib/stale-build";
 import { TelemetryContext } from "@/lib/telemetry-context";
 import { installThemeSync } from "@/lib/theme";
 import { createAppRouter } from "@/router";
@@ -69,6 +70,8 @@ export const mountApp = ({
 		},
 	});
 
+	installStaleBuildReload();
+
 	const router = createAppRouter(queryClient, telemetry);
 	telemetry.recordPageView(window.location.pathname);