@remit/ui 0.0.40 → 0.0.42

package/src/components/filter-rule.ts

@@ -0,0 +1,230 @@
+/**
+ * The filter rule as the user edits it (RFC 038).
+ *
+ * A rule is literal clauses combined under one match operator, an optional
+ * semantic widen, an action, and a scope. This module is the vocabulary the
+ * chip editor renders — a design model driven from fixtures, not the API.
+ * Naming tracks the RFC: rule, clause, widen, scope.
+ */
+
+/**
+ * The clause fields (RFC 038 D2). `From`, `Subject`, `HasWords` ship now;
+ * `ListId` and `FromDomain` arrive with the vocabulary ticket. Every variant
+ * renders here so that ticket slots its fields in without touching the chip.
+ */
+export type ClauseField =
+	| "From"
+	| "Subject"
+	| "HasWords"
+	| "ListId"
+	| "FromDomain";
+
+export interface RuleClause {
+	id: string;
+	field: ClauseField;
+	value: string;
+	/**
+	 * A `From` clause the server derived from the selection because the widen
+	 * could not run (#251). It is an ordinary visible, editable chip — this flag
+	 * only annotates where it came from.
+	 */
+	derived?: boolean;
+}
+
+/** How the clauses combine. Maps to the API's `And` / `Or`. */
+export type MatchOperator = "all" | "any";
+
+/**
+ * When the rule stops (RFC 038 D1). `once` is a one-time action, `standing`
+ * persists, `until` expires on a picked date.
+ */
+export type RuleScope = "once" | "standing" | "until";
+
+/**
+ * The semantic widen (RFC 038 D3): one chip backed by the anchor mechanism.
+ * Absent from a rule means the chip is not present; a deployment that cannot
+ * serve the widen never offers it at all.
+ */
+export interface RuleWiden {
+	/** Anchors the similarity rides on — "similar to these N". */
+	anchorCount: number;
+	/**
+	 * The rule carries an anchor this deployment cannot evaluate — created
+	 * elsewhere, capability since lost (RFC 038 D4). The chip lists as inactive,
+	 * the rule matches by its literal clauses only, and nothing claims otherwise.
+	 */
+	inactive?: boolean;
+}
+
+export interface FilterRule {
+	clauses: RuleClause[];
+	matchOperator: MatchOperator;
+	widen?: RuleWiden;
+	/** The move-to-folder action's destination. Absent leaves mail in place. */
+	moveMailboxId?: string;
+	scope: RuleScope;
+	/** ISO 8601 civil date (`YYYY-MM-DD`) for the `until` scope. */
+	until?: string;
+	/** Names a standing or timed rule so it can be found in Settings › Filters. */
+	name?: string;
+}
+
+export interface FolderOption {
+	id: string;
+	label: string;
+}
+
+/**
+ * The live match count (RFC 038 D1). `stale` marks a count the editor already
+ * moved past — a clause changed after it was counted, so the number on screen
+ * is the previous rule's until the next preview lands.
+ */
+export type PreviewCount =
+	| { status: "loading" }
+	| { status: "ready"; count: number; stale?: boolean }
+	| { status: "error"; reason: string };
+
+const clauseFieldLabels: Record<ClauseField, string> = {
+	From: "From",
+	Subject: "Subject",
+	HasWords: "Has the words",
+	ListId: "List",
+	FromDomain: "Domain",
+};
+
+export function clauseFieldLabel(field: ClauseField): string {
+	return clauseFieldLabels[field];
+}
+
+/** The fields a new clause can be added as, in menu order. */
+export const clauseFieldOrder: ClauseField[] = [
+	"From",
+	"Subject",
+	"HasWords",
+	"ListId",
+	"FromDomain",
+];
+
+export function widenChipLabel(widen: RuleWiden): string {
+	return `Similar to these ${widen.anchorCount}`;
+}
+
+const matchOperatorLabels: Record<MatchOperator, string> = {
+	all: "Match all",
+	any: "Match any",
+};
+
+export function matchOperatorLabel(operator: MatchOperator): string {
+	return matchOperatorLabels[operator];
+}
+
+/**
+ * The join word between chips — "all" reads as "and", "any" as "or". Rendered
+ * between clauses so the operator is legible in the rule itself, not only the
+ * toggle.
+ */
+export function matchJoinWord(operator: MatchOperator): string {
+	return operator === "all" ? "and" : "or";
+}
+
+export function previewCountSummary(preview: PreviewCount): string {
+	if (preview.status === "loading") return "Counting matches…";
+	if (preview.status === "error") return preview.reason;
+	if (preview.count === 0) return "No mail matches yet";
+	const noun = preview.count === 1 ? "message" : "messages";
+	const base = `${preview.count} ${noun} match`;
+	return preview.stale ? `${base} — recounting` : base;
+}
+
+const scopeLabels: Record<RuleScope, string> = {
+	once: "Just once",
+	standing: "Keep doing this",
+	until: "Until a date",
+};
+
+export function scopeLabel(scope: RuleScope): string {
+	return scopeLabels[scope];
+}
+
+export function commitLabel(scope: RuleScope): string {
+	if (scope === "once") return "Apply now";
+	if (scope === "standing") return "Save rule";
+	return "Save until then";
+}
+
+/**
+ * Why the rule cannot be saved yet, or `undefined` when it is ready. A rule
+ * needs at least one live way to match, a folder to move into (the only wired
+ * action), and — for the two persisted scopes — a name and, for `until`, a
+ * date. It also needs a settled preview: the rule is committable only when the
+ * count on screen is the count that will be applied. That makes RFC 038's
+ * previewed-set-equals-applied-set contract structural — a consumer cannot save
+ * a rule whose match count is still moving. Never disable a control without
+ * saying why (ux.md).
+ */
+export function commitBlockedReason(
+	rule: FilterRule,
+	preview: PreviewCount,
+): string | undefined {
+	const hasMatch =
+		rule.clauses.length > 0 ||
+		(rule.widen !== undefined && !rule.widen.inactive);
+	if (!hasMatch) return "Add a clause so the rule has something to match.";
+	if (!rule.moveMailboxId)
+		return "Pick a folder to move matches into — labeling isn't available yet.";
+	if (
+		(rule.scope === "standing" || rule.scope === "until") &&
+		(rule.name ?? "").trim() === ""
+	)
+		return "Name this rule so you can find it later.";
+	if (rule.scope === "until" && !rule.until)
+		return "Pick the date this rule should stop on.";
+	if (preview.status === "loading")
+		return "Counting matches — save once the count settles.";
+	if (preview.status === "ready" && preview.stale)
+		return "Recounting matches — save once the count settles.";
+	return undefined;
+}
+
+export const demoFolders: FolderOption[] = [
+	{ id: "mbx-inbox", label: "Inbox" },
+	{ id: "mbx-archive", label: "Archive" },
+	{ id: "mbx-receipts", label: "Receipts" },
+	{ id: "mbx-travel", label: "Travel" },
+	{ id: "mbx-junk", label: "Junk" },
+];
+
+export const demoRule: FilterRule = {
+	clauses: [
+		{ id: "c1", field: "From", value: "notifications@github.com" },
+		{ id: "c2", field: "Subject", value: "pull request" },
+	],
+	matchOperator: "all",
+	widen: { anchorCount: 2 },
+	moveMailboxId: "mbx-archive",
+	scope: "standing",
+	name: "GitHub notifications",
+};
+
+export const demoVocabularyRule: FilterRule = {
+	clauses: [
+		{ id: "c1", field: "ListId", value: "python-dev.python.org" },
+		{ id: "c2", field: "FromDomain", value: "python.org" },
+		{ id: "c3", field: "HasWords", value: "nightly build" },
+	],
+	matchOperator: "any",
+	moveMailboxId: "mbx-archive",
+	scope: "standing",
+	name: "Python lists",
+};
+
+export const demoSenderFallbackRule: FilterRule = {
+	clauses: [
+		{ id: "c1", field: "From", value: "receipts@stripe.com", derived: true },
+		{ id: "c2", field: "From", value: "receipts@lyft.com", derived: true },
+	],
+	matchOperator: "any",
+	moveMailboxId: "mbx-receipts",
+	scope: "standing",
+	name: "Receipts",
+};

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"];

