@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -56,13 +56,15 @@ import { findingsByNodeField } from "../../utils/validationFindings";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   workflow: { type: Object, required: true },
+  draft: { type: [Object, null], 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 t = useIntegrationsT();
 const { keys: secretKeys } = useIntegrationsSecrets();
-const blob = ref(clone(props.workflow.blob));
+const blob = ref(clone(props.draft ?? props.workflow.blob));
 watch(() => props.workflow.id, () => {
   blob.value = clone(props.workflow.blob);
   syncFromBlob();
@@ -127,7 +129,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 };
 }
@@ -197,7 +199,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));
@@ -206,7 +208,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();
@@ -267,12 +269,12 @@ 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,
@@ -394,7 +396,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);
@@ -407,7 +409,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);
@@ -456,7 +458,7 @@ 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;
@@ -468,20 +470,49 @@ flow.onEdgeUpdate(({ edge, connection }) => {
   syncFromBlob();
   push();
 });
-flow.onEdgesChange((changes) => {
+let pendingEdgeRemovals = [];
+let pendingNodeRemovals = [];
+let removalFlushQueued = false;
+function queueRemovalFlush() {
+  if (removalFlushQueued) return;
+  removalFlushQueued = true;
+  void nextTick(flushRemovals);
+}
+function flushRemovals() {
+  removalFlushQueued = false;
+  const edges = pendingEdgeRemovals;
+  const nodes = pendingNodeRemovals;
+  pendingEdgeRemovals = [];
+  pendingNodeRemovals = [];
+  const goneNodes = new Set(nodes);
   let mutated = false;
+  for (const c of edges) {
+    if (goneNodes.has(c.source) || goneNodes.has(c.target)) continue;
+    blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
+    mutated = true;
+  }
+  if (nodes.length) {
+    dropFromBlob(nodes);
+    mutated = true;
+  }
+  if (mutated) {
+    syncFromBlob();
+    push();
+  }
+}
+flow.onEdgesChange((changes) => {
   for (const c of changes) {
     if (c.type === "remove") {
-      blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
-      mutated = true;
+      pendingEdgeRemovals.push({ id: c.id, source: c.source, target: c.target });
     }
   }
-  if (mutated) push();
+  if (pendingEdgeRemovals.length) queueRemovalFlush();
 });
 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;
+  pendingNodeRemovals.push(...removed);
+  queueRemovalFlush();
 });
 function stripFromGroups(drop) {
   if (!blob.value.groups?.length) return;
@@ -496,7 +527,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;
@@ -527,7 +558,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)
@@ -538,18 +569,22 @@ function addSticky(at) {
   syncFromBlob();
   push();
 }
-function removeBlobNodes(ids) {
+function dropFromBlob(ids) {
   if (!ids.length) return;
   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) {
     if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
   }
   if (selectedId.value && drop.has(selectedId.value)) selectedId.value = null;
+}
+function removeBlobNodes(ids) {
+  if (!ids.length) return;
+  dropFromBlob(ids);
   syncFromBlob();
   push();
 }
@@ -602,9 +637,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) {
@@ -612,18 +647,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();
@@ -739,9 +774,9 @@ 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;
 });
-const selectionIsTrigger = computed(() => !!selectedId.value && blob.value.triggers.some((t) => t.id === selectedId.value));
+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;
@@ -762,7 +797,7 @@ function centerOnNode(id) {
 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)) {
+  if (blob.value.nodes.some((n) => n.id === id) || blob.value.triggers.some((t2) => t2.id === id)) {
     renameIntent.value = false;
     selectedId.value = id;
   }
@@ -776,20 +811,20 @@ const selectedUpstreamOutputs = computed(() => {
   return blob.value.edges.filter((e) => e.to.nodeId === id).flatMap((e) => {
     const source = blob.value.nodes.find((n) => n.id === e.from.nodeId);
     if (!source) return [];
-    const portDef = (findManifest(source.nodeSlug, source.nodeVersion)?.outputs ?? []).find((o) => o.name === e.from.output);
+    const port = portsForNode(source, findManifest(source.nodeSlug, source.nodeVersion), dynamicOutputs.value[source.id]).find((p) => p.name === e.from.output);
     return [{
       nodeId: source.id,
       // 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
+      fields: port?.fields.map((f) => f.name)
     }];
   });
 });
 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 {
@@ -862,7 +897,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 }
     }];
@@ -872,7 +907,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 } });
@@ -950,7 +985,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) {
@@ -962,7 +997,7 @@ function spliceIntoEdge(edgeId, payload) {
   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.`);
+    toast.error(t("integration.editor.splice.error.terminal", { name: resolveLocalized(manifest.name) || manifest.slug }));
     return;
   }
   const a = nodePosition(edge.from.nodeId);
@@ -1210,6 +1245,14 @@ async function focusPalette() {
   paletteRef.value?.focusSearch();
 }
 const lightboxOpen = computed(() => !!selection.value);
+watch(lightboxOpen, (open) => {
+  if (!open) renameIntent.value = false;
+});
+function onConfigOpenAutoFocus(event) {
+  if (renameIntent.value) return;
+  event.preventDefault();
+  event.target?.focus();
+}
 const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
@@ -1298,7 +1341,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"
       >
@@ -1351,7 +1394,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>
@@ -1404,11 +1447,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>
@@ -1427,29 +1470,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" />
@@ -1491,11 +1534,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>
@@ -1514,31 +1557,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" />
@@ -1564,7 +1607,7 @@ const edgeTypes = {
           <!-- 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"
@@ -1573,7 +1616,7 @@ 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>
 
@@ -1582,10 +1625,10 @@ const edgeTypes = {
           <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">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.select')" shortcut="v">
               <button
                 type="button"
-                aria-label="Select"
+                :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'"
@@ -1594,10 +1637,10 @@ 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="Hand (pan)"
+                :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'"
@@ -1608,74 +1651,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="Zoom out"
+              :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 })"
             >
@@ -1685,7 +1728,7 @@ 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>
@@ -1695,7 +1738,7 @@ const edgeTypes = {
                        users do not need told and without the value they do. -->
                   <button
                     type="button"
-                    :aria-label="`Zoom level ${zoomPct}`"
+                    :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 }}
@@ -1707,7 +1750,7 @@ const edgeTypes = {
                   v-model="zoomInputText"
                   type="text"
                   inputmode="numeric"
-                  aria-label="Zoom level in percent"
+                  :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
@@ -1727,10 +1770,10 @@ const edgeTypes = {
               </DropdownMenu>
             </span>
           </IntegrationsEditorTip>
-          <IntegrationsEditorTip label="Zoom in" shortcut="=">
+          <IntegrationsEditorTip :label="t('integration.editor.tool.zoomIn')" shortcut="=">
             <button
               type="button"
-              aria-label="Zoom in"
+              :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 })"
             >
@@ -1749,10 +1792,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>
@@ -1787,6 +1830,7 @@ const edgeTypes = {
            form as a strip down the left of an empty workbench. -->
       <DialogContent
         :show-close-button="false"
+        @open-auto-focus="onConfigOpenAutoFocus"
         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)]'"
       >