@tangle-network/sandbox-ui 0.109.0 → 0.111.0

package/dist/{WorkflowGraph-BJ5ZSDZB.js → WorkflowGraph-2QOORYIR.js}

@@ -16,8 +16,10 @@ import {
   isStructuralKind,
   providerLabel,
   shortModel,
-  triggerNodeIndex
-} from "./chunk-LHUBJPZR.js";
+  triggerNodeIndex,
+  wfEdgeId,
+  worstSeverity
+} from "./chunk-AI25G5MX.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -42,7 +44,7 @@ import {
   useNodesState
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { Maximize2, Minimize2 } from "lucide-react";
+import { Maximize2, Minimize2, Plus, X } from "lucide-react";
 import {
   createContext,
   useCallback,
@@ -68,9 +70,17 @@ function isNodeStateMap(arg) {
     (v) => v !== null && typeof v === "object" && "status" in v
   );
 }
+var FLOW_GRAPH_OPTION_KEYS = [
+  "nodeState",
+  "direction",
+  "compact",
+  "wrap",
+  "edges",
+  "reserveEdgeInsert"
+];
 function normalizeFlowGraphOptions(arg) {
   if (!arg) return {};
-  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "wrap" in arg || "edges" in arg) {
+  if (FLOW_GRAPH_OPTION_KEYS.some((key) => key in arg)) {
     return arg;
   }
   return isNodeStateMap(arg) ? { nodeState: arg } : {};
@@ -85,7 +95,8 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
     direction,
     compact,
     ...options.wrap ? { wrap: true } : {},
-    ...options.edges ? { edges: options.edges } : {}
+    ...options.edges ? { edges: options.edges } : {},
+    ...options.reserveEdgeInsert ? { reserveEdgeInsert: true } : {}
   });
   const isLR = direction === "LR";
   const sourcePosition = isLR ? Position.Right : Position.Bottom;
@@ -149,6 +160,69 @@ function mergeRunState(prev, baseDataById, nodeState) {
     return sameRunState(n.data.state, nextData.state) ? n : { ...n, data: nextData };
   });
 }
