@remit/ui 0.0.39 → 0.0.41

package/package.json

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

package/src/components/auto-moved-badge.render.test.ts

@@ -39,4 +39,27 @@ describe("AutoMovedBadge", () => {
 		);
 		assert.match(html, /Move back to Junk/);
 	});
+
+	it("renders no filter link when filtersHref is omitted (classifier move)", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Junk by Remit",
+				onUndo: () => undefined,
+			}),
+		);
+		assert.doesNotMatch(html, /Manage filter/);
+		assert.doesNotMatch(html, /settings\/filters/);
+	});
+
+	it("renders a Manage filter link to Settings when filtersHref is set", () => {
+		const html = renderToString(
+			createElement(AutoMovedBadge, {
+				label: "Moved from Inbox by Remit",
+				onUndo: () => undefined,
+				filtersHref: "/settings/filters",
+			}),
+		);
+		assert.match(html, /Manage filter/);
+		assert.match(html, /href="\/settings\/filters"/);
+	});
 });

package/src/components/auto-moved-badge.stories.tsx

@@ -34,6 +34,24 @@ export const WithoutUndoAction: Story = {
 	args: { label: "Moved from Junk by Remit", size: "md" },
 };
 
+export const FilterMoveWithManageLink: Story = {
+	args: {
+		label: "Moved from Inbox by Remit",
+		size: "md",
+		onUndo: () => alert("Undo"),
+		filtersHref: "/settings/filters",
+	},
+};
+
+export const FilterMoveListRow: Story = {
+	// The list row is icon + label only — the app gates the Manage link (and
+	// Undo) to the reading-view `md` size, so no `filtersHref` here.
+	args: {
+		label: "Moved from Inbox by Remit",
+		size: "sm",
+	},
+};
+
 export const SideBySide: Story = {
 	render: () => (
 		<div className="flex flex-col items-start gap-3">
@@ -43,6 +61,12 @@ export const SideBySide: Story = {
 				size="md"
 				onUndo={() => undefined}
 			/>
+			<AutoMovedBadge
+				label="Moved from Inbox by Remit"
+				size="md"
+				onUndo={() => undefined}
+				filtersHref="/settings/filters"
+			/>
 		</div>
 	),
 };

package/src/components/auto-moved-badge.tsx

@@ -13,21 +13,31 @@ export interface AutoMovedBadgeProps {
 	 */
 	onUndo?: () => void;
 	undoLabel?: string;
+	/**
+	 * Settings › Filters link, present only for a standing-filter move: undo
+	 * returns the message but never disables the filter, so the badge offers a
+	 * way to reach the filter that keeps moving mail. Omit for a classifier move.
+	 */
+	filtersHref?: string;
+	manageLabel?: string;
 	className?: string;
 }
 
 /**
  * Unobtrusive indicator that Remit auto-moved this message, with an optional
- * inline one-click undo. Purely presentational — the label text and whether
- * the move is still in effect (so the badge should render at all) are the
- * caller's responsibility; this component has no notion of placement/mailbox
- * state.
+ * inline one-click undo and, for a standing-filter move, a link to the filter
+ * in Settings. Purely presentational — the label text, whether the move is
+ * still in effect (so the badge should render at all), and whether a filter
+ * link applies are the caller's responsibility; this component has no notion of
+ * placement/mailbox state.
  */
 export function AutoMovedBadge({
 	label,
 	size = "sm",
 	onUndo,
 	undoLabel = "Undo",
+	filtersHref,
+	manageLabel = "Manage filter",
 	className,
 }: AutoMovedBadgeProps) {
 	return (
@@ -52,6 +62,17 @@ export function AutoMovedBadge({
 					{undoLabel}
 				</button>
 			)}
+			{filtersHref && (
+				<a
+					href={filtersHref}
+					onClick={(event) => {
+						event.stopPropagation();
+					}}
+					className="font-semibold underline decoration-dotted underline-offset-2 hover:decoration-solid"
+				>
+					{manageLabel}
+				</a>
+			)}
 		</Badge>
 	);
 }

package/src/components/self-update-confirm-dialog.tsx

@@ -7,6 +7,12 @@ export interface SelfUpdateConfirmDialogProps {
 	open: boolean;
 	currentVersion: string;
 	release: ReleaseInfo;
+	/**
+	 * Whether installing this release runs a database migration during the
+	 * offline window. Stated only when the surface reports both schema versions
+	 * and the new one is higher; silence otherwise.
+	 */
+	appliesSchemaMigration?: boolean;
 	onClose: () => void;
 	onConfirm: () => void;
 }
@@ -26,6 +32,7 @@ export function SelfUpdateConfirmDialog({
 	open,
 	currentVersion,
 	release,
+	appliesSchemaMigration = false,
 	onClose,
 	onConfirm,
 }: SelfUpdateConfirmDialogProps) {
@@ -53,6 +60,16 @@ export function SelfUpdateConfirmDialog({
 								<span>{line}</span>
 							</li>
 						))}
+						{appliesSchemaMigration && (
+							<li className="flex gap-2 text-sm text-fg-muted">
+								<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-subtle" />
+								<span>
+									This version updates the database while Remit is offline. The
+									step forward cannot be undone by hand, but a failed start is
+									still rolled back to the version and data you have now.
+								</span>
+							</li>
+						)}
 					</ul>
 					<p className="text-xs text-fg-subtle">
 						Good moment for this: when you are not waiting on a message.

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

@@ -82,7 +82,11 @@ export function SelfUpdateSection({
 	};
 
 	const handleInstall = () => {
-		if (!installable && state.status !== "rolledBack") {
+		if (
+			!installable &&
+			state.status !== "rolledBack" &&
+			state.status !== "abandoned"
+		) {
 			setNotice(
 				"There is no update to install. Check for updates first — if one is found it appears here.",
 			);
@@ -348,6 +352,103 @@ export function SelfUpdateSection({
 					</SectionRow>
 				);
 
+			case "rollbackFailed":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-3">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-danger"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Remit {state.attemptedVersion} did not start, and Remit
+										could not put {state.previousVersion} back.
+									</p>
+									<p className="text-sm text-fg-muted">
+										This is the one outcome Remit cannot resolve on its own. The
+										server is in a half-changed state and needs you at a shell.
+										The log below is the only account of where it stopped.
+									</p>
+								</div>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									What Remit reported as the failure
+								</p>
+								<code className="block rounded-xs bg-danger-soft px-2 py-1 text-2xs text-danger">
+									{state.reason}
+								</code>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									Read the full log on the server:
+								</p>
+								<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+									{state.logsCommand}
+								</code>
+							</div>
+							<div className="flex justify-end">
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Dismiss
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "abandoned":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-3">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-fg-subtle"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Remit {state.attemptedVersion} was not installed. Nothing
+										changed.
+									</p>
+									<p className="text-sm text-fg-muted">
+										The update stopped before it altered anything. You are still
+										running {state.version}.
+									</p>
+								</div>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">What Remit reported</p>
+								<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+									{state.reason}
+								</code>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									Read the full log before trying again:
+								</p>
+								<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+									{state.logsCommand}
+								</code>
+							</div>
+							<div className="flex flex-wrap items-center gap-2">
+								<Button
+									variant="secondary"
+									size="sm"
+									icon={<RotateCcw className="size-3.5" />}
+									onClick={handleInstall}
+								>
+									Try {state.attemptedVersion} again
+								</Button>
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Stay on {state.version}
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
 			default: {
 				const exhaustive: never = state;
 				return exhaustive;

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

@@ -164,6 +164,41 @@ describe("SelfUpdateSection", () => {
 		assert.match(html, /Check again/);
 		assert.doesNotMatch(html, /disabled=/);
 	});
+
+	it("renders a failed rollback verbatim and never claims a version is running", () => {
+		const html = section({
+			status: "rollbackFailed",
+			runId: demoRunId,
+			attemptedVersion: "0.9.4",
+			previousVersion: CURRENT,
+			reason: "migration 0042 failed and the snapshot restore errored",
+			logsCommand: demoLogsCommand,
+		});
+		assert.match(html, /could not put 0\.9\.3 back/);
+		assert.match(html, /needs you at a shell/);
+		assert.match(
+			html,
+			/migration 0042 failed and the snapshot restore errored/,
+		);
+		assert.match(html, /remit logs --since 10m/);
+		// The rollback itself failed — the pane must not assert a running version.
+		assert.doesNotMatch(html, /running 0\.9\.3 again/);
+	});
+
+	it("renders an abandoned run as a no-op that changed nothing", () => {
+		const html = section({
+			status: "abandoned",
+			runId: demoRunId,
+			version: CURRENT,
+			attemptedVersion: "0.9.4",
+			reason: "manifest fetch timed out before anything was pulled",
+			logsCommand: demoLogsCommand,
+		});
+		assert.match(html, /Nothing changed/);
+		assert.match(html, /still\s+running 0\.9\.3/);
+		assert.match(html, /manifest fetch timed out/);
+		assert.match(html, /Try 0\.9\.4 again/);
+	});
 });
 
 describe("SelfUpdateConfirmDialog", () => {
@@ -201,6 +236,25 @@ describe("SelfUpdateConfirmDialog", () => {
 			"",
 		);
 	});
+
+	it("says nothing about a migration by default", () => {
+		assert.doesNotMatch(html, /updates the database/);
+	});
+
+	it("warns about a migration only when the release carries one", () => {
+		const withMigration = render(
+			createElement(SelfUpdateConfirmDialog, {
+				open: true,
+				currentVersion: CURRENT,
+				release: demoRelease,
+				appliesSchemaMigration: true,
+				onClose: noop,
+				onConfirm: noop,
+			}),
+		);
+		assert.match(withMigration, /updates the database while Remit is offline/);
+		assert.match(withMigration, /rolled back to the version and data you have/);
+	});
 });
 
 describe("SelfUpdateProgressOverlay", () => {

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

@@ -111,6 +111,39 @@ export const RolledBack: Story = {
 	}),
 };
 
+/**
+ * The new version did not start and the rollback to the old one failed too.
+ * The one outcome Remit cannot resolve on its own: it names the failure and the
+ * log verbatim, claims no running version, and sends the operator to a shell.
+ */
+export const RollbackFailed: Story = {
+	args: withState({
+		status: "rollbackFailed",
+		runId: demoRunId,
+		attemptedVersion: demoRelease.version,
+		previousVersion: CURRENT,
+		reason:
+			"migration 0042_add_thread_index failed and the snapshot restore errored: database is locked",
+		logsCommand: demoLogsCommand,
+	}),
+};
+
+/**
+ * The run stopped before it changed anything — a manifest that could not be
+ * fetched, a preflight that refused. Nothing was installed and nothing was
+ * touched, so the pane says exactly that and offers the retry.
+ */
+export const Abandoned: Story = {
+	args: withState({
+		status: "abandoned",
+		runId: demoRunId,
+		version: CURRENT,
+		attemptedVersion: demoRelease.version,
+		reason: "manifest fetch timed out before anything was pulled",
+		logsCommand: demoLogsCommand,
+	}),
+};
+
 /**
  * An update is running. The blocking screen owns the window; the pane behind it
  * still says what is going on rather than going blank.
@@ -158,6 +191,24 @@ export const ConfirmBeforeInstalling: Story = {
 	),
 };
 
+/**
+ * Consent for a release that also migrates the database. The extra line states
+ * the forward step is one-way but a failed start is still rolled back — shown
+ * only when the surface reports a higher schema version than the running one.
+ */
+export const ConfirmWithSchemaMigration: Story = {
+	render: () => (
+		<SelfUpdateConfirmDialog
+			open
+			currentVersion={CURRENT}
+			release={demoRelease}
+			appliesSchemaMigration
+			onClose={() => {}}
+			onConfirm={() => {}}
+		/>
+	),
+};
+
 /**
  * Consent reached from the pane, and declined. The offer stays exactly where
  * it was; declining costs nothing and is not asked about again.

package/src/components/self-update.ts

@@ -69,6 +69,27 @@ export type SelfUpdateState =
 			attemptedVersion: string;
 			elapsedSeconds: number;
 			logsCommand: string;
+	  }
+	| {
+			status: "rollbackFailed";
+			runId: UpdateRunId;
+			attemptedVersion: string;
+			previousVersion: string;
+			/** The server's own account of the failure, shown verbatim. */
+			reason: string;
+			/** The command to read the full log, shown verbatim. */
+			logsCommand: string;
+	  }
+	| {
+			status: "abandoned";
+			runId: UpdateRunId;
+			/** The version still running — the run changed nothing. */
+			version: string;
+			attemptedVersion: string;
+			/** The server's own account of why it stopped, shown verbatim. */
+			reason: string;
+			/** The command to read the full log, shown verbatim. */
+			logsCommand: string;
 	  };
 
 export type SelfUpdateStatus = SelfUpdateState["status"];