@pipelex/mthds-ui 0.13.0 → 0.14.0

package/dist/graph/react/index.js

@@ -4,14 +4,18 @@ import {
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
   applyFolds,
+  applyValidationDecorations,
+  buildChildToControllerMap,
   buildGraph,
+  buildValidationDecorations,
   findCousinControllers,
   getLayoutedElements,
   getPaletteForTheme,
   getPipeBlueprint,
   resolveConceptRef,
+  resolveIssueTargetNodeId,
   validateGraphSpec
-} from "../../chunk-XCZLRCEJ.js";
+} from "../../chunk-V4FKGLKA.js";
 import {
   EDGE_TYPE,
   FOLD_MODE,
@@ -27,7 +31,7 @@ import {
   stuffDigestFromId,
   toolbarOrientation,
   toolbarSide
-} from "../../chunk-IMQ7MVYL.js";
+} from "../../chunk-GS2KODND.js";
 import {
   __spreadProps,
   __spreadValues
@@ -2187,26 +2191,31 @@ function GraphToolbar({
   position,
   validationState,
   validationIssues = [],
-  onValidationIssueClick
+  onValidationIssueClick,
+  validationOpen = false,
+  onValidationOpenChange
 }) {
   const themeToggleEnabled = themeMode !== void 0 && onThemeModeChange !== void 0;
   const orientation = toolbarOrientation(position);
-  const [validationOpen, setValidationOpen] = React8.useState(false);
+  const setValidationOpen = onValidationOpenChange != null ? onValidationOpenChange : (() => {
+  });
+  const setValidationOpenRef = React8.useRef(setValidationOpen);
+  setValidationOpenRef.current = setValidationOpen;
   const validationRef = React8.useRef(null);
   const validationPanelId = React8.useId();
   React8.useEffect(() => {
-    if (validationState === void 0) setValidationOpen(false);
+    if (validationState === void 0) setValidationOpenRef.current(false);
   }, [validationState]);
   React8.useEffect(() => {
     if (!validationOpen) return;
     const onPointerDown = (event) => {
       const wrapper = validationRef.current;
       if (wrapper && event.target instanceof Node && !wrapper.contains(event.target)) {
-        setValidationOpen(false);
+        setValidationOpenRef.current(false);
       }
     };
     const onKeyDown = (event) => {
-      if (event.key === "Escape") setValidationOpen(false);
+      if (event.key === "Escape") setValidationOpenRef.current(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     document.addEventListener("keydown", onKeyDown);
@@ -2231,7 +2240,7 @@ function GraphToolbar({
           {
             type: "button",
             className: `graph-toolbar-btn graph-toolbar-validation-btn graph-toolbar-validation-btn--${validationState}`,
-            onClick: () => setValidationOpen((open) => !open),
+            onClick: () => setValidationOpen(!validationOpen),
             title: validationLabel(validationState, validationIssues.length),
             "aria-label": validationLabel(validationState, validationIssues.length),
             "aria-expanded": validationOpen,
@@ -2354,8 +2363,40 @@ function GraphToolbar({
   ] }) });
 }
 
+// src/graph/react/nodes/NodeValidationBadge.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function NodeValidationBadge({
+  validation,
+  onClick
+}) {
+  const label = `${validation.count} validation ${validation.count === 1 ? "issue" : "issues"}`;
+  const tooltip = validation.lines.join("\n");
+  const className = `node-validation-badge node-validation-badge--${validation.severity}`;
+  const text = validation.count > 99 ? "99+" : String(validation.count);
+  if (!onClick) {
+    return /* @__PURE__ */ jsx19("span", { className, title: tooltip, "aria-label": label, children: text });
+  }
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      type: "button",
+      className,
+      title: tooltip,
+      "aria-label": `${label} \u2014 open validation panel`,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: text
+    }
+  );
+}
+function validationRingClass(validation) {
+  return validation ? ` node-validation-ring--${validation.severity}` : "";
+}
+
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var CONTROLLER_CONFIG = {
   PipeSequence: { badge: "Sequence", icon: "\u2192" },
   PipeParallel: { badge: "Parallel", icon: "//" },
@@ -2377,12 +2418,12 @@ function ControllerGroupNode({ data }) {
   const modifier = getControllerModifier(data.pipeType);
   const isCollapsible = (data.pipeType === "PipeParallel" || data.pipeType === "PipeBatch") && ((_a = data.childCount) != null ? _a : 0) > MAX_VISIBLE_CONTROLLER_CHILDREN;
   const hiddenCount = isCollapsible ? ((_b = data.childCount) != null ? _b : 0) - MAX_VISIBLE_CONTROLLER_CHILDREN : 0;
-  return /* @__PURE__ */ jsxs19("div", { className: `controller-group-node ${modifier}`, children: [
+  return /* @__PURE__ */ jsxs19("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
     /* @__PURE__ */ jsxs19("div", { className: "controller-group-header", children: [
-      /* @__PURE__ */ jsx19("span", { className: "controller-group-icon", children: config.icon }),
-      /* @__PURE__ */ jsx19("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx19("span", { className: "controller-group-label", children: data.label }),
-      data.onToggleFold && /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx20("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx20("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
@@ -2396,9 +2437,10 @@ function ControllerGroupNode({ data }) {
           },
           children: "\u2921"
         }
-      )
+      ),
+      data.validation && /* @__PURE__ */ jsx20(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx19(
+    isCollapsible && /* @__PURE__ */ jsx20(
       "button",
       {
         className: "controller-group-collapse",
@@ -2419,7 +2461,7 @@ import { Handle, Position } from "@xyflow/react";
 
 // src/graph/react/nodes/pipe/PipeCardBase.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2474,94 +2516,102 @@ function PipeCardBase({ data, children }) {
   const signatureClass = isSignature ? " pipe-card--signature" : "";
   const staticClass = isStatic ? " pipe-card--static" : "";
   const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : "pipe-card-badge";
-  return /* @__PURE__ */ jsxs20("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${staticClass}`, children: [
-    /* @__PURE__ */ jsxs20("div", { className: "pipe-card-header", children: [
-      /* @__PURE__ */ jsx20("span", { className: badgeClass, children: badge }),
-      /* @__PURE__ */ jsx20("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
-      !isStatic && /* @__PURE__ */ jsx20(
-        "span",
-        {
-          className: "pipe-card-status",
-          style: { color: statusConfig.color },
-          title: statusConfig.label,
-          children: /* @__PURE__ */ jsx20(
+  const ringClass = validationRingClass(data.validation);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: `pipe-card ${dirClass}${controllerClass}${signatureClass}${staticClass}${ringClass}`,
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "pipe-card-header", children: [
+          /* @__PURE__ */ jsx21("span", { className: badgeClass, children: badge }),
+          /* @__PURE__ */ jsx21("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+          !isStatic && /* @__PURE__ */ jsx21(
             "span",
             {
-              className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
-              style: { background: statusConfig.color }
+              className: "pipe-card-status",
+              style: { color: statusConfig.color },
+              title: statusConfig.label,
+              children: /* @__PURE__ */ jsx21(
+                "span",
+                {
+                  className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
+                  style: { background: statusConfig.color }
+                }
+              )
             }
-          )
-        }
-      ),
-      data.onExpand && /* @__PURE__ */ jsx20(
-        "button",
-        {
-          type: "button",
-          className: "pipe-card-expand",
-          title: "Expand controller (alt/option: only this one)",
-          "aria-label": "Expand controller",
-          onClick: (e) => {
-            var _a2;
-            e.stopPropagation();
-            (_a2 = data.onExpand) == null ? void 0 : _a2.call(data, { soloMode: e.altKey });
-          },
-          children: "\u2922"
-        }
-      )
-    ] }),
-    (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-annotations", children: [
-      outcome && /* @__PURE__ */ jsxs20("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
-        "outcome: ",
-        outcome
-      ] }),
-      batchMultiplicity && /* @__PURE__ */ jsx20("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
-    ] }),
-    data.description && /* @__PURE__ */ jsx20("span", { className: "pipe-card-description", title: data.description, children: data.description }),
-    data.inputs.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-label", children: "INPUTS" }),
-      /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io-pills", children: [
-        visibleInputs.map((input) => /* @__PURE__ */ jsxs20(
-          "span",
-          {
-            className: "pipe-card-io-pill",
-            title: `${input.name}: ${input.concept}`,
-            children: [
-              /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-pill-name", children: input.name }),
-              /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-pill-concept", children: input.concept })
-            ]
-          },
-          input.name
-        )),
-        hasMany && /* @__PURE__ */ jsx20(
-          "button",
-          {
-            className: "pipe-card-io-more",
-            onClick: (e) => {
-              e.stopPropagation();
-              setInputsExpanded((v) => !v);
+          ),
+          data.onExpand && /* @__PURE__ */ jsx21(
+            "button",
+            {
+              type: "button",
+              className: "pipe-card-expand",
+              title: "Expand controller (alt/option: only this one)",
+              "aria-label": "Expand controller",
+              onClick: (e) => {
+                var _a2;
+                e.stopPropagation();
+                (_a2 = data.onExpand) == null ? void 0 : _a2.call(data, { soloMode: e.altKey });
+              },
+              children: "\u2922"
+            }
+          ),
+          data.validation && /* @__PURE__ */ jsx21(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
+        ] }),
+        (outcome || batchMultiplicity) && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-annotations", children: [
+          outcome && /* @__PURE__ */ jsxs20("span", { className: "pipe-card-annotation pipe-card-annotation--outcome", children: [
+            "outcome: ",
+            outcome
+          ] }),
+          batchMultiplicity && /* @__PURE__ */ jsx21("span", { className: "pipe-card-annotation pipe-card-annotation--batch", children: batchMultiplicity })
+        ] }),
+        data.description && /* @__PURE__ */ jsx21("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+        data.inputs.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+          /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io-pills", children: [
+            visibleInputs.map((input) => /* @__PURE__ */ jsxs20(
+              "span",
+              {
+                className: "pipe-card-io-pill",
+                title: `${input.name}: ${input.concept}`,
+                children: [
+                  /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-pill-name", children: input.name }),
+                  /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+                ]
+              },
+              input.name
+            )),
+            hasMany && /* @__PURE__ */ jsx21(
+              "button",
+              {
+                className: "pipe-card-io-more",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setInputsExpanded((v) => !v);
+                },
+                children: inputsExpanded ? "show less" : `+${hiddenCount} more`
+              }
+            )
+          ] })
+        ] }),
+        data.outputs.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io", children: [
+          /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+          /* @__PURE__ */ jsx21("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs20(
+            "span",
+            {
+              className: "pipe-card-io-pill",
+              title: `${output.name}: ${output.concept}`,
+              children: [
+                /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-pill-name", children: output.name }),
+                /* @__PURE__ */ jsx21("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+              ]
             },
-            children: inputsExpanded ? "show less" : `+${hiddenCount} more`
-          }
-        )
-      ] })
-    ] }),
-    data.outputs.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
-      /* @__PURE__ */ jsx20("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs20(
-        "span",
-        {
-          className: "pipe-card-io-pill",
-          title: `${output.name}: ${output.concept}`,
-          children: [
-            /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-pill-name", children: output.name }),
-            /* @__PURE__ */ jsx20("span", { className: "pipe-card-io-pill-concept", children: output.concept })
-          ]
-        },
-        output.name
-      )) })
-    ] }),
-    children
-  ] });
+            output.name
+          )) })
+        ] }),
+        children
+      ]
+    }
+  );
 }
 
 // src/graph/react/nodes/pipe/pipeCardRegistry.ts
