@revenexx/studio-integrations 2.8.0 → 2.9.0

package/dist/runtime/components/Integrations/WorkflowEditor.vue

@@ -49,16 +49,19 @@ import { toast } from "vue-sonner";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { layoutWorkflowNodes } from "./workflowLayout";
 import { defaultsFor } from "../../utils/configDefaults";
-import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
+import { TRIGGER_TEMPLATES, findManifest, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 import { collectUpstreamNodes, isTerminalManifest, portsForNode } from "../../data/nodeInputData";
 import { computeLoopBodies, iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
+import { canvasShapes } from "../../data/canvasShapes";
+import { connectionRefusal, lastingCrossings, refusalJudge, refusalOfChange } from "../../data/connectionRules";
+import { copiedRefusalText, joinRefusalText, refusalText } from "../../data/refusalMessage";
 import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/handleId";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { deepClone } from "../../utils/deepClone";
 import { copyToClipboard } from "../../utils/clipboard";
-import { groupFindingsByNode, findingsByNodeField } from "../../utils/validationFindings";
+import { groupFindingsByNode, findingsByNodeField, nodeDisplayLabel } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
-import { resolveLocalized } from "../../utils/localize";
+import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 import { nodeDisplayName } from "../../utils/nodeDisplayName";
 import { keepOpenBeside } from "../../utils/dialog";
 const props = defineProps({
@@ -79,6 +82,7 @@ watch(() => props.workflow.id, () => {
 const vfNodes = ref([]);
 const vfEdges = ref([]);
 const flow = useVueFlow();
+let joinRefusals = [];
 const invalidNodeMessages = computed(() => findingsByNodeField(props.workflow.warnings ?? [], props.workflow.blob.nodes));
 const dynamicOutputs = ref({});
 const invalidNodeFields = computed(() => {
@@ -255,6 +259,8 @@ function bornClass(id) {
 const NODE_FALLBACK_POSITION = { x: 240, y: 80 };
 function syncFromBlob() {
   const loops = nodeLoopData(blob.value.nodes, blob.value.edges);
+  const shapes = canvasShapes(blob.value.nodes, blob.value.edges, blob.value.triggers);
+  joinRefusals = shapes.refusals;
   const stickies = [...blob.value.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
   const collapsedBy = collapsedGroupOf();
   const groupNodes = (blob.value.groups ?? []).map((g, i) => {
@@ -300,7 +306,7 @@ function syncFromBlob() {
       type: "trigger",
       position: triggerPosition(t2.id, i),
       class: bornClass(t2.id),
-      data: t2
+      data: { ...t2, __split: shapes.splitTriggers.has(t2.id) }
     })),
     ...blob.value.nodes.filter((n) => !collapsedBy.has(n.id)).map((n) => ({
       id: n.id,
@@ -311,7 +317,8 @@ function syncFromBlob() {
         ...n,
         __resolvedOutputs: dynamicOutputs.value[n.id],
         __invalidFields: invalidNodeFields.value[n.id],
-        __loop: loops.get(n.id)
+        __loop: loops.get(n.id),
+        __shape: shapes.byNode.get(n.id)
       }
     }))
   ];
@@ -329,10 +336,14 @@ function syncFromBlob() {
     const vf = makeVfEdge(e.id, e.from.nodeId, e.to.nodeId, e.from.output);
     mapped.push({
       ...vf,
+      // Where branches of a split cross, drawn as the connection to change.
+      data: { ...vf.data, crossing: shapes.crossingEdges.has(e.id) },
       source,
       target,
       sourceHandle: srcGroup ? outputHandleId("default", "bottom") : vf.sourceHandle,
-      targetHandle: tgtGroup ? inputHandleId("top") : vf.targetHandle
+      // A connection of a nested merge's level arrives at the virtual merger
+      // drawn in front of the input, not at the input dot (PO-750).
+      targetHandle: tgtGroup ? inputHandleId("top") : shapes.arrivalHandle(e) ?? vf.targetHandle
     });
   }
   const bySource = /* @__PURE__ */ new Map();
@@ -350,6 +361,13 @@ function syncFromBlob() {
   vfEdges.value = mapped;
   void nextTick(() => flow.updateNodeInternals(vfNodes.value.map((n) => n.id)));
 }
+watch(
+  () => (blob.value.groups ?? []).flatMap((g) => g.nodeIds.map((id) => {
+    const { width, height } = memberDims(id);
+    return `${id}:${width}x${height}`;
+  })).join("|"),
+  () => syncFromBlob()
+);
 function makeVfEdge(id, sourceId, targetId, output) {
   const kind = edgeKindFromPort(sourceId, output);
   const wn = blob.value.nodes.find((n) => n.id === sourceId);
@@ -483,6 +501,7 @@ flow.onConnect((conn) => {
   if (!conn.source || !conn.target) return;
   const id = `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
   const output = portFromHandleId(conn.sourceHandle) ?? "default";
+  const before = joinRefusals;
   blob.value.edges.push({
     id,
     from: { nodeId: conn.source, output },
@@ -490,17 +509,26 @@ flow.onConnect((conn) => {
   });
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
 });
 const pendingConnect = ref(null);
 let connectStart = null;
 let connectCompleted = false;
 flow.onConnectStart(({ nodeId, handleId, handleType }) => {
   connectCompleted = false;
+  lastRefusal = null;
+  prepareDragJudge();
   connectStart = handleType === "source" && nodeId ? { sourceId: nodeId, output: portFromHandleId(handleId) ?? "default" } : null;
 });
 flow.onConnectEnd((event) => {
   const start = connectStart;
   connectStart = null;
+  dragJudge = null;
+  const refused = connectCompleted ? null : droppedOnRefusal(event);
+  if (refused) {
+    sayRefused(refused);
+    return;
+  }
   if (!start || connectCompleted) return;
   if (!(event instanceof MouseEvent)) return;
   const target = event.target;
@@ -511,15 +539,42 @@ flow.onConnectEnd((event) => {
   void focusPalette();
   toast.info(t("integration.editor.quickConnect.toast"));
 });
+flow.onClickConnectStart(() => {
+  lastRefusal = null;
+  prepareDragJudge();
+});
+flow.onClickConnectEnd((event) => {
+  dragJudge = null;
+  const refused = droppedOnRefusal(event);
+  if (refused) sayRefused(refused);
+});
+flow.onEdgeUpdateStart(({ edge }) => {
+  updatingEdgeId = edge.id;
+  lastRefusal = null;
+  prepareDragJudge();
+});
+flow.onEdgeUpdateEnd(({ event }) => {
+  updatingEdgeId = null;
+  dragJudge = null;
+  const refused = droppedOnRefusal(event);
+  if (refused) sayRefused(refused);
+});
 flow.onEdgeUpdate(({ edge, connection }) => {
   if (!connection.source || !connection.target) return;
   if (connection.source === connection.target) return;
   const be = blob.value.edges.find((e) => e.id === edge.id);
   if (!be) return;
+  const prior = updatingEdgeId;
+  updatingEdgeId = edge.id;
+  const refused = refusalOf(connection.source, connection.sourceHandle ?? null, connection.target);
+  updatingEdgeId = prior;
+  if (refused) return;
+  const before = joinRefusals;
   be.from = { nodeId: connection.source, output: portFromHandleId(connection.sourceHandle) ?? be.from.output };
   be.to = { nodeId: connection.target, input: be.to.input };
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
 });
 let pendingEdgeRemovals = [];
 let pendingNodeRemovals = [];
@@ -531,6 +586,7 @@ function queueRemovalFlush() {
 }
 function flushRemovals() {
   removalFlushQueued = false;
+  const before = joinRefusals;
   const edges = pendingEdgeRemovals;
   const nodes = pendingNodeRemovals;
   pendingEdgeRemovals = [];
@@ -549,6 +605,7 @@ function flushRemovals() {
   if (mutated) {
     syncFromBlob();
     push();
+    warnNewJoinRefusal(before);
   }
 }
 flow.onEdgesChange((changes) => {
@@ -575,6 +632,7 @@ function removeBlobNode(id) {
     ungroup(id);
     return;
   }
+  const before = joinRefusals;
   stripFromGroups(/* @__PURE__ */ new Set([id]));
   blob.value.nodes = blob.value.nodes.filter((n) => n.id !== id);
   if (blob.value.stickies?.length) blob.value.stickies = blob.value.stickies.filter((s) => s.id !== id);
@@ -584,6 +642,7 @@ function removeBlobNode(id) {
   if (selectedId.value === id) selectedId.value = null;
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
 }
 function push() {
   emit("change", deepClone(blob.value));
@@ -647,13 +706,16 @@ function dropFromBlob(ids) {
 }
 function removeBlobNodes(ids) {
   if (!ids.length) return;
+  const before = joinRefusals;
   dropFromBlob(ids);
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
 }
 function duplicateBlobNodes(ids) {
   const src = blob.value.nodes.filter((n) => ids.includes(n.id));
   if (!src.length) return;
+  const before = joinRefusals;
   const idMap = /* @__PURE__ */ new Map();
   const stamp = Date.now();
   src.forEach((n, i) => idMap.set(n.id, `n-${stamp}${i}`));
@@ -664,21 +726,29 @@ function duplicateBlobNodes(ids) {
     position: { x: (n.position?.x ?? 0) + offset, y: (n.position?.y ?? 0) + offset }
   }));
   blob.value.nodes.push(...copies);
-  for (const e of blob.value.edges.filter((e2) => idMap.has(e2.from.nodeId) && idMap.has(e2.to.nodeId))) {
-    blob.value.edges.push({
-      id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
-      from: { nodeId: idMap.get(e.from.nodeId), output: e.from.output },
-      to: { nodeId: idMap.get(e.to.nodeId), input: e.to.input }
-    });
-  }
+  addCopiedEdges(blob.value.edges.filter((e) => idMap.has(e.from.nodeId) && idMap.has(e.to.nodeId)), idMap);
   markBorn(...idMap.values());
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
   void nextTick(() => {
     flow.removeSelectedElements();
     flow.addSelectedNodes(flow.getNodes.value.filter((n) => [...idMap.values()].includes(n.id)));
   });
 }
+function addCopiedEdges(edges, idMap) {
+  const iterators = iteratorNodeIds(blob.value.nodes);
+  const copies = edges.map((e) => ({
+    id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+    from: { nodeId: idMap.get(e.from.nodeId), output: e.from.output },
+    to: { nodeId: idMap.get(e.to.nodeId), input: e.to.input }
+  }));
+  const lasting = lastingCrossings({ nodes: blob.value.nodes, edges: [...blob.value.edges, ...copies] }, iterators);
+  const kept = copies.filter((e) => !lasting.has(e.id));
+  blob.value.edges.push(...kept);
+  const refused = copies.length - kept.length;
+  if (refused) showRefusal(copiedRefusalText(refused), refused);
+}
 provide("workflow-node-actions", {
   configure: (id) => {
     renameIntent.value = false;
@@ -722,6 +792,7 @@ async function pasteNodes(at) {
     toast.error(t("integration.editor.clipboard.error.empty"));
     return;
   }
+  const before = joinRefusals;
   const idMap = /* @__PURE__ */ new Map();
   const stamp = Date.now();
   payload.nodes.forEach((n, i) => idMap.set(n.id, `n-${stamp}${i}`));
@@ -734,17 +805,11 @@ async function pasteNodes(at) {
     id: idMap.get(n.id),
     position: { x: (n.position?.x ?? 0) + dx, y: (n.position?.y ?? 0) + dy }
   })));
-  for (const e of payload.edges ?? []) {
-    if (!idMap.has(e.from.nodeId) || !idMap.has(e.to.nodeId)) continue;
-    blob.value.edges.push({
-      id: `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
-      from: { nodeId: idMap.get(e.from.nodeId), output: e.from.output },
-      to: { nodeId: idMap.get(e.to.nodeId), input: e.to.input }
-    });
-  }
+  addCopiedEdges((payload.edges ?? []).filter((e) => idMap.has(e.from.nodeId) && idMap.has(e.to.nodeId)), idMap);
   markBorn(...idMap.values());
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
   void nextTick(() => {
     flow.removeSelectedElements();
     flow.addSelectedNodes(flow.getNodes.value.filter((n) => [...idMap.values()].includes(n.id)));
@@ -827,10 +892,55 @@ function onResolvedOutputs(nodeId, outputs) {
   syncFromBlob();
   nextTick(() => flow.updateNodeInternals([nodeId]));
 }
+let updatingEdgeId = null;
+let lastRefusal = null;
+let dragJudge = null;
+function prepareDragJudge() {
+  dragJudge = { replacing: updatingEdgeId, judge: refusalJudge(blob.value, iteratorNodeIds(blob.value.nodes), updatingEdgeId) };
+}
+function refusalOf(source, sourceHandle, target) {
+  const candidate = { from: { nodeId: source, output: portFromHandleId(sourceHandle) ?? "default" }, to: { nodeId: target } };
+  if (dragJudge && dragJudge.replacing === updatingEdgeId) return dragJudge.judge(candidate);
+  return connectionRefusal(blob.value, iteratorNodeIds(blob.value.nodes), candidate, updatingEdgeId);
+}
 function isValidConnection(conn) {
   if (!conn.source || !conn.target) return false;
   if (conn.source === conn.target) return false;
-  return true;
+  if ("id" in conn && conn.id) return true;
+  const reason = refusalOf(conn.source, conn.sourceHandle, conn.target);
+  lastRefusal = reason ? { reason, dots: [`${conn.source}|${conn.sourceHandle ?? ""}`, `${conn.target}|${conn.targetHandle ?? ""}`] } : null;
+  return reason === null;
+}
+function canvasLabel(id) {
+  const node = blob.value.nodes.find((n) => n.id === id);
+  if (node) return nodeDisplayLabel(node);
+  const trigger = blob.value.triggers.find((tr) => tr.id === id);
+  return trigger ? resolveDisplayName(trigger.name) || triggerTypeLabel(trigger.type) : id;
+}
+function showRefusal(text, count) {
+  const description = count === void 0 ? t(text.description, text.params) : t(text.description, count, text.params);
+  toast.error(t(text.title), { description, duration: 8e3 });
+}
+function warnNewJoinRefusal(before) {
+  const key = (r) => `${r.nodeId}|${r.rule}`;
+  const known = new Set(before.map(key));
+  const added = joinRefusals.find((r) => !known.has(key(r)));
+  if (!added) return;
+  const text = joinRefusalText(added, canvasLabel(added.nodeId));
+  toast.warning(t(text.title), { description: t(text.description, text.params), duration: 8e3 });
+}
+function sayRefused(refusal) {
+  showRefusal(refusalText(refusal, canvasLabel));
+}
+function droppedOnRefusal(event) {
+  const refusal = lastRefusal;
+  lastRefusal = null;
+  if (!refusal || !event) return null;
+  const point = "changedTouches" in event ? event.changedTouches[0] : event;
+  const under = point ? document.elementFromPoint(point.clientX, point.clientY) : null;
+  const dot = (under ?? event.target)?.closest(".vue-flow__handle");
+  if (!dot) return null;
+  return refusal.dots.includes(`${dot.dataset.nodeid}|${dot.dataset.handleid ?? ""}`) ? refusal.reason : null;
 }
 const selectedId = ref(null);
 const selection = computed(() => {
@@ -1095,22 +1205,32 @@ function spliceIntoEdge(edgeId, payload) {
   const a = nodePosition(edge.from.nodeId);
   const b = nodePosition(edge.to.nodeId);
   const id = `n-${Date.now()}`;
-  blob.value.nodes.push({
+  const inserted = {
     id,
     nodeSlug: manifest.slug,
     nodeVersion: manifest.version,
     config: defaultsFor(manifest.config ?? []),
     position: { x: snap((a.x + b.x) / 2), y: snap((a.y + b.y) / 2) }
-  });
-  blob.value.edges = blob.value.edges.filter((e) => e.id !== edgeId);
+  };
   const stamp = Date.now().toString(36);
-  blob.value.edges.push(
+  const edges = [
+    ...blob.value.edges.filter((e) => e.id !== edgeId),
     { id: `e-${stamp}a${Math.random().toString(36).slice(2, 6)}`, from: { nodeId: edge.from.nodeId, output: edge.from.output }, to: { nodeId: id, input: void 0 } },
     { id: `e-${stamp}b${Math.random().toString(36).slice(2, 6)}`, from: { nodeId: id, output: primaryOutputName(payload.slug, payload.version) }, to: { nodeId: edge.to.nodeId, input: edge.to.input } }
-  );
+  ];
+  const nodes = [...blob.value.nodes, inserted];
+  const refused = refusalOfChange({ nodes, edges: blob.value.edges }, { nodes, edges }, iteratorNodeIds(nodes));
+  if (refused) {
+    sayRefused(refused);
+    return;
+  }
+  const before = joinRefusals;
+  blob.value.nodes.push(inserted);
+  blob.value.edges = edges;
   markBorn(id);
   syncFromBlob();
   push();
+  warnNewJoinRefusal(before);
 }
 function nodeDims(id) {
   const d = flow.findNode(id)?.dimensions;

package/dist/runtime/components/Integrations/WorkflowHistoryPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, markRaw, nextTick, onMounted, provide, ref, watch } from "vue";
+import { computed, markRaw, nextTick, onMounted, provide, ref, shallowRef, watch } from "vue";
 import {
   MarkerType,
   VueFlow,
@@ -22,6 +22,7 @@ import { findManifest } from "../../data/integrationNodeCatalog";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
+import { canvasShapes } from "../../data/canvasShapes";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
 import { errorReason } from "../../utils/apiError";
 import { personLabel } from "../../utils/personLabel";
@@ -81,7 +82,7 @@ function edgeColorByKind(kind) {
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
-function previewGroupNodes(blob, nodePos) {
+function previewGroupNodes(blob, nodePos, nodeSize) {
   return (blob.groups ?? []).map((g, i) => {
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
@@ -89,10 +90,11 @@ function previewGroupNodes(blob, nodePos) {
     let maxY = Number.NEGATIVE_INFINITY;
     for (const id of g.nodeIds) {
       const pos = nodePos(id);
+      const size = nodeSize(id);
       minX = Math.min(minX, pos.x);
       minY = Math.min(minY, pos.y);
-      maxX = Math.max(maxX, pos.x + 220);
-      maxY = Math.max(maxY, pos.y + 64);
+      maxX = Math.max(maxX, pos.x + size.width);
+      maxY = Math.max(maxY, pos.y + size.height);
     }
     if (!Number.isFinite(minX)) return null;
     return {
@@ -116,15 +118,36 @@ function previewGroupNodes(blob, nodePos) {
 function stickyArea(s) {
   return (s.size?.width ?? 240) * (s.size?.height ?? 160);
 }
-function buildPreview(blob) {
+function snapshotPos(blob) {
   const triggerPos = (id, i) => blob.triggerPositions?.[id] ?? { x: -40, y: 60 + i * 140 };
-  const nodePos = (id) => {
+  return (id) => {
     const wn = blob.nodes.find((n) => n.id === id);
     if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
     const ti = blob.triggers.findIndex((t2) => t2.id === id);
     if (ti >= 0) return triggerPos(id, ti);
     return { x: 0, y: 0 };
   };
+}
+function memberSize(id) {
+  const d = preview.findNode(id)?.dimensions;
+  return d && d.width > 0 ? d : { width: 220, height: 64 };
+}
+const builtBlob = shallowRef(null);
+watch(
+  () => (builtBlob.value?.groups ?? []).flatMap((g) => g.nodeIds.map((id) => {
+    const { width, height } = memberSize(id);
+    return `${id}:${width}x${height}`;
+  })).join("|"),
+  () => {
+    const blob = builtBlob.value;
+    if (!blob) return;
+    const frames = new Map(previewGroupNodes(blob, snapshotPos(blob), memberSize).map((n) => [n.id, n]));
+    if (frames.size) previewNodes.value = previewNodes.value.map((n) => frames.get(n.id) ?? n);
+  }
+);
+function buildPreview(blob) {
+  builtBlob.value = blob;
+  const nodePos = snapshotPos(blob);
   const pickSourceSide = (_sourceId, _targetId) => "bottom";
   const edgeKind = (sourceNodeId, output) => {
     const wn = blob.nodes.find((n) => n.id === sourceNodeId);
@@ -151,9 +174,10 @@ function buildPreview(blob) {
     return "default";
   };
   const loops = nodeLoopData(blob.nodes, blob.edges);
+  const shapes = canvasShapes(blob.nodes, blob.edges, blob.triggers);
   const stickies = [...blob.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
   previewNodes.value = [
-    ...previewGroupNodes(blob, nodePos),
+    ...previewGroupNodes(blob, nodePos, memberSize),
     ...stickies.map((s, i) => ({
       id: s.id,
       type: "sticky",
@@ -164,19 +188,19 @@ function buildPreview(blob) {
       // draws no toolbar, no resize handle and does not open for typing (PO-284).
       data: { sticky: s }
     })),
-    ...blob.triggers.map((t2, i) => ({
+    ...blob.triggers.map((t2) => ({
       id: t2.id,
       type: "trigger",
-      position: triggerPos(t2.id, i),
+      position: nodePos(t2.id),
       draggable: false,
-      data: t2
+      data: { ...t2, __split: shapes.splitTriggers.has(t2.id) }
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
       type: "workflow",
       position: n.position ?? { x: 240, y: 80 },
       draggable: false,
-      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.get(n.id) }
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.get(n.id), __shape: shapes.byNode.get(n.id) }
     }))
   ];
   previewEdges.value = blob.edges.map((e) => {
@@ -190,7 +214,7 @@ function buildPreview(blob) {
       source: e.from.nodeId,
       target: e.to.nodeId,
       sourceHandle: outputHandleId(e.from.output, srcSide),
-      targetHandle: inputHandleId(OPPOSITE_SIDE[srcSide]),
+      targetHandle: shapes.arrivalHandle(e) ?? inputHandleId(OPPOSITE_SIDE[srcSide]),
       type: "flow",
       selectable: false,
       data: { kind, label: isBranchPort ? e.from.output : void 0 },

package/dist/runtime/components/Integrations/WorkflowNodeView.d.vue.ts

@@ -1,3 +1,4 @@
+import type { NodeShapeData } from '../../data/canvasShapes.js';
 import type { NodeManifestOutput, WorkflowNode } from '../../types/integrations.js';
 interface NodeData extends WorkflowNode {
     __selected?: boolean;
@@ -22,6 +23,19 @@ interface NodeData extends WorkflowNode {
         /** Set on an iterator itself: how many nodes hang off its `item` port. */
         bodySize?: number;
     };
+    /**
+     * Run replay only (PO-750): the node's step was skipped, and this says why —
+     * "Skipped: dead end in branch 2", or a plain "Skipped" for a reason the studio
+     * does not name. Injected like the markers above; no other canvas passes it.
+     */
+    __skipped?: string;
+    /**
+     * Where the workflow splits and merges at this node (PO-750), computed per sync
+     * from the blob's edges (`data/canvasShapes.ts`) and injected into all three
+     * canvases like `__loop`: a split port and a merging input are drawn as boxes,
+     * and the levels of a nested merge as small boxes in front of the input.
+     */
+    __shape?: NodeShapeData;
 }
 type __VLS_Props = {
     id: string;