@ai-matrx/content-ir-react 0.19.1 → 0.20.1

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## 0.20.1 — 2026-10-02
+
+G9 leftovers (nightly clone). Guard: `__tests__/directive-card-g9.test.tsx` (3 red on 0.20.0).
+
+- **A button never wraps its label.** At 375px "Apply" broke to "Appl / y" beside
+  "Nothing to change". Apply, Run again, Retry, Details and Show more are `whitespace-nowrap`
+  (`shrink-0`); the header group wraps and the reason text is what wraps.
+- **A screen-reader label never names an id.** A record row's copy control read
+  "Task a8a00001". `DirectiveCopyProps.label` is now type-generic ("this task") and the new
+  `DirectiveCopyProps.record` ({ noun, id }) lets the host swap in the record's live name.
+
+### Consumer action
+
+- In `renderCopy`, when `props.record` is set, label the control with the record's live name
+  (the same one `renderRecord` shows), keeping `props.label` while it loads.
+
+## 0.20.0 — 2026-10-02
+
+The G8A review of the action cards (nightly clone). Guard:
+`__tests__/directive-card-g8a.test.tsx` (4 red on 0.19.2).
+
+- **One value, one word.** New host seam `DirectiveHost.valueLabel({ noun, field, value })`
+  — the app's word for a pick-list value, the same word its forms and screens show. The
+  change list words old AND new through it ("Status Inbox → Completed", never
+  "incomplete → completed"); card facts too. New: `DirectiveValueRef`,
+  `DirectiveValueWord`, `ItemChangesOptions.valueWord`, `directiveValueWord(host, noun)`.
+- **An empty value reads "None"** — before and after, card and confirm (was "empty" /
+  "cleared"). `EMPTY_VALUE_WORD`.
+- **A value someone must judge is never cut.** The change list wraps every value (no CSS
+  truncation) and, below a 20rem container, stacks label / old / new one per line
+  (container query — a narrow panel stacks too). `CHANGE_VALUE_MAX` 60 → 280: only prose
+  longer than that is shortened.
+- **One field-label rule.** `directiveFieldLabel(key, titleColumn)` — the title column reads
+  "Title", every other field through THE humanizer — for change rows AND card facts. A
+  create card no longer repeats its title column as a fact ("workbook name"). Facts read
+  "Label value".
+
+### Consumer action
+
+- Pass `valueLabel` on your `DirectiveHost` and the same `valueWord` to any `itemChanges` you
+  call yourself (a host confirm), so card and confirm say the same words.
+
+## 0.19.2
+### Directive field labels use THE humanizer
+
+- `fieldLabel` (directive item changes) goes through `humanizeIdentifier`: `due_date` → "Due Date".
+- Consumer action: none.
+
 ## 0.19.1 — 2026-10-02
 
 - **One record-revision store per page.** Every entry of this package (`.`,

package/dist/{directive-host-Bw2_PrgL.d.cts → directive-host-CtFMuSZc.d.cts}

@@ -121,7 +121,14 @@ interface DirectiveOpenItemOptions {
     total: number;
 }
 interface DirectiveCopyProps {
+    /**
+     * What the control is called to a screen reader. Never an id: for a record it
+     * is type-generic ("this task"); a host with the record's live name replaces
+     * it through `record`.
+     */
     label: string;
+    /** The existing record this control copies, when it copies one — to name it. */
+    record?: DirectiveRecordRef;
     /** The value to copy — the whole shell or one item. */
     value: unknown;
     /** The item's kind, when copying an item. */
@@ -174,6 +181,15 @@ interface DirectiveHost {
     openItem?: (options: DirectiveOpenItemOptions) => void;
     /** Host copy controls. */
     renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /**
+     * The app's word for one stored value of one pick-list field — the SAME word
+     * the record's own screens and the write forms show ("incomplete" on a task
+     * reads "Inbox"). One value, one display word everywhere (G8A review,
+     * 2026-10-02: the card said "Status incomplete → completed"). Return null for
+     * a field that is not a pick-list: its value is shown as written. Absent →
+     * every value is shown as stored.
+     */
+    valueLabel?: (ref: DirectiveValueRef) => string | null;
     /** The mirrored noun catalog (label / family / title column). */
     nouns?: DirectiveNounCatalog;
     /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
@@ -189,6 +205,12 @@ interface DirectiveHost {
      */
     explainFailure?: (failure: DirectiveFailure) => DirectiveFailureWords | null;
 }
+/** One stored value of one field of one record type. */
+interface DirectiveValueRef {
+    noun: string;
+    field: string;
+    value: string;
+}
 /** One failed apply, as the card knows it. */
 interface DirectiveFailure {
     /** The server's / host's own text — technical; shown only behind Details. */
@@ -233,4 +255,4 @@ declare function DirectiveHostProvider({ host, children }: DirectiveHostProvider
  */
 declare function useDirectiveHost(): DirectiveHost;
 
-export { type DirectiveFailure as D, type DirectiveFailureWords as a, type DirectiveRecordRef as b, type DirectiveApplyResult as c, type DirectiveApplyState as d, type DirectiveAskRequest as e, type DirectiveCopyProps as f, type DirectiveHost as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, useDirectiveScope as o, useDirectiveHost as u };
+export { type DirectiveHost as D, type DirectiveFailure as a, type DirectiveFailureWords as b, type DirectiveRecordRef as c, type DirectiveApplyResult as d, type DirectiveApplyState as e, type DirectiveAskRequest as f, type DirectiveCopyProps as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, type DirectiveValueRef as o, useDirectiveScope as p, useDirectiveHost as u };

package/dist/{directive-host-Bw2_PrgL.d.ts → directive-host-CtFMuSZc.d.ts}

@@ -121,7 +121,14 @@ interface DirectiveOpenItemOptions {
     total: number;
 }
 interface DirectiveCopyProps {
+    /**
+     * What the control is called to a screen reader. Never an id: for a record it
+     * is type-generic ("this task"); a host with the record's live name replaces
+     * it through `record`.
+     */
     label: string;
+    /** The existing record this control copies, when it copies one — to name it. */
+    record?: DirectiveRecordRef;
     /** The value to copy — the whole shell or one item. */
     value: unknown;
     /** The item's kind, when copying an item. */
@@ -174,6 +181,15 @@ interface DirectiveHost {
     openItem?: (options: DirectiveOpenItemOptions) => void;
     /** Host copy controls. */
     renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /**
+     * The app's word for one stored value of one pick-list field — the SAME word
+     * the record's own screens and the write forms show ("incomplete" on a task
+     * reads "Inbox"). One value, one display word everywhere (G8A review,
+     * 2026-10-02: the card said "Status incomplete → completed"). Return null for
+     * a field that is not a pick-list: its value is shown as written. Absent →
+     * every value is shown as stored.
+     */
+    valueLabel?: (ref: DirectiveValueRef) => string | null;
     /** The mirrored noun catalog (label / family / title column). */
     nouns?: DirectiveNounCatalog;
     /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
@@ -189,6 +205,12 @@ interface DirectiveHost {
      */
     explainFailure?: (failure: DirectiveFailure) => DirectiveFailureWords | null;
 }
+/** One stored value of one field of one record type. */
+interface DirectiveValueRef {
+    noun: string;
+    field: string;
+    value: string;
+}
 /** One failed apply, as the card knows it. */
 interface DirectiveFailure {
     /** The server's / host's own text — technical; shown only behind Details. */
@@ -233,4 +255,4 @@ declare function DirectiveHostProvider({ host, children }: DirectiveHostProvider
  */
 declare function useDirectiveHost(): DirectiveHost;
 
-export { type DirectiveFailure as D, type DirectiveFailureWords as a, type DirectiveRecordRef as b, type DirectiveApplyResult as c, type DirectiveApplyState as d, type DirectiveAskRequest as e, type DirectiveCopyProps as f, type DirectiveHost as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, useDirectiveScope as o, useDirectiveHost as u };
+export { type DirectiveHost as D, type DirectiveFailure as a, type DirectiveFailureWords as b, type DirectiveRecordRef as c, type DirectiveApplyResult as d, type DirectiveApplyState as e, type DirectiveAskRequest as f, type DirectiveCopyProps as g, DirectiveHostProvider as h, type DirectiveHostProviderProps as i, type DirectiveOpenItemOptions as j, type DirectiveRecordProps as k, type DirectiveScope as l, DirectiveScopeProvider as m, type DirectiveShell as n, type DirectiveValueRef as o, useDirectiveScope as p, useDirectiveHost as u };

package/dist/directives.cjs

@@ -29,10 +29,13 @@ __export(directives_exports, {
   DirectiveProvisionalCard: () => DirectiveProvisionalCard,
   DirectiveRender: () => DirectiveRender,
   DirectiveScopeProvider: () => DirectiveScopeProvider,
+  EMPTY_VALUE_WORD: () => EMPTY_VALUE_WORD,
   SideEffectDirectiveCard: () => SideEffectDirectiveCard,
   TARGETING_CLASSES: () => TARGETING_CLASSES,
   defaultFailureWords: () => defaultFailureWords,
   describeChangeValue: () => describeChangeValue,
+  directiveFieldLabel: () => directiveFieldLabel,
+  directiveValueWord: () => directiveValueWord,
   failureWords: () => failureWords,
   fieldLabel: () => fieldLabel,
   getDirectiveRenderer: () => getDirectiveRenderer,
@@ -99,9 +102,10 @@ var import_content_ir2 = require("@ai-matrx/content-ir");
 
 // directives/item-changes.ts
 var import_uuid = require("@ai-matrx/kit/uuid");
+var import_text_case = require("@ai-matrx/kit/text-case");
 var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
 var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
-var CHANGE_VALUE_MAX = 60;
+var CHANGE_VALUE_MAX = 280;
 function itemRecordId(item) {
   const id = item.id;
   if (typeof id === "string" && id.trim()) return id.trim();
@@ -109,21 +113,27 @@ function itemRecordId(item) {
   return null;
 }
 function fieldLabel(key) {
-  const spaced = key.replace(/_/g, " ").trim();
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+  return (0, import_text_case.humanizeIdentifier)(key) || key;
 }
+function directiveFieldLabel(key, titleColumn) {
+  return titleColumn && key === titleColumn ? "Title" : fieldLabel(key);
+}
+var EMPTY_VALUE_WORD = "None";
 function recordFallbackName(nounLabel3, id) {
   const short = (0, import_uuid.isUuidShape)(id) ? id.slice(0, 8) : id.length > 12 ? `${id.slice(0, 12)}\u2026` : id;
   return `${nounLabel3} ${short}`;
 }
-function describeChangeValue(value) {
-  return describeValue(value);
+function describeChangeValue(value, word) {
+  return describeValue(value, word);
 }
-function describeValue(value) {
-  if (value === null || value === void 0) return { value: "cleared", full: "cleared", clears: true };
+var EMPTY = { value: EMPTY_VALUE_WORD, full: EMPTY_VALUE_WORD, clears: true };
+function describeValue(value, word) {
+  if (value === null || value === void 0) return EMPTY;
   if (typeof value === "string") {
     const trimmed = value.trim();
-    if (!trimmed) return { value: "cleared", full: "cleared", clears: true };
+    if (!trimmed) return EMPTY;
+    const named = word?.(trimmed) ?? null;
+    if (named) return { value: named, full: named, clears: false };
     const oneLine = trimmed.replace(/\s+/g, " ");
     const shown = oneLine.length > CHANGE_VALUE_MAX ? `${oneLine.slice(0, CHANGE_VALUE_MAX - 1)}\u2026` : oneLine;
     return { value: shown, full: trimmed, clears: false };
@@ -133,11 +143,11 @@ function describeValue(value) {
   }
   if (Array.isArray(value)) {
     const n2 = value.length;
-    const text2 = n2 === 0 ? "cleared" : `${n2} ${n2 === 1 ? "entry" : "entries"}`;
+    const text2 = n2 === 0 ? EMPTY_VALUE_WORD : `${n2} ${n2 === 1 ? "entry" : "entries"}`;
     return { value: text2, full: safeJson(value), clears: n2 === 0 };
   }
   const n = Object.keys(value).length;
-  const text = n === 0 ? "cleared" : `${n} ${n === 1 ? "field" : "fields"}`;
+  const text = n === 0 ? EMPTY_VALUE_WORD : `${n} ${n === 1 ? "field" : "fields"}`;
   return { value: text, full: safeJson(value), clears: n === 0 };
 }
 function safeJson(value) {
@@ -162,10 +172,12 @@ function itemChanges(item, current, options = {}) {
   const titleColumn = options.titleColumn ?? null;
   for (const [key, raw] of Object.entries(item)) {
     if (NOT_A_CHANGE.has(key)) continue;
-    const label = key === titleColumn ? "Title" : fieldLabel(key);
-    const change = { key, label, ...describeValue(raw) };
+    const label = directiveFieldLabel(key, titleColumn);
+    const valueWord = options.valueWord;
+    const word = key === titleColumn || !valueWord ? void 0 : (v) => valueWord(key, v);
+    const change = { key, label, ...describeValue(raw, word) };
     if (current && Object.prototype.hasOwnProperty.call(current, key)) {
-      change.before = describeValue(current[key]);
+      change.before = describeValue(current[key], word);
       change.same = sameValue(current[key], raw);
     }
     out.push(change);
@@ -621,7 +633,7 @@ function ApplyDirectiveButton({
               type: "button",
               disabled: askingAgain,
               onClick: () => void handleApply(!bad),
-              className: "inline-flex items-center gap-1 rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
+              className: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
               "data-apply-action": bad ? "retry" : "run-again",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RotateCcwIcon, { className: "h-3 w-3" }),
@@ -661,8 +673,8 @@ function ApplyDirectiveButton({
   }
   const destructive = directive.directiveClass === "delete";
   const muted = nothingToChange && view.status === "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-    muted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1", children: [
+    muted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
@@ -671,7 +683,7 @@ function ApplyDirectiveButton({
         disabled: view.status === "applying" || view.status === "asking" || items.length === 0,
         "data-apply-tone": muted ? "muted" : destructive ? "destructive" : "default",
         title: muted ? "It sets no fields, so applying it changes nothing." : void 0,
-        className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
+        className: `inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
         children: [
           view.status === "applying" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlayIcon, { className: "h-3.5 w-3.5" }),
           view.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
@@ -722,7 +734,7 @@ function FailureNotice({
           type: "button",
           onClick: () => setOpen((v) => !v),
           "aria-expanded": open,
-          className: "ml-1 underline underline-offset-2 hover:no-underline",
+          className: "ml-1 whitespace-nowrap underline underline-offset-2 hover:no-underline",
           "data-apply-failure-details-toggle": true,
           children: open ? "Hide details" : "Details"
         }
@@ -743,6 +755,14 @@ function FailureNotice({
 var import_react4 = require("react");
 var import_content_ir3 = require("@ai-matrx/content-ir");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function directiveValueWord(host, noun) {
+  const valueLabel = host.valueLabel;
+  return valueLabel ? (field, value) => valueLabel({ noun, field, value }) : null;
+}
+function omitKey(item, key) {
+  const { [key]: _omitted, ...rest } = item;
+  return rest;
+}
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
   directive,
@@ -759,16 +779,21 @@ function ItemRow({
   const titleColumn = (0, import_content_ir3.nounTitleColumn)(directive.noun, host.nouns);
   const title = (0, import_content_ir3.itemTitle)(item, titleColumn, index, total);
   const subtitle = (0, import_content_ir3.itemSubtitle)(item);
-  const facts = (0, import_content_ir3.itemFacts)(item);
+  const valueWord = directiveValueWord(host, directive.noun);
+  const facts = (0, import_content_ir3.itemFacts)(titleColumn ? omitKey(item, titleColumn) : item).map((fact) => ({
+    ...fact,
+    label: directiveFieldLabel(fact.key, titleColumn),
+    value: valueWord?.(fact.key, fact.value) ?? fact.value
+  }));
   const kind = host.itemKind?.(directive.slug) ?? null;
   const display = (0, import_content_ir3.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
   const body = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", children: [
-      fact.value,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", "data-item-fact": fact.key, children: [
+      fact.label,
       " ",
-      fact.label
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-foreground/80", children: fact.value })
     ] }, fact.key)) }),
     subtitle && facts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden truncate text-[11px] text-muted-foreground sm:inline", children: subtitle }) : null,
     openItem ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaximizeIcon, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" }) : null
@@ -803,35 +828,36 @@ function DirectiveChangeList({
   if (changes.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: `text-[11px] text-muted-foreground${className ? ` ${className}` : ""}`, children: "Sets no fields \u2014 nothing would change." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: `space-y-0.5${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: `@container space-y-1${className ? ` ${className}` : ""}`, "data-directive-changes": "", children: changes.map((change) => {
     const before = change.before && !change.same ? change.before : null;
-    const was = before ? before.clears ? "empty" : before.value : null;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "li",
       {
-        className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
-        title: before ? `${change.label}: ${before.clears ? "empty" : before.full} \u2192 ${change.full}` : `${change.label} \u2192 ${change.full}`,
+        className: "flex min-w-0 flex-col text-[11px] @xs:flex-row @xs:flex-wrap @xs:items-baseline @xs:gap-x-1.5",
+        title: before ? `${change.label}: ${before.full} \u2192 ${change.full}` : `${change.label} \u2192 ${change.full}`,
         "data-change-key": change.key,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
-          was !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          before ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "span",
             {
-              className: "min-w-0 max-w-[40%] shrink truncate text-muted-foreground line-through",
+              className: "min-w-0 text-muted-foreground line-through [overflow-wrap:anywhere]",
               "data-change-before": "",
-              children: was
+              children: before.value
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "span",
-            {
-              className: `min-w-0 truncate ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
-              "data-change-after": "",
-              children: change.value
-            }
-          ),
-          change.same ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
+              {
+                className: `min-w-0 [overflow-wrap:anywhere] ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
+                "data-change-after": "",
+                children: change.value
+              }
+            ),
+            change.same ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
+          ] })
         ]
       },
       change.key
@@ -854,12 +880,20 @@ function TargetRow({
     readsLive ? { noun: directive.noun, id: recordId } : null
   );
   const compareTo = phase.phase === "applied" ? phase.before?.[index] ?? null : readsLive ? live.values : null;
-  const changes = isUpdate ? itemChanges(item, compareTo, { titleColumn: (0, import_content_ir3.nounTitleColumn)(directive.noun, host.nouns) }) : [];
+  const changes = isUpdate ? itemChanges(item, compareTo, {
+    titleColumn: (0, import_content_ir3.nounTitleColumn)(directive.noun, host.nouns),
+    valueWord: directiveValueWord(host, directive.noun)
+  }) : [];
   const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex min-w-0 flex-1 items-center gap-1 px-1", children: name }),
-      host.renderCopy?.({ label: fallback, value: item, size: "xs" })
+      host.renderCopy?.({
+        label: `this ${(0, import_content_ir3.nounLabel)(directive.noun, host.nouns).toLowerCase()}`,
+        value: item,
+        size: "xs",
+        record: { noun: directive.noun, id: recordId }
+      })
     ] }),
     isUpdate ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DirectiveChangeList, { changes, className: "mt-0.5 px-1" }) : null
   ] });
@@ -887,7 +921,7 @@ function SideEffectDirectiveCard({ directive }) {
         " ",
         total === 1 ? "item" : "items"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1", children: [
         host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           ApplyDirectiveButton,
@@ -909,7 +943,7 @@ function SideEffectDirectiveCard({ directive }) {
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
-        className: "mt-0.5 inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
+        className: "mt-0.5 inline-flex items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
         children: [
           expanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronRightIcon, { className: "h-3 w-3" }),
           expanded ? "Show less" : `Show ${hidden} more`