@revenexx/studio-integrations 0.5.1 → 0.7.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,12 +48,20 @@ 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 },
-  runWaiting: { type: Boolean, required: false }
+  runWaiting: { type: Boolean, required: false },
+  overlayOpen: { type: Boolean, required: false }
 });
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
+const t = useIntegrationsT();
 const { keys: secretKeys } = useIntegrationsSecrets();
 const blob = ref(clone(props.workflow.blob));
 watch(() => props.workflow.id, () => {
@@ -66,7 +74,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);
@@ -79,6 +100,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";
@@ -93,10 +115,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];
@@ -106,7 +128,7 @@ function triggerPosition(id, index) {
 function nodePosition(id) {
   const wn = blob.value.nodes.find((n) => n.id === id);
   if (wn) return { x: wn.position?.x ?? 0, y: wn.position?.y ?? 0 };
-  const ti = blob.value.triggers.findIndex((t) => t.id === id);
+  const ti = blob.value.triggers.findIndex((t2) => t2.id === id);
   if (ti >= 0) return triggerPosition(id, ti);
   return { x: 0, y: 0 };
 }
@@ -121,10 +143,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 };
@@ -180,7 +198,7 @@ function ungroup(id) {
   push();
 }
 function createGroupFromSelection(ids) {
-  const valid = ids.filter((id2) => blob.value.nodes.some((n) => n.id === id2) || blob.value.triggers.some((t) => t.id === id2));
+  const valid = ids.filter((id2) => blob.value.nodes.some((n) => n.id === id2) || blob.value.triggers.some((t2) => t2.id === id2));
   if (valid.length < 1) return;
   for (const g of blob.value.groups ?? []) {
     g.nodeIds = g.nodeIds.filter((x) => !valid.includes(x));
@@ -189,7 +207,7 @@ function createGroupFromSelection(ids) {
   const id = `g-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
   blob.value.groups = [...blob.value.groups ?? [], {
     id,
-    label: `Group ${(blob.value.groups?.length ?? 0) + 1}`,
+    label: t("integration.editor.group.defaultLabel", { n: (blob.value.groups?.length ?? 0) + 1 }),
     nodeIds: valid
   }];
   syncFromBlob();
@@ -250,19 +268,23 @@ function syncFromBlob() {
         onRemove: () => removeBlobNode(s.id)
       }
     })),
-    ...blob.value.triggers.filter((t) => !collapsedBy.has(t.id)).map((t, i) => ({
-      id: t.id,
+    ...blob.value.triggers.filter((t2) => !collapsedBy.has(t2.id)).map((t2, i) => ({
+      id: t2.id,
       type: "trigger",
-      position: triggerPosition(t.id, i),
-      class: bornClass(t.id),
-      data: t
+      position: triggerPosition(t2.id, i),
+      class: bornClass(t2.id),
+      data: t2
     })),
     ...blob.value.nodes.filter((n) => !collapsedBy.has(n.id)).map((n) => ({
       id: n.id,
       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();
@@ -285,6 +307,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)));
 }
@@ -292,9 +326,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,
@@ -304,7 +340,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,
@@ -315,24 +352,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;
@@ -350,6 +384,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) };
@@ -360,7 +395,7 @@ function persistDraggedNodes(evt) {
         const dy = Math.round(n.position.y - origin.frame.y);
         for (const [id, memberPos] of Object.entries(origin.members)) {
           const target = { x: Math.round(memberPos.x + dx), y: Math.round(memberPos.y + dy) };
-          if (blob.value.triggers.some((t) => t.id === id)) {
+          if (blob.value.triggers.some((t2) => t2.id === id)) {
             blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [id]: target };
           } else {
             const wn = blob.value.nodes.find((b) => b.id === id);
@@ -373,7 +408,7 @@ function persistDraggedNodes(evt) {
       }
       continue;
     }
-    if (blob.value.triggers.some((t) => t.id === n.id)) {
+    if (blob.value.triggers.some((t2) => t2.id === n.id)) {
       blob.value.triggerPositions = { ...blob.value.triggerPositions ?? {}, [n.id]: pos };
     } else if (blob.value.stickies?.some((s) => s.id === n.id)) {
       const st = blob.value.stickies.find((s) => s.id === n.id);
@@ -395,7 +430,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 },
@@ -409,7 +444,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;
@@ -422,14 +457,14 @@ flow.onConnectEnd((event) => {
   pendingConnect.value = { sourceId: start.sourceId, output: start.output, pos: { x: snap(pos.x), y: snap(pos.y) } };
   pendingSpliceEdgeId.value = null;
   void focusPalette();
-  toast.info("Pick a node \u2014 it will be added right there, already connected.");
+  toast.info(t("integration.editor.quickConnect.toast"));
 });
 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;
-  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();
@@ -445,9 +480,11 @@ flow.onEdgesChange((changes) => {
   if (mutated) push();
 });
 flow.onNodesChange((changes) => {
-  for (const c of changes) {
-    if (c.type === "remove") removeBlobNode(c.id);
-  }
+  const removed = changes.filter((c) => c.type === "remove").map((c) => c.id);
+  if (!removed.length) return;
+  void nextTick(() => {
+    for (const id of removed) removeBlobNode(id);
+  });
 });
 function stripFromGroups(drop) {
   if (!blob.value.groups?.length) return;
@@ -462,7 +499,7 @@ function removeBlobNode(id) {
   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);
-  blob.value.triggers = blob.value.triggers.filter((t) => t.id !== id);
+  blob.value.triggers = blob.value.triggers.filter((t2) => t2.id !== id);
   blob.value.edges = blob.value.edges.filter((e) => e.from.nodeId !== id && e.to.nodeId !== id);
   if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
   if (selectedId.value === id) selectedId.value = null;
@@ -493,7 +530,7 @@ function addSticky(at) {
     id: `s-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
     // n8n-style starter content: teaches the edit gesture and the supported
     // markdown by example.
-    content: "## I'm a note\n**Double-click** to edit me. **Bold**, *italic*, `code`, [links](https://revenexx.com) and\n- lists work",
+    content: t("integration.editor.sticky.starterContent"),
     position: at ? { x: Math.round(at.x), y: Math.round(at.y) } : {
       x: Math.round(center.x - STICKY_DEFAULT_SIZE.width / 2),
       y: Math.round(center.y - STICKY_DEFAULT_SIZE.height / 2)
@@ -509,7 +546,7 @@ function removeBlobNodes(ids) {
   const drop = new Set(ids);
   stripFromGroups(drop);
   blob.value.nodes = blob.value.nodes.filter((n) => !drop.has(n.id));
-  blob.value.triggers = blob.value.triggers.filter((t) => !drop.has(t.id));
+  blob.value.triggers = blob.value.triggers.filter((t2) => !drop.has(t2.id));
   blob.value.edges = blob.value.edges.filter((e) => !drop.has(e.from.nodeId) && !drop.has(e.to.nodeId));
   if (blob.value.stickies?.length) blob.value.stickies = blob.value.stickies.filter((s) => !drop.has(s.id));
   for (const id of ids) {
@@ -548,9 +585,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));
@@ -559,9 +605,9 @@ async function copyNodes(ids) {
   const edges = blob.value.edges.filter((e) => inner.has(e.from.nodeId) && inner.has(e.to.nodeId));
   try {
     await navigator.clipboard.writeText(JSON.stringify({ kind: CLIP_KIND, version: 1, nodes, edges }, null, 2));
-    toast.success(nodes.length === 1 ? "Node copied" : `${nodes.length} nodes copied`);
+    toast.success(t("integration.editor.clipboard.toast.copied", nodes.length));
   } catch {
-    toast.error("Could not write to the clipboard");
+    toast.error(t("integration.editor.clipboard.error.write"));
   }
 }
 async function pasteNodes(at) {
@@ -569,18 +615,18 @@ async function pasteNodes(at) {
   try {
     text = await navigator.clipboard.readText();
   } catch {
-    toast.error("Could not read the clipboard");
+    toast.error(t("integration.editor.clipboard.error.read"));
     return;
   }
   let payload;
   try {
     payload = JSON.parse(text);
   } catch {
-    toast.error("Clipboard does not contain nodes");
+    toast.error(t("integration.editor.clipboard.error.empty"));
     return;
   }
   if (payload?.kind !== CLIP_KIND || !Array.isArray(payload.nodes) || !payload.nodes.length) {
-    toast.error("Clipboard does not contain nodes");
+    toast.error(t("integration.editor.clipboard.error.empty"));
     return;
   }
   const idMap = /* @__PURE__ */ new Map();
@@ -696,19 +742,35 @@ function isValidConnection(conn) {
 const selectedId = ref(null);
 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;
+  return blob.value.nodes.find((n) => n.id === selectedId.value) ?? blob.value.triggers.find((t2) => t2.id === selectedId.value) ?? null;
 });
-flow.onNodeClick((evt) => {
+const selectionIsTrigger = computed(() => !!selectedId.value && blob.value.triggers.some((t2) => t2.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((t2) => t2.id === id)) {
+    renameIntent.value = false;
+    selectedId.value = id;
+  }
 }
+defineExpose({ revealNode });
 const selectedUpstreamOutputs = computed(() => {
   const id = selectedId.value;
   if (!id) return [];
@@ -720,7 +782,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
     }];
@@ -728,7 +792,7 @@ const selectedUpstreamOutputs = computed(() => {
 });
 function applyInspectorUpdate(next) {
   const id = next.id;
-  const triggerIdx = blob.value.triggers.findIndex((t) => t.id === id);
+  const triggerIdx = blob.value.triggers.findIndex((t2) => t2.id === id);
   if (triggerIdx >= 0) {
     blob.value.triggers[triggerIdx] = next;
   } else {
@@ -801,7 +865,7 @@ function addFromPayload(payload, pos) {
     const id2 = `g-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`;
     blob.value.groups = [...blob.value.groups ?? [], {
       id: id2,
-      label: `Group ${(blob.value.groups?.length ?? 0) + 1}`,
+      label: t("integration.editor.group.defaultLabel", { n: (blob.value.groups?.length ?? 0) + 1 }),
       nodeIds: [],
       rect: { x: at.x, y: at.y, ...EMPTY_GROUP_SIZE }
     }];
@@ -811,7 +875,7 @@ function addFromPayload(payload, pos) {
     return;
   }
   if (payload.kind === "trigger") {
-    const tpl = TRIGGER_TEMPLATES.find((t) => t.type === payload.type);
+    const tpl = TRIGGER_TEMPLATES.find((t2) => t2.type === payload.type);
     if (!tpl) return;
     const id2 = crypto.randomUUID();
     blob.value.triggers.push({ id: id2, type: tpl.type, config: { ...tpl.defaultConfig } });
@@ -819,7 +883,6 @@ function addFromPayload(payload, pos) {
     adoptIntoGroupAt(id2, at);
     markBorn(id2);
     syncFromBlob();
-    selectedId.value = id2;
     push();
     return;
   }
@@ -836,7 +899,6 @@ function addFromPayload(payload, pos) {
   adoptIntoGroupAt(id, at);
   markBorn(id);
   syncFromBlob();
-  selectedId.value = id;
   push();
 }
 function onDrop(ev) {
@@ -871,7 +933,6 @@ function onPaletteInsert(payload) {
     });
     markBorn(id);
     syncFromBlob();
-    selectedId.value = id;
     push();
     return;
   }
@@ -892,7 +953,7 @@ provide("workflow-edge-actions", {
     if (!blob.value.edges.some((e) => e.id === edgeId)) return;
     pendingSpliceEdgeId.value = edgeId;
     void focusPalette();
-    toast.info("Pick a node from the palette \u2014 it will be inserted into the connection.");
+    toast.info(t("integration.editor.splice.toast"));
   }
 });
 function primaryOutputName(slug, version) {
@@ -903,6 +964,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(t("integration.editor.splice.error.terminal", { name: resolveLocalized(manifest.name) || manifest.slug }));
+    return;
+  }
   const a = nodePosition(edge.from.nodeId);
   const b = nodePosition(edge.to.nodeId);
   const id = `n-${Date.now()}`;
@@ -921,7 +986,6 @@ function spliceIntoEdge(edgeId, payload) {
   );
   markBorn(id);
   syncFromBlob();
-  selectedId.value = id;
   push();
 }
 function defaultConfigFor(fields = []) {
@@ -935,6 +999,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 ?? []) {
@@ -1014,6 +1106,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") {
@@ -1120,6 +1213,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": {
@@ -1181,7 +1275,7 @@ useCanvasShortcuts(() => ({
     pendingConnect.value = null;
     flow.removeSelectedElements();
   }
-}), { disabled: lightboxOpen });
+}), { disabled: () => !canvasHasKeyboard.value });
 const nodeTypes = {
   workflow: markRaw(WorkflowNodeView),
   trigger: markRaw(WorkflowTriggerView),
@@ -1207,7 +1301,7 @@ const edgeTypes = {
         :kind="menu.kind"
         :selection-count="flow.getSelectedNodes.value.length"
         :total-nodes="vfNodes.length"
-        :target-is-trigger="!!menu.targetId && blob.triggers.some((t) => t.id === menu.targetId)"
+        :target-is-trigger="!!menu.targetId && blob.triggers.some((t2) => t2.id === menu.targetId)"
         :run-busy="runBusy"
         @action="onMenuAction"
       >
@@ -1219,15 +1313,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"
@@ -1260,7 +1354,7 @@ const edgeTypes = {
             class="absolute -top-0.5 left-1/2 -translate-x-1/2 -translate-y-full rounded-md px-1.5 py-0.5 text-xs font-medium text-white shadow-sm"
             :class="nodeDrag.dragging.value?.kind === 'trigger' ? 'bg-emerald-500' : nodeDrag.dragging.value?.kind === 'group' ? 'bg-slate-500' : 'bg-violet-500'"
           >
-            Drop to add
+            {{ t("integration.editor.dropGhost.label") }}
           </span>
         </div>
       </Transition>
@@ -1313,11 +1407,11 @@ const edgeTypes = {
             <button
               type="button"
               class="flex h-9 items-center gap-1.5 rounded-lg bg-white px-3 text-sm font-medium transition hover:bg-muted/75 hover:cursor-pointer"
-              title="Expand the node palette"
+              :title="t('integration.editor.palette.action.expand.title')"
               @click="void focusPalette()"
             >
               <Plus :size="14" class="text-emerald-600" />
-              Add node
+              {{ t("integration.editor.palette.title") }}
             </button>
           </div>
         </div>
@@ -1336,29 +1430,29 @@ const edgeTypes = {
             @pointerdown="palette.startDrag($event, paletteShellRef)"
           >
             <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
-            <span class="min-w-0 flex-1 truncate text-sm font-medium">Add node</span>
+            <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.editor.palette.title") }}</span>
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
                 <button
                   type="button"
                   class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                  title="Palette placement"
+                  :title="t('integration.editor.palette.action.placement.title')"
                 >
                   <EllipsisVertical :size="14" />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" class="w-36 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('left')">Dock left</DropdownMenuItem>
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('right')">Dock right</DropdownMenuItem>
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.floatHere(paletteShellRef)">Float here</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('left')">{{ t("integration.editor.palette.action.dockLeft") }}</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.dock('right')">{{ t("integration.editor.palette.action.dockRight") }}</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.floatHere(paletteShellRef)">{{ t("integration.editor.panel.action.floatHere") }}</DropdownMenuItem>
                 <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
-                <DropdownMenuItem class="rounded-md text-sm" @select="palette.setCollapsed(true)">Collapse</DropdownMenuItem>
+                <DropdownMenuItem class="rounded-md text-sm" @select="palette.setCollapsed(true)">{{ t("integration.editor.panel.action.collapse") }}</DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
             <button
               type="button"
               class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-              title="Collapse the palette"
+              :title="t('integration.editor.palette.action.collapse.title')"
               @click="palette.setCollapsed(true)"
             >
               <Minus :size="14" />
@@ -1400,11 +1494,11 @@ const edgeTypes = {
             <button
               type="button"
               class="flex h-9 items-center gap-1.5 rounded-lg bg-white px-3 text-sm font-medium transition hover:bg-muted/75 hover:cursor-pointer"
-              title="Expand the minimap"
+              :title="t('integration.editor.minimap.action.expand.title')"
               @click="minimapLayout.setCollapsed(false)"
             >
               <MapIcon :size="14" class="text-emerald-600" />
-              Map
+              {{ t("integration.editor.minimap.title") }}
             </button>
           </div>
         </div>
@@ -1423,31 +1517,31 @@ const edgeTypes = {
               @pointerdown="minimapLayout.startDrag($event, minimapShellRef)"
             >
               <GripVertical :size="14" class="shrink-0 text-muted-foreground/60" />
-              <span class="min-w-0 flex-1 truncate text-sm font-medium">Map</span>
+              <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.editor.minimap.title") }}</span>
               <DropdownMenu>
                 <DropdownMenuTrigger as-child>
                   <button
                     type="button"
                     class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                    title="Minimap placement"
+                    :title="t('integration.editor.minimap.action.placement.title')"
                   >
                     <EllipsisVertical :size="14" />
                   </button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" class="w-40 rounded-lg border border-black/[0.06] bg-white p-1 shadow-lg">
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-left')">Top left</DropdownMenuItem>
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-right')">Top right</DropdownMenuItem>
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-left')">Bottom left</DropdownMenuItem>
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-right')">Bottom right</DropdownMenuItem>
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.floatHere(minimapShellRef)">Float here</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-left')">{{ t("integration.editor.minimap.action.topLeft") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('top-right')">{{ t("integration.editor.minimap.action.topRight") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-left')">{{ t("integration.editor.minimap.action.bottomLeft") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.dock('bottom-right')">{{ t("integration.editor.minimap.action.bottomRight") }}</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.floatHere(minimapShellRef)">{{ t("integration.editor.panel.action.floatHere") }}</DropdownMenuItem>
                   <DropdownMenuSeparator class="my-1 h-px bg-black/[0.06]" />
-                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.setCollapsed(true)">Collapse</DropdownMenuItem>
+                  <DropdownMenuItem class="rounded-md text-sm" @select="minimapLayout.setCollapsed(true)">{{ t("integration.editor.panel.action.collapse") }}</DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
               <button
                 type="button"
                 class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                title="Collapse the minimap"
+                :title="t('integration.editor.minimap.action.collapse.title')"
                 @click="minimapLayout.setCollapsed(true)"
               >
                 <Minus :size="14" />
@@ -1466,14 +1560,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="runWaiting ? 'The bundle is still building \u2014 the run starts when it is ready' : 'Run workflow'" shortcut="mod+enter">
+          <IntegrationsEditorTip :label="runWaiting ? t('integration.editor.tool.run.tooltipWaiting') : t('integration.editor.tool.run.tooltip')" 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"
@@ -1482,16 +1576,20 @@ const edgeTypes = {
             >
               <Loader2 v-if="runBusy" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              {{ runWaiting ? "Waiting for build\u2026" : "Run" }}
+              {{ runWaiting ? t("integration.editor.run.waitingForBuild") : t("integration.editor.run.button") }}
             </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)]">
-          <IntegrationsEditorTip label="Select" shortcut="v">
+          <!-- 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="t('integration.editor.tool.select')" shortcut="v">
               <button
                 type="button"
+                :aria-label="t('integration.editor.tool.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')"
@@ -1499,9 +1597,11 @@ const edgeTypes = {
                 <MousePointer2 :size="14" />
               </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Hand (pan)" shortcut="h">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.hand')" shortcut="h">
               <button
                 type="button"
+                :aria-label="t('integration.editor.tool.hand')"
+                :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')"
@@ -1511,73 +1611,74 @@ const edgeTypes = {
           </IntegrationsEditorTip>
           </div>
 
-          <IntegrationsEditorTip label="Tidy up" shortcut="shift+alt+t">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.tidyUp')" shortcut="shift+alt+t">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="tidyUp"
             >
               <LayoutGrid :size="13" />
-              Tidy up
+              {{ t("integration.editor.tool.tidyUp") }}
             </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Fit view" shortcut="1">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.fitView.tooltip')" shortcut="1">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="flow.fitView({ padding: 0.2, duration: 400, maxZoom: 1 })"
             >
               <Sparkles :size="13" />
-              Fit
+              {{ t("integration.editor.tool.fitView.label") }}
             </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Add sticky note" shortcut="shift+s">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.addSticky.tooltip')" shortcut="shift+s">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="addSticky()"
             >
               <StickyNote :size="13" />
-              Note
+              {{ t("integration.editor.tool.addSticky.label") }}
             </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Add group frame — nodes dropped inside join it">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.addGroup.tooltip')">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="addGroupFrame"
             >
               <GroupIcon :size="13" />
-              Group
+              {{ t("integration.editor.tool.addGroup.label") }}
             </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Workflow variables" shortcut="shift+v">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.variables.tooltip')" shortcut="shift+v">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="variablesOpen = true"
             >
               <Braces :size="13" />
-              Variables
+              {{ t("integration.editor.tool.variables.label") }}
               <span v-if="variableCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ variableCount }}</span>
             </button>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Workflow settings" shortcut="shift+alt+s">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.settings.tooltip')" shortcut="shift+alt+s">
             <button
               type="button"
               class="flex h-8 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-foreground transition hover:bg-black/[0.04]"
               @click="emit('openSettings')"
             >
               <Settings2 :size="13" />
-              Settings
+              {{ t("integration.editor.tool.settings.label") }}
             </button>
           </IntegrationsEditorTip>
 
           <div class="mx-1 h-5 w-px bg-black/10" />
 
-          <IntegrationsEditorTip label="Zoom out" shortcut="-">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomOut')" shortcut="-">
             <button
               type="button"
+              :aria-label="t('integration.editor.tool.zoomOut')"
               class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
               @click="flow.zoomOut({ duration: 150 })"
             >
@@ -1587,12 +1688,17 @@ const edgeTypes = {
           <!-- Tooltip sits on a wrapper span so its as-child merge never
                touches the dropdown trigger (merging both onto one button
                swallowed the trigger's pointerdown and the menu never opened). -->
-          <IntegrationsEditorTip label="Zoom level, 0 resets to 100%" shortcut="0">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomLevel.tooltip')" shortcut="0">
             <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="t('integration.editor.tool.zoomLevel.aria', { pct: 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 }}
@@ -1604,6 +1710,7 @@ const edgeTypes = {
                   v-model="zoomInputText"
                   type="text"
                   inputmode="numeric"
+                  :aria-label="t('integration.editor.tool.zoomLevel.inputAria')"
                   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
@@ -1623,9 +1730,10 @@ const edgeTypes = {
               </DropdownMenu>
             </span>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Zoom in" shortcut="=">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomIn')" shortcut="=">
             <button
               type="button"
+              :aria-label="t('integration.editor.tool.zoomIn')"
               class="flex size-8 items-center justify-center rounded-lg text-foreground transition hover:bg-black/[0.04]"
               @click="flow.zoomIn({ duration: 150 })"
             >
@@ -1644,10 +1752,10 @@ const edgeTypes = {
       >
         <div class="rounded-lg border border-dashed border-black/[0.12] bg-white/80 px-5 py-4 text-center text-sm text-muted-foreground shadow-sm backdrop-blur-sm">
           <div class="font-medium text-foreground mb-1">
-            Empty canvas
+            {{ t("integration.editor.emptyState.title") }}
           </div>
           <p>
-            Drag a trigger and an action from the panel on the left.
+            {{ t("integration.editor.emptyState.hint") }}
           </p>
         </div>
       </div>
@@ -1669,7 +1777,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"
@@ -1682,6 +1805,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)"