@ai-matrx/agents 0.59.176 → 0.59.177

package/dist/versions/react/index.js

@@ -0,0 +1,1302 @@
+"use client";
+
+// versions/react/AgentDiffViewer.tsx
+import { useMemo } from "react";
+import {
+  BooleanFieldAdapter,
+  createAdapterRegistry,
+  DiffViewerShell,
+  JsonObjectAdapter,
+  TagsFieldAdapter,
+  TextFieldAdapter
+} from "@ai-matrx/diff/react";
+
+// versions/compare.ts
+import { computeDiff } from "@ai-matrx/diff/structural";
+
+// versions/constants.ts
+var AGENT_EXCLUDE_PATHS = /* @__PURE__ */ new Set([
+  "id",
+  "userId",
+  "organizationId",
+  "taskId",
+  "createdAt",
+  "updatedAt",
+  "isVersion",
+  "parentAgentId",
+  "sourceAgentId",
+  "sourceSnapshotAt",
+  // Lineage and record bookkeeping: who made the row and which version it was
+  // copied from never change what the agent does, so a copy never "differs" here.
+  "sourceVersion",
+  "followsSource",
+  "createdBy",
+  "runCounts",
+  "isOwner",
+  "accessLevel",
+  "sharedByEmail",
+  "agentType",
+  "version",
+  "changeNote",
+  "changedAt"
+]);
+var AGENT_IDENTITY_KEYS = {
+  variableDefinitions: "name",
+  contextPolicies: "key",
+  customTools: "name"
+};
+var AGENT_DIFF_OPTIONS = {
+  excludePaths: AGENT_EXCLUDE_PATHS,
+  identityKeys: AGENT_IDENTITY_KEYS,
+  // Output-schema property order is authored behavior: model providers often
+  // emit fields in schema order, so a reorder must be visible in version diffs.
+  orderSensitiveObjectPaths: /* @__PURE__ */ new Set(["outputSchema"]),
+  // Agent configuration is executable data. `_`/`__` keys (especially
+  // output-schema `__kind`) are contract fields, never hidden metadata.
+  skipUnderscorePrefix: false
+};
+
+// versions/compare.ts
+var AGENT_PROFILE_FIELDS = /* @__PURE__ */ new Set(["name", "description", "category", "tags"]);
+var AGENT_LOCAL_STATE_FIELDS = /* @__PURE__ */ new Set([
+  "isActive",
+  "isArchived",
+  "isFavorite"
+]);
+function toComparableAgentRecord(agent) {
+  return Object.fromEntries(
+    Object.entries(agent).filter(([key]) => !key.startsWith("_"))
+  );
+}
+function compareAgentDefinitions(systemAgent, personalAgent) {
+  const systemRecord = toComparableAgentRecord(systemAgent);
+  const personalRecord = toComparableAgentRecord(personalAgent);
+  const diffResult = computeDiff(
+    systemRecord,
+    personalRecord,
+    AGENT_DIFF_OPTIONS
+  );
+  const changedFields = diffResult.root.filter(
+    (node) => node.changeType !== "unchanged"
+  );
+  const profileFields = changedFields.filter(
+    (node) => AGENT_PROFILE_FIELDS.has(node.key)
+  );
+  const localStateFields = changedFields.filter(
+    (node) => AGENT_LOCAL_STATE_FIELDS.has(node.key)
+  );
+  const behaviorFields = changedFields.filter(
+    (node) => !AGENT_PROFILE_FIELDS.has(node.key) && !AGENT_LOCAL_STATE_FIELDS.has(node.key)
+  );
+  return {
+    diffResult,
+    changedFields,
+    behaviorFields,
+    profileFields,
+    localStateFields,
+    behaviorMatches: behaviorFields.length === 0,
+    comparedConfigurationMatches: !diffResult.hasChanges
+  };
+}
+
+// versions/react/adapters/ContextPoliciesAdapter.tsx
+import { cn } from "@ai-matrx/design-system";
+
+// versions/react/icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: className ?? "h-4 w-4",
+      ...rest,
+      children
+    }
+  );
+}
+var MessageSquare = ({ className }) => /* @__PURE__ */ jsx(Glyph, { className, children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var Webhook = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" }),
+  /* @__PURE__ */ jsx("path", { d: "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" })
+] });
+var Layers = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })
+] });
+var Layers3 = Layers;
+var Hammer = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m15 12-8.5 8.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L12 9" }),
+  /* @__PURE__ */ jsx("path", { d: "M17.64 15 22 10.64" }),
+  /* @__PURE__ */ jsx("path", { d: "m20.91 11.7-1.25-1.25c-.6-.6-.93-1.4-.93-2.25v-.86L16.01 4.6a5.56 5.56 0 0 0-3.94-1.64H9l.92.82A6.18 6.18 0 0 1 12 8.4v1.56l2 2h2.47l2.26 1.91" })
+] });
+var Server = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("rect", { width: "20", height: "8", x: "2", y: "2", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("rect", { width: "20", height: "8", x: "2", y: "14", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", x2: "6.01", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", x2: "6.01", y1: "18", y2: "18" })
+] });
+var Variable = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8 21s-4-3-4-9 4-9 4-9" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 3s4 3 4 9-4 9-4 9" }),
+  /* @__PURE__ */ jsx("line", { x1: "15", x2: "9", y1: "9", y2: "15" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", x2: "15", y1: "9", y2: "15" })
+] });
+var Wrench = ({ className }) => /* @__PURE__ */ jsx(Glyph, { className, children: /* @__PURE__ */ jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) });
+var Settings = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var Atom = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z" })
+] });
+var ShieldAlert = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+] });
+var AlertTriangle = ({ className }) => /* @__PURE__ */ jsxs(Glyph, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+] });
+var LoaderSpin = ({ className }) => /* @__PURE__ */ jsx(Glyph, { className: `animate-spin ${className ?? "h-8 w-8"}`, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+
+// versions/react/adapters/ContextPoliciesAdapter.tsx
+import { InlineTextDiff } from "@ai-matrx/diff/react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatPolicy(policy) {
+  if (!policy) return "\u2014";
+  const parts = [policy.key];
+  if (policy.type) parts.push(`[${policy.type}]`);
+  if (policy.label) parts.push(`"${policy.label}"`);
+  if (policy.description) parts.push(`
+${policy.description}`);
+  return parts.join(" ");
+}
+function ContextPoliciesDiffRenderer({ node }) {
+  if (!node.children || node.children.length === 0) {
+    const oldJson = node.oldValue != null ? JSON.stringify(node.oldValue, null, 2) : "\u2014";
+    const newJson = node.newValue != null ? JSON.stringify(node.newValue, null, 2) : "\u2014";
+    return /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary", children: [
+      /* @__PURE__ */ jsx2("div", { className: "border-r border-border" }),
+      /* @__PURE__ */ jsx2("div", { className: "px-3 py-2 border-r border-border", children: /* @__PURE__ */ jsx2("pre", { className: "font-mono type-meta text-foreground/70", children: oldJson }) }),
+      /* @__PURE__ */ jsx2("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx2("pre", { className: "font-mono type-meta text-foreground/70", children: newJson }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children: node.children.map((child, i) => {
+    const oldPolicy = child.oldValue;
+    const newPolicy = child.newValue;
+    const policyKey = newPolicy?.key ?? oldPolicy?.key ?? child.key;
+    if (child.changeType === "modified" && oldPolicy && newPolicy) {
+      const oldText = formatPolicy(oldPolicy);
+      const newText = formatPolicy(newPolicy);
+      if (oldText !== "" && newText !== "") {
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "grid grid-cols-[200px_1fr] type-secondary border-t border-border/30",
+            children: [
+              /* @__PURE__ */ jsx2("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono", children: policyKey }),
+              /* @__PURE__ */ jsx2("div", { className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx2(InlineTextDiff, { original: oldText, modified: newText }) })
+            ]
+          },
+          child.key ?? i
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx2("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono", children: policyKey }),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "px-3 py-1.5 border-r border-border whitespace-pre-wrap",
+                child.changeType === "removed" || child.changeType === "modified" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "text-foreground/80",
+                child.changeType === "added" ? "text-muted-foreground/50" : ""
+              ),
+              children: formatPolicy(oldPolicy)
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "px-3 py-1.5 whitespace-pre-wrap",
+                child.changeType === "added" || child.changeType === "modified" ? "bg-success/10 text-success-ink bg-success/15" : "text-foreground/80",
+                child.changeType === "removed" ? "text-muted-foreground/50" : ""
+              ),
+              children: formatPolicy(newPolicy)
+            }
+          )
+        ]
+      },
+      child.key ?? i
+    );
+  }) });
+}
+var ContextPoliciesAdapter = {
+  label: "Context Policies",
+  icon: Layers,
+  renderDiff: ContextPoliciesDiffRenderer,
+  toSummaryText: (node) => {
+    if (!node.children) return "Context policies changed";
+    const changed = node.children.filter(
+      (c) => c.changeType !== "unchanged"
+    ).length;
+    return `${changed} policy${changed !== 1 ? "s" : ""} changed`;
+  }
+};
+
+// versions/react/adapters/CustomToolsAdapter.tsx
+import { cn as cn2 } from "@ai-matrx/design-system";
+import { InlineTextDiff as InlineTextDiff2 } from "@ai-matrx/diff/react";
+import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatCustomTool(tool) {
+  if (!tool) return "\u2014";
+  const parts = [tool.name];
+  if (tool.description) parts.push(`
+${tool.description}`);
+  if (tool.input_schema)
+    parts.push(`
+Schema: ${JSON.stringify(tool.input_schema, null, 2)}`);
+  return parts.join("");
+}
+function CustomToolsDiffRenderer({ node }) {
+  if (!node.children || node.children.length === 0) {
+    const oldJson = JSON.stringify(node.oldValue, null, 2) ?? "\u2014";
+    const newJson = JSON.stringify(node.newValue, null, 2) ?? "\u2014";
+    return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary", children: [
+      /* @__PURE__ */ jsx3("div", { className: "border-r border-border" }),
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 border-r border-border", children: /* @__PURE__ */ jsx3("pre", { className: "font-mono type-meta text-foreground/70", children: oldJson }) }),
+      /* @__PURE__ */ jsx3("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx3("pre", { className: "font-mono type-meta text-foreground/70", children: newJson }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(Fragment2, { children: node.children.map((child, i) => {
+    const oldTool = child.oldValue;
+    const newTool = child.newValue;
+    const toolName = newTool?.name ?? oldTool?.name ?? `Unknown custom tool (${child.key ?? "missing id"})`;
+    if (child.changeType === "modified" && oldTool && newTool) {
+      const oldText = formatCustomTool(oldTool);
+      const newText = formatCustomTool(newTool);
+      if (oldText !== "" && newText !== "") {
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "grid grid-cols-[200px_1fr] type-secondary border-t border-border/30",
+            children: [
+              /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8", children: humanizeIdentifier(toolName) }),
+              /* @__PURE__ */ jsx3("div", { className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx3(InlineTextDiff2, { original: oldText, modified: newText }) })
+            ]
+          },
+          child.key ?? i
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx3("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8", children: humanizeIdentifier(toolName) }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn2(
+                "px-3 py-1.5 border-r border-border whitespace-pre-wrap font-mono type-meta",
+                child.changeType === "removed" || child.changeType === "modified" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "text-foreground/70",
+                child.changeType === "added" ? "text-muted-foreground/50" : ""
+              ),
+              children: formatCustomTool(oldTool)
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: cn2(
+                "px-3 py-1.5 whitespace-pre-wrap font-mono type-meta",
+                child.changeType === "added" || child.changeType === "modified" ? "bg-success/10 text-success-ink bg-success/15" : "text-foreground/70",
+                child.changeType === "removed" ? "text-muted-foreground/50" : ""
+              ),
+              children: formatCustomTool(newTool)
+            }
+          )
+        ]
+      },
+      child.key ?? i
+    );
+  }) });
+}
+var CustomToolsAdapter = {
+  label: "Custom Tools",
+  icon: Hammer,
+  renderDiff: CustomToolsDiffRenderer,
+  toSummaryText: (node) => {
+    if (!node.children) return "Custom tools changed";
+    const changed = node.children.filter((c) => c.changeType !== "unchanged");
+    const added = changed.filter((c) => c.changeType === "added").length;
+    const removed = changed.filter((c) => c.changeType === "removed").length;
+    const modified = changed.filter((c) => c.changeType === "modified").length;
+    const parts = [];
+    if (added > 0) parts.push(`${added} added`);
+    if (removed > 0) parts.push(`${removed} removed`);
+    if (modified > 0) parts.push(`${modified} modified`);
+    return parts.join(", ") || "Custom tools changed";
+  }
+};
+
+// versions/react/adapters/McpServersAdapter.tsx
+import { cn as cn3 } from "@ai-matrx/design-system";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function resolveMcp(id, enrichment) {
+  return enrichment?.resolveMcpServerId(id) ?? id;
+}
+function McpServersDiffRenderer({ node, enrichment }) {
+  const oldServers = Array.isArray(node.oldValue) ? node.oldValue : [];
+  const newServers = Array.isArray(node.newValue) ? node.newValue : [];
+  const allIds = [.../* @__PURE__ */ new Set([...oldServers, ...newServers])];
+  return /* @__PURE__ */ jsx4(Fragment3, { children: allIds.map((id) => {
+    const inOld = oldServers.includes(id);
+    const inNew = newServers.includes(id);
+    const name = resolveMcp(id, enrichment);
+    const status = inOld && inNew ? "unchanged" : inOld ? "removed" : "added";
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono truncate", children: name }),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: cn3(
+                "px-3 py-1.5 border-r border-border",
+                status === "removed" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "",
+                status === "added" ? "text-muted-foreground/50" : "",
+                status === "unchanged" ? "text-foreground/80" : ""
+              ),
+              children: inOld ? name : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: cn3(
+                "px-3 py-1.5",
+                status === "added" ? "bg-success/10 text-success-ink bg-success/15" : "",
+                status === "removed" ? "text-muted-foreground/50" : "",
+                status === "unchanged" ? "text-foreground/80" : ""
+              ),
+              children: inNew ? name : "\u2014"
+            }
+          )
+        ]
+      },
+      id
+    );
+  }) });
+}
+var McpServersAdapter = {
+  label: "MCP Servers",
+  icon: Server,
+  renderDiff: McpServersDiffRenderer,
+  toSummaryText: (node, ctx) => {
+    const oldArr = Array.isArray(node.oldValue) ? node.oldValue : [];
+    const newArr = Array.isArray(node.newValue) ? node.newValue : [];
+    const added = newArr.filter((s) => !oldArr.includes(s));
+    const removed = oldArr.filter((s) => !newArr.includes(s));
+    const parts = [];
+    if (added.length > 0)
+      parts.push(
+        `Added: ${added.map((id) => ctx?.resolveMcpServerId(id) ?? id).join(", ")}`
+      );
+    if (removed.length > 0)
+      parts.push(
+        `Removed: ${removed.map((id) => ctx?.resolveMcpServerId(id) ?? id).join(", ")}`
+      );
+    return parts.join("; ") || "MCP servers changed";
+  }
+};
+
+// versions/react/adapters/MessagesAdapter.tsx
+import { Badge } from "@ai-matrx/design-system/controls";
+import { cn as cn4 } from "@ai-matrx/design-system";
+import { InlineTextDiff as InlineTextDiff3 } from "@ai-matrx/diff/react";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function extractText(msg) {
+  if (typeof msg.content === "string") return msg.content;
+  if (!Array.isArray(msg.content)) return "";
+  return msg.content.filter(
+    (b) => b.type === "text" && !!b.text
+  ).map((b) => b.text).join("\n");
+}
+function MessagesDiffRenderer({ node }) {
+  const oldMessages = Array.isArray(node.oldValue) ? node.oldValue : [];
+  const newMessages = Array.isArray(node.newValue) ? node.newValue : [];
+  if (node.children && node.children.length > 0) {
+    return /* @__PURE__ */ jsx5(Fragment4, { children: node.children.map((child, i) => /* @__PURE__ */ jsx5(MessageRow, { child, index: i }, child.key ?? i)) });
+  }
+  const maxLen = Math.max(oldMessages.length, newMessages.length);
+  return /* @__PURE__ */ jsx5(Fragment4, { children: Array.from({ length: maxLen }, (_, i) => {
+    const oldMsg = oldMessages[i];
+    const newMsg = newMessages[i];
+    const oldT = oldMsg ? extractText(oldMsg) : "";
+    const newT = newMsg ? extractText(newMsg) : "";
+    const roleLabel = /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      "#",
+      i + 1,
+      " ",
+      (newMsg?.role ?? oldMsg?.role ?? "").toUpperCase()
+    ] });
+    if (oldMsg && newMsg && oldT !== "" && newT !== "" && oldT !== newT) {
+      return /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "grid grid-cols-[200px_1fr] type-secondary border-t border-border/30",
+          children: [
+            /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 border-r border-border text-muted-foreground pl-8", children: roleLabel }),
+            /* @__PURE__ */ jsx5("div", { className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx5(InlineTextDiff3, { original: oldT, modified: newT }) })
+          ]
+        },
+        i
+      );
+    }
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 border-r border-border text-muted-foreground pl-8", children: roleLabel }),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: cn4(
+                "px-3 py-2 border-r border-border whitespace-pre-wrap",
+                !oldMsg ? "text-muted-foreground/50" : oldMsg && newMsg && extractText(oldMsg) !== extractText(newMsg) ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "text-foreground/80"
+              ),
+              children: oldMsg ? extractText(oldMsg) : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: cn4(
+                "px-3 py-2 whitespace-pre-wrap",
+                !newMsg ? "text-muted-foreground/50" : oldMsg && newMsg && extractText(oldMsg) !== extractText(newMsg) ? "bg-success/10 text-success-ink bg-success/15" : "text-foreground/80"
+              ),
+              children: newMsg ? extractText(newMsg) : "\u2014"
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+}
+function MessageRow({ child, index }) {
+  const oldMsg = child.oldValue;
+  const newMsg = child.newValue;
+  const role = (newMsg?.role ?? oldMsg?.role ?? "unknown").toUpperCase();
+  const oldText = oldMsg ? extractText(oldMsg) : "";
+  const newText = newMsg ? extractText(newMsg) : "";
+  const roleBadge = /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs5("span", { children: [
+      "#",
+      index + 1
+    ] }),
+    /* @__PURE__ */ jsx5(
+      Badge,
+      {
+        tone: child.changeType === "added" ? "success" : child.changeType === "removed" ? "destructive" : "neutral",
+        children: role
+      }
+    )
+  ] });
+  if (child.changeType === "modified" && oldText !== "" && newText !== "") {
+    return /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-[200px_1fr] type-secondary border-t border-border/30", children: [
+      /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 border-r border-border text-muted-foreground pl-8", children: roleBadge }),
+      /* @__PURE__ */ jsx5("div", { className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx5(InlineTextDiff3, { original: oldText, modified: newText }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30", children: [
+    /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 border-r border-border text-muted-foreground pl-8", children: roleBadge }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn4(
+          "px-3 py-2 border-r border-border whitespace-pre-wrap break-words",
+          child.changeType === "removed" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "",
+          child.changeType === "added" ? "text-muted-foreground/50" : "",
+          child.changeType === "unchanged" ? "text-foreground/80" : ""
+        ),
+        children: oldText !== "" ? oldText : "\u2014"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn4(
+          "px-3 py-2 whitespace-pre-wrap break-words",
+          child.changeType === "added" ? "bg-success/10 text-success-ink bg-success/15" : "",
+          child.changeType === "removed" ? "text-muted-foreground/50" : "",
+          child.changeType === "unchanged" ? "text-foreground/80" : ""
+        ),
+        children: newText !== "" ? newText : "\u2014"
+      }
+    )
+  ] });
+}
+var MessagesAdapter = {
+  label: "Messages",
+  icon: MessageSquare,
+  renderDiff: MessagesDiffRenderer,
+  toSummaryText: (node) => {
+    const oldArr = Array.isArray(node.oldValue) ? node.oldValue : [];
+    const newArr = Array.isArray(node.newValue) ? node.newValue : [];
+    if (oldArr.length !== newArr.length) {
+      const diff = newArr.length - oldArr.length;
+      return diff > 0 ? `${diff} message${diff !== 1 ? "s" : ""} added` : `${Math.abs(diff)} message${Math.abs(diff) !== 1 ? "s" : ""} removed`;
+    }
+    if (node.children) {
+      const changed = node.children.filter(
+        (c) => c.changeType !== "unchanged"
+      ).length;
+      return `${changed} message${changed !== 1 ? "s" : ""} modified`;
+    }
+    return "Messages changed";
+  }
+};
+
+// versions/react/adapters/ModelAdapter.tsx
+import { cn as cn5 } from "@ai-matrx/design-system";
+
+// versions/react/refs.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PlainRef({ id, name, showId, className }) {
+  const label = name && name !== id ? name : null;
+  return /* @__PURE__ */ jsxs6("span", { className, children: [
+    label ? /* @__PURE__ */ jsx6("span", { className: "font-medium", children: label }) : null,
+    label && showId ? " " : null,
+    !label || showId ? /* @__PURE__ */ jsx6("span", { className: "select-all break-all font-mono type-meta text-muted-foreground", children: id }) : null
+  ] });
+}
+var DefaultModelRef = ({ modelId, name, showId, className }) => /* @__PURE__ */ jsx6(PlainRef, { id: modelId, name, showId, className });
+var DefaultToolRef = ({ toolId, name, showId, className }) => /* @__PURE__ */ jsx6(PlainRef, { id: toolId, name, showId, className });
+var RefsContext = createContext({ ModelRef: DefaultModelRef, ToolRef: DefaultToolRef });
+function AgentDiffRefsProvider({ refs, children }) {
+  return /* @__PURE__ */ jsx6(RefsContext.Provider, { value: { ModelRef: refs?.ModelRef ?? DefaultModelRef, ToolRef: refs?.ToolRef ?? DefaultToolRef }, children });
+}
+function useAgentDiffRefs() {
+  return useContext(RefsContext);
+}
+
+// versions/react/adapters/ModelAdapter.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ModelDiffRenderer({ node, enrichment }) {
+  const { ModelRef } = useAgentDiffRefs();
+  const oldId = typeof node.oldValue === "string" ? node.oldValue : null;
+  const newId = typeof node.newValue === "string" ? node.newValue : null;
+  const oldName = oldId ? enrichment?.resolveModelId(oldId) : null;
+  const newName = newId ? enrichment?.resolveModelId(newId) : null;
+  return /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary", children: [
+    /* @__PURE__ */ jsx7("div", { className: "border-r border-border" }),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn5(
+          "px-3 py-2 border-r border-border",
+          node.changeType !== "unchanged" ? "bg-destructive/10 bg-destructive/15" : ""
+        ),
+        children: oldId ? /* @__PURE__ */ jsx7(
+          ModelRef,
+          {
+            modelId: oldId,
+            name: oldName,
+            showId: true,
+            className: cn5(
+              node.changeType !== "unchanged" ? "text-destructive" : "text-foreground/80"
+            )
+          }
+        ) : /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "Default" })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn5(
+          "px-3 py-2",
+          node.changeType !== "unchanged" ? "bg-success/10 bg-success/15" : ""
+        ),
+        children: newId ? /* @__PURE__ */ jsx7(
+          ModelRef,
+          {
+            modelId: newId,
+            name: newName,
+            showId: true,
+            className: cn5(
+              node.changeType !== "unchanged" ? "text-success" : "text-foreground/80"
+            )
+          }
+        ) : /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "Default" })
+      }
+    )
+  ] });
+}
+var ModelAdapter = {
+  label: "Model",
+  icon: Webhook,
+  renderDiff: ModelDiffRenderer,
+  toSummaryText: (node, ctx) => {
+    const oldId = typeof node.oldValue === "string" ? node.oldValue : null;
+    const newId = typeof node.newValue === "string" ? node.newValue : null;
+    const resolvedOld = oldId ? ctx?.resolveModelId(oldId) : null;
+    const resolvedNew = newId ? ctx?.resolveModelId(newId) : null;
+    const oldName = oldId ? resolvedOld && resolvedOld !== oldId ? resolvedOld : `Unknown AI model (${oldId})` : "Default";
+    const newName = newId ? resolvedNew && resolvedNew !== newId ? resolvedNew : `Unknown AI model (${newId})` : "Default";
+    return `${oldName} \u2192 ${newName}`;
+  }
+};
+
+// versions/react/adapters/ModelTiersAdapter.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function readModelTierIdentities(value) {
+  if (!isRecord(value)) return [];
+  const identities = [];
+  if (typeof value.default === "string" && value.default.trim()) {
+    identities.push({ key: "default", role: "Default", modelId: value.default });
+  }
+  if (isRecord(value.tiers)) {
+    for (const [tierKey, rawTier] of Object.entries(value.tiers)) {
+      if (!isRecord(rawTier) || typeof rawTier.modelId !== "string") continue;
+      const label = typeof rawTier.label === "string" && rawTier.label.trim() ? rawTier.label : tierKey;
+      identities.push({ key: `tier:${tierKey}`, role: label, modelId: rawTier.modelId });
+    }
+  }
+  return identities;
+}
+function ModelTierIdentityList({ value }) {
+  const { ModelRef } = useAgentDiffRefs();
+  const identities = readModelTierIdentities(value);
+  if (identities.length === 0) {
+    return /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: "No model tiers" });
+  }
+  return /* @__PURE__ */ jsx8("span", { className: "flex flex-col gap-1.5", children: identities.map((identity) => /* @__PURE__ */ jsxs8("span", { className: "grid min-w-0 grid-cols-[5rem_minmax(0,1fr)] items-start gap-2", children: [
+    /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: identity.role }),
+    /* @__PURE__ */ jsx8(ModelRef, { modelId: identity.modelId, showId: true })
+  ] }, identity.key)) });
+}
+function ModelTiersDiffRenderer({ node }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary", children: [
+    /* @__PURE__ */ jsx8("div", { className: "border-r border-border" }),
+    /* @__PURE__ */ jsx8("div", { className: "border-r border-border px-3 py-2", children: /* @__PURE__ */ jsx8(ModelTierIdentityList, { value: node.oldValue }) }),
+    /* @__PURE__ */ jsx8("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx8(ModelTierIdentityList, { value: node.newValue }) })
+  ] });
+}
+function summarizeTiers(value, enrichment) {
+  const identities = readModelTierIdentities(value);
+  if (identities.length === 0) return "none";
+  return identities.map(({ role, modelId }) => {
+    const name = enrichment?.resolveModelId(modelId);
+    return `${role}: ${name ?? `Unknown AI model (${modelId})`}`;
+  }).join(", ");
+}
+var ModelTiersAdapter = {
+  label: "Model Tiers",
+  icon: Layers3,
+  renderDiff: ModelTiersDiffRenderer,
+  toSummaryText: (node, enrichment) => `${summarizeTiers(node.oldValue, enrichment)} \u2192 ${summarizeTiers(node.newValue, enrichment)}`
+};
+
+// versions/react/adapters/SettingsAdapter.tsx
+import { cn as cn6 } from "@ai-matrx/design-system";
+import {
+  filterChanges,
+  formatValue
+} from "@ai-matrx/diff/structural";
+import { humanizeIdentifier as humanizeIdentifier2 } from "@ai-matrx/kit/text-case";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function SettingsDiffRenderer({ node }) {
+  const entries = node.children ?? buildEntries();
+  function buildEntries() {
+    const oldSettings = node.oldValue ?? {};
+    const newSettings = node.newValue ?? {};
+    const allKeys = [
+      .../* @__PURE__ */ new Set([...Object.keys(oldSettings), ...Object.keys(newSettings)])
+    ];
+    return allKeys.map((key) => ({
+      path: [key],
+      key,
+      changeType: JSON.stringify(oldSettings[key]) === JSON.stringify(newSettings[key]) ? "unchanged" : "modified",
+      oldValue: oldSettings[key],
+      newValue: newSettings[key]
+    }));
+  }
+  return /* @__PURE__ */ jsx9(Fragment5, { children: entries.map((child) => {
+    const oldVal = child.oldValue != null ? formatValue(child.oldValue) : "\u2014";
+    const newVal = child.newValue != null ? formatValue(child.newValue) : "\u2014";
+    const changed = child.changeType !== "unchanged";
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8", children: humanizeIdentifier2(child.key) }),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn6(
+                "px-3 py-1.5 border-r border-border",
+                changed && child.changeType !== "added" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "text-foreground/80",
+                child.changeType === "added" ? "text-muted-foreground/50" : ""
+              ),
+              children: oldVal
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn6(
+                "px-3 py-1.5",
+                changed && child.changeType !== "removed" ? "bg-success/10 text-success-ink bg-success/15" : "text-foreground/80",
+                child.changeType === "removed" ? "text-muted-foreground/50" : ""
+              ),
+              children: newVal
+            }
+          )
+        ]
+      },
+      child.key
+    );
+  }) });
+}
+var SettingsAdapter = {
+  label: "Settings",
+  icon: Settings,
+  renderDiff: SettingsDiffRenderer,
+  toSummaryText: (node) => {
+    if (node.children) {
+      const changed = filterChanges(node.children);
+      if (changed.length === 1) {
+        const c = changed[0];
+        return `${c.key}: ${formatValue(c.oldValue)} \u2192 ${formatValue(c.newValue)}`;
+      }
+      return `${changed.length} setting${changed.length !== 1 ? "s" : ""} changed`;
+    }
+    return "Settings changed";
+  }
+};
+
+// versions/react/adapters/ToolsAdapter.tsx
+import { cn as cn7 } from "@ai-matrx/design-system";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function resolveTool(id, enrichment) {
+  return enrichment?.resolveToolId(id) ?? id;
+}
+function summarizeTool(id, enrichment) {
+  const name = enrichment?.resolveToolId(id);
+  return name && name !== id ? name : `Unknown tool (${id})`;
+}
+function ToolsDiffRenderer({ node, enrichment }) {
+  const { ToolRef } = useAgentDiffRefs();
+  const oldTools = Array.isArray(node.oldValue) ? node.oldValue : [];
+  const newTools = Array.isArray(node.newValue) ? node.newValue : [];
+  const allToolIds = [.../* @__PURE__ */ new Set([...oldTools, ...newTools])];
+  return /* @__PURE__ */ jsx10(Fragment6, { children: allToolIds.map((id) => {
+    const inOld = oldTools.includes(id);
+    const inNew = newTools.includes(id);
+    const name = resolveTool(id, enrichment);
+    const status = inOld && inNew ? "unchanged" : inOld ? "removed" : "added";
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx10("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 min-w-0", children: /* @__PURE__ */ jsx10(ToolRef, { toolId: id, name: name === id ? void 0 : name, showId: true }) }),
+          /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: cn7(
+                "px-3 py-1.5 border-r border-border",
+                status === "removed" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "",
+                status === "added" ? "text-muted-foreground/50" : "",
+                status === "unchanged" ? "text-foreground/80" : ""
+              ),
+              children: inOld ? /* @__PURE__ */ jsx10(ToolRef, { toolId: id, name: name === id ? void 0 : name }) : "\u2014"
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "div",
+            {
+              className: cn7(
+                "px-3 py-1.5",
+                status === "added" ? "bg-success/10 text-success-ink bg-success/15" : "",
+                status === "removed" ? "text-muted-foreground/50" : "",
+                status === "unchanged" ? "text-foreground/80" : ""
+              ),
+              children: inNew ? /* @__PURE__ */ jsx10(ToolRef, { toolId: id, name: name === id ? void 0 : name }) : "\u2014"
+            }
+          )
+        ]
+      },
+      id
+    );
+  }) });
+}
+var ToolsAdapter = {
+  label: "Tools",
+  icon: Wrench,
+  renderDiff: ToolsDiffRenderer,
+  toSummaryText: (node, ctx) => {
+    const oldArr = Array.isArray(node.oldValue) ? node.oldValue : [];
+    const newArr = Array.isArray(node.newValue) ? node.newValue : [];
+    const added = newArr.filter((t) => !oldArr.includes(t));
+    const removed = oldArr.filter((t) => !newArr.includes(t));
+    const parts = [];
+    if (added.length > 0)
+      parts.push(
+        `Added: ${added.map((id) => summarizeTool(id, ctx)).join(", ")}`
+      );
+    if (removed.length > 0)
+      parts.push(
+        `Removed: ${removed.map((id) => summarizeTool(id, ctx)).join(", ")}`
+      );
+    return parts.join("; ") || "Tools changed";
+  }
+};
+
+// versions/react/adapters/VariablesAdapter.tsx
+import { cn as cn8 } from "@ai-matrx/design-system";
+import {
+  formatValue as formatValue2
+} from "@ai-matrx/diff/structural";
+import { InlineTextDiff as InlineTextDiff4 } from "@ai-matrx/diff/react";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function formatVar(v) {
+  if (!v) return "\u2014";
+  const parts = [`{{${v.name}}}`];
+  if (v.type) parts.push(`[${v.type}]`);
+  if (v.defaultValue !== void 0)
+    parts.push(`= ${formatValue2(v.defaultValue)}`);
+  if (v.required) parts.push("(required)");
+  if (v.helpText) parts.push(`
+${v.helpText}`);
+  return parts.join(" ");
+}
+function VariablesDiffRenderer({ node }) {
+  if (node.children && node.children.length > 0) {
+    return /* @__PURE__ */ jsx11(Fragment7, { children: node.children.map((child, i) => /* @__PURE__ */ jsx11(VariableRow, { child }, child.key ?? i)) });
+  }
+  const oldVars = Array.isArray(node.oldValue) ? node.oldValue : [];
+  const newVars = Array.isArray(node.newValue) ? node.newValue : [];
+  const maxLen = Math.max(oldVars.length, newVars.length);
+  return /* @__PURE__ */ jsx11(Fragment7, { children: Array.from({ length: maxLen }, (_, i) => {
+    const oldVar = oldVars[i];
+    const newVar = newVars[i];
+    const changed = JSON.stringify(oldVar) !== JSON.stringify(newVar);
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30",
+        children: [
+          /* @__PURE__ */ jsx11("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono", children: newVar?.name ?? oldVar?.name ?? `#${i + 1}` }),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: cn8(
+                "px-3 py-1.5 border-r border-border whitespace-pre-wrap",
+                changed && oldVar ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "text-foreground/80",
+                !oldVar ? "text-muted-foreground/50" : ""
+              ),
+              children: formatVar(oldVar)
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "div",
+            {
+              className: cn8(
+                "px-3 py-1.5 whitespace-pre-wrap",
+                changed && newVar ? "bg-success/10 text-success-ink bg-success/15" : "text-foreground/80",
+                !newVar ? "text-muted-foreground/50" : ""
+              ),
+              children: formatVar(newVar)
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+}
+function VariableRow({ child }) {
+  const oldVar = child.oldValue;
+  const newVar = child.newValue;
+  const varName = newVar?.name ?? oldVar?.name ?? child.key;
+  if (child.changeType === "modified" && oldVar && newVar) {
+    const oldText = formatVar(oldVar);
+    const newText = formatVar(newVar);
+    if (oldText !== "" && newText !== "") {
+      return /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-[200px_1fr] type-secondary border-t border-border/30", children: [
+        /* @__PURE__ */ jsx11("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono", children: "{{" + varName + "}}" }),
+        /* @__PURE__ */ jsx11("div", { className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx11(InlineTextDiff4, { original: oldText, modified: newText }) })
+      ] });
+    }
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-[200px_1fr_1fr] type-secondary border-t border-border/30", children: [
+    /* @__PURE__ */ jsx11("div", { className: "px-3 py-1.5 border-r border-border text-muted-foreground pl-8 font-mono", children: "{{" + varName + "}}" }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: cn8(
+          "px-3 py-1.5 border-r border-border whitespace-pre-wrap",
+          child.changeType === "removed" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "",
+          child.changeType === "modified" ? "bg-destructive/10 text-destructive-ink bg-destructive/15" : "",
+          child.changeType === "added" ? "text-muted-foreground/50" : "",
+          child.changeType === "unchanged" ? "text-foreground/80" : ""
+        ),
+        children: formatVar(oldVar)
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: cn8(
+          "px-3 py-1.5 whitespace-pre-wrap",
+          child.changeType === "added" ? "bg-success/10 text-success-ink bg-success/15" : "",
+          child.changeType === "modified" ? "bg-success/10 text-success-ink bg-success/15" : "",
+          child.changeType === "removed" ? "text-muted-foreground/50" : "",
+          child.changeType === "unchanged" ? "text-foreground/80" : ""
+        ),
+        children: formatVar(newVar)
+      }
+    )
+  ] });
+}
+var VariablesAdapter = {
+  label: "Variables",
+  icon: Variable,
+  renderDiff: VariablesDiffRenderer,
+  toSummaryText: (node) => {
+    if (!node.children) return "Variables changed";
+    const changed = node.children.filter((c) => c.changeType !== "unchanged");
+    const added = changed.filter((c) => c.changeType === "added").length;
+    const removed = changed.filter((c) => c.changeType === "removed").length;
+    const modified = changed.filter((c) => c.changeType === "modified").length;
+    const parts = [];
+    if (added > 0) parts.push(`${added} added`);
+    if (removed > 0) parts.push(`${removed} removed`);
+    if (modified > 0) parts.push(`${modified} modified`);
+    return parts.join(", ") || "Variables changed";
+  }
+};
+
+// versions/react/AgentDiffViewer.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function buildAgentAdapterRegistry() {
+  const registry = createAdapterRegistry();
+  registry.register("messages", MessagesAdapter);
+  registry.register("modelId", ModelAdapter);
+  registry.register("tools", ToolsAdapter);
+  registry.register("settings", SettingsAdapter);
+  registry.register("variableDefinitions", VariablesAdapter);
+  registry.register("contextPolicies", ContextPoliciesAdapter);
+  registry.register("customTools", CustomToolsAdapter);
+  registry.register("mcpServers", McpServersAdapter);
+  registry.register("name", { ...TextFieldAdapter, label: "Name" });
+  registry.register("description", { ...TextFieldAdapter, label: "Description" });
+  registry.register("category", { ...TextFieldAdapter, label: "Category" });
+  registry.register("tags", { ...TagsFieldAdapter, label: "Tags" });
+  registry.register("isActive", { ...BooleanFieldAdapter, label: "Active" });
+  registry.register("isArchived", { ...BooleanFieldAdapter, label: "Archived" });
+  registry.register("isFavorite", { ...BooleanFieldAdapter, label: "Favorite" });
+  registry.register("autoToolsDisabled", { ...BooleanFieldAdapter, label: "Automatic Tool Injection Disabled" });
+  registry.register("version", { ...TextFieldAdapter, label: "Version" });
+  registry.register("changeNote", { ...TextFieldAdapter, label: "Change Note" });
+  registry.register("defaultRagBoost", { ...TextFieldAdapter, label: "Default Knowledge Boost" });
+  registry.register("ragAwarenessMode", { ...TextFieldAdapter, label: "Knowledge Awareness Mode" });
+  registry.register("modelTiers", ModelTiersAdapter);
+  registry.register("outputSchema", { ...JsonObjectAdapter, label: "Output Schema" });
+  registry.register("skillConfig", { ...JsonObjectAdapter, label: "Skill Configuration" });
+  registry.register("uiGates", { ...JsonObjectAdapter, label: "UI Gates" });
+  registry.register("matrxDirectives", { ...JsonObjectAdapter, label: "Matrx Directives" });
+  return registry;
+}
+function AgentDiffViewer({
+  oldAgent,
+  newAgent,
+  oldLabel,
+  newLabel,
+  temporalMetadata,
+  defaultMode = "changes-only",
+  className,
+  enrichment,
+  refs
+}) {
+  const adapters = useMemo(() => buildAgentAdapterRegistry(), []);
+  const diffResult = useMemo(() => compareAgentDefinitions(oldAgent, newAgent).diffResult, [oldAgent, newAgent]);
+  return /* @__PURE__ */ jsx12(AgentDiffRefsProvider, { refs, children: /* @__PURE__ */ jsx12(
+    DiffViewerShell,
+    {
+      diffResult,
+      oldValue: oldAgent,
+      newValue: newAgent,
+      oldLabel,
+      newLabel,
+      adapters,
+      ...enrichment ? { enrichment } : {},
+      ...temporalMetadata ? { temporalMetadata } : {},
+      defaultMode,
+      ...className ? { className } : {}
+    }
+  ) });
+}
+
+// versions/react/VersionHistoryTimeline.tsx
+import { useState } from "react";
+import { Badge as Badge2, Button, Chip, ChipSet } from "@ai-matrx/design-system/controls";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+import {
+  MatrxVersionTimeline
+} from "@ai-matrx/design-system/data-table";
+import { RecordId } from "@ai-matrx/design-system";
+import { humanizeIdentifier as humanizeIdentifier3 } from "@ai-matrx/kit/text-case";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var SILENT = { success: () => {
+}, error: () => {
+} };
+function VersionHistoryTimeline({
+  agentId,
+  versions,
+  currentVersion,
+  onCompare,
+  history,
+  onDeclareContractBreak,
+  notify = SILENT,
+  rowActions,
+  footer = null,
+  ErrorMenu
+}) {
+  const {
+    enrichedVersions,
+    loading: enrichLoading,
+    progress,
+    failedVersions,
+    failureReason,
+    fetchEnrichedHistory,
+    fetchGap
+  } = history;
+  const breakPorts = { onDeclare: onDeclareContractBreak, notify };
+  const hasEnrichedData = enrichedVersions.some((v) => v.diffSummary);
+  const entries = (enriched) => enrichedVersions.map((version) => {
+    const changedFields = version.diffSummary?.root.filter((n) => n.changeType !== "unchanged") ?? [];
+    return {
+      number: version.version_number,
+      versionId: version.version_id,
+      idCell: /* @__PURE__ */ jsx13(RecordId, { value: version.version_id, label: "Version" }),
+      at: version.changed_at,
+      note: version.change_note ?? null,
+      loaded: enriched ? version.snapshotLoaded : false,
+      changes: enriched ? /* @__PURE__ */ jsx13(VersionChanges, { version, ports: breakPorts }) : /* @__PURE__ */ jsxs12("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx13(ContractBreak, { version, ports: breakPorts }),
+        /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "Not loaded" })
+      ] }),
+      changesText: changedFields.map((n) => humanizeIdentifier3(n.key) || n.key).join(", ") || null
+    };
+  });
+  const timeline = (enriched) => /* @__PURE__ */ jsx13(
+    MatrxVersionTimeline,
+    {
+      tableId: `agent.${agentId}.versions`,
+      versions: entries(enriched),
+      currentNumber: currentVersion,
+      onCompare,
+      ...enriched ? { onLoad: (numbers) => void fetchGap(numbers) } : {},
+      ...rowActions ? { rowActions } : {},
+      emptyState: { title: "No version history" }
+    }
+  );
+  if (versions.length === 0) {
+    return /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center py-12 type-body text-muted-foreground", children: "No version history" });
+  }
+  if (!hasEnrichedData && !enrichLoading) {
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-16 gap-4", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "type-title mb-1", children: [
+          versions.length,
+          " version",
+          versions.length !== 1 ? "s" : "",
+          " ",
+          "available"
+        ] }),
+        /* @__PURE__ */ jsx13("p", { className: "type-secondary text-muted-foreground max-w-[320px]", children: "Load history to see what changed in each version" })
+      ] }),
+      failedVersions.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2 max-w-[420px] px-3 py-2 rounded-md border border-destructive/30 bg-destructive/10 type-secondary text-destructive-ink", children: [
+        /* @__PURE__ */ jsx13(AlertTriangle, { className: "w-3.5 h-3.5 mt-0.5 shrink-0" }),
+        /* @__PURE__ */ jsxs12("span", { children: [
+          failedVersions.length,
+          " of ",
+          progress.total,
+          " snapshot",
+          failedVersions.length !== 1 ? "s" : "",
+          " could not be read",
+          failureReason ? `: ${failureReason}` : ".",
+          " Retrying loads the ones that are readable."
+        ] }),
+        ErrorMenu ? /* @__PURE__ */ jsx13(ErrorMenu, {}) : null
+      ] }),
+      /* @__PURE__ */ jsx13(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx13(Atom, {}),
+          variant: "primary",
+          onClick: () => void fetchEnrichedHistory(),
+          children: "Load Full History"
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: "w-full mt-4 border-t border-border pt-4 px-4", children: timeline(false) }),
+      footer
+    ] });
+  }
+  if (enrichLoading) {
+    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-16 gap-3", children: [
+      /* @__PURE__ */ jsx13(LoaderSpin, { className: "h-8 w-8 text-primary" }),
+      /* @__PURE__ */ jsxs12("div", { className: "type-body text-muted-foreground", children: [
+        "Loading version details... ",
+        progress.fetched,
+        "/",
+        progress.total
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: "w-48 h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "h-full bg-primary rounded-full transition-all duration-300",
+          style: {
+            width: `${progress.total > 0 ? progress.fetched / progress.total * 100 : 0}%`
+          }
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between mb-3 pb-3 border-b border-border", children: /* @__PURE__ */ jsxs12("div", { className: "type-secondary text-muted-foreground", children: [
+      enrichedVersions.filter((v) => v.snapshotLoaded).length,
+      " of",
+      " ",
+      versions.length,
+      " versions loaded",
+      failedVersions.length > 0 && /* @__PURE__ */ jsxs12("span", { className: "text-destructive", children: [
+        " ",
+        "\xB7 ",
+        failedVersions.length,
+        " could not be read",
+        ErrorMenu ? /* @__PURE__ */ jsx13(ErrorMenu, { error: failureReason ?? "Some version snapshots could not be read" }) : null
+      ] })
+    ] }) }),
+    timeline(true),
+    /* @__PURE__ */ jsx13("div", { className: "h-[50dvh]" }),
+    footer
+  ] });
+}
+function VersionChanges({ version, ports }) {
+  const diff = version.diffSummary;
+  const changedFields = diff?.root.filter((n) => n.changeType !== "unchanged") ?? [];
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx13(ContractBreak, { version, ports }),
+    diff && changedFields.length > 0 ? /* @__PURE__ */ jsx13(ChipSet, { children: changedFields.map((n) => /* @__PURE__ */ jsx13(
+      Chip,
+      {
+        tone: n.changeType === "added" ? "success" : n.changeType === "removed" ? "destructive" : "warning",
+        label: `${humanizeIdentifier3(n.key) || n.key}${n.changeType === "added" ? " +" : n.changeType === "removed" ? " \u2212" : ""}`
+      },
+      n.key
+    )) }) : diff && changedFields.length === 0 ? /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "No changes" }) : !version.snapshotLoaded ? (
+      // An unread snapshot says so — never a lone contract-break button where the
+      // changes belong (walk-core 2026-10-18: v9–v2 showed only the shield).
+      /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "Not loaded" })
+    ) : /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "First version" })
+  ] });
+}
+function ContractBreak({ version, ports }) {
+  const [declared, setDeclared] = useState(
+    version.contract_break_declared ?? null
+  );
+  async function declareBreak(kind) {
+    if (!ports.onDeclare) return;
+    const previous = declared;
+    setDeclared(kind);
+    try {
+      await ports.onDeclare(version.version_number, kind);
+    } catch (error) {
+      setDeclared(previous);
+      ports.notify.error(`Couldn't record the contract break: ${error instanceof Error ? error.message : String(error)}`);
+      return;
+    }
+    {
+      ports.notify.success(
+        kind ? `v${version.version_number} marked as a ${kind} contract break.` : `Contract-break declaration cleared for v${version.version_number}.`
+      );
+    }
+  }
+  const autoChange = version.contract_change || null;
+  const effectiveChange = declared ?? autoChange;
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-1", children: [
+    effectiveChange && /* @__PURE__ */ jsx13(
+      Badge2,
+      {
+        tone: "warning",
+        title: declared ? "Manually declared: the way this agent is used could break at this version." : "The declared input/output structure changed at this version \u2014 pinned callers and saved sample inputs may no longer fit.",
+        children: `Contract: ${effectiveChange}${declared ? " (declared)" : ""}`
+      }
+    ),
+    ports.onDeclare ? /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx13(ShieldAlert, {}),
+          "aria-label": "Mark this version as a contract break the hashes cannot see (e.g. a prompt-level output change)",
+          variant: "quiet",
+          title: "Mark this version as a contract break the hashes cannot see (e.g. a prompt-level output change)"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "start", children: [
+        /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: () => void declareBreak("input"), children: "Declare input break" }),
+        /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: () => void declareBreak("output"), children: "Declare output break" }),
+        /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: () => void declareBreak("both"), children: "Declare input + output break" }),
+        declared && /* @__PURE__ */ jsx13(DropdownMenuItem, { onClick: () => void declareBreak(null), children: "Clear declaration" })
+      ] })
+    ] }) : null
+  ] });
+}
+export {
+  AgentDiffRefsProvider,
+  AgentDiffViewer,
+  VersionHistoryTimeline,
+  buildAgentAdapterRegistry,
+  readModelTierIdentities,
+  useAgentDiffRefs
+};