+function indexProblems(problems) {
+  const byNode = /* @__PURE__ */ new Map();
+  const byEdge = /* @__PURE__ */ new Map();
+  const named = (value) => typeof value === "string" && value !== "";
+  for (const problem of problems ?? []) {
+    const into = problem.anchor === "node" ? named(problem.node) ? byNode : null : problem.anchor === "edge" && named(problem.from) && named(problem.to) ? byEdge : null;
+    if (!into) continue;
+    const key = problem.anchor === "node" ? problem.node : wfEdgeId(problem.from, problem.to);
+    const at = into.get(key);
+    if (at) at.push(problem);
+    else into.set(key, [problem]);
+  }
+  return { byNode, byEdge };
+}
+var INSERT_CLEARANCE = 8;
+var CLUSTER_HALF_SIZE = {
+  /** The insert control alone: a 20-unit square. */
+  control: { width: 10, height: 10 },
+  /**
+   * A problem chip — and, since the two stack in one column, the chip WITH the
+   * control under it, which is the taller of the two and so the one the bound
+   * has to cover. Measured on the rendered page at 160 x 38.5 flow units (the
+   * chip's `max-w-40` cap, over chip + gap + control), and rounded outward: a
+   * bound that understates is a bound that lets the cluster lap over a card.
+   */
+  chip: { width: 80, height: 20 }
+};
+var INSERT_MAX_CARDS_CROSSED = 2;
+function clearOfNodeBoxes(point, boxes, direction, half) {
+  const isLR = direction === "LR";
+  const base = isLR ? point.y : point.x;
+  const main = isLR ? point.x : point.y;
+  const padMain = isLR ? half.width : half.height;
+  const padCross = isLR ? half.height : half.width;
+  const column = boxes.filter((b) => {
+    const lo = (isLR ? b.x : b.y) - padMain;
+    const size = (isLR ? b.width : b.height) + padMain * 2;
+    return main >= lo && main <= lo + size;
+  });
+  if (column.length === 0) return 0;
+  const walk = (sign) => {
+    let at = base;
+    for (let crossed = 0; crossed <= INSERT_MAX_CARDS_CROSSED; crossed += 1) {
+      const hit = column.find((b) => {
+        const lo2 = (isLR ? b.y : b.x) - padCross;
+        const size2 = (isLR ? b.height : b.width) + padCross * 2;
+        return at >= lo2 && at <= lo2 + size2;
+      });
+      if (!hit) return at - base;
+      if (crossed === INSERT_MAX_CARDS_CROSSED) return null;
+      const lo = isLR ? hit.y : hit.x;
+      const size = isLR ? hit.height : hit.width;
+      at = sign > 0 ? lo + size + padCross + INSERT_CLEARANCE : lo - padCross - INSERT_CLEARANCE;
+    }
+    return null;
+  };
+  const up = walk(-1);
+  const down = walk(1);
+  if (up === null && down === null) return null;
+  if (up === null) return down;
+  if (down === null) return up;
+  return Math.abs(up) <= Math.abs(down) ? up : down;
+}
 
 // src/workflows/node-output.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -284,6 +358,7 @@ function NodeOutputBody({
 
 // src/workflows/node-ui.tsx
 import {
+  AlertTriangle,
   Bell,
   Box,
   Cable,
@@ -395,6 +470,73 @@ var KIND_ICON = {
   "script.run": Code,
   "trace.analyze": ScanSearch
 };
+var PROBLEM_SURFACE_BY_SEVERITY = {
+  error: {
+    background: "var(--surface-danger-bg)",
+    color: "var(--surface-danger-text)",
+    borderColor: "var(--surface-danger-border)"
+  },
+  warning: {
+    background: "var(--surface-warning-bg)",
+    color: "var(--surface-warning-text)",
+    borderColor: "var(--surface-warning-border)"
+  }
+};
+function problemSurface(severity) {
+  return PROBLEM_SURFACE_BY_SEVERITY[severity] ?? PROBLEM_SURFACE_BY_SEVERITY.error;
+}
+function problemBorder(severity) {
+  const color = problemSurface(severity).color;
+  return {
+    borderColor: color,
+    boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 35%, transparent)`
+  };
+}
+var SEVERITY_WORD = {
+  error: "Error",
+  warning: "Warning"
+};
+function problemSentence(problem) {
+  const raw = typeof problem.message === "string" ? problem.message : "";
+  const message = raw.split("\n").map((line) => line.trim()).filter(Boolean).join(" ");
+  const word = SEVERITY_WORD[problem.severity] ?? SEVERITY_WORD.error;
+  return message ? `${word}: ${message}` : word;
+}
+function joinSentences(parts) {
+  return parts.reduce(
+    (joined, part) => joined ? `${joined}${/[.!?;,]$/.test(joined) ? "" : "."} ${part}` : part,
+    ""
+  );
+}
+function problemTitle(problems) {
+  return problems.map(problemSentence).join("\n");
+}
+function ProblemMessages({ problems }) {
+  if (problems.length === 0) return null;
+  return /* @__PURE__ */ jsx2("span", { className: "sr-only", children: problems.length === 1 ? problemSentence(problems[0]) : `${problems.length} problems. ${joinSentences(problems.map(problemSentence))}` });
+}
+function ProblemMarker({
+  problems,
+  className = ""
+}) {
+  const severity = worstSeverity(problems) ?? "error";
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "data-testid": "wf-node-problem",
+      "data-severity": severity,
+      className: `flex shrink-0 items-center gap-0.5 rounded-full border px-1 py-[1px] font-medium text-[10px] leading-none ${className}`,
+      style: problemSurface(severity),
+      children: [
+        /* @__PURE__ */ jsxs2("span", { "aria-hidden": true, className: "flex items-center gap-0.5", title: problemTitle(problems), children: [
+          /* @__PURE__ */ jsx2(AlertTriangle, { size: 9 }),
+          problems.length > 1 && /* @__PURE__ */ jsx2("span", { children: problems.length })
+        ] }),
+        /* @__PURE__ */ jsx2(ProblemMessages, { problems })
+      ]
+    }
+  );
+}
 function StatusPill({ status }) {
   return /* @__PURE__ */ jsx2(
     "span",
@@ -500,7 +642,7 @@ function NodeMark({
 
 // src/workflows/WorkflowGraph.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FIT_VIEW = { padding: 0.16 };
+var FIT_VIEW = { padding: "12px" };
 function fitZoomCeiling(compact) {
   return compact ? 1.5 : 1;
 }
@@ -567,6 +709,9 @@ var SELECTION_OUTLINE = {
   outlineOffset: 2
 };
 var ConnectableContext = createContext(false);
+var NodeProblemsContext = createContext(/* @__PURE__ */ new Map());
+var TriggerDeleteContext = createContext(null);
+var EdgeInsertContext = createContext(null);
 function isEditableEdge(edge) {
   return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
 }
@@ -609,6 +754,10 @@ function WorkflowNode({
   const runMode = useContext(RunModeContext);
   const connectable = useContext(ConnectableContext);
   const hostSelection = useContext(SelectedNodeContext);
+  const problems = useContext(NodeProblemsContext).get(id);
+  const problemSeverity = worstSeverity(problems);
+  const removeTrigger = useContext(TriggerDeleteContext);
+  const isTrigger = triggerNodeIndex(id) !== null;
   const selected = hostSelection !== void 0 && hostSelection === id;
   const isLR = direction === "LR";
   const targetPos = targetPosition ?? (isLR ? Position2.Left : Position2.Top);
@@ -637,6 +786,21 @@ function WorkflowNode({
     );
     return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
   })();
+  const triggerDeleteButton = isTrigger && removeTrigger ? /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      "data-testid": "wf-trigger-delete",
+      title: "Remove this trigger",
+      "aria-label": "Remove this trigger",
+      className: "nodrag nopan -m-1 flex h-6 w-6 shrink-0 items-center justify-center p-1 text-muted-foreground transition hover:text-[var(--surface-danger-text)]",
+      onClick: (event) => {
+        event.stopPropagation();
+        removeTrigger(id);
+      },
+      children: /* @__PURE__ */ jsx3("span", { className: "flex h-4 w-4 items-center justify-center rounded-full border border-border bg-card shadow-sm", children: /* @__PURE__ */ jsx3(X, { size: 10, "aria-hidden": true }) })
+    }
+  ) : null;
   const handleClass = connectable ? HANDLE_CONNECTABLE_CLASS : HANDLE_CLASS;
   const handles = /* @__PURE__ */ jsxs3(Fragment, { children: [
     !d.isRoot && /* @__PURE__ */ jsx3(
@@ -668,11 +832,12 @@ function WorkflowNode({
           /* @__PURE__ */ jsxs3(
             "span",
             {
+              "data-testid": "wf-node-card",
               className: "relative flex items-center justify-center rounded-xl border bg-card shadow-sm transition-colors",
               style: {
                 width: COMPACT_TILE,
                 height: COMPACT_TILE,
-                ...state ? statusBorder(state.status) : {
+                ...state ? statusBorder(state.status) : problemSeverity ? problemBorder(problemSeverity) : {
                   borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
                 },
                 // The TILE is the compact node (the name beside it is unboxed), so
@@ -690,6 +855,14 @@ function WorkflowNode({
                     tile: Math.round(COMPACT_TILE * 0.62)
                   }
                 ) }),
+                problems && problemSeverity && /* @__PURE__ */ jsx3(
+                  ProblemMarker,
+                  {
+                    problems,
+                    className: "-left-1.5 -top-1.5 absolute"
+                  }
+                ),
+                triggerDeleteButton && /* @__PURE__ */ jsx3("span", { className: "-right-1.5 -top-1.5 absolute", children: triggerDeleteButton }),
                 d.badge && !state && /* @__PURE__ */ jsx3("span", { className: "-right-1.5 -top-1.5 absolute rounded-full border border-border bg-card px-1.5 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge }),
                 state && /* @__PURE__ */ jsx3(
                   "span",
@@ -738,9 +911,10 @@ function WorkflowNode({
   const cardShell = (children) => /* @__PURE__ */ jsxs3(
     "div",
     {
+      "data-testid": "wf-node-card",
       className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
       style: {
-        ...runStatus ? statusBorder(runStatus) : {
+        ...runStatus ? statusBorder(runStatus) : problemSeverity ? problemBorder(problemSeverity) : {
           borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
         },
         ...selected ? SELECTION_OUTLINE : {}
@@ -780,7 +954,9 @@ function WorkflowNode({
         }
       )
     ] }),
-    runStatus ? /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge })
+    problems && problemSeverity && /* @__PURE__ */ jsx3(ProblemMarker, { problems }),
+    runStatus ? /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge }),
+    triggerDeleteButton
   ] });
   const footer = runStatus ? /* @__PURE__ */ jsx3(
     StatusFooter,
@@ -981,9 +1157,25 @@ function WorkflowNode({
     ] })
   );
 }
+function releasePoint(event) {
+  if (!event) return null;
+  const touch = "changedTouches" in event ? event.changedTouches[0] : null;
+  const source = touch ?? ("clientX" in event ? event : null);
+  return source ? { x: source.clientX, y: source.clientY } : null;
+}
+var CANVAS_SURFACE_SELECTOR = ".react-flow__pane, .react-flow__background";
+function releasedOnCanvas(at, frame) {
+  if (!frame) return false;
+  const under = typeof document === "undefined" ? null : document.elementFromPoint(at.x, at.y);
+  if (!under?.matches(CANVAS_SURFACE_SELECTOR)) return false;
+  return frame.contains(under);
+}
+var NodeBoxesContext = createContext([]);
 var EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
 function WfEdgeRenderer({
   id,
+  source,
+  target,
   sourceX,
   sourceY,
   targetX,
@@ -994,6 +1186,7 @@ function WfEdgeRenderer({
   markerEnd,
   style
 }) {
+  const insertStep = useContext(EdgeInsertContext);
   const [path, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -1005,6 +1198,25 @@ function WfEdgeRenderer({
   const backEdge = data?.backEdge === true;
   const whenLabel = data?.whenLabel;
   const visits = data?.maxNodeVisits;
+  const problems = data?.problems;
+  const problemSeverity = worstSeverity(problems);
+  const offersInsert = data?.insertable === true && insertStep !== null;
+  const nodeBoxes = useContext(NodeBoxesContext);
+  const direction = useContext(DirectionContext);
+  const cleared = offersInsert || problemSeverity ? clearOfNodeBoxes(
+    { x: labelX, y: labelY },
+    nodeBoxes,
+    direction,
+    // A chip is far wider than the control, and in "TB" that width is what
+    // has to clear the cards — so the cluster is measured by what it
+    // actually carries rather than by its tallest member.
+    problemSeverity ? CLUSTER_HALF_SIZE.chip : CLUSTER_HALF_SIZE.control
+  ) : 0;
+  const clearance = cleared ?? 0;
+  const stealsPointer = cleared === null;
+  const isLR = direction === "LR";
+  const clusterX = labelX + (isLR ? 0 : clearance);
+  const clusterY = labelY + (isLR ? clearance : 0);
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx3(BaseEdge, { id, path, markerEnd, style }),
     /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs3(
@@ -1012,9 +1224,23 @@ function WfEdgeRenderer({
       {
         className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
         style: {
-          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
+          zIndex: 1,
+          transform: `translate(-50%, -50%) translate(${clusterX}px, ${clusterY}px)`
         },
         children: [
+          problems && problemSeverity && /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              "data-testid": "wf-edge-problem",
+              "data-severity": problemSeverity,
+              className: `${EDGE_CHIP_CLASS} max-w-40 truncate ${stealsPointer ? "" : "pointer-events-auto"}`,
+              style: problemSurface(problemSeverity),
+              children: [
+                /* @__PURE__ */ jsx3("span", { "aria-hidden": true, title: problemTitle(problems), children: problems.length === 1 ? problems[0].message : `${problems.length} problems` }),
+                /* @__PURE__ */ jsx3(ProblemMessages, { problems })
+              ]
+            }
+          ),
           whenLabel && /* @__PURE__ */ jsx3(
             "span",
             {
@@ -1030,6 +1256,21 @@ function WfEdgeRenderer({
               className: `${EDGE_CHIP_CLASS} shrink-0 text-foreground`,
               children: visits !== void 0 ? `\u21BA \u2264${visits}` : "\u21BA"
             }
+          ),
+          offersInsert && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              "data-testid": "wf-edge-insert",
+              title: "Insert a step here",
+              "aria-label": "Insert a step here",
+              className: `flex h-5 w-5 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm backdrop-blur transition hover:border-primary hover:text-primary ${stealsPointer ? "" : "pointer-events-auto"}`,
+              onClick: (event) => {
+                event.stopPropagation();
+                insertStep(source, target);
+              },
+              children: /* @__PURE__ */ jsx3(Plus, { size: 12, "aria-hidden": true })
+            }
           )
         ]
       }
@@ -1066,11 +1307,35 @@ function buildStyledEdges(base, nodeState, maxNodeVisits) {
     };
   });
 }
+function decorateAuthoringEdges(edges, byEdge, insertable, hasRunOverlay) {
+  if (byEdge.size === 0 && !edges.some(insertable)) return edges;
+  return edges.map((e) => {
+    const problems = byEdge.get(e.id);
+    const severity = worstSeverity(problems);
+    const offersInsert = insertable(e);
+    if (!severity && !offersInsert) return e;
+    const stroke = severity && !hasRunOverlay ? problemSurface(severity).color : void 0;
+    return {
+      ...e,
+      type: WF_EDGE_TYPE,
+      data: {
+        ...e.data ?? { kind: "spine" },
+        ...problems ? { problems } : {},
+        ...offersInsert ? { insertable: true } : {}
+      },
+      ...stroke ? {
+        style: { ...e.style, stroke },
+        markerEnd: e.markerEnd && typeof e.markerEnd === "object" ? { ...e.markerEnd, color: stroke } : e.markerEnd
+      } : {}
+    };
+  });
+}
 function WorkflowGraph({
   yaml,
   variant = "full",
   direction = "LR",
   defaultCompact,
+  onCompactChange,
   className,
   wrap = false,
   nodeState,
@@ -1080,14 +1345,25 @@ function WorkflowGraph({
   onNodeClick,
   onEdgeConnect,
   onEdgeDelete,
-  onEdgeClick
+  onEdgeClick,
+  onEdgeInsert,
+  onNodeInsert,
+  onTriggerAdd,
+  onTriggerDelete,
+  problems
 }) {
   const editable = onEdgeConnect !== void 0;
+  const insertOnEdge = editable ? onEdgeInsert : void 0;
+  const insertArmed = insertOnEdge !== void 0;
+  const insertAtNode = editable ? onNodeInsert : void 0;
+  const addTrigger = editable ? onTriggerAdd : void 0;
+  const deleteTrigger = editable ? onTriggerDelete : void 0;
   const colorMode = useColorMode();
   const isPreview = variant === "preview";
   const [userCompact, setUserCompact] = useState(
     defaultCompact ?? nodeState === void 0
   );
+  const nextDensityFrom = useRef(userCompact);
   const compact = isPreview || userCompact;
   const [displayCompact, setDisplayCompact] = useState(compact);
   const rfRef = useRef(
@@ -1103,17 +1379,54 @@ function WorkflowGraph({
       direction,
       compact,
       wrap,
+      // The insert control lives IN the gap between two layers, so the gap is
+      // reserved here — where the layout is decided — rather than measured
+      // afterwards. It is the one editing prop that reaches the layout, which
+      // is why arming it re-lays the graph out.
+      reserveEdgeInsert: insertArmed,
       ...declaredEdges ? { edges: declaredEdges } : {}
     }),
-    [yaml, hasRunOverlay, direction, compact, wrap, declaredEdges]
+    [
+      yaml,
+      hasRunOverlay,
+      direction,
+      compact,
+      wrap,
+      insertArmed,
+      declaredEdges
+    ]
   );
+  const nodeBoxes = useMemo(
+    () => structural.nodes.map((node) => ({
+      x: node.position.x,
+      y: node.position.y,
+      width: node.width ?? 0,
+      height: node.height ?? 0
+    })),
+    [structural]
+  );
+  const problemIndex = useMemo(() => indexProblems(problems), [problems]);
   const styledEdges = useMemo(() => {
-    const styled = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
+    const run = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
+    const styled = decorateAuthoringEdges(
+      run,
+      problemIndex.byEdge,
+      (edge) => insertArmed && isEditableEdge(edge),
+      hasRunOverlay
+    );
     return styled.map((e) => ({
       ...e,
       deletable: editable ? isEditableEdge(e) : false
     }));
-  }, [structural.edges, nodeState, maxNodeVisits, editable]);
+  }, [
+    structural.edges,
+    nodeState,
+    maxNodeVisits,
+    editable,
+    problemIndex,
+    insertArmed,
+    hasRunOverlay
+  ]);
   const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
   const nodesRef = useRef(nodes);
@@ -1242,6 +1555,19 @@ function WorkflowGraph({
     },
     [onNodeClick]
   );
+  const handleConnectEnd = useCallback(
+    (event, state) => {
+      if (!insertAtNode) return;
+      if (state.toNode || state.toHandle) return;
+      const from = state.fromNode;
+      const fromHandle = state.fromHandle;
+      if (!from || !fromHandle) return;
+      const at = releasePoint(event);
+      if (!at || !releasedOnCanvas(at, wrapperRef.current)) return;
+      insertAtNode(from.id, fromHandle.type === "target" ? "before" : "after");
+    },
+    [insertAtNode]
+  );
   const handleNodeKeyDown = useCallback(
     (event) => {
       if (event.key !== "Enter" && event.key !== " ") return;
@@ -1265,7 +1591,7 @@ function WorkflowGraph({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(RunModeContext.Provider, { value: hasRunOverlay, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(RunModeContext.Provider, { value: hasRunOverlay, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3(NodeBoxesContext.Provider, { value: nodeBoxes, children: /* @__PURE__ */ jsx3(NodeProblemsContext.Provider, { value: problemIndex.byNode, children: /* @__PURE__ */ jsx3(TriggerDeleteContext.Provider, { value: deleteTrigger ?? null, children: /* @__PURE__ */ jsx3(EdgeInsertContext.Provider, { value: insertOnEdge ?? null, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs3(
     ReactFlow,
     {
       nodes,
@@ -1306,6 +1632,7 @@ function WorkflowGraph({
           }
         }
       } : void 0,
+      onConnectEnd: insertAtNode ? handleConnectEnd : void 0,
       onEdgeClick: editable ? (_event, edge) => {
         if (isEditableEdge(edge)) {
           onEdgeClick?.(edge.source, edge.target);
@@ -1321,37 +1648,72 @@ function WorkflowGraph({
       children: [
         /* @__PURE__ */ jsx3(Background, { gap: 18 }),
         !isPreview && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
-          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs3(
-            "button",
+          /* @__PURE__ */ jsx3(
+            Controls,
             {
-              type: "button",
-              onClick: () => setUserCompact((c) => !c),
-              "aria-pressed": userCompact,
-              title: userCompact ? "Expand nodes" : "Collapse nodes",
-              className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-              children: [
-                userCompact ? /* @__PURE__ */ jsx3(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx3(Minimize2, { size: 12 }),
-                userCompact ? "Expand" : "Compact"
-              ]
+              showInteractive: false,
+              position: "bottom-right",
+              fitViewOptions: { padding: FIT_VIEW.padding }
             }
-          ) })
+          ),
+          /* @__PURE__ */ jsxs3(Panel, { position: "top-left", className: "flex items-center gap-1", children: [
+            addTrigger && /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                "data-testid": "wf-trigger-add",
+                onClick: addTrigger,
+                title: "Add a trigger",
+                "aria-label": "Add a trigger",
+                className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+                children: [
+                  /* @__PURE__ */ jsx3(Plus, { size: 12, "aria-hidden": true }),
+                  "Trigger"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  const next = !nextDensityFrom.current;
+                  nextDensityFrom.current = next;
+                  setUserCompact(next);
+                  onCompactChange?.(next);
+                },
+                "aria-pressed": userCompact,
+                title: userCompact ? "Expand nodes" : "Collapse nodes",
+                className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+                children: [
+                  userCompact ? /* @__PURE__ */ jsx3(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx3(Minimize2, { size: 12 }),
+                  userCompact ? "Expand" : "Compact"
+                ]
+              }
+            )
+          ] })
         ] })
       ]
     }
-  ) }) }) }) }) }) });
+  ) }) }) }) }) }) }) }) }) }) });
 }
 export {
   ConnectableContext,
   DensityContext,
   DirectionContext,
+  EdgeInsertContext,
   FIT_VIEW,
   LAYOUT_TRANSITION_MS,
+  NodeBoxesContext,
+  NodeProblemsContext,
   RunModeContext,
   SelectedNodeContext,
+  TriggerDeleteContext,
+  WfEdgeRenderer,
   WorkflowGraph,
   WorkflowNode,
   buildStyledEdges,
+  decorateAuthoringEdges,
   fitZoomCeiling,
   fitZoomFloor,
   framingViewport,

package/dist/{chunk-LHUBJPZR.js → chunk-AI25G5MX.js}

@@ -230,10 +230,18 @@ function actionNodeId(index) {
 function branchNodeId(actionIndex, branchIndex) {
   return `${actionNodeId(actionIndex)}-b${branchIndex}`;
 }
+function wfEdgeId(source, target) {
+  return `${source}->${target}`;
+}
+function worstSeverity(problems) {
+  if (!problems || problems.length === 0) return null;
+  return problems.every((p) => p.severity === "warning") ? "warning" : "error";
+}
 var NODE_W = 292;
 var RANK_SEP = 72;
 var CROSS_SEP = 24;
 var EDGE_LABEL_LANE = 180;
+var EDGE_INSERT_LANE = 44;
 var CARD_CHROME = 20;
 var HEADER_ROW = 34;
 var DESCRIPTION_ROW = 40;
@@ -814,7 +822,7 @@ function buildWorkflowGraph(yaml, options) {
   };
   const edgeIds = /* @__PURE__ */ new Set();
   const addEdge = (source, target, kind, whenLabel) => {
-    const id = `${source}->${target}`;
+    const id = wfEdgeId(source, target);
     if (edgeIds.has(id)) return;
     edgeIds.add(id);
     edges.push({
@@ -902,7 +910,7 @@ function buildWorkflowGraph(yaml, options) {
   const labelled = edges.some(
     (e) => e.whenLabel !== void 0 || e.backEdge === true
   );
-  const rankSep = labelled ? Math.max(geo.rankSep, EDGE_LABEL_LANE) : geo.rankSep;
+  const rankSep = labelled ? Math.max(geo.rankSep, EDGE_LABEL_LANE) : options?.reserveEdgeInsert ? Math.max(geo.rankSep, EDGE_INSERT_LANE) : geo.rankSep;
   const folded = options?.wrap && direction === "LR" && !labelled ? layoutSerpentine(logical, edges, rankSep, geo.crossSep) : null;
   return {
     nodes: folded ?? layoutLayers(logical, direction, rankSep, geo.crossSep),
@@ -923,6 +931,8 @@ export {
   triggerNodeIndex,
   actionNodeId,
   branchNodeId,
+  wfEdgeId,
+  worstSeverity,
   AGENT_BODY_ROWS,
   ACTION_OUTPUT_ROWS,
   STRUCTURAL_OUTPUT_ROWS,

package/dist/globals.css

@@ -407,6 +407,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .-left-1\.5 {
+    left: calc(var(--spacing) * -1.5);
+  }
   .left-0 {
     left: 0px;
   }
@@ -485,6 +488,9 @@
       max-width: 96rem;
     }
   }
+  .-m-1 {
+    margin: calc(var(--spacing) * -1);
+  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -3884,6 +3890,9 @@
         border-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
       }
     }
+    .hover\:border-primary:hover {
+      border-color: var(--color-primary);
+    }
     .hover\:border-primary\/20:hover {
       border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
     }

package/dist/styles.css

@@ -407,6 +407,9 @@
   .bottom-\[-0\.75rem\] {
     bottom: -0.75rem;
   }
+  .-left-1\.5 {
+    left: calc(var(--spacing) * -1.5);
+  }
   .left-0 {
     left: 0px;
   }
@@ -485,6 +488,9 @@
       max-width: 96rem;
     }
   }
+  .-m-1 {
+    margin: calc(var(--spacing) * -1);
+  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -3884,6 +3890,9 @@
         border-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
       }
     }
+    .hover\:border-primary:hover {
+      border-color: var(--color-primary);
+    }
     .hover\:border-primary\/20:hover {
       border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
     }

package/dist/workflows.d.ts

@@ -206,6 +206,48 @@ interface WfEdgeSpec {
     to: string;
     whenLabel?: string;
 }
+/** How serious an authoring problem is. An `error` stops the definition from
+ *  compiling; a `warning` compiles but is worth saying out loud. */
+type WfProblemSeverity = "error" | "warning";
+/**
+ * One AUTHORING problem, anchored to the node or the edge that carries it.
+ *
+ * This is the DEFINITION-time counterpart of {@link WfNodeState}, and it is a
+ * separate channel on purpose: run state is what a node DID (status, cost,
+ * duration), while a problem is what is wrong with what it SAYS. Folding one
+ * into the other would make an unsaved compile error render as a failed run.
+ *
+ * The host supplies the message already written for a reader — this library
+ * renders graphs and never interprets a compiler's output. Anchors are node ids
+ * from THIS graph, so name them with the exported id helpers (`actionNodeId`,
+ * `branchNodeId`, `TRIGGER_NODE_ID`); an edge is named by its endpoints, the
+ * same way {@link WfEdgeSpec} names one.
+ *
+ * An anchor the graph has no slot for is simply not drawn — an authoring surface
+ * reports against a draft that is still moving, and a stale anchor must never
+ * blank the canvas the way a stale declared edge does. That is the ONLY safety
+ * this gives, and it is worth being exact about what it leaves out: these ids are
+ * POSITIONAL, so an insert, delete or reorder does not retire `a1` — it makes
+ * `a1` a different step. A problem computed against an earlier draft therefore
+ * survives the check and lands on whichever step now holds its position. Nothing
+ * here can tell the two apart, which is why the pairing contract on
+ * `WorkflowGraphProps.problems` is a contract and not a suggestion: a list must
+ * be handed over with the definition it was computed from.
+ */
+type WfProblem = {
+    anchor: "node";
+    /** The node the problem sits on. */
+    node: string;
+    severity: WfProblemSeverity;
+    message: string;
+} | {
+    anchor: "edge";
+    /** The edge's endpoints, as {@link WfEdgeSpec} names them. */
+    from: string;
+    to: string;
+    severity: WfProblemSeverity;
+    message: string;
+};
 interface WfGraph {
     nodes: WfNode[];
     edges: WfEdge[];
@@ -252,6 +294,16 @@ interface BuildWorkflowGraphOptions {
      * worse than one that says it cannot be drawn.
      */
     edges?: readonly WfEdgeSpec[];
+    /**
+     * Widen the gap between layers so an edge has room for an in-line control at
+     * its midpoint — the insert affordance an EDITING canvas draws there. The
+     * compact densities pitch their layers at 20-34px, which is the whole button,
+     * so a canvas that renders one without asking for the lane puts it on top of
+     * the nodes either side. Reserved by the layout for the same reason run rows
+     * are: what a node or an edge renders is spaced for before it is drawn, never
+     * measured afterwards. Defaults to `false`.
+     */
+    reserveEdgeInsert?: boolean;
 }
 /** Build a positioned graph from a workflow YAML string. Never throws —
  *  malformed YAML or an empty definition returns an `error` the UI can fall
@@ -279,6 +331,17 @@ interface WorkflowGraphProps {
      * toggle, and the preview variant is always compact.
      */
     defaultCompact?: boolean;
+    /**
+     * Called when the reader moves the density toggle, with the density they
+     * chose.
+     *
+     * `defaultCompact` seeds the graph; this reports back out of it, which is
+     * what a host needs to REMEMBER the choice. Without it a host can set an
+     * opening density but never learn that the reader wanted the other one, so
+     * every navigation puts them back where they started and the toggle has to
+     * be found again.
+     */
+    onCompactChange?: (compact: boolean) => void;
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;
     /**
@@ -323,9 +386,15 @@ interface WorkflowGraphProps {
      * Editing gestures. Supplying `onEdgeConnect` turns the canvas from a diagram
      * into an EDITOR: node handles become visible and draggable, an edge can be
      * selected and removed with Delete/Backspace, and clicking one asks to edit
-     * its guard. Omit all three — the default — and the graph stays the read-only
+     * its guard. Omit it — the default — and the graph stays the read-only
      * visualisation it has always been.
      *
+     * `onEdgeConnect` is the ONE prop that decides it. Every other editing
+     * callback below (`onEdgeDelete`, `onEdgeClick`, `onEdgeInsert`,
+     * `onNodeInsert`, `onTriggerAdd`, `onTriggerDelete`) refines an editor and is
+     * inert without it — a canvas that cannot accept a new connection has no
+     * business drawing an add control either.
+     *
      * Every callback speaks node ids (`actionNodeId`, `branchNodeId`), never
      * positions: this component reports the gesture, and turning it into a
      * definition edit is the host's job — it owns the YAML, and only it knows
@@ -338,8 +407,83 @@ interface WorkflowGraphProps {
     onEdgeConnect?: (sourceId: string, targetId: string) => void;
     onEdgeDelete?: (sourceId: string, targetId: string) => void;
     onEdgeClick?: (sourceId: string, targetId: string) => void;
+    /**
+     * Add a step ON an edge: the edge draws a "+" at its midpoint, and pressing it
+     * reports the pair it sits between. The layout widens the corridor between
+     * layers to hold the control, so arming this RELAYS OUT the graph — a compact
+     * canvas pitches its layers at 20px, which is the whole button.
+     *
+     * Offered on exactly the edges the other three gestures are ({@link
+     * isEditableEdge}): inserting on a fan-out or trigger edge would name a pair
+     * that exists in no definition. "Add a step at the very start" is the
+     * {@link onNodeInsert} drop instead — dragged from the first step's inbound
+     * handle onto empty canvas, which names one node rather than a synthesized
+     * edge. (A definition with no `on:` at all has no inbound handle on its first
+     * step, because nothing points at it; there the step list is the only way in.)
+     */
+    onEdgeInsert?: (sourceId: string, targetId: string) => void;
+    /**
+     * Add a step at the loose end of a connection dragged from a node's handle and
+     * released over empty canvas — the canvas's answer to "and then what?".
+     * `side` is which handle it left from: `"after"` for the outbound one (the new
+     * step follows `nodeId`), `"before"` for the inbound one (it precedes it).
+     *
+     * Reported for ANY node, including a trigger and a fan-out branch leaf: unlike
+     * an edge gesture, this names a node that certainly exists, and whether a step
+     * may go beside it is a question about the definition's schema — which this
+     * library does not model and the host already answers.
+     */
+    onNodeInsert?: (nodeId: string, side: "before" | "after") => void;
+    /**
+     * The `on:` list gains an entry. Drawn as a canvas control rather than a
+     * per-node one, because the workflow that most needs it is the one with NO
+     * trigger — which has no trigger node to hang a "+" on.
+     *
+     * Offered whenever it is supplied, including on a definition that ALREADY has
+     * a trigger: `on:` is a list with OR semantics, and a second subscription is a
+     * normal thing to want. Whether THIS workflow may take another one is a
+     * question about the definition's schema and the provider behind it, which
+     * this library does not model — a host that must cap the list withholds the
+     * callback.
+     */
+    onTriggerAdd?: () => void;
+    /** Remove the `on:` entry a trigger node stands for — the one node deletion
+     *  that IS a canvas gesture (every other node is a `do` entry, reordered and
+     *  removed in the list the host owns). Read the entry's position back with
+     *  `triggerNodeIndex`. */
+    onTriggerDelete?: (nodeId: string) => void;
+    /**
+     * AUTHORING problems anchored to the nodes and edges that carry them, so a
+     * compile error is visible on the canvas rather than only in a list beside it.
+     * See {@link WfProblem} — and note it is a separate channel from `nodeState`,
+     * which is what a node DID rather than what is wrong with what it says.
+     *
+     * A problem tints the node's border in either density, and states itself on a
+     * mark in the card's identity row (a corner of the compact tile). A graph
+     * showing a RUN is not an authoring surface — its cards and edges state the
+     * run instead, which takes precedence over a problem's colour on both, and the
+     * problem's mark and chip still render beside it.
+     *
+     * What the canvas gives is a LOCATOR: which step or dependency is at fault,
+     * with the messages on the mark's `title` and in the accessibility tree. It is
+     * deliberately not a reader for them — at the zoom a whole pipeline is viewed
+     * at, a panel of message text on the canvas is unreadable, and the host
+     * already owns the problem list that the messages are read and acted on in.
+     *
+     * Pairing contract: anchors are positional node ids, so a problem list must be
+     * derived from the SAME definition passed as `yaml`. Hand over a list computed
+     * against an older draft and an id that still exists may now name a different
+     * step, which puts the diagnostic on an innocent one — the graph cannot tell
+     * the two apart, any more than it can for a run's `nodeState`. A host that
+     * validates asynchronously therefore holds each result against the text it was
+     * computed from, and passes neither until they agree.
+     *
+     * Immutability contract, as for `edges`: the index is memoized on this array's
+     * reference, so pass a stable one.
+     */
+    problems?: readonly WfProblem[];
 }
 
 declare function WorkflowGraph(props: WorkflowGraphProps): React.JSX.Element;
 
-export { type BuildWorkflowGraphOptions, TRIGGER_NODE_ID, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, actionNodeId, branchNodeId, buildWorkflowGraph, triggerNodeId, triggerNodeIndex };
+export { type BuildWorkflowGraphOptions, TRIGGER_NODE_ID, type WfEdge, type WfEdgeKind, type WfEdgeSpec, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, type WfProblem, type WfProblemSeverity, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, actionNodeId, branchNodeId, buildWorkflowGraph, triggerNodeId, triggerNodeIndex };

package/dist/workflows.js

@@ -5,7 +5,7 @@ import {
   buildWorkflowGraph,
   triggerNodeId,
   triggerNodeIndex
-} from "./chunk-LHUBJPZR.js";
+} from "./chunk-AI25G5MX.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -36,7 +36,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-BJ5ZSDZB.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-2QOORYIR.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.109.0",
+  "version": "0.111.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",