@remit/ui 0.0.43 → 0.0.44

package/package.json

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

package/src/components/filter-rule-editor.stories.tsx

@@ -227,6 +227,26 @@ export const DegradedStandingWiden: Story = {
 	},
 };
 
+/**
+ * Editing a persisted filter (RFC 038 D6): scope and expiry render read-only,
+ * with a note that they — and the semantic anchor — are fixed at creation. The
+ * name and the literal clauses stay editable; the widen chip is display-only.
+ */
+export const LifecycleLocked: Story = {
+	args: {
+		rule: {
+			...demoRule,
+			scope: "until",
+			until: "2027-09-01",
+			name: "Conference",
+		},
+		folders: demoFolders,
+		preview: READY(31),
+		semanticAvailable: false,
+		lifecycleLocked: true,
+	},
+};
+
 /** Nothing to match yet — the commit says why it is blocked. */
 export const BlockedEmpty: Story = {
 	args: {

package/src/components/filter-rule-editor.tsx

@@ -49,6 +49,15 @@ export interface FilterRuleEditorProps {
 	 * match, so the editor never offers a clause the backend cannot evaluate.
 	 */
 	clauseFields?: ClauseField[];
+	/**
+	 * Render the scope and expiry read-only (RFC 038 D6). A persisted filter's
+	 * scope, expiry, and semantic anchor are fixed at creation — the update
+	 * endpoint carries none of them — so editing a filter shows them as a static
+	 * summary with a note rather than live controls that would silently discard
+	 * the change (reader #266 tracks lifting this). The name and the literal
+	 * predicate stay editable.
+	 */
+	lifecycleLocked?: boolean;
 	/** The inline clause form, when adding or editing a clause. */
 	clauseEdit?: ClauseEditState;
 	onStartAddClause?: () => void;
@@ -86,6 +95,7 @@ export function FilterRuleEditor({
 	preview,
 	semanticAvailable = false,
 	clauseFields,
+	lifecycleLocked = false,
 	clauseEdit,
 	onStartAddClause,
 	onStartEditClause,
@@ -211,14 +221,22 @@ export function FilterRuleEditor({
 
 				<section className="space-y-2">
 					<p className="text-xs font-medium text-fg-muted">How long</p>
-					<SegmentedControl
-						name="rule-scope"
-						size="sm"
-						aria-label="Rule scope"
-						options={scopeOptions}
-						value={rule.scope}
-						onChange={(value) => onChangeScope?.(value)}
-					/>
+					{lifecycleLocked ? (
+						<p className="text-xs text-fg">
+							{rule.scope === "until"
+								? `Until ${rule.until ?? ""}`
+								: "Always — runs on matching mail"}
+						</p>
+					) : (
+						<SegmentedControl
+							name="rule-scope"
+							size="sm"
+							aria-label="Rule scope"
+							options={scopeOptions}
+							value={rule.scope}
+							onChange={(value) => onChangeScope?.(value)}
+						/>
+					)}
 					{needsName && (
 						<Input
 							value={rule.name ?? ""}
@@ -228,7 +246,7 @@ export function FilterRuleEditor({
 							className="w-full"
 						/>
 					)}
-					{rule.scope === "until" && (
+					{!lifecycleLocked && rule.scope === "until" && (
 						<div className="flex items-center gap-2 text-xs text-fg-muted">
 							<span>Until</span>
 							<Input
@@ -240,6 +258,13 @@ export function FilterRuleEditor({
 							/>
 						</div>
 					)}
+					{lifecycleLocked && (
+						<p className="text-2xs text-fg-subtle">
+							{rule.widen
+								? "The scope, expiry, and similar-mail match are set when a filter is created."
+								: "The scope and expiry are set when a filter is created."}
+						</p>
+					)}
 				</section>
 
 				<div className="border-t border-line pt-3">

package/src/components/filter-rule.render.test.ts

@@ -554,6 +554,37 @@ describe("FilterRuleEditor", () => {
 	it("shows the live preview region", () => {
 		assert.match(editor(), /47 messages match/);
 	});
+
+	it("renders scope and expiry read-only when the lifecycle is locked", () => {
+		const html = editor({
+			rule: { ...demoRule, scope: "until", until: "2027-09-01" },
+			lifecycleLocked: true,
+		});
+		// No live scope toggle, no editable date input — a static summary and a note.
+		assert.doesNotMatch(html, /aria-label="Rule scope"/);
+		assert.doesNotMatch(html, /aria-label="Expiry date"/);
+		assert.match(html, /Until 2027-09-01/);
+		assert.match(html, /set when a filter is created/);
+		// The name stays editable.
+		assert.match(html, /aria-label="Rule name"/);
+	});
+
+	it("names the similar-mail match in the locked note only when a widen is present", () => {
+		const withWiden = editor({
+			rule: { ...demoRule, widen: { anchorCount: 2 } },
+			lifecycleLocked: true,
+		});
+		assert.match(
+			withWiden,
+			/similar-mail match are set when a filter is created/,
+		);
+		const literal = editor({
+			rule: { ...demoRule, widen: undefined },
+			lifecycleLocked: true,
+		});
+		assert.match(literal, /scope and expiry are set when a filter is created/);
+		assert.doesNotMatch(literal, /similar-mail match/);
+	});
 });
 
 describe("FilterRuleDialog", () => {