package/src/index.ts

@@ -121,6 +121,53 @@ export {
 	FieldLabel,
 	type FieldLabelProps,
 } from "./components/field-label.js";
+export {
+	AddChipButton,
+	type AddChipButtonProps,
+	ClauseChip,
+	type ClauseChipProps,
+	type ClauseDraft,
+	ClauseEditor,
+	type ClauseEditorProps,
+	WidenChip,
+	type WidenChipProps,
+} from "./components/filter-clause-chip.js";
+export {
+	FilterPreviewCount,
+	type FilterPreviewCountProps,
+} from "./components/filter-preview-count.js";
+export {
+	type ClauseField,
+	clauseFieldLabel,
+	clauseFieldOrder,
+	commitBlockedReason,
+	commitLabel,
+	demoFolders,
+	demoRule,
+	demoSenderFallbackRule,
+	demoVocabularyRule,
+	type FilterRule,
+	type FolderOption,
+	type MatchOperator,
+	matchJoinWord,
+	matchOperatorLabel,
+	type PreviewCount,
+	previewCountSummary,
+	type RuleClause,
+	type RuleScope,
+	type RuleWiden,
+	scopeLabel,
+	widenChipLabel,
+} from "./components/filter-rule.js";
+export {
+	type ClauseEditState,
+	FilterRuleDialog,
+	type FilterRuleDialogProps,
+	FilterRuleEditor,
+	type FilterRuleEditorProps,
+	FilterRuleSheet,
+	type FilterRuleSheetProps,
+} from "./components/filter-rule-editor.js";
 export {
 	FilterSheet,
 	type FilterSheetCategory,