@ai-matrx/content-ir-react 0.11.11 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.12.1
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/content-ir-react/v0.12.0..npm/content-ir-react/v0.12.1 -- apps/shared/content-ir-react`).
+No source changes intended and no consumer action required.
+
+## 0.12.0 — 2026-09-30
+
+- **An update/delete card names the record it changes.** Rows for
+  `directive_v1_update_*` / `directive_v1_delete_*` items carrying an `id` render
+  the EXISTING record through the new host seam `renderRecord` (its live name, a
+  way to open it). With no seam the row reads "Task 1a2b3c4d" — never "Item",
+  and never an update's NEW title passed off as the record's name.
+- **An update card lists what it changes** — every field the item sets,
+  "Due date → 2026-10-15", "Assignee id → cleared" (`itemChanges`, exported with
+  `itemRecordId`, `fieldLabel`, `recordFallbackName`, `TARGETING_CLASSES`).
+- **Apply tells the truth about where it is.** New host seam `ask(request)` runs
+  BEFORE anything is applied; the control stays idle (disabled) while it is open
+  and only a yes moves it to "Applying…". A no leaves the card exactly as it was.
+- **The tally is a door.** `DirectiveApplyResult` gains optional `message` (the
+  server's receipt sentence, shown instead of "Applied 1") and `records`
+  (`{noun, id}[]`, drawn through `renderRecord` with `context: "applied"` and
+  `trashed` for a delete).
+
+### Consumer action
+
+- Wire `ask` (your consequence dialog) and stop asking inside `confirm`, or your
+  card will still read "Applying…" while your dialog is up.
+- Wire `renderRecord` to your live-name + open primitive, and return `message`
+  and `records` from `confirm` (the server's receipt `message` and
+  `resource_kind`/`resource_ids`).
+
 ## 0.11.11 — 2026-09-25
 
 - **THE PROVISIONAL TIER in `DirectiveRender`.** A directive whose JSON has not
@@ -429,3 +461,4 @@ customers building on the platform render kinds through ONE implementation
   kind in an app and look like a data problem for weeks.
 
 Peer dependencies: `react >= 19` and `@ai-matrx/content-ir` 0.2.0 (exact).
+

package/dist/directive-host-Bl-ZgJWp.d.cts

@@ -0,0 +1,116 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { DecodedDirective, DirectiveNounCatalog, DirectiveItemKindLookup } from '@ai-matrx/content-ir';
+
+interface DirectiveApplyResult {
+    applied: number;
+    failed: number;
+    /**
+     * The server's own receipt sentence ("Deleted task “Ship it”."), shown in
+     * place of a bare count. Never composed client-side.
+     */
+    message?: string | null;
+    /**
+     * The records the apply created or changed, so the tally is a way IN to them
+     * (no dead ends). Rendered through `renderRecord`; absent → the sentence alone.
+     */
+    records?: DirectiveRecordRef[];
+}
+/** One record a directive names: the noun it is, and its id. */
+interface DirectiveRecordRef {
+    noun: string;
+    id: string;
+}
+interface DirectiveRecordProps extends DirectiveRecordRef {
+    /**
+     * What to show until (or unless) the host resolves the live name —
+     * "Task 1a2b3c4d". Never blank, never "Item".
+     */
+    fallback: string;
+    /** Where it is drawn: an item row, the confirm dialog, or the applied tally. */
+    context: "row" | "dialog" | "applied";
+    /**
+     * True when the record is (about to be) in the trash — the host may still
+     * name it but should not promise it opens as a live record.
+     */
+    trashed?: boolean;
+}
+/** What the person is being asked to approve — everything the card knows. */
+interface DirectiveAskRequest {
+    directive: DecodedDirective;
+    /** The items, exactly as they will be sent. */
+    items: Record<string, unknown>[];
+    /** The noun's human label ("Task"), from the host's catalog when it has one. */
+    nounLabel: string;
+}
+interface DirectiveOpenItemOptions {
+    /** The item, `__kind`-stamped when the shape has an item kind. */
+    item: Record<string, unknown>;
+    /** The content-IR kind this item IS, or null when the shape has none. */
+    itemKind: string | null;
+    /** What the item is called — the same title the card shows. */
+    title: string;
+    /** "Run Create agent definition · item 1 of 1". */
+    subtitle: string | null;
+    directive: DecodedDirective;
+    index: number;
+    total: number;
+}
+interface DirectiveCopyProps {
+    label: string;
+    /** The value to copy — the whole shell or one item. */
+    value: unknown;
+    /** The item's kind, when copying an item. */
+    kind?: string | null;
+    size: "icon" | "xs";
+}
+interface DirectiveHost {
+    /**
+     * Apply a side-effect directive as the user (the server re-validates every
+     * item against the registered model and runs the ONE handler; idempotent).
+     * Reject with an Error whose message is safe to show.
+     */
+    confirm?: (shell: {
+        __kind: string;
+        items: Record<string, unknown>[];
+    }) => Promise<DirectiveApplyResult>;
+    /**
+     * Ask the person BEFORE anything runs, naming the consequence (the records,
+     * what changes). Resolve `true` to go ahead, `false` to leave the card as it
+     * was. The Apply control stays idle while this is open — nothing reads as
+     * "applying" until the person has said yes. Absent → `confirm` is called
+     * directly (a host that asks inside `confirm` keeps working, but its card
+     * will read "Applying…" while its dialog is up).
+     */
+    ask?: (request: DirectiveAskRequest) => Promise<boolean>;
+    /**
+     * Draw ONE existing record by its live name, as a way to open it. Used on
+     * update/delete rows (the record that will change), in the host's own ask
+     * dialog if it likes, and on the applied tally (what was written). Absent →
+     * the fallback text, unlinked.
+     */
+    renderRecord?: (props: DirectiveRecordProps) => ReactNode;
+    /** Open ONE item to read it properly before approving the write. */
+    openItem?: (options: DirectiveOpenItemOptions) => void;
+    /** Host copy controls. */
+    renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /** The mirrored noun catalog (label / family / title column). */
+    nouns?: DirectiveNounCatalog;
+    /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
+    itemKind?: DirectiveItemKindLookup;
+    /** Where a decode failure or an unhonourable shell is reported. Default: console.error. */
+    reportError?: (message: string) => void;
+}
+interface DirectiveHostProviderProps {
+    host: DirectiveHost;
+    children: ReactNode;
+}
+declare function DirectiveHostProvider({ host, children }: DirectiveHostProviderProps): react.JSX.Element;
+/**
+ * The wired directive host. Unlike the render host this does NOT throw when
+ * unwired: a directive still renders (named, itemised, copy-less, apply-less)
+ * — degrading the chrome is honest, hiding the content is not.
+ */
+declare function useDirectiveHost(): DirectiveHost;
+
+export { type DirectiveApplyResult as D, type DirectiveAskRequest as a, type DirectiveCopyProps as b, type DirectiveHost as c, DirectiveHostProvider as d, type DirectiveHostProviderProps as e, type DirectiveOpenItemOptions as f, type DirectiveRecordProps as g, type DirectiveRecordRef as h, useDirectiveHost as u };

package/dist/directive-host-Bl-ZgJWp.d.ts

@@ -0,0 +1,116 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { DecodedDirective, DirectiveNounCatalog, DirectiveItemKindLookup } from '@ai-matrx/content-ir';
+
+interface DirectiveApplyResult {
+    applied: number;
+    failed: number;
+    /**
+     * The server's own receipt sentence ("Deleted task “Ship it”."), shown in
+     * place of a bare count. Never composed client-side.
+     */
+    message?: string | null;
+    /**
+     * The records the apply created or changed, so the tally is a way IN to them
+     * (no dead ends). Rendered through `renderRecord`; absent → the sentence alone.
+     */
+    records?: DirectiveRecordRef[];
+}
+/** One record a directive names: the noun it is, and its id. */
+interface DirectiveRecordRef {
+    noun: string;
+    id: string;
+}
+interface DirectiveRecordProps extends DirectiveRecordRef {
+    /**
+     * What to show until (or unless) the host resolves the live name —
+     * "Task 1a2b3c4d". Never blank, never "Item".
+     */
+    fallback: string;
+    /** Where it is drawn: an item row, the confirm dialog, or the applied tally. */
+    context: "row" | "dialog" | "applied";
+    /**
+     * True when the record is (about to be) in the trash — the host may still
+     * name it but should not promise it opens as a live record.
+     */
+    trashed?: boolean;
+}
+/** What the person is being asked to approve — everything the card knows. */
+interface DirectiveAskRequest {
+    directive: DecodedDirective;
+    /** The items, exactly as they will be sent. */
+    items: Record<string, unknown>[];
+    /** The noun's human label ("Task"), from the host's catalog when it has one. */
+    nounLabel: string;
+}
+interface DirectiveOpenItemOptions {
+    /** The item, `__kind`-stamped when the shape has an item kind. */
+    item: Record<string, unknown>;
+    /** The content-IR kind this item IS, or null when the shape has none. */
+    itemKind: string | null;
+    /** What the item is called — the same title the card shows. */
+    title: string;
+    /** "Run Create agent definition · item 1 of 1". */
+    subtitle: string | null;
+    directive: DecodedDirective;
+    index: number;
+    total: number;
+}
+interface DirectiveCopyProps {
+    label: string;
+    /** The value to copy — the whole shell or one item. */
+    value: unknown;
+    /** The item's kind, when copying an item. */
+    kind?: string | null;
+    size: "icon" | "xs";
+}
+interface DirectiveHost {
+    /**
+     * Apply a side-effect directive as the user (the server re-validates every
+     * item against the registered model and runs the ONE handler; idempotent).
+     * Reject with an Error whose message is safe to show.
+     */
+    confirm?: (shell: {
+        __kind: string;
+        items: Record<string, unknown>[];
+    }) => Promise<DirectiveApplyResult>;
+    /**
+     * Ask the person BEFORE anything runs, naming the consequence (the records,
+     * what changes). Resolve `true` to go ahead, `false` to leave the card as it
+     * was. The Apply control stays idle while this is open — nothing reads as
+     * "applying" until the person has said yes. Absent → `confirm` is called
+     * directly (a host that asks inside `confirm` keeps working, but its card
+     * will read "Applying…" while its dialog is up).
+     */
+    ask?: (request: DirectiveAskRequest) => Promise<boolean>;
+    /**
+     * Draw ONE existing record by its live name, as a way to open it. Used on
+     * update/delete rows (the record that will change), in the host's own ask
+     * dialog if it likes, and on the applied tally (what was written). Absent →
+     * the fallback text, unlinked.
+     */
+    renderRecord?: (props: DirectiveRecordProps) => ReactNode;
+    /** Open ONE item to read it properly before approving the write. */
+    openItem?: (options: DirectiveOpenItemOptions) => void;
+    /** Host copy controls. */
+    renderCopy?: (props: DirectiveCopyProps) => ReactNode;
+    /** The mirrored noun catalog (label / family / title column). */
+    nouns?: DirectiveNounCatalog;
+    /** slug → the kind ONE item is (THE DIRECTIVE⇄KIND SEAM), or null. */
+    itemKind?: DirectiveItemKindLookup;
+    /** Where a decode failure or an unhonourable shell is reported. Default: console.error. */
+    reportError?: (message: string) => void;
+}
+interface DirectiveHostProviderProps {
+    host: DirectiveHost;
+    children: ReactNode;
+}
+declare function DirectiveHostProvider({ host, children }: DirectiveHostProviderProps): react.JSX.Element;
+/**
+ * The wired directive host. Unlike the render host this does NOT throw when
+ * unwired: a directive still renders (named, itemised, copy-less, apply-less)
+ * — degrading the chrome is honest, hiding the content is not.
+ */
+declare function useDirectiveHost(): DirectiveHost;
+
+export { type DirectiveApplyResult as D, type DirectiveAskRequest as a, type DirectiveCopyProps as b, type DirectiveHost as c, DirectiveHostProvider as d, type DirectiveHostProviderProps as e, type DirectiveOpenItemOptions as f, type DirectiveRecordProps as g, type DirectiveRecordRef as h, useDirectiveHost as u };

package/dist/directives.cjs

@@ -22,13 +22,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var directives_exports = {};
 __export(directives_exports, {
   ApplyDirectiveButton: () => ApplyDirectiveButton,
+  CHANGE_VALUE_MAX: () => CHANGE_VALUE_MAX,
   DirectiveFallbackCard: () => DirectiveFallbackCard,
   DirectiveHostProvider: () => DirectiveHostProvider,
   DirectiveProvisionalCard: () => DirectiveProvisionalCard,
   DirectiveRender: () => DirectiveRender,
   SideEffectDirectiveCard: () => SideEffectDirectiveCard,
+  TARGETING_CLASSES: () => TARGETING_CLASSES,
+  fieldLabel: () => fieldLabel,
   getDirectiveRenderer: () => getDirectiveRenderer,
+  itemChanges: () => itemChanges,
+  itemRecordId: () => itemRecordId,
   provisionalDirectiveSlug: () => provisionalDirectiveSlug,
+  recordFallbackName: () => recordFallbackName,
   registerDirectiveRenderer: () => registerDirectiveRenderer,
   resetDirectiveRenderers: () => resetDirectiveRenderers,
   useDirectiveHost: () => useDirectiveHost
@@ -68,6 +74,63 @@ function resetDirectiveRenderers() {
 
 // directives/ApplyDirectiveButton.tsx
 var import_react2 = require("react");
+var import_content_ir2 = require("@ai-matrx/content-ir");
+
+// directives/item-changes.ts
+var import_uuid = require("@ai-matrx/kit/uuid");
+var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
+var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
+var CHANGE_VALUE_MAX = 60;
+function itemRecordId(item) {
+  const id = item.id;
+  if (typeof id === "string" && id.trim()) return id.trim();
+  if (typeof id === "number") return String(id);
+  return null;
+}
+function fieldLabel(key) {
+  const spaced = key.replace(/_/g, " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+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 describeValue(value) {
+  if (value === null || value === void 0) return { value: "cleared", full: "cleared", clears: true };
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return { value: "cleared", full: "cleared", clears: true };
+    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 };
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return { value: String(value), full: String(value), clears: false };
+  }
+  if (Array.isArray(value)) {
+    const n2 = value.length;
+    const text2 = n2 === 0 ? "cleared" : `${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"}`;
+  return { value: text, full: safeJson(value), clears: n === 0 };
+}
+function safeJson(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function itemChanges(item) {
+  const out = [];
+  for (const [key, raw] of Object.entries(item)) {
+    if (NOT_A_CHANGE.has(key)) continue;
+    out.push({ key, label: fieldLabel(key), ...describeValue(raw) });
+  }
+  return out;
+}
 
 // directives/icons.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -185,10 +248,38 @@ function ApplyDirectiveButton({
   const items = directive.items;
   async function handleApply() {
     if (!confirm) return;
+    if (host.ask) {
+      setState({ status: "asking" });
+      let ok = false;
+      try {
+        ok = await host.ask({
+          directive,
+          items,
+          nounLabel: (0, import_content_ir2.nounLabel)(directive.noun, host.nouns)
+        });
+      } catch (error) {
+        setState({
+          status: "error",
+          message: error instanceof Error && error.message ? error.message : "We could not ask you to confirm this, so nothing was done."
+        });
+        return;
+      }
+      if (!ok) {
+        setState({ status: "idle" });
+        return;
+      }
+    }
+    setElapsed(0);
     setState({ status: "applying" });
     try {
       const result = await confirm({ __kind: directive.slug, items });
-      setState({ status: "applied", applied: result.applied, failed: result.failed });
+      setState({
+        status: "applied",
+        applied: result.applied,
+        failed: result.failed,
+        message: result.message?.trim() ? result.message.trim() : null,
+        records: result.records ?? []
+      });
       onApplied?.();
     } catch (error) {
       setState({
@@ -199,15 +290,26 @@ function ApplyDirectiveButton({
   }
   if (state.status === "applied") {
     const bad = state.failed > 0;
+    const trashed = directive.directiveClass === "delete";
+    const label2 = (0, import_content_ir2.nounLabel)(directive.noun, host.nouns);
+    const records = host.renderRecord ? state.records : [];
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "span",
       {
-        className: `inline-flex items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        className: `inline-flex min-w-0 flex-wrap items-center gap-1 text-xs ${bad ? "text-destructive" : "text-primary"}`,
+        "data-apply-state": "applied",
         children: [
-          bad ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckCircleIcon, { className: "h-3.5 w-3.5" }),
-          "Applied ",
-          state.applied,
-          bad ? ` \xB7 ${state.failed} failed` : ""
+          bad ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AlertIcon, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+            state.message ?? `Applied ${state.applied}`,
+            bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
+          ] }),
+          records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
+            ...record,
+            fallback: recordFallbackName(label2, record.id),
+            context: "applied",
+            trashed
+          }) }, `${record.noun}:${record.id}`))
         ]
       }
     );
@@ -218,7 +320,7 @@ function ApplyDirectiveButton({
       {
         type: "button",
         onClick: () => void handleApply(),
-        disabled: state.status === "applying" || items.length === 0,
+        disabled: state.status === "applying" || state.status === "asking" || items.length === 0,
         className: "inline-flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-medium hover:bg-accent disabled:opacity-50",
         children: [
           state.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" }),
@@ -235,7 +337,7 @@ function ApplyDirectiveButton({
 
 // directives/SideEffectDirectiveCard.tsx
 var import_react3 = require("react");
-var import_content_ir2 = require("@ai-matrx/content-ir");
+var import_content_ir3 = require("@ai-matrx/content-ir");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
@@ -245,12 +347,16 @@ function ItemRow({
   total
 }) {
   const host = useDirectiveHost();
-  const titleColumn = (0, import_content_ir2.nounTitleColumn)(directive.noun, host.nouns);
-  const title = (0, import_content_ir2.itemTitle)(item, titleColumn, index, total);
-  const subtitle = (0, import_content_ir2.itemSubtitle)(item);
-  const facts = (0, import_content_ir2.itemFacts)(item);
+  const recordId = TARGETING_CLASSES.has(directive.directiveClass) ? itemRecordId(item) : null;
+  if (recordId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TargetRow, { directive, item, recordId });
+  }
+  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 kind = host.itemKind?.(directive.slug) ?? null;
-  const display = (0, import_content_ir2.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  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 }),
@@ -269,7 +375,7 @@ function ItemRow({
         type: "button",
         onClick: () => openItem({
           // Stamped so the panel's kind pipeline types it from its own first key.
-          item: (0, import_content_ir2.asKindInstance)(item, kind) ?? item,
+          item: (0, import_content_ir3.asKindInstance)(item, kind) ?? item,
           itemKind: kind,
           title,
           subtitle: `${display.title} \xB7 item ${index + 1} of ${total}`,
@@ -285,12 +391,47 @@ function ItemRow({
     host.renderCopy?.({ label: title, value: item, kind, size: "xs" })
   ] });
 }
+function TargetRow({
+  directive,
+  item,
+  recordId
+}) {
+  const host = useDirectiveHost();
+  const fallback = recordFallbackName((0, import_content_ir3.nounLabel)(directive.noun, host.nouns), recordId);
+  const changes = directive.directiveClass === "update" ? itemChanges(item) : [];
+  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" })
+    ] }),
+    directive.directiveClass === "update" ? changes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "px-1 text-[11px] text-muted-foreground", children: "Sets no fields \u2014 nothing would change." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "mt-0.5 space-y-0.5 px-1", children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "li",
+      {
+        className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
+        title: `${change.label} \u2192 ${change.full}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
+          /* @__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"}`,
+              children: change.value
+            }
+          )
+        ]
+      },
+      change.key
+    )) }) : null
+  ] });
+}
 function SideEffectDirectiveCard({ directive }) {
   const host = useDirectiveHost();
   const [expanded, setExpanded] = (0, import_react3.useState)(false);
   const items = directive.items;
   const total = items.length;
-  const display = (0, import_content_ir2.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir3.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const Icon = classIcon(directive.directiveClass, directive.noun);
   const shown = expanded ? items : items.slice(0, ROWS_BEFORE_FOLD);
   const hidden = total - shown.length;
@@ -329,12 +470,12 @@ function SideEffectDirectiveCard({ directive }) {
 }
 
 // directives/DirectiveFallbackCard.tsx
-var import_content_ir3 = require("@ai-matrx/content-ir");
+var import_content_ir4 = require("@ai-matrx/content-ir");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function DirectiveFallbackCard({ directive, reason }) {
   const host = useDirectiveHost();
   const count = directive.items.length;
-  const display = (0, import_content_ir3.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir4.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "my-3 inline-flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted px-2.5 py-1 text-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BoxesIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-foreground", children: display.title }),
@@ -357,7 +498,7 @@ function DirectiveFallbackCard({ directive, reason }) {
 }
 
 // directives/DirectiveProvisionalCard.tsx
-var import_content_ir4 = require("@ai-matrx/content-ir");
+var import_content_ir5 = require("@ai-matrx/content-ir");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var COMPLETE_SLUG_RE = /^\{\s*"__kind"\s*:\s*"([^"]+)"/;
 function provisionalDirectiveSlug(content) {
@@ -367,8 +508,8 @@ function provisionalDirectiveSlug(content) {
 function DirectiveProvisionalCard({ content, streaming, className }) {
   const host = useDirectiveHost();
   const slug = provisionalDirectiveSlug(content);
-  const known = slug ? (0, import_content_ir4.parseDirectiveSlug)(slug) : null;
-  const display = known ? (0, import_content_ir4.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
+  const known = slug ? (0, import_content_ir5.parseDirectiveSlug)(slug) : null;
+  const display = known ? (0, import_content_ir5.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
   const Icon = known ? classIcon(known.directiveClass, known.noun) : BoxesIcon;
   const title = display?.title ?? "Structured action";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -397,7 +538,7 @@ function DirectiveProvisionalCard({ content, streaming, className }) {
 }
 
 // directives/DirectiveRender.tsx
-var import_content_ir5 = require("@ai-matrx/content-ir");
+var import_content_ir6 = require("@ai-matrx/content-ir");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function isWholeJson(content) {
   try {
@@ -409,13 +550,13 @@ function isWholeJson(content) {
 }
 function DirectiveRender({ content, className, streaming }) {
   const host = useDirectiveHost();
-  const directive = (0, import_content_ir5.tryDecodeDirectiveContent)(content, (message) => {
+  const directive = (0, import_content_ir6.tryDecodeDirectiveContent)(content, (message) => {
     const line = `[kind-directives] ${message}`;
     if (host.reportError) host.reportError(line);
     else console.error(line);
   });
   if (!directive) {
-    if (typeof content === "string" && (0, import_content_ir5.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
+    if (typeof content === "string" && (0, import_content_ir6.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
       return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectiveProvisionalCard, { content, streaming: streaming !== false, className });
     }
     const raw = typeof content === "string" ? content : JSON.stringify(content, null, 2);