@revenexx/studio-integrations 0.5.0 → 0.6.0

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

@@ -2,8 +2,8 @@
 import { computed, markRaw, nextTick, provide, ref, watch } from "vue";
 import {
   ConnectionLineType,
+  ConnectionMode,
   MarkerType,
-  PanOnScrollMode,
   SelectionMode,
   VueFlow,
   useVueFlow
@@ -48,9 +48,17 @@ import { toast } from "vue-sonner";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { layoutWorkflowNodes } from "./workflowLayout";
 import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
+import { isTerminalManifest, portsForNode } from "../../data/nodeInputData";
+import { portFromHandleId } from "../../data/handleId";
+import { groupFindingsByNode } from "../../utils/validationFindings";
+import { reorderBranchSubtrees } from "../../data/branchReorder";
+import { findingsByNodeField } from "../../utils/validationFindings";
+import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   workflow: { type: Object, required: true },
-  runBusy: { type: Boolean, required: false }
+  runBusy: { type: Boolean, required: false },
+  runWaiting: { type: Boolean, required: false },
+  overlayOpen: { type: Boolean, required: false }
 });
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
 const { keys: secretKeys } = useIntegrationsSecrets();
@@ -65,7 +73,20 @@ function clone(v) {
 const vfNodes = ref([]);
 const vfEdges = ref([]);
 const flow = useVueFlow();
+const invalidNodeMessages = computed(() => findingsByNodeField(props.workflow.warnings ?? [], props.workflow.blob.nodes));
 const dynamicOutputs = ref({});
+const invalidNodeFields = computed(() => {
+  const out = {};
+  for (const g of groupFindingsByNode(props.workflow.warnings ?? [], props.workflow.blob.nodes, () => "")) {
+    if (g.nodeId) out[g.nodeId] = g.fields;
+  }
+  return out;
+});
+let dragInFlight = false;
+watch(() => JSON.stringify(invalidNodeFields.value), () => {
+  if (dragInFlight) return;
+  syncFromBlob();
+});
 const dynamicOutputNodes = computed(() => blob.value.nodes.filter((n) => {
   const m = findManifest(n.nodeSlug, n.nodeVersion);
   return (m?.outputs ?? []).some((o) => o.resolveOutputs === true);
@@ -78,6 +99,7 @@ function edgeKindFromPort(sourceNodeId, output) {
   if (output === "true") return "branch-true";
   if (output === "false") return "branch-false";
   if (output === "error") return "error";
+  if (output === "done") return "success";
   const portDef = (manifest.outputs ?? []).find((o) => o.name === output);
   if (portDef) {
     if (portDef.kind === "error") return "error";
@@ -92,10 +114,10 @@ function edgeKindFromPort(sourceNodeId, output) {
   }
   return "default";
 }
-function stripSide(handleId) {
-  if (!handleId) return null;
-  const i = handleId.indexOf("__");
-  return i >= 0 ? handleId.slice(0, i) : handleId;
+function orderedOutputPorts(nodeId) {
+  const wn = blob.value.nodes.find((n) => n.id === nodeId);
+  if (!wn) return ["default"];
+  return portsForNode(wn, findManifest(wn.nodeSlug, wn.nodeVersion), dynamicOutputs.value[nodeId]).map((p) => p.name);
 }
 function triggerPosition(id, index) {
   const saved = blob.value.triggerPositions?.[id];
@@ -120,10 +142,6 @@ function stickyArea(s) {
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
-function locText(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
-}
 function memberDims(id) {
   const d = flow.findNode(id)?.dimensions;
   return d && d.width > 0 ? d : { width: 220, height: 64 };
@@ -261,7 +279,11 @@ function syncFromBlob() {
       type: "workflow",
       position: n.position ?? { x: 240, y: 80 },
       class: bornClass(n.id),
-      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id] }
+      data: {
+        ...n,
+        __resolvedOutputs: dynamicOutputs.value[n.id],
+        __invalidFields: invalidNodeFields.value[n.id]
+      }
     }))
   ];
   const seenEdge = /* @__PURE__ */ new Set();
@@ -284,6 +306,18 @@ function syncFromBlob() {
       targetHandle: tgtGroup ? "__in__top" : vf.targetHandle
     });
   }
+  const bySource = /* @__PURE__ */ new Map();
+  for (const e of mapped) {
+    const list = bySource.get(e.source) ?? [];
+    list.push(e);
+    bySource.set(e.source, list);
+  }
+  for (const list of bySource.values()) {
+    list.sort((a, b) => (a.data?.portIndex ?? 0) - (b.data?.portIndex ?? 0));
+    list.forEach((e, i) => {
+      e.data = { ...e.data, laneIndex: i, laneCount: list.length };
+    });
+  }
   vfEdges.value = mapped;
   void nextTick(() => flow.updateNodeInternals(vfNodes.value.map((n) => n.id)));
 }
@@ -291,9 +325,11 @@ function makeVfEdge(id, sourceId, targetId, output) {
   const kind = edgeKindFromPort(sourceId, output);
   const wn = blob.value.nodes.find((n) => n.id === sourceId);
   const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
-  const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(output);
+  const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false"].includes(output);
   const srcSide = pickSourceSide(sourceId, targetId);
   const tgtSide = oppositeSide(srcSide);
+  const order = orderedOutputPorts(sourceId);
+  const portIndex = order.indexOf(output);
   return {
     id,
     source: sourceId,
@@ -303,7 +339,8 @@ function makeVfEdge(id, sourceId, targetId, output) {
     type: "flow",
     data: {
       kind,
-      label: isBranchPort ? output : void 0
+      label: isBranchPort ? output : void 0,
+      portIndex: portIndex < 0 ? 0 : portIndex
     },
     markerEnd: {
       type: MarkerType.ArrowClosed,
@@ -314,24 +351,21 @@ function makeVfEdge(id, sourceId, targetId, output) {
   };
 }
 function edgeColorByKind(kind) {
-  switch (kind) {
-    case "success":
-      return "#10b981";
-    case "error":
-      return "#f43f5e";
-    case "branch-true":
-      return "#10b981";
-    case "branch-false":
-      return "#f59e0b";
-    case "branch":
-      return "#8b5cf6";
-    default:
-      return "#94a3b8";
-  }
+  return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
 syncFromBlob();
-flow.onPaneReady(() => flow.fitView({ padding: 0.2, maxZoom: 1 }));
+const paneReady = ref(false);
+const pendingReveal = ref(null);
+flow.onPaneReady(() => {
+  flow.fitView({ padding: 0.2, maxZoom: 1 });
+  paneReady.value = true;
+  if (pendingReveal.value) {
+    centerOnNode(pendingReveal.value);
+    pendingReveal.value = null;
+  }
+});
 flow.onNodeDragStart(({ node }) => {
+  dragInFlight = true;
   if (node.type !== "group") return;
   const g = blob.value.groups?.find((x) => x.id === node.id);
   if (!g) return;
@@ -349,6 +383,7 @@ flow.onNodeDrag(({ node }) => {
   }
 });
 function persistDraggedNodes(evt) {
+  dragInFlight = false;
   const moved = evt.nodes?.length ? evt.nodes : [evt.node];
   for (const n of moved) {
     const pos = { x: Math.round(n.position.x), y: Math.round(n.position.y) };
@@ -394,7 +429,7 @@ flow.onConnect((conn) => {
   connectCompleted = true;
   if (!conn.source || !conn.target) return;
   const id = `e-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
-  const output = stripSide(conn.sourceHandle) ?? "default";
+  const output = portFromHandleId(conn.sourceHandle) ?? "default";
   blob.value.edges.push({
     id,
     from: { nodeId: conn.source, output },
@@ -408,7 +443,7 @@ let connectStart = null;
 let connectCompleted = false;
 flow.onConnectStart(({ nodeId, handleId, handleType }) => {
   connectCompleted = false;
-  connectStart = handleType === "source" && nodeId ? { sourceId: nodeId, output: stripSide(handleId) ?? "default" } : null;
+  connectStart = handleType === "source" && nodeId ? { sourceId: nodeId, output: portFromHandleId(handleId) ?? "default" } : null;
 });
 flow.onConnectEnd((event) => {
   const start = connectStart;
@@ -428,7 +463,7 @@ flow.onEdgeUpdate(({ edge, connection }) => {
   if (connection.source === connection.target) return;
   const be = blob.value.edges.find((e) => e.id === edge.id);
   if (!be) return;
-  be.from = { nodeId: connection.source, output: stripSide(connection.sourceHandle) ?? be.from.output };
+  be.from = { nodeId: connection.source, output: portFromHandleId(connection.sourceHandle) ?? be.from.output };
   be.to = { nodeId: connection.target, input: be.to.input };
   syncFromBlob();
   push();
@@ -547,9 +582,18 @@ function duplicateBlobNodes(ids) {
   });
 }
 provide("workflow-node-actions", {
+  configure: (id) => {
+    renameIntent.value = false;
+    selectedId.value = id;
+  },
   duplicate: (id) => duplicateBlobNodes([id]),
   remove: (id) => removeBlobNode(id)
 });
+const controlBar = ref(null);
+provide(
+  "workflow-canvas-bottom-inset",
+  () => controlBar.value ? controlBar.value.offsetHeight + 12 : 0
+);
 const CLIP_KIND = "revenexx.workflow.nodes";
 async function copyNodes(ids) {
   const nodes = blob.value.nodes.filter((n) => ids.includes(n.id));
@@ -697,17 +741,33 @@ const selection = computed(() => {
   if (!selectedId.value) return null;
   return blob.value.nodes.find((n) => n.id === selectedId.value) ?? blob.value.triggers.find((t) => t.id === selectedId.value) ?? null;
 });
-flow.onNodeClick((evt) => {
+const selectionIsTrigger = computed(() => !!selectedId.value && blob.value.triggers.some((t) => t.id === selectedId.value));
+flow.onNodeDoubleClick((evt) => {
   if (evt.node.type === "sticky" || evt.node.type === "group") return;
   selectedId.value = evt.node.id;
 });
 flow.onPaneClick(() => {
   selectedId.value = null;
 });
-function localLabel(v) {
-  if (!v) return "";
-  return typeof v === "string" ? v : v.en ?? Object.values(v)[0] ?? "";
+function centerOnNode(id) {
+  const vf = vfNodes.value.find((n) => n.id === id);
+  if (!vf) return;
+  const size = flow.findNode(id)?.dimensions;
+  void flow.setCenter(
+    vf.position.x + (size?.width ?? 220) / 2,
+    vf.position.y + (size?.height ?? 76) / 2,
+    { zoom: Math.max(flow.viewport.value?.zoom ?? 1, 0.75), duration: 300 }
+  );
 }
+function revealNode(id) {
+  if (paneReady.value) centerOnNode(id);
+  else pendingReveal.value = id;
+  if (blob.value.nodes.some((n) => n.id === id) || blob.value.triggers.some((t) => t.id === id)) {
+    renameIntent.value = false;
+    selectedId.value = id;
+  }
+}
+defineExpose({ revealNode });
 const selectedUpstreamOutputs = computed(() => {
   const id = selectedId.value;
   if (!id) return [];
@@ -719,7 +779,9 @@ const selectedUpstreamOutputs = computed(() => {
     const portDef = (findManifest(source.nodeSlug, source.nodeVersion)?.outputs ?? []).find((o) => o.name === e.from.output);
     return [{
       nodeId: source.id,
-      nodeName: localLabel(source.name) || source.nodeSlug,
+      // A node's own name is text the user typed — never trimmed, never read
+      // as JSON. The manifest strings below it get the normalising resolver.
+      nodeName: resolveDisplayName(source.name) || source.nodeSlug,
       output: e.from.output,
       fields: portDef?.fields
     }];
@@ -818,7 +880,6 @@ function addFromPayload(payload, pos) {
     adoptIntoGroupAt(id2, at);
     markBorn(id2);
     syncFromBlob();
-    selectedId.value = id2;
     push();
     return;
   }
@@ -835,7 +896,6 @@ function addFromPayload(payload, pos) {
   adoptIntoGroupAt(id, at);
   markBorn(id);
   syncFromBlob();
-  selectedId.value = id;
   push();
 }
 function onDrop(ev) {
@@ -870,7 +930,6 @@ function onPaletteInsert(payload) {
     });
     markBorn(id);
     syncFromBlob();
-    selectedId.value = id;
     push();
     return;
   }
@@ -902,6 +961,10 @@ function spliceIntoEdge(edgeId, payload) {
   const edge = blob.value.edges.find((e) => e.id === edgeId);
   const manifest = findManifest(payload.slug, payload.version);
   if (!edge || !manifest) return;
+  if (isTerminalManifest(manifest)) {
+    toast.error(`${resolveLocalized(manifest.name) || manifest.slug} ends the run and cannot be inserted into a connection.`);
+    return;
+  }
   const a = nodePosition(edge.from.nodeId);
   const b = nodePosition(edge.to.nodeId);
   const id = `n-${Date.now()}`;
@@ -920,7 +983,6 @@ function spliceIntoEdge(edgeId, payload) {
   );
   markBorn(id);
   syncFromBlob();
-  selectedId.value = id;
   push();
 }
 function defaultConfigFor(fields = []) {
@@ -934,6 +996,34 @@ function nodeDims(id) {
   const d = flow.findNode(id)?.dimensions;
   return d && d.width > 0 ? d : { width: 220, height: 64 };
 }
+function reorderBranchesByHandle(laid, memberToGroup) {
+  const posById = new Map(laid.map((n) => [n.id, n]));
+  const nodes = /* @__PURE__ */ new Map();
+  for (const n of laid) {
+    if (!memberToGroup.has(n.id)) nodes.set(n.id, { x: n.position.x });
+  }
+  const portOrderCache = /* @__PURE__ */ new Map();
+  const portsFor = (id) => {
+    let o = portOrderCache.get(id);
+    if (!o) {
+      o = orderedOutputPorts(id);
+      portOrderCache.set(id, o);
+    }
+    return o;
+  };
+  const edges = [];
+  for (const e of vfEdges.value) {
+    if (!nodes.has(e.source) || !nodes.has(e.target)) continue;
+    const port = portFromHandleId(e.sourceHandle) ?? "default";
+    const order = portsFor(e.source);
+    const idx = order.indexOf(port);
+    edges.push({ source: e.source, target: e.target, portIndex: idx < 0 ? order.length : idx });
+  }
+  for (const [id, x] of reorderBranchSubtrees(nodes, edges)) {
+    const n = posById.get(id);
+    n.position = { x, y: n.position.y };
+  }
+}
 async function tidyUp() {
   const containment = /* @__PURE__ */ new Map();
   for (const s of blob.value.stickies ?? []) {
@@ -1013,6 +1103,7 @@ async function tidyUp() {
     if (!inner) return n;
     return { ...n, position: { x: anchor.x + GROUP_PAD + inner.position.x, y: anchor.y + GROUP_PAD + GROUP_LABEL_ROOM + inner.position.y } };
   });
+  reorderBranchesByHandle(laid, memberToGroup);
   for (const n of laid) {
     const pos = { x: Math.round(n.position.x), y: Math.round(n.position.y) };
     if (n.type === "workflow") {
@@ -1119,6 +1210,7 @@ async function focusPalette() {
   paletteRef.value?.focusSearch();
 }
 const lightboxOpen = computed(() => !!selection.value);
+const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
   "enter": {
@@ -1180,7 +1272,7 @@ useCanvasShortcuts(() => ({
     pendingConnect.value = null;
     flow.removeSelectedElements();
   }
-}), { disabled: lightboxOpen });
+}), { disabled: () => !canvasHasKeyboard.value });
 const nodeTypes = {
   workflow: markRaw(WorkflowNodeView),
   trigger: markRaw(WorkflowTriggerView),
@@ -1218,15 +1310,15 @@ const edgeTypes = {
           :default-edge-options="{ type: 'flow' }"
           :connection-line-type="ConnectionLineType.Step"
           :connection-line-style="{ stroke: '#94a3b8', strokeWidth: 1.75, strokeDasharray: '4 4' }"
+          :connection-mode="ConnectionMode.Strict"
           :is-valid-connection="isValidConnection"
           :snap-to-grid="true"
           :snap-grid="[20, 20]"
           :selection-mode="SelectionMode.Partial"
           :selection-key-code="pointerMode === 'select' ? true : 'Shift'"
           :pan-on-drag="pointerMode === 'hand' ? true : [1]"
-          :pan-on-scroll="true"
-          :pan-on-scroll-mode="PanOnScrollMode.Free"
-          :delete-key-code="['Backspace', 'Delete']"
+          :zoom-on-double-click="false"
+          :delete-key-code="canvasHasKeyboard ? ['Backspace', 'Delete'] : null"
           :edges-updatable="true"
           :min-zoom="0.25"
           :max-zoom="4"
@@ -1465,14 +1557,14 @@ const edgeTypes = {
       </Transition>
 
       <!-- Floating control pane — bottom center. -->
-      <div class="absolute bottom-3 left-1/2 z-10 -translate-x-1/2">
+      <div ref="controlBar" class="absolute bottom-3 left-1/2 z-10 -translate-x-1/2">
         <TooltipProvider :delay-duration="250">
         <div class="rounded-lg border border-gray-400/10 outline-1 outline-white/30 backdrop-blur-sm">
           <div class="flex items-center gap-0.5 whitespace-nowrap border border-white bg-white rounded-lg bg-gradient-to-br from-white via-violet-50/40 to-white px-2 py-1">
           <!-- Smart Run: the page decides what "run" means — workflows that
                consume trigger.payload open the payload dialog, payload-free
                ones fire immediately. One button either way. -->
-          <IntegrationsEditorTip label="Run workflow" shortcut="mod+enter">
+          <IntegrationsEditorTip :label="runWaiting ? 'The bundle is still building \u2014 the run starts when it is ready' : 'Run workflow'" shortcut="mod+enter">
             <button
               type="button"
               class="relative flex h-8 items-center gap-1.5 rounded-lg bg-gradient-to-b from-emerald-500 to-emerald-600 px-3.5 text-sm font-medium text-white transition after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[inset_0_1px_0_rgba(255,255,255,0.3),inset_0_-2px_0_rgba(0,0,0,0.25)] hover:from-emerald-600 hover:to-emerald-600 active:translate-y-px disabled:opacity-60"
@@ -1481,16 +1573,20 @@ const edgeTypes = {
             >
               <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              Run
+              {{ runWaiting ? "Waiting for build\u2026" : "Run" }}
             </button>
           </IntegrationsEditorTip>
 
           <div class="mx-1 h-5 w-px bg-black/10" />
 
           <div class="flex items-center gap-0.5 rounded-lg bg-black/[0.05] p-0.5 shadow-[inset_0_1px_2px_rgba(15,23,42,0.12)]">
+          <!-- Icon-only, and the tooltip is not an accessible name: each one
+               says what it does itself, and whether it is the active mode. -->
           <IntegrationsEditorTip label="Select" shortcut="v">
               <button
                 type="button"
+                aria-label="Select"
+                :aria-pressed="pointerMode === 'select'"
                 class="flex size-7 items-center justify-center rounded-lg transition"
                 :class="pointerMode === 'select' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
                 @click="setPointerMode('select')"
@@ -1501,6 +1597,8 @@ const edgeTypes = {
           <IntegrationsEditorTip label="Hand (pan)" shortcut="h">
               <button
                 type="button"
+                aria-label="Hand (pan)"
+                :aria-pressed="pointerMode === 'hand'"
                 class="flex size-7 items-center justify-center rounded-lg transition"
                 :class="pointerMode === 'hand' ? 'bg-gradient-to-b from-white to-gray-50 text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.9)]' : 'text-muted-foreground hover:text-foreground'"
                 @click="setPointerMode('hand')"
@@ -1577,6 +1675,7 @@ const edgeTypes = {
           <IntegrationsEditorTip label="Zoom out" shortcut="-">
             <button
               type="button"
+              aria-label="Zoom out"
               class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
               @click="flow.zoomOut({ duration: 150 })"
             >
@@ -1590,8 +1689,13 @@ const edgeTypes = {
             <span class="inline-flex">
               <DropdownMenu v-model:open="zoomMenuOpen">
                 <DropdownMenuTrigger as-child>
+                  <!-- The label carries the percentage because it replaces the
+                       button's text as its accessible name: a bare "Zoom level"
+                       would leave screen reader users with the one thing sighted
+                       users do not need told and without the value they do. -->
                   <button
                     type="button"
+                    :aria-label="`Zoom level ${zoomPct}`"
                     class="w-12 rounded-lg py-1 text-center text-sm tabular-nums text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
                   >
                     {{ zoomPct }}
@@ -1603,6 +1707,7 @@ const edgeTypes = {
                   v-model="zoomInputText"
                   type="text"
                   inputmode="numeric"
+                  aria-label="Zoom level in percent"
                   class="h-6 w-full rounded-md border border-black/[0.08] bg-white px-1 text-center text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/40"
                   placeholder="%"
                   @keydown.stop
@@ -1625,6 +1730,7 @@ const edgeTypes = {
           <IntegrationsEditorTip label="Zoom in" shortcut="=">
             <button
               type="button"
+              aria-label="Zoom in"
               class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
               @click="flow.zoomIn({ duration: 150 })"
             >
@@ -1668,7 +1774,22 @@ const edgeTypes = {
     renameIntent = false;
   }
 }">
-      <DialogContent class="flex h-[86vh] w-[min(1280px,94vw)] max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none">
+      <!-- Sized for the form, not for three columns. 1100px leaves the 1024px
+           reading width a small gutter instead of floating it in the middle,
+           and still gives the form ~770px with the Input panel open. Fixed
+           rather than fitting the content: the tabs hold very different
+           amounts, and a dialog that resizes under the pointer as you switch
+           between them is worse than one with some room to spare.
+
+           A trigger is the exception, and gets a box its own size. It has one
+           tab, no output to test and a handful of controls — a schedule is a
+           frequency, a time and its days — so the node's width would leave the
+           form as a strip down the left of an empty workbench. -->
+      <DialogContent
+        :show-close-button="false"
+        class="flex max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none"
+        :class="selectionIsTrigger ? 'h-[min(520px,86vh)] w-[min(600px,94vw)]' : 'h-[min(680px,86vh)] w-[min(1100px,94vw)]'"
+      >
         <NodeInspector
           v-if="selection"
           :selection="selection"
@@ -1681,6 +1802,7 @@ const edgeTypes = {
           :triggers="blob.triggers"
           :dynamic-outputs="dynamicOutputs"
           :workflow-id="workflow.id"
+          :refused-fields="selectedId ? invalidNodeMessages[selectedId] : void 0"
           @update="applyInspectorUpdate"
           @close="selectedId = null"
           @remove="selectedId && removeBlobNode(selectedId)"

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

@@ -6,8 +6,29 @@ type __VLS_Props = {
     workflow: Workflow;
     /** Busy flag for the control-pane Play button (a run is being triggered). */
     runBusy?: boolean;
+    /** The run is queued behind a bundle build — busy, but worth saying why. */
+    runWaiting?: boolean;
+    /**
+     * One of the page's own lightboxes is open above the editor (settings,
+     * duplicate, run payload, the sync response, the deactivation prompt). The
+     * canvas stands its keyboard shortcuts down while one is up — see
+     * `canvasHasKeyboard` below. A new page-level dialog belongs in here too.
+     */
+    overlayOpen?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+/**
+ * Show a node the user was sent to from outside the canvas — the validation
+ * banner's per-node line (PO-209). Centres the card and opens its settings,
+ * which is where the fields at fault are.
+ *
+ * A node inside a collapsed group has no card on the canvas: centring would pan
+ * to empty space, so it only opens the settings. The reverse can't happen — an
+ * id that is on the canvas is in the blob by construction.
+ */
+declare function revealNode(id: string): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    revealNode: typeof revealNode;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (blob: WorkflowBlob) => any;
     run: () => any;
     toggleActive: () => any;

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

@@ -2,7 +2,6 @@
 import { computed, markRaw, nextTick, onMounted, provide, ref, watch } from "vue";
 import {
   MarkerType,
-  PanOnScrollMode,
   VueFlow,
   useVueFlow
 } from "@vue-flow/core";
@@ -65,24 +64,9 @@ function onResolvedOutputs(nodeId, outputs) {
 const previewNodes = ref([]);
 const previewEdges = ref([]);
 const preview = useVueFlow("workflow-history-preview");
-provide("workflow-node-actions", { duplicate: () => {
-}, remove: () => {
-} });
+provide("workflow-node-actions", null);
 function edgeColorByKind(kind) {
-  switch (kind) {
-    case "success":
-      return "#10b981";
-    case "error":
-      return "#f43f5e";
-    case "branch-true":
-      return "#10b981";
-    case "branch-false":
-      return "#f59e0b";
-    case "branch":
-      return "#8b5cf6";
-    default:
-      return "#94a3b8";
-  }
+  return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
@@ -140,6 +124,7 @@ function buildPreview(blob) {
     if (output === "true") return "branch-true";
     if (output === "false") return "branch-false";
     if (output === "error") return "error";
+    if (output === "done") return "success";
     const outs = [...manifest.outputs ?? [], ...dynamicOutputs.value[sourceNodeId] ?? []];
     const portDef = outs.find((o) => o.name === output);
     if (portDef) {
@@ -187,7 +172,7 @@ function buildPreview(blob) {
     const kind = edgeKind(e.from.nodeId, e.from.output);
     const wn = blob.nodes.find((n) => n.id === e.from.nodeId);
     const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
-    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false", "error"].includes(e.from.output);
+    const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false"].includes(e.from.output);
     const srcSide = pickSourceSide(e.from.nodeId, e.to.nodeId);
     return {
       id: e.id,
@@ -296,7 +281,6 @@ onMounted(() => {
         :nodes-connectable="false"
         :elements-selectable="false"
         :edges-updatable="false"
-        :pan-on-scroll-mode="PanOnScrollMode.Free"
         :delete-key-code="null"
         :min-zoom="0.25"
         :max-zoom="2"

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

@@ -1,5 +1,23 @@
 import type { WorkflowIcon } from '../../types/integrations.js';
-type __VLS_PublicProps = {
+/**
+ * The caller names the picker by pointing at its own `<Label>`'s id — not with
+ * `<Label for>`, and not with an `id` of ours on the trigger.
+ *
+ * An `id` on the trigger would be a quiet regression: `PopoverTrigger` puts
+ * reka-ui's generated `triggerId` there, `PopoverContentImpl` points the opened
+ * dialog's `aria-labelledby` at exactly that id, and reka's `Slot` merges with
+ * the *child's* props winning — so ours would replace it and leave the popover
+ * naming an element that no longer exists.
+ *
+ * `aria-labelledby` also lists the id of the span holding the current choice, so
+ * the name stays "Icon Business Central" rather than dropping the value the way
+ * a plain label would. Attribute fallthrough is no help here either: the root
+ * this component renders is the popover, not the button.
+ */
+type __VLS_Props = {
+    triggerLabelledby?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: WorkflowIcon | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,10 +1,17 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useId } from "vue";
 import { AltArrowDown as ChevronDown } from "#solar-icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
 import { WORKFLOW_SOLAR_ICONS, imageIdFromSrc, nodeLogoOptions } from "../../data/workflowIconCatalog";
 import WorkflowIconView from "./WorkflowIconView.vue";
 const model = defineModel({ type: [Object, null], ...{ default: null } });
+const props = defineProps({
+  triggerLabelledby: { type: String, required: false }
+});
+const valueId = useId();
+const triggerLabelledby = computed(
+  () => props.triggerLabelledby ? `${props.triggerLabelledby} ${valueId}` : void 0
+);
 const open = ref(false);
 const logos = computed(() => nodeLogoOptions());
 function pick(icon) {
@@ -30,13 +37,14 @@ const selectedLabel = computed(() => {
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <button
+        :aria-labelledby="triggerLabelledby"
         type="button"
         class="flex h-9 w-full items-center gap-2 rounded-md border border-black/[0.08] bg-white px-2.5 text-left text-sm transition hover:border-black/20"
       >
         <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
           <WorkflowIconView :icon="model" :size="14" />
         </span>
-        <span class="min-w-0 flex-1 truncate" :class="model ? '' : 'text-muted-foreground'">
+        <span :id="valueId" class="min-w-0 flex-1 truncate" :class="model ? '' : 'text-muted-foreground'">
           {{ selectedLabel }}
         </span>
         <ChevronDown :size="14" class="shrink-0 text-muted-foreground" />
@@ -50,6 +58,7 @@ const selectedLabel = computed(() => {
             class="flex size-8 items-center justify-center rounded-md border text-sm text-muted-foreground transition hover:bg-muted/50"
             :class="!model ? 'border-emerald-500/40 bg-emerald-500/10' : 'border-transparent'"
             title="No icon (default glyph)"
+            aria-label="No icon (default glyph)"
             @click="pick(null)"
           >
             —