@pipelex/mthds-ui 0.12.0 → 0.14.0

package/dist/graph/react/index.js

@@ -1,25 +1,37 @@
 "use client";
 import {
   DEFAULT_GRAPH_CONFIG,
-  EDGE_TYPE,
-  FOLD_MODE,
-  GRAPH_DIRECTION,
-  GRAPH_THEME,
-  GRAPH_THEME_MODE,
   MAX_VISIBLE_CONTROLLER_CHILDREN,
   applyControllers,
   applyFolds,
+  applyValidationDecorations,
+  buildChildToControllerMap,
   buildGraph,
+  buildValidationDecorations,
   findCousinControllers,
   getLayoutedElements,
   getPaletteForTheme,
   getPipeBlueprint,
   resolveConceptRef,
+  resolveIssueTargetNodeId,
+  validateGraphSpec
+} from "../../chunk-V4FKGLKA.js";
+import {
+  EDGE_TYPE,
+  FOLD_MODE,
+  GRAPH_DIRECTION,
+  GRAPH_SPEC_MODE,
+  GRAPH_THEME,
+  GRAPH_THEME_MODE,
+  TOOLBAR_POSITION,
+  VALIDATION_STATE,
+  graphSpecMode,
+  isDryGraphSpec,
+  isStaticGraphSpec,
   stuffDigestFromId,
   toolbarOrientation,
-  toolbarSide,
-  validateGraphSpec
-} from "../../chunk-R34J4GFM.js";
+  toolbarSide
+} from "../../chunk-GS2KODND.js";
 import {
   __spreadProps,
   __spreadValues
@@ -32,7 +44,7 @@ import "./stuff/StuffViewer.css";
 import "./viewer/GraphToolbar.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -1264,6 +1276,8 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const pipeType = node.pipe_type;
   const isController = CONTROLLER_TYPES.has(pipeType);
+  const isStatic = isStaticGraphSpec(spec);
+  const showsGeneratedData = !isStatic && !isDryGraphSpec(spec);
   const badge = PIPE_TYPE_BADGES[pipeType];
   const status = node.status;
   const statusColor = (_a = STATUS_COLORS[status]) != null ? _a : "#6272a4";
@@ -1299,7 +1313,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs14("div", { className: "detail-status", children: [
+      !isStatic && /* @__PURE__ */ jsxs14("div", { className: "detail-status", children: [
         /* @__PURE__ */ jsx14("span", { className: "detail-status-dot", style: { background: statusColor } }),
         /* @__PURE__ */ jsx14("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
         ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx14("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
@@ -1339,8 +1353,14 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
       ] }),
       (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx14("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
     ] }),
-    blueprint && /* @__PURE__ */ jsx14(BlueprintSection, { blueprint, executionData: node.execution_data }),
-    node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx14(
+    blueprint && /* @__PURE__ */ jsx14(
+      BlueprintSection,
+      {
+        blueprint,
+        executionData: showsGeneratedData ? node.execution_data : void 0
+      }
+    ),
+    showsGeneratedData && node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx14(
       ExecutionDataSection,
       {
         executionData: node.execution_data,
@@ -1353,7 +1373,7 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
       /* @__PURE__ */ jsx14("div", { className: "detail-error-message", children: node.error.message }),
       node.error.stack && /* @__PURE__ */ jsx14("div", { className: "detail-error-stack", children: node.error.stack })
     ] }),
-    node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+    showsGeneratedData && node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
       /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Metrics" }),
       Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx14(
         KV,
@@ -1724,10 +1744,125 @@ function hydrateLabels(nodes) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
+import React8 from "react";
 import { Panel } from "@xyflow/react";
-import { Fragment as Fragment12, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// src/graph/react/viewer/ValidationPanel.tsx
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+function validationLabel(state, issueCount) {
+  const issues = issueCount === 1 ? "1 issue" : `${issueCount} issues`;
+  switch (state) {
+    case VALIDATION_STATE.VALIDATING:
+      return issueCount > 0 ? `Validating method\u2026 \u2014 ${issues}` : "Validating method\u2026";
+    case VALIDATION_STATE.VALID:
+      return issueCount > 0 ? `Method is valid \u2014 ${issues}` : "Method is valid";
+    case VALIDATION_STATE.INVALID:
+      return `Method is invalid \u2014 ${issues}`;
+    case VALIDATION_STATE.ERROR:
+      return "Validation could not run";
+    default: {
+      const _exhaustive = state;
+      return _exhaustive;
+    }
+  }
+}
+function validationPanelPlacement(position) {
+  switch (position) {
+    case TOOLBAR_POSITION.TOP_LEFT:
+    case TOOLBAR_POSITION.TOP_CENTER:
+      return "down-start";
+    case TOOLBAR_POSITION.TOP_RIGHT:
+      return "down-end";
+    case TOOLBAR_POSITION.BOTTOM_LEFT:
+    case TOOLBAR_POSITION.BOTTOM_CENTER:
+      return "up-start";
+    case TOOLBAR_POSITION.BOTTOM_RIGHT:
+      return "up-end";
+    case TOOLBAR_POSITION.CENTER_LEFT:
+      return "side-end";
+    case TOOLBAR_POSITION.CENTER_RIGHT:
+      return "side-start";
+    default: {
+      const _exhaustive = position;
+      return _exhaustive;
+    }
+  }
+}
+function validationEmptyText(state) {
+  switch (state) {
+    case VALIDATION_STATE.VALIDATING:
+      return "Validating\u2026";
+    case VALIDATION_STATE.VALID:
+      return "No issues found.";
+    case VALIDATION_STATE.INVALID:
+      return "No details available.";
+    case VALIDATION_STATE.ERROR:
+      return "Validation could not run.";
+    default: {
+      const _exhaustive = state;
+      return _exhaustive;
+    }
+  }
+}
+function ValidationPanel({
+  state,
+  issues,
+  onIssueClick,
+  placement,
+  id
+}) {
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      id,
+      className: `graph-validation-panel graph-validation-panel--${placement}`,
+      role: "region",
+      "aria-label": "Validation issues",
+      children: [
+        /* @__PURE__ */ jsx17("div", { className: "graph-validation-panel-header", children: validationLabel(state, issues.length) }),
+        issues.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "graph-validation-empty", children: validationEmptyText(state) }) : /* @__PURE__ */ jsx17("ul", { className: "graph-validation-issues", role: "list", children: issues.map((issue, index) => {
+          const clickable = onIssueClick !== void 0;
+          const meta = (issue.context || issue.file) && /* @__PURE__ */ jsxs17("div", { className: "graph-validation-issue-meta", children: [
+            issue.context && /* @__PURE__ */ jsx17("span", { className: "graph-validation-issue-context", children: issue.context }),
+            issue.file && /* @__PURE__ */ jsx17("span", { className: "graph-validation-issue-file", children: issue.file })
+          ] });
+          return /* @__PURE__ */ jsx17(
+            "li",
+            {
+              className: `graph-validation-issue graph-validation-issue--${issue.severity}` + (clickable ? " graph-validation-issue--clickable" : ""),
+              children: /* @__PURE__ */ jsxs17(
+                "div",
+                {
+                  className: "graph-validation-issue-body",
+                  role: clickable ? "button" : void 0,
+                  tabIndex: clickable ? 0 : void 0,
+                  onClick: clickable ? () => onIssueClick(index, issue) : void 0,
+                  onKeyDown: clickable ? (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      onIssueClick(index, issue);
+                    }
+                  } : void 0,
+                  children: [
+                    meta,
+                    /* @__PURE__ */ jsx17("div", { className: "graph-validation-issue-message", children: issue.message }),
+                    issue.suggestedFix && /* @__PURE__ */ jsx17("div", { className: "graph-validation-issue-fix", children: issue.suggestedFix })
+                  ]
+                }
+              )
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/graph/react/viewer/GraphToolbar.tsx
+import { Fragment as Fragment12, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 var REACTFLOW_PANEL_MARGIN = 15;
-var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs17(
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1739,12 +1874,12 @@ var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "12 5 19 12 12 19" })
+      /* @__PURE__ */ jsx18("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "12 5 19 12 12 19" })
     ]
   }
 );
-var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs17(
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1756,12 +1891,12 @@ var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "19 12 12 19 5 12" })
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "19 12 12 19 5 12" })
     ]
   }
 );
-var MINUS_ICON = /* @__PURE__ */ jsx17(
+var MINUS_ICON = /* @__PURE__ */ jsx18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1772,10 +1907,10 @@ var MINUS_ICON = /* @__PURE__ */ jsx17(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx18("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
-var PLUS_ICON = /* @__PURE__ */ jsxs17(
+var PLUS_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1787,12 +1922,12 @@ var PLUS_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx18("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
     ]
   }
 );
-var FIT_VIEW_ICON = /* @__PURE__ */ jsxs17(
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1804,14 +1939,14 @@ var FIT_VIEW_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("polyline", { points: "15 3 21 3 21 9" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "9 21 3 21 3 15" }),
-      /* @__PURE__ */ jsx17("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-      /* @__PURE__ */ jsx17("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      /* @__PURE__ */ jsx18("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx18("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx18("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
     ]
   }
 );
-var BOXES_ICON = /* @__PURE__ */ jsxs17(
+var BOXES_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1823,22 +1958,22 @@ var BOXES_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
-      /* @__PURE__ */ jsx17("path", { d: "m7 16.5-4.74-2.85" }),
-      /* @__PURE__ */ jsx17("path", { d: "m7 16.5 5-3" }),
-      /* @__PURE__ */ jsx17("path", { d: "M7 16.5v5.17" }),
-      /* @__PURE__ */ jsx17("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
-      /* @__PURE__ */ jsx17("path", { d: "m17 16.5-5-3" }),
-      /* @__PURE__ */ jsx17("path", { d: "m17 16.5 4.74-2.85" }),
-      /* @__PURE__ */ jsx17("path", { d: "M17 16.5v5.17" }),
-      /* @__PURE__ */ jsx17("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
-      /* @__PURE__ */ jsx17("path", { d: "M12 8 7.26 5.15" }),
-      /* @__PURE__ */ jsx17("path", { d: "m12 8 4.74-2.85" }),
-      /* @__PURE__ */ jsx17("path", { d: "M12 13.5V8" })
+      /* @__PURE__ */ jsx18("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+      /* @__PURE__ */ jsx18("path", { d: "m7 16.5-4.74-2.85" }),
+      /* @__PURE__ */ jsx18("path", { d: "m7 16.5 5-3" }),
+      /* @__PURE__ */ jsx18("path", { d: "M7 16.5v5.17" }),
+      /* @__PURE__ */ jsx18("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+      /* @__PURE__ */ jsx18("path", { d: "m17 16.5-5-3" }),
+      /* @__PURE__ */ jsx18("path", { d: "m17 16.5 4.74-2.85" }),
+      /* @__PURE__ */ jsx18("path", { d: "M17 16.5v5.17" }),
+      /* @__PURE__ */ jsx18("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+      /* @__PURE__ */ jsx18("path", { d: "M12 8 7.26 5.15" }),
+      /* @__PURE__ */ jsx18("path", { d: "m12 8 4.74-2.85" }),
+      /* @__PURE__ */ jsx18("path", { d: "M12 13.5V8" })
     ]
   }
 );
-var FOLD_ALL_ICON = /* @__PURE__ */ jsxs17(
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1850,15 +1985,15 @@ var FOLD_ALL_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "2 2 6 6 2 6" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "22 2 18 6 22 6" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "2 22 6 18 2 18" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "22 22 18 18 22 18" })
+      /* @__PURE__ */ jsx18("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "22 22 18 18 22 18" })
     ]
   }
 );
-var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs17(
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1870,15 +2005,15 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "3 3 7 7 3 7" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "21 3 17 7 21 7" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "3 21 7 17 3 17" }),
-      /* @__PURE__ */ jsx17("polyline", { points: "21 21 17 17 21 17" })
+      /* @__PURE__ */ jsx18("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx18("polyline", { points: "21 21 17 17 21 17" })
     ]
   }
 );
-var SUN_ICON = /* @__PURE__ */ jsxs17(
+var SUN_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1890,19 +2025,19 @@ var SUN_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "4" }),
-      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
-      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
-      /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
-      /* @__PURE__ */ jsx17("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
-      /* @__PURE__ */ jsx17("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
-      /* @__PURE__ */ jsx17("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
-      /* @__PURE__ */ jsx17("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
+      /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx18("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx18("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx18("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx18("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx18("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx18("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
     ]
   }
 );
-var MOON_ICON = /* @__PURE__ */ jsx17(
+var MOON_ICON = /* @__PURE__ */ jsx18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1913,10 +2048,10 @@ var MOON_ICON = /* @__PURE__ */ jsx17(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx17("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    children: /* @__PURE__ */ jsx18("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
-var MONITOR_ICON = /* @__PURE__ */ jsxs17(
+var MONITOR_ICON = /* @__PURE__ */ jsxs18(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1928,12 +2063,93 @@ var MONITOR_ICON = /* @__PURE__ */ jsxs17(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx17("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ jsx17("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      /* @__PURE__ */ jsx18("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx18("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
     ]
   }
 );
+var SPINNER_ICON = /* @__PURE__ */ jsx18(
+  "svg",
+  {
+    className: "graph-toolbar-validation-spin",
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+);
+var CHECK_ICON2 = /* @__PURE__ */ jsx18(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx18("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+var X_CIRCLE_ICON = /* @__PURE__ */ jsxs18(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx18("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx18("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+    ]
+  }
+);
+var ALERT_TRIANGLE_ICON = /* @__PURE__ */ jsxs18(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "14",
+    height: "14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx18("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-3Z" }),
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  }
+);
+function validationIcon(state) {
+  switch (state) {
+    case VALIDATION_STATE.VALIDATING:
+      return SPINNER_ICON;
+    case VALIDATION_STATE.VALID:
+      return CHECK_ICON2;
+    case VALIDATION_STATE.INVALID:
+      return X_CIRCLE_ICON;
+    case VALIDATION_STATE.ERROR:
+      return ALERT_TRIANGLE_ICON;
+    default: {
+      const _exhaustive = state;
+      return _exhaustive;
+    }
+  }
+}
 var THEME_MODE_CYCLE = [
   GRAPH_THEME_MODE.SYSTEM,
   GRAPH_THEME_MODE.LIGHT,
@@ -1972,10 +2188,42 @@ function GraphToolbar({
   themeMode,
   onThemeModeChange,
   rightOffset = 0,
-  position
+  position,
+  validationState,
+  validationIssues = [],
+  onValidationIssueClick,
+  validationOpen = false,
+  onValidationOpenChange
 }) {
   const themeToggleEnabled = themeMode !== void 0 && onThemeModeChange !== void 0;
   const orientation = toolbarOrientation(position);
+  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) 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)) {
+        setValidationOpenRef.current(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setValidationOpenRef.current(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [validationOpen]);
   const dodgesDetailPanel = toolbarSide(position) === "right" && rightOffset > 0;
   const panelStyle = dodgesDetailPanel ? { marginRight: REACTFLOW_PANEL_MARGIN + rightOffset } : void 0;
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
@@ -1984,8 +2232,40 @@ function GraphToolbar({
   const foldAllSection = onFoldAll || onExpandAll;
   const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
   const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
-  return /* @__PURE__ */ jsx17(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs17("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
-    onFoldAll && /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs18("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
+    validationState !== void 0 && /* @__PURE__ */ jsxs18(Fragment12, { children: [
+      /* @__PURE__ */ jsxs18("div", { className: "graph-toolbar-validation", ref: validationRef, children: [
+        /* @__PURE__ */ jsxs18(
+          "button",
+          {
+            type: "button",
+            className: `graph-toolbar-btn graph-toolbar-validation-btn graph-toolbar-validation-btn--${validationState}`,
+            onClick: () => setValidationOpen(!validationOpen),
+            title: validationLabel(validationState, validationIssues.length),
+            "aria-label": validationLabel(validationState, validationIssues.length),
+            "aria-expanded": validationOpen,
+            "aria-haspopup": "true",
+            "aria-controls": validationPanelId,
+            children: [
+              validationIcon(validationState),
+              validationIssues.length > 0 && /* @__PURE__ */ jsx18("span", { className: "graph-toolbar-validation-badge", children: validationIssues.length > 99 ? "99+" : validationIssues.length })
+            ]
+          }
+        ),
+        validationOpen && /* @__PURE__ */ jsx18(
+          ValidationPanel,
+          {
+            id: validationPanelId,
+            state: validationState,
+            issues: validationIssues,
+            onIssueClick: onValidationIssueClick,
+            placement: validationPanelPlacement(position)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx18("div", { className: "graph-toolbar-separator" })
+    ] }),
+    onFoldAll && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -1997,7 +2277,7 @@ function GraphToolbar({
         children: FOLD_ALL_ICON
       }
     ),
-    onExpandAll && /* @__PURE__ */ jsx17(
+    onExpandAll && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2009,8 +2289,8 @@ function GraphToolbar({
         children: EXPAND_ALL_ICON
       }
     ),
-    foldAllSection && /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
-    /* @__PURE__ */ jsx17(
+    foldAllSection && /* @__PURE__ */ jsx18("div", { className: "graph-toolbar-separator" }),
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2021,7 +2301,7 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2032,8 +2312,8 @@ function GraphToolbar({
         children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
       }
     ),
-    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
-    onZoomOut && /* @__PURE__ */ jsx17(
+    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx18("div", { className: "graph-toolbar-separator" }),
+    onZoomOut && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2044,7 +2324,7 @@ function GraphToolbar({
         children: MINUS_ICON
       }
     ),
-    onZoomIn && /* @__PURE__ */ jsx17(
+    onZoomIn && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2055,7 +2335,7 @@ function GraphToolbar({
         children: PLUS_ICON
       }
     ),
-    onFitView && /* @__PURE__ */ jsx17(
+    onFitView && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -2066,9 +2346,9 @@ function GraphToolbar({
         children: FIT_VIEW_ICON
       }
     ),
-    themeToggleEnabled && /* @__PURE__ */ jsxs17(Fragment12, { children: [
-      /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
-      /* @__PURE__ */ jsx17(
+    themeToggleEnabled && /* @__PURE__ */ jsxs18(Fragment12, { children: [
+      /* @__PURE__ */ jsx18("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -2083,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 jsx18, jsxs as jsxs18 } 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: "//" },
@@ -2106,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__ */ jsxs18("div", { className: `controller-group-node ${modifier}`, children: [
-    /* @__PURE__ */ jsxs18("div", { className: "controller-group-header", children: [
-      /* @__PURE__ */ jsx18("span", { className: "controller-group-icon", children: config.icon }),
-      /* @__PURE__ */ jsx18("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx18("span", { className: "controller-group-label", children: data.label }),
-      data.onToggleFold && /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs19("div", { className: `controller-group-node ${modifier}${validationRingClass(data.validation)}`, children: [
+    /* @__PURE__ */ jsxs19("div", { className: "controller-group-header", children: [
+      /* @__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",
@@ -2125,9 +2437,10 @@ function ControllerGroupNode({ data }) {
           },
           children: "\u2921"
         }
-      )
+      ),
+      data.validation && /* @__PURE__ */ jsx20(NodeValidationBadge, { validation: data.validation, onClick: data.onValidationBadgeClick })
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx18(
+    isCollapsible && /* @__PURE__ */ jsx20(
       "button",
       {
         className: "controller-group-collapse",
@@ -2148,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 jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2185,11 +2498,15 @@ function getBadge(pipeType) {
   return PIPE_TYPE_BADGES2[pipeType];
 }
 function PipeCardBase({ data, children }) {
+  var _a, _b;
   const badge = getBadge(data.pipeType);
   const statusConfig = STATUS_CONFIG[data.status];
   const isRunning = data.status === "running";
   const isController = isControllerType(data.pipeType);
   const isSignature = data.pipeType === "PipeSignature";
+  const isStatic = data.graphMode === "static";
+  const outcome = isStatic ? (_a = data.tags) == null ? void 0 : _a.outcome : void 0;
+  const batchMultiplicity = isStatic ? (_b = data.tags) == null ? void 0 : _b.batch_multiplicity : void 0;
   const [inputsExpanded, setInputsExpanded] = useState2(false);
   const hasMany = data.inputs.length > MAX_VISIBLE_INPUTS;
   const visibleInputs = hasMany && !inputsExpanded ? data.inputs.slice(0, MAX_VISIBLE_INPUTS) : data.inputs;
@@ -2197,88 +2514,104 @@ function PipeCardBase({ data, children }) {
   const dirClass = data.direction === "TB" ? "pipe-card--tb" : "pipe-card--lr";
   const controllerClass = isController ? " pipe-card--controller" : "";
   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__ */ jsxs19("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}`, children: [
-    /* @__PURE__ */ jsxs19("div", { className: "pipe-card-header", children: [
-      /* @__PURE__ */ jsx19("span", { className: badgeClass, children: badge }),
-      /* @__PURE__ */ jsx19("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
-      /* @__PURE__ */ jsx19(
-        "span",
-        {
-          className: "pipe-card-status",
-          style: { color: statusConfig.color },
-          title: statusConfig.label,
-          children: /* @__PURE__ */ jsx19(
+  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__ */ jsx19(
-        "button",
-        {
-          type: "button",
-          className: "pipe-card-expand",
-          title: "Expand controller (alt/option: only this one)",
-          "aria-label": "Expand controller",
-          onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = data.onExpand) == null ? void 0 : _a.call(data, { soloMode: e.altKey });
-          },
-          children: "\u2922"
-        }
-      )
-    ] }),
-    data.description && /* @__PURE__ */ jsx19("span", { className: "pipe-card-description", title: data.description, children: data.description }),
-    data.inputs.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-label", children: "INPUTS" }),
-      /* @__PURE__ */ jsxs19("div", { className: "pipe-card-io-pills", children: [
-        visibleInputs.map((input) => /* @__PURE__ */ jsxs19(
-          "span",
-          {
-            className: "pipe-card-io-pill",
-            title: `${input.name}: ${input.concept}`,
-            children: [
-              /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-name", children: input.name }),
-              /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-concept", children: input.concept })
-            ]
-          },
-          input.name
-        )),
-        hasMany && /* @__PURE__ */ jsx19(
-          "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__ */ jsxs19("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
-      /* @__PURE__ */ jsx19("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs19(
-        "span",
-        {
-          className: "pipe-card-io-pill",
-          title: `${output.name}: ${output.concept}`,
-          children: [
-            /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-name", children: output.name }),
-            /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-concept", children: output.concept })
-          ]
-        },
-        output.name
-      )) })
-    ] }),
-    children
-  ] });
+            output.name
+          )) })
+        ] }),
+        children
+      ]
+    }
+  );
 }
 
 // src/graph/react/nodes/pipe/pipeCardRegistry.ts
@@ -2301,11 +2634,11 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment13, jsx as jsx20, jsxs as jsxs20 } 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__ */ jsx20(Card, { data });
+  return /* @__PURE__ */ jsx22(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2314,15 +2647,15 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs20(Fragment13, { children: [
-    /* @__PURE__ */ jsx20(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx20(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx20(Handle, { type: "source", position: sourcePosition })
+  return /* @__PURE__ */ jsxs21(Fragment13, { children: [
+    /* @__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 jsx21, jsxs as jsxs21 } 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
 });
@@ -2335,19 +2668,21 @@ function StuffNodeDetail({
   onOpenExternally
 }) {
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
-  return /* @__PURE__ */ jsx21(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx21(
+  const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
+  return /* @__PURE__ */ jsx23(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx23(
     ConceptDetailPanel,
     {
       concept: conceptInfo,
       ioData: stuffData,
+      isDryRun,
       instanceKey: nodeId,
       resolveStorageUrl,
       canEmbedPdf,
       onOpenExternally
     }
-  ) : (
+  ) : isDryRun ? /* @__PURE__ */ jsx23("div", { className: "detail-not-available", children: "Dry run data hidden" }) : (
     /* Fallback: just show the StuffViewer if no concept info */
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       StuffViewer,
       {
         stuff: stuffData,
@@ -2373,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),
@@ -2383,11 +2721,14 @@ function cloneCachedNodes(nodes) {
 function applyStatusOverrides(nodes, statusMap) {
   if (!statusMap || Object.keys(statusMap).length === 0) return nodes;
   return nodes.map((node) => {
-    var _a;
+    var _a, _b;
+    if (node.data.graphMode === "static" || ((_a = node.data.pipeCardData) == null ? void 0 : _a.graphMode) === "static") {
+      return node;
+    }
     const pipeCode = node.data.pipeCode;
     if (!pipeCode || !Object.hasOwn(statusMap, pipeCode)) return node;
     const newStatus = statusMap[pipeCode];
-    if (((_a = node.data.pipeCardData) == null ? void 0 : _a.status) === newStatus) return node;
+    if (((_b = node.data.pipeCardData) == null ? void 0 : _b.status) === newStatus) return node;
     return __spreadProps(__spreadValues({}, node), {
       data: __spreadProps(__spreadValues({}, node.data), {
         nodeData: node.data.nodeData ? __spreadProps(__spreadValues({}, node.data.nodeData), { status: newStatus }) : node.data.nodeData,
@@ -2419,22 +2760,25 @@ function GraphViewer(props) {
     renderDetailExtra,
     resolveStorageUrl,
     canEmbedPdf,
-    onOpenExternally
+    onOpenExternally,
+    validationState,
+    validationIssues,
+    onValidationIssueClick
   } = props;
-  const graphspec = React9.useMemo(
+  const graphspec = React10.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React9.useState(
+  const [direction, setDirection] = React10.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const externalMode = resolveExternalThemeMode(themeProp, config.theme);
-  const [mode, setMode] = React9.useState(externalMode);
-  const prevExternalModeRef = React9.useRef(externalMode);
-  React9.useEffect(() => {
+  const [mode, setMode] = React10.useState(externalMode);
+  const prevExternalModeRef = React10.useRef(externalMode);
+  React10.useEffect(() => {
     if (externalMode !== prevExternalModeRef.current) {
       prevExternalModeRef.current = externalMode;
       setMode(externalMode);
@@ -2442,13 +2786,13 @@ function GraphViewer(props) {
   }, [externalMode]);
   const systemTheme = useSystemTheme(systemThemeProp);
   const resolvedTheme = resolveActiveTheme(mode, systemTheme);
-  const onThemeChangeRef = React9.useRef(onThemeChange);
+  const onThemeChangeRef = React10.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedRef = React9.useRef({
+  const prevReportedRef = React10.useRef({
     mode,
     resolvedTheme
   });
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     var _a2;
     const prev = prevReportedRef.current;
     if (prev.mode !== mode || prev.resolvedTheme !== resolvedTheme) {
@@ -2457,26 +2801,26 @@ function GraphViewer(props) {
     }
   }, [mode, resolvedTheme]);
   const effectiveFoldMode = (_b = (_a = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _a : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _b : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React9.useState(() => {
+  const [showControllers, setShowControllers] = React10.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
     return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
   });
-  const foldModeRef = React9.useRef(effectiveFoldMode);
+  const foldModeRef = React10.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React9.useRef(null);
-  const [detailSelection, setDetailSelection] = React9.useState(null);
-  const [conceptOverride, setConceptOverride] = React9.useState(null);
+  const containerRef = React10.useRef(null);
+  const [detailSelection, setDetailSelection] = React10.useState(null);
+  const [conceptOverride, setConceptOverride] = React10.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const themePalette = getPaletteForTheme(resolvedTheme);
@@ -2493,12 +2837,12 @@ function GraphViewer(props) {
   }, [config.paletteColors, resolvedTheme]);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React9.useRef(null);
-  const initialDataRef = React9.useRef(null);
-  const rawGraphDataRef = React9.useRef(null);
-  const layoutCacheRef = React9.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React9.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React9.useCallback((controllerId) => {
+  const reactFlowRef = React10.useRef(null);
+  const initialDataRef = React10.useRef(null);
+  const rawGraphDataRef = React10.useRef(null);
+  const layoutCacheRef = React10.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React10.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React10.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -2506,8 +2850,8 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React9.useState(/* @__PURE__ */ new Set());
-  const toggleFold = React9.useCallback((controllerId, options) => {
+  const [foldedControllers, setFoldedControllers] = React10.useState(/* @__PURE__ */ new Set());
+  const toggleFold = React10.useCallback((controllerId, options) => {
     setFoldedControllers((prev) => {
       const next = new Set(prev);
       const shouldFold = !next.has(controllerId);
@@ -2521,34 +2865,112 @@ function GraphViewer(props) {
     });
   }, []);
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React9.useMemo(
+  const layoutConfig = React10.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React9.useRef(showControllers);
+  const showControllersRef = React10.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React9.useRef(direction);
+  const directionRef = React10.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React9.useRef(layoutConfig);
+  const layoutConfigRef = React10.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React9.useRef(config.initialZoom);
+  const initialZoomRef = React10.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React9.useRef(config.panToTop);
+  const panToTopRef = React10.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React9.useRef(expandedControllers);
+  const expandedRef = React10.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React9.useRef(toggleCollapse);
+  const toggleCollapseRef = React10.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React9.useRef(foldedControllers);
+  const foldedRef = React10.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React9.useRef(toggleFold);
+  const toggleFoldRef = React10.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React9.useRef(true);
-  const prevFoldSizeRef = React9.useRef(0);
-  const skipNextFoldEffectRef = React9.useRef(false);
-  const statusMapRef = React9.useRef(statusMap);
+  const isFirstFoldEffect = React10.useRef(true);
+  const prevFoldSizeRef = React10.useRef(0);
+  const skipNextFoldEffectRef = React10.useRef(false);
+  const statusMapRef = React10.useRef(statusMap);
   statusMapRef.current = statusMap;
-  React9.useEffect(() => {
+  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;
     void (async () => {
@@ -2567,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),
@@ -2580,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) {
@@ -2600,8 +3018,9 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React9.useEffect(() => {
+  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(
@@ -2615,12 +3034,10 @@ 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]);
-  React9.useEffect(() => {
+  }, [showControllers, expandedControllers, toggleCollapse, toggleFold, decorateNodes]);
+  React10.useEffect(() => {
     if (!graphspec) {
       initialDataRef.current = null;
       rawGraphDataRef.current = null;
@@ -2637,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);
@@ -2684,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),
@@ -2697,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) {
@@ -2724,7 +3138,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -2771,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),
@@ -2784,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) {
@@ -2804,8 +3214,9 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React9.useEffect(() => {
+  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(
@@ -2819,10 +3230,27 @@ function GraphViewer(props) {
       layoutCacheRef.current.controllerPositions,
       toggleFoldRef.current
     );
-    setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
+    setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
-  }, [statusMap]);
-  const onNodeClick = React9.useCallback(
+  }, [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;
       const nodeData = node.data;
@@ -2864,7 +3292,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React9.useCallback(
+  const onInit = React10.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -2873,12 +3301,12 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React9.useCallback(() => {
+  const handlePaneClick = React10.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React9.useCallback(
+  const handleConceptClick = React10.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -2894,7 +3322,7 @@ function GraphViewer(props) {
   );
   const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
-  const foldAllProps = React9.useMemo(() => {
+  const foldAllProps = React10.useMemo(() => {
     if (!showControllers || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
@@ -2910,13 +3338,13 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       ref: containerRef,
       className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
       children: [
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           ReactFlow,
           {
             nodes,
@@ -2935,7 +3363,7 @@ function GraphViewer(props) {
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
             children: [
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx23(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -2944,7 +3372,7 @@ function GraphViewer(props) {
                   color: "var(--color-bg-dots)"
                 }
               ),
-              !hideToolbar && /* @__PURE__ */ jsx21(
+              !hideToolbar && /* @__PURE__ */ jsx23(
                 GraphToolbar,
                 {
                   direction,
@@ -2970,13 +3398,18 @@ function GraphViewer(props) {
                   themeMode: showThemeToggle ? mode : void 0,
                   onThemeModeChange: showThemeToggle ? setMode : void 0,
                   rightOffset: detailOpen ? panelWidth : 0,
-                  position: effectiveToolbarPosition
+                  position: effectiveToolbarPosition,
+                  validationState,
+                  validationIssues,
+                  onValidationIssueClick: onValidationIssueClick ? handleValidationIssueClick : void 0,
+                  validationOpen,
+                  onValidationOpenChange: setValidationOpen
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           DetailPanel,
           {
             isOpen: detailOpen,
@@ -2985,14 +3418,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx21(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx21(
+              conceptOverride ? /* @__PURE__ */ jsx23(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx23(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx21(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx23(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,
@@ -3020,6 +3453,7 @@ export {
   PipeCardNode,
   PipeDetailPanel,
   StuffViewer,
+  ValidationPanel,
   applyStatusOverrides,
   controllerNodeTypes,
   detectSystemTheme,
@@ -3037,6 +3471,8 @@ export {
   toAppEdges,
   toAppNodes,
   useResizable,
-  useSystemTheme
+  useSystemTheme,
+  validationLabel,
+  validationPanelPlacement
 };
 //# sourceMappingURL=index.js.map