@remit/ui 0.0.45 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "files": [
     "src"

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

@@ -1,5 +1,6 @@
 import {
 	CheckCircle2,
+	Clock,
 	CloudOff,
 	Download,
 	ExternalLink,
@@ -152,6 +153,39 @@ export function SelfUpdateSection({
 					</SectionRow>
 				);
 
+			case "neverChecked":
+				return (
+					<SectionRow>
+						<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex min-w-0 items-start gap-2">
+								<Clock
+									className="mt-0.5 size-4 shrink-0 text-fg-subtle"
+									aria-hidden
+								/>
+								<p className="text-sm text-fg-muted">
+									No update check has run yet. Remit checks for updates on its
+									own in the background.
+									{state.lastCheckedAt !== undefined && (
+										<span className="text-fg-subtle">
+											{" "}
+											Last checked{" "}
+											{formatRelativeCheck(state.lastCheckedAt, now)}.
+										</span>
+									)}
+								</p>
+							</div>
+							<Button
+								variant="secondary"
+								size="sm"
+								className="shrink-0"
+								onClick={handleCheck}
+							>
+								Check now
+							</Button>
+						</div>
+					</SectionRow>
+				);
+
 			case "checkFailed":
 				return (
 					<SectionRow>

package/src/components/self-update.render.test.ts

@@ -165,6 +165,25 @@ describe("SelfUpdateSection", () => {
 		assert.doesNotMatch(html, /disabled=/);
 	});
 
+	it("states a never-checked instance without a spinner or an alert", () => {
+		// The version is the literal the backend emits before any check has run —
+		// no state file, so no authoritative version yet.
+		const html = section({ status: "neverChecked", version: "unknown" });
+		assert.match(html, /No update check has run yet/);
+		assert.match(html, /Check now/);
+		assert.doesNotMatch(html, /animate-spin/);
+		assert.doesNotMatch(html, /role="alert"/);
+	});
+
+	it("shows the last-checked time on a never-checked state when one is known", () => {
+		const html = section({
+			status: "neverChecked",
+			version: "unknown",
+			lastCheckedAt: NOW - 3_600_000,
+		});
+		assert.match(html, /Last checked/);
+	});
+
 	it("renders a failed rollback verbatim and never claims a version is running", () => {
 		const html = section({
 			status: "rollbackFailed",

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

@@ -52,6 +52,16 @@ export const Checking: Story = {
 	args: withState({ status: "checking", version: CURRENT }),
 };
 
+/**
+ * A fresh, configured instance before its first automatic check has landed. The
+ * honest resting state, not a spinner: it says a check has not run and that Remit
+ * checks on its own, and offers a manual check. This is what every install shows
+ * until the updater writes its first result.
+ */
+export const NeverChecked: Story = {
+	args: withState({ status: "neverChecked", version: "unknown" }),
+};
+
 /**
  * An update exists. It is stated — version, date, one line of what changes, a
  * link to the full notes — and then it waits. Nothing here follows the user

package/src/components/self-update.ts

@@ -28,6 +28,12 @@ export type UpdateRunId = string;
 export type SelfUpdateState =
 	| { status: "upToDate"; version: string; checkedAt: number }
 	| { status: "checking"; version: string }
+	/**
+	 * A configured instance whose first automatic check has not landed yet. It is
+	 * its own resting state, never a spinner: the updater checks on a cadence, and
+	 * this is the honest account of the gap before the first result arrives.
+	 */
+	| { status: "neverChecked"; version: string; lastCheckedAt?: number }
 	| {
 			status: "checkFailed";
 			version: string;