@ai-matrx/content-ir-react 0.15.2 → 0.16.1

package/dist/index.js

@@ -739,7 +739,7 @@ function useContentIrKindVersion(kind, sources) {
 }
 
 // react/KindInstanceRender.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import {
   envelopeFromCompleteValue as envelopeFromCompleteValue3,
   IR_ENVELOPE_KEY as IR_ENVELOPE_KEY2,
@@ -775,6 +775,9 @@ function recordFallbackName(nounLabel3, id) {
   const short = 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 describeValue(value) {
   if (value === null || value === void 0) return { value: "cleared", full: "cleared", clears: true };
   if (typeof value === "string") {
@@ -803,11 +806,28 @@ function safeJson(value) {
     return String(value);
   }
 }
-function itemChanges(item) {
+function sameValue(a, b) {
+  if (a === b) return true;
+  if (a === null || a === void 0 || b === null || b === void 0) {
+    const emptyA = a === null || a === void 0 || a === "";
+    const emptyB = b === null || b === void 0 || b === "";
+    return emptyA && emptyB;
+  }
+  if (typeof a === "object" || typeof b === "object") return safeJson(a) === safeJson(b);
+  return false;
+}
+function itemChanges(item, current, options = {}) {
   const out = [];
+  const titleColumn = options.titleColumn ?? null;
   for (const [key, raw] of Object.entries(item)) {
     if (NOT_A_CHANGE.has(key)) continue;
-    out.push({ key, label: fieldLabel(key), ...describeValue(raw) });
+    const label = key === titleColumn ? "Title" : fieldLabel(key);
+    const change = { key, label, ...describeValue(raw) };
+    if (current && Object.prototype.hasOwnProperty.call(current, key)) {
+      change.before = describeValue(current[key]);
+      change.same = sameValue(current[key], raw);
+    }
+    out.push(change);
   }
   return out;
 }
@@ -920,12 +940,23 @@ function ApplyDirectiveButton({
   const conversationId = scope.conversationId || void 0;
   const items = directive.items;
   const readsLedger = !!host.applyState && !!host.confirm && directive.parsed.executes && items.length > 0;
-  const [state, setState] = useState(
-    readsLedger ? { status: "checking" } : { status: "idle" }
-  );
+  const initial = readsLedger ? { status: "checking" } : { status: "idle" };
+  const [state, setState] = useState(initial);
   const [elapsed, setElapsed] = useState(0);
   const [askingAgain, setAskingAgain] = useState(false);
   const startedAt = useRef(null);
+  const identity = JSON.stringify([directive.slug, items, conversationId ?? null]);
+  const [stateFor, setStateFor] = useState(identity);
+  if (stateFor !== identity) {
+    setStateFor(identity);
+    setState(initial);
+    setAskingAgain(false);
+    setElapsed(0);
+  }
+  const currentIdentity = useRef(identity);
+  useEffect(() => {
+    currentIdentity.current = identity;
+  }, [identity]);
   const nounText = nounLabel(directive.noun, host.nouns);
   const shellKey = readsLedger ? JSON.stringify([directive.slug, items, conversationId ?? null]) : "";
   const read = host.applyState;
@@ -948,7 +979,8 @@ function ApplyDirectiveButton({
               applied: shellItems.length,
               failed: 0,
               message: answer.message?.trim() ? answer.message.trim() : null,
-              records: answer.records ?? []
+              records: answer.records ?? [],
+              copies: Math.max(1, answer.copies ?? 1)
             } : prev
           );
         } else if (answer.state === "in_flight" && polls < FINISH_POLLS_MAX) {
@@ -988,6 +1020,9 @@ function ApplyDirectiveButton({
   async function handleApply(again = false) {
     if (!confirm) return;
     const before = state;
+    const askedFor = identity;
+    const stillHere = () => currentIdentity.current === askedFor;
+    const priorCopies = state.status === "applied" ? state.copies : 0;
     if (host.ask) {
       if (again) setAskingAgain(true);
       else setState({ status: "asking" });
@@ -1000,6 +1035,7 @@ function ApplyDirectiveButton({
           ...again ? { again: true } : {}
         });
       } catch (error) {
+        if (!stillHere()) return;
         setAskingAgain(false);
         setState({
           status: "error",
@@ -1007,6 +1043,7 @@ function ApplyDirectiveButton({
         });
         return;
       }
+      if (!stillHere()) return;
       setAskingAgain(false);
       if (!ok) {
         setState(again ? before : { status: "idle" });
@@ -1020,15 +1057,19 @@ function ApplyDirectiveButton({
       if (conversationId) shell.conversationId = conversationId;
       if (again) shell.force = true;
       const result = await confirm(shell);
+      if (!stillHere()) return;
       setState({
         status: "applied",
         applied: result.applied,
         failed: result.failed,
         message: result.message?.trim() ? result.message.trim() : null,
-        records: result.records ?? []
+        records: result.records ?? [],
+        // "Run again" made one more; a first apply (or a replay of one) is one.
+        copies: again ? Math.max(1, priorCopies) + 1 : Math.max(1, priorCopies)
       });
       onApplied?.();
     } catch (error) {
+      if (!stillHere()) return;
       setState({
         status: "error",
         message: error instanceof Error && error.message ? error.message : "That couldn't be applied just now. Please try again."
@@ -1053,6 +1094,15 @@ function ApplyDirectiveButton({
               bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
             ] })
           ] }),
+          state.copies > 1 ? /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "shrink-0 text-muted-foreground",
+              "data-apply-copies": state.copies,
+              title: records.length > 0 ? directive.directiveClass === "create" ? "Links to the latest copy." : "Links to the latest run." : void 0,
+              children: directive.directiveClass === "create" ? `${state.copies} copies` : `Ran ${state.copies} times`
+            }
+          ) : null,
           records.map((record) => /* @__PURE__ */ jsx4("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
             ...record,
             fallback: recordFallbackName(label2, record.id),
@@ -1103,6 +1153,7 @@ function ApplyDirectiveButton({
       }
     );
   }
+  const destructive = directive.directiveClass === "delete";
   return /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-2", children: [
     /* @__PURE__ */ jsxs2(
       "button",
@@ -1110,7 +1161,8 @@ function ApplyDirectiveButton({
         type: "button",
         onClick: () => void handleApply(),
         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",
+        "data-apply-tone": destructive ? "destructive" : "default",
+        className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
         children: [
           state.status === "applying" ? /* @__PURE__ */ jsx4(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx4(PlayIcon, { className: "h-3.5 w-3.5" }),
           state.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
@@ -1213,7 +1265,7 @@ function resetDirectiveRenderers() {
 }
 
 // directives/SideEffectDirectiveCard.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import {
   asKindInstance,
   directiveDisplay as directiveDisplay3,
@@ -1223,6 +1275,39 @@ import {
   nounLabel as nounLabel2,
   nounTitleColumn
 } from "@ai-matrx/content-ir";
+
+// directives/record-values.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useRecordValues(read, ref) {
+  const key = ref && read ? `${ref.noun}:${ref.id}` : "";
+  const [result, setResult] = useState2({
+    key: "",
+    values: null,
+    status: "idle"
+  });
+  useEffect2(() => {
+    if (!key || !read) return;
+    const split = key.indexOf(":");
+    const target = { noun: key.slice(0, split), id: key.slice(split + 1) };
+    let live = true;
+    setResult({ key, values: null, status: "loading" });
+    read(target).then((values) => {
+      if (!live) return;
+      setResult({ key, values, status: values ? "ready" : "unavailable" });
+    }).catch(() => {
+      if (!live) return;
+      setResult({ key, values: null, status: "unavailable" });
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, read]);
+  if (!key) return { values: null, status: "idle" };
+  if (result.key !== key) return { values: null, status: "loading" };
+  return { values: result.values, status: result.status };
+}
+
+// directives/SideEffectDirectiveCard.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var ROWS_BEFORE_FOLD = 3;
 function ItemRow({
@@ -1276,44 +1361,73 @@ function ItemRow({
     host.renderCopy?.({ label: title, value: item, kind, size: "xs" })
   ] });
 }
-function TargetRow({
-  directive,
-  item,
-  recordId
+function DirectiveChangeList({
+  changes,
+  className
 }) {
-  const host = useDirectiveHost();
-  const fallback = recordFallbackName(nounLabel2(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__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: fallback });
-  return /* @__PURE__ */ jsxs5("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx7("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__ */ jsx7("p", { className: "px-1 text-[11px] text-muted-foreground", children: "Sets no fields \u2014 nothing would change." }) : /* @__PURE__ */ jsx7("ul", { className: "mt-0.5 space-y-0.5 px-1", children: changes.map((change) => /* @__PURE__ */ jsxs5(
+  if (changes.length === 0) {
+    return /* @__PURE__ */ jsx7("p", { className: `text-[11px] text-muted-foreground${className ? ` ${className}` : ""}`, children: "Sets no fields \u2014 nothing would change." });
+  }
+  return /* @__PURE__ */ jsx7("ul", { className: `space-y-0.5${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__ */ jsxs5(
       "li",
       {
         className: "flex min-w-0 items-baseline gap-1.5 text-[11px]",
-        title: `${change.label} \u2192 ${change.full}`,
+        title: before ? `${change.label}: ${before.clears ? "empty" : before.full} \u2192 ${change.full}` : `${change.label} \u2192 ${change.full}`,
+        "data-change-key": change.key,
         children: [
           /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-muted-foreground", children: change.label }),
+          was !== null ? /* @__PURE__ */ jsx7(
+            "span",
+            {
+              className: "min-w-0 max-w-[40%] shrink truncate text-muted-foreground line-through",
+              "data-change-before": "",
+              children: was
+            }
+          ) : null,
           /* @__PURE__ */ jsx7("span", { "aria-hidden": true, className: "shrink-0 text-muted-foreground", children: "\u2192" }),
           /* @__PURE__ */ jsx7(
             "span",
             {
               className: `min-w-0 truncate ${change.clears ? "italic text-muted-foreground" : "text-foreground"}`,
+              "data-change-after": "",
               children: change.value
             }
-          )
+          ),
+          change.same ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-muted-foreground", children: "(no change)" }) : null
         ]
       },
       change.key
-    )) }) : null
+    );
+  }) });
+}
+function TargetRow({
+  directive,
+  item,
+  recordId
+}) {
+  const host = useDirectiveHost();
+  const fallback = recordFallbackName(nounLabel2(directive.noun, host.nouns), recordId);
+  const isUpdate = directive.directiveClass === "update";
+  const current = useRecordValues(
+    isUpdate ? host.readRecord : void 0,
+    isUpdate ? { noun: directive.noun, id: recordId } : null
+  );
+  const changes = isUpdate ? itemChanges(item, current.values, { titleColumn: nounTitleColumn(directive.noun, host.nouns) }) : [];
+  const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: fallback });
+  return /* @__PURE__ */ jsxs5("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx7("span", { className: "flex min-w-0 flex-1 items-center gap-1 px-1", children: name }),
+      host.renderCopy?.({ label: fallback, value: item, size: "xs" })
+    ] }),
+    isUpdate ? /* @__PURE__ */ jsx7(DirectiveChangeList, { changes, className: "mt-0.5 px-1" }) : null
   ] });
 }
 function SideEffectDirectiveCard({ directive }) {
   const host = useDirectiveHost();
-  const [expanded, setExpanded] = useState2(false);
+  const [expanded, setExpanded] = useState3(false);
   const items = directive.items;
   const total = items.length;
   const display = directiveDisplay3(directive.directiveClass, directive.noun, host.nouns);
@@ -1427,10 +1541,10 @@ function KindInstanceRenderInner({
   className
 }) {
   const host = useContentIrHost();
-  const [routingStatus, setRoutingStatus] = useState3(
+  const [routingStatus, setRoutingStatus] = useState4(
     () => kindIsRoutable(kind, host) ? "routable" : "checking"
   );
-  useEffect2(() => {
+  useEffect3(() => {
     let cancelled = false;
     let warmed = false;
     const syncRoutingStatus = () => {
@@ -1828,6 +1942,7 @@ export {
   DIRECTIVE_BLOCK_TYPE,
   DbKindComponentErrorBoundary,
   DelegatedOutput,
+  DirectiveChangeList,
   DirectiveFallbackCard,
   DirectiveHostProvider,
   DirectiveProvisionalCard,
@@ -1848,6 +1963,7 @@ export {
   consoleErrorReporter,
   createDbKindComponentCache,
   createKindRouteBinding,
+  describeChangeValue,
   envelopeFromPartialKind,
   fieldLabel,
   getDirectiveRenderer,
@@ -1876,6 +1992,7 @@ export {
   useContentIrKindVersion,
   useDirectiveHost,
   useDirectiveScope,
-  useKindRouteEnv
+  useKindRouteEnv,
+  useRecordValues
 };
 //# sourceMappingURL=index.js.map