@@ -2584,11 +2634,11 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
-  return /* @__PURE__ */ jsx21(Card, { data });
+  return /* @__PURE__ */ jsx22(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2598,14 +2648,14 @@ function PipeCardRFNode({
   const payload = data.pipeCardData;
   if (!payload) return null;
   return /* @__PURE__ */ jsxs21(Fragment13, { children: [
-    /* @__PURE__ */ jsx21(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx21(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx21(Handle, { type: "source", position: sourcePosition })
+    /* @__PURE__ */ jsx22(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx22(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx22(Handle, { type: "source", position: sourcePosition })
   ] });
 }
 
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment14, jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 });
@@ -2619,7 +2669,7 @@ function StuffNodeDetail({
 }) {
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
-  return /* @__PURE__ */ jsx22(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx23(
     ConceptDetailPanel,
     {
       concept: conceptInfo,
@@ -2630,9 +2680,9 @@ function StuffNodeDetail({
       canEmbedPdf,
       onOpenExternally
     }
-  ) : isDryRun ? /* @__PURE__ */ jsx22("div", { className: "detail-not-available", children: "Dry run data hidden" }) : (
+  ) : isDryRun ? /* @__PURE__ */ jsx23("div", { className: "detail-not-available", children: "Dry run data hidden" }) : (
     /* Fallback: just show the StuffViewer if no concept info */
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       StuffViewer,
       {
         stuff: stuffData,
@@ -2658,6 +2708,9 @@ function resolveToolbarPosition(positionProp, configPosition) {
   var _a;
   return (_a = positionProp != null ? positionProp : configPosition) != null ? _a : DEFAULT_GRAPH_CONFIG.toolbarPosition;
 }
+function stripFlash(className) {
+  return (className == null ? void 0 : className.replace(/\s*\bnode-validation-flash\b/, "")) || void 0;
+}
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
     position: __spreadValues({}, n.position),
@@ -2839,6 +2892,84 @@ function GraphViewer(props) {
   const skipNextFoldEffectRef = React10.useRef(false);
   const statusMapRef = React10.useRef(statusMap);
   statusMapRef.current = statusMap;
+  const validationIssuesRef = React10.useRef(validationIssues);
+  validationIssuesRef.current = validationIssues;
+  const [validationOpen, setValidationOpen] = React10.useState(false);
+  const openValidationPanel = React10.useCallback(() => setValidationOpen(true), []);
+  const validationWidgetAvailable = validationState !== void 0 && !hideToolbar;
+  const validationWidgetAvailableRef = React10.useRef(validationWidgetAvailable);
+  validationWidgetAvailableRef.current = validationWidgetAvailable;
+  const decorateNodes = React10.useCallback(
+    (nodes2) => {
+      var _a2, _b2;
+      const raw = rawGraphDataRef.current;
+      const decorations = buildValidationDecorations(
+        validationIssuesRef.current,
+        (_a2 = raw == null ? void 0 : raw.graphspec) != null ? _a2 : null,
+        (_b2 = raw == null ? void 0 : raw.childToCtrl) != null ? _b2 : {},
+        foldedRef.current
+      );
+      return applyValidationDecorations(
+        applyStatusOverrides(toAppNodes(hydrateLabels(nodes2)), statusMapRef.current),
+        decorations,
+        validationWidgetAvailableRef.current ? openValidationPanel : void 0
+      );
+    },
+    [openValidationPanel]
+  );
+  const nodesRef = React10.useRef([]);
+  nodesRef.current = nodes;
+  const onValidationIssueClickRef = React10.useRef(onValidationIssueClick);
+  onValidationIssueClickRef.current = onValidationIssueClick;
+  const flashTimeoutRef = React10.useRef(null);
+  React10.useEffect(
+    () => () => {
+      if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
+    },
+    []
+  );
+  const handleValidationIssueClick = React10.useCallback(
+    (index, issue) => {
+      var _a2, _b2;
+      (_a2 = onValidationIssueClickRef.current) == null ? void 0 : _a2.call(onValidationIssueClickRef, index, issue);
+      const raw = rawGraphDataRef.current;
+      if (!(raw == null ? void 0 : raw.graphspec) || !raw.analysis) return;
+      const targetId = resolveIssueTargetNodeId(
+        issue,
+        raw.graphspec,
+        raw.childToCtrl,
+        foldedRef.current,
+        new Set(nodesRef.current.map((n) => n.id))
+      );
+      if (!targetId) return;
+      void ((_b2 = reactFlowRef.current) == null ? void 0 : _b2.fitView({
+        nodes: [{ id: targetId }],
+        duration: 500,
+        padding: 0.4
+      }));
+      if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
+      setNodes(
+        (nds) => nds.map((n) => {
+          const base = stripFlash(n.className);
+          if (n.id === targetId) {
+            return __spreadProps(__spreadValues({}, n), {
+              className: base ? `${base} node-validation-flash` : "node-validation-flash"
+            });
+          }
+          return base === n.className ? n : __spreadProps(__spreadValues({}, n), { className: base });
+        })
+      );
+      flashTimeoutRef.current = setTimeout(() => {
+        setNodes(
+          (nds) => nds.map((n) => {
+            const base = stripFlash(n.className);
+            return base === n.className ? n : __spreadProps(__spreadValues({}, n), { className: base });
+          })
+        );
+      }, 1800);
+    },
+    [setNodes]
+  );
   React10.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
@@ -2858,7 +2989,8 @@ function GraphViewer(props) {
         layoutCacheRef.current = {
           nodes: relayouted.nodes,
           edges: relayouted.edges,
-          controllerPositions: relayouted.controllerPositions
+          controllerPositions: relayouted.controllerPositions,
+          graphspec: data._graphspec
         };
         const withControllers = applyControllers(
           cloneCachedNodes(relayouted.nodes),
@@ -2871,12 +3003,7 @@ function GraphViewer(props) {
           relayouted.controllerPositions,
           toggleFoldRef.current
         );
-        setNodes(
-          applyStatusOverrides(
-            toAppNodes(hydrateLabels(withControllers.nodes)),
-            statusMapRef.current
-          )
-        );
+        setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
@@ -2893,6 +3020,7 @@ function GraphViewer(props) {
   }, [direction, layoutConfig]);
   React10.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
+    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
     const withControllers = applyControllers(
@@ -2906,11 +3034,9 @@ function GraphViewer(props) {
       layoutCacheRef.current.controllerPositions,
       toggleFold
     );
-    setNodes(
-      applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMapRef.current)
-    );
+    setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
-  }, [showControllers, expandedControllers, toggleCollapse, toggleFold]);
+  }, [showControllers, expandedControllers, toggleCollapse, toggleFold, decorateNodes]);
   React10.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
@@ -2928,7 +3054,8 @@ function GraphViewer(props) {
       nodes: graphData.nodes,
       edges: graphData.edges,
       analysis,
-      graphspec
+      graphspec,
+      childToCtrl: analysis ? buildChildToControllerMap(graphspec, analysis) : {}
     };
     const seedSet = analysis ? seedFoldedControllers(foldModeRef.current, analysis.controllerNodeIds) : /* @__PURE__ */ new Set();
     setFoldedControllers(seedSet);
@@ -2975,7 +3102,8 @@ function GraphViewer(props) {
         layoutCacheRef.current = {
           nodes: layouted.nodes,
           edges: layouted.edges,
-          controllerPositions: layouted.controllerPositions
+          controllerPositions: layouted.controllerPositions,
+          graphspec
         };
         const withControllers = applyControllers(
           cloneCachedNodes(layouted.nodes),
@@ -2988,12 +3116,7 @@ function GraphViewer(props) {
           layouted.controllerPositions,
           toggleFoldRef.current
         );
-        setNodes(
-          applyStatusOverrides(
-            toAppNodes(hydrateLabels(withControllers.nodes)),
-            statusMapRef.current
-          )
-        );
+        setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
@@ -3062,7 +3185,8 @@ function GraphViewer(props) {
         layoutCacheRef.current = {
           nodes: layouted.nodes,
           edges: layouted.edges,
-          controllerPositions: layouted.controllerPositions
+          controllerPositions: layouted.controllerPositions,
+          graphspec: currentGraphspec
         };
         const withControllers = applyControllers(
           cloneCachedNodes(layouted.nodes),
@@ -3075,12 +3199,7 @@ function GraphViewer(props) {
           layouted.controllerPositions,
           toggleFoldRef.current
         );
-        setNodes(
-          applyStatusOverrides(
-            toAppNodes(hydrateLabels(withControllers.nodes)),
-            statusMapRef.current
-          )
-        );
+        setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
@@ -3097,6 +3216,7 @@ function GraphViewer(props) {
   }, [foldedControllers, toggleFold]);
   React10.useEffect(() => {
     if (!layoutCacheRef.current || !initialDataRef.current) return;
+    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
     const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
     const cachedEdges = layoutCacheRef.current.edges;
     const withControllers = applyControllers(
@@ -3110,9 +3230,26 @@ function GraphViewer(props) {
       layoutCacheRef.current.controllerPositions,
       toggleFoldRef.current
     );
-    setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
+    setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
-  }, [statusMap]);
+  }, [statusMap, decorateNodes]);
+  React10.useEffect(() => {
+    if (!layoutCacheRef.current || !initialDataRef.current) return;
+    if (layoutCacheRef.current.graphspec !== initialDataRef.current._graphspec) return;
+    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
+    const withControllers = applyControllers(
+      cachedNodes,
+      layoutCacheRef.current.edges,
+      initialDataRef.current._graphspec,
+      initialDataRef.current._analysis,
+      showControllersRef.current,
+      expandedRef.current,
+      toggleCollapseRef.current,
+      layoutCacheRef.current.controllerPositions,
+      toggleFoldRef.current
+    );
+    setNodes(decorateNodes(withControllers.nodes));
+  }, [validationIssues, validationWidgetAvailable, decorateNodes]);
   const onNodeClick = React10.useCallback(
     (event, node) => {
       var _a2;
@@ -3226,7 +3363,7 @@ function GraphViewer(props) {
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -3235,7 +3372,7 @@ function GraphViewer(props) {
                   color: "var(--color-bg-dots)"
                 }
               ),
-              !hideToolbar && /* @__PURE__ */ jsx22(
+              !hideToolbar && /* @__PURE__ */ jsx23(
                 GraphToolbar,
                 {
                   direction,
@@ -3264,7 +3401,9 @@ function GraphViewer(props) {
                   position: effectiveToolbarPosition,
                   validationState,
                   validationIssues,
-                  onValidationIssueClick
+                  onValidationIssueClick: onValidationIssueClick ? handleValidationIssueClick : void 0,
+                  validationOpen,
+                  onValidationOpenChange: setValidationOpen
                 }
               )
             ]
@@ -3279,14 +3418,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx22(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx22(
+              conceptOverride ? /* @__PURE__ */ jsx23(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx23(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx22(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx23(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,