@revenexx/studio-integrations 1.1.0 → 1.2.0

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

@@ -50,7 +50,10 @@ import { layoutWorkflowNodes } from "./workflowLayout";
 import { TRIGGER_TEMPLATES, findManifest } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest, portsForNode } from "../../data/nodeInputData";
 import { computeLoopBodies, iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
-import { portFromHandleId } from "../../data/handleId";
+import { inputHandleId, outputHandleId, portFromHandleId } from "../../data/handleId";
+import { OPPOSITE_SIDE } from "./canvasSides";
+import { deepClone } from "../../utils/deepClone";
+import { copyToClipboard } from "../../utils/clipboard";
 import { groupFindingsByNode } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
 import { findingsByNodeField } from "../../utils/validationFindings";
@@ -65,14 +68,11 @@ const props = defineProps({
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
 const t = useIntegrationsT();
 const { keys: secretKeys } = useIntegrationsSecrets();
-const blob = ref(clone(props.draft ?? props.workflow.blob));
+const blob = ref(deepClone(props.draft ?? props.workflow.blob));
 watch(() => props.workflow.id, () => {
-  blob.value = clone(props.workflow.blob);
+  blob.value = deepClone(props.workflow.blob);
   syncFromBlob();
 });
-function clone(v) {
-  return JSON.parse(JSON.stringify(v));
-}
 const vfNodes = ref([]);
 const vfEdges = ref([]);
 const flow = useVueFlow();
@@ -80,7 +80,7 @@ const invalidNodeMessages = computed(() => findingsByNodeField(props.workflow.wa
 const dynamicOutputs = ref({});
 const invalidNodeFields = computed(() => {
   const out = {};
-  for (const g of groupFindingsByNode(props.workflow.warnings ?? [], props.workflow.blob.nodes, () => "")) {
+  for (const g of groupFindingsByNode(props.workflow.warnings ?? [], props.workflow.blob.nodes, () => "", (_n, key) => key)) {
     if (g.nodeId) out[g.nodeId] = g.fields;
   }
   return out;
@@ -160,9 +160,6 @@ function nodePosition(id) {
 function pickSourceSide(_sourceId, _targetId) {
   return "bottom";
 }
-function oppositeSide(s) {
-  return s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
-}
 function stickyArea(s) {
   return (s.size?.width ?? 240) * (s.size?.height ?? 160);
 }
@@ -252,6 +249,7 @@ function markBorn(...ids) {
 function bornClass(id) {
   return bornIds.value.has(id) ? "node-pop-in" : void 0;
 }
+const NODE_FALLBACK_POSITION = { x: 240, y: 80 };
 function syncFromBlob() {
   const loops = nodeLoopData(blob.value.nodes, blob.value.edges);
   const stickies = [...blob.value.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
@@ -304,7 +302,7 @@ function syncFromBlob() {
     ...blob.value.nodes.filter((n) => !collapsedBy.has(n.id)).map((n) => ({
       id: n.id,
       type: "workflow",
-      position: n.position ?? { x: 240, y: 80 },
+      position: n.position ?? NODE_FALLBACK_POSITION,
       class: bornClass(n.id),
       data: {
         ...n,
@@ -330,8 +328,8 @@ function syncFromBlob() {
       ...vf,
       source,
       target,
-      sourceHandle: srcGroup ? "default__bottom" : vf.sourceHandle,
-      targetHandle: tgtGroup ? "__in__top" : vf.targetHandle
+      sourceHandle: srcGroup ? outputHandleId("default", "bottom") : vf.sourceHandle,
+      targetHandle: tgtGroup ? inputHandleId("top") : vf.targetHandle
     });
   }
   const bySource = /* @__PURE__ */ new Map();
@@ -355,15 +353,15 @@ function makeVfEdge(id, sourceId, targetId, output) {
   const manifest = wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
   const isBranchPort = (manifest?.outputs ?? []).some((o) => o.sourceFromConfig) || ["true", "false"].includes(output);
   const srcSide = pickSourceSide(sourceId, targetId);
-  const tgtSide = oppositeSide(srcSide);
+  const tgtSide = OPPOSITE_SIDE[srcSide];
   const order = orderedOutputPorts(sourceId);
   const portIndex = order.indexOf(output);
   return {
     id,
     source: sourceId,
     target: targetId,
-    sourceHandle: `${output}__${srcSide}`,
-    targetHandle: `__in__${tgtSide}`,
+    sourceHandle: outputHandleId(output, srcSide),
+    targetHandle: inputHandleId(tgtSide),
     type: "flow",
     data: {
       kind,
@@ -561,7 +559,7 @@ function removeBlobNode(id) {
   push();
 }
 function push() {
-  emit("change", clone(blob.value));
+  emit("change", deepClone(blob.value));
 }
 const STICKY_DEFAULT_SIZE = { width: 240, height: 160 };
 function updateSticky(id, patch) {
@@ -622,7 +620,7 @@ function duplicateBlobNodes(ids) {
   src.forEach((n, i) => idMap.set(n.id, `n-${stamp}${i}`));
   const offset = 40;
   const copies = src.map((n) => ({
-    ...clone(n),
+    ...deepClone(n),
     id: idMap.get(n.id),
     position: { x: (n.position?.x ?? 0) + offset, y: (n.position?.y ?? 0) + offset }
   }));
@@ -661,12 +659,10 @@ async function copyNodes(ids) {
   if (!nodes.length) return;
   const inner = new Set(nodes.map((n) => n.id));
   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(t("integration.editor.clipboard.toast.copied", nodes.length));
-  } catch {
-    toast.error(t("integration.editor.clipboard.error.write"));
-  }
+  await copyToClipboard(JSON.stringify({ kind: CLIP_KIND, version: 1, nodes, edges }, null, 2), {
+    copied: t("integration.editor.clipboard.toast.copied", nodes.length),
+    failed: t("integration.editor.clipboard.error.write")
+  });
 }
 async function pasteNodes(at) {
   let text = "";
@@ -695,7 +691,7 @@ async function pasteNodes(at) {
   const dx = at ? Math.round(at.x - minX) : 40;
   const dy = at ? Math.round(at.y - minY) : 40;
   blob.value.nodes.push(...payload.nodes.map((n) => ({
-    ...clone(n),
+    ...deepClone(n),
     id: idMap.get(n.id),
     position: { x: (n.position?.x ?? 0) + dx, y: (n.position?.y ?? 0) + dy }
   })));
@@ -906,10 +902,10 @@ function groupAtPoint(pos) {
 function addGroupFrame() {
   const rect = flow.vueFlowRef.value?.getBoundingClientRect();
   const center = rect ? flow.screenToFlowCoordinate({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }) : { x: 120, y: 120 };
-  addFromPayload({ kind: "group" }, {
+  addFromPayload({ kind: "group" }, freeSpotNear({
     x: center.x - EMPTY_GROUP_SIZE.width / 2,
     y: center.y - EMPTY_GROUP_SIZE.height / 2
-  });
+  }));
 }
 function adoptIntoGroupAt(id, pos) {
   const g = groupAtPoint(pos);
@@ -970,6 +966,21 @@ function onDrop(ev) {
   const payload = JSON.parse(raw);
   addFromPayload(payload, flow.screenToFlowCoordinate({ x: ev.clientX, y: ev.clientY }));
 }
+const CASCADE_STEP = 2 * GRID;
+function freeSpotNear(at) {
+  const taken = [
+    ...vfNodes.value.map((n) => n.position),
+    ...blob.value.nodes.map((n) => n.position ?? NODE_FALLBACK_POSITION),
+    ...Object.values(blob.value.triggerPositions ?? {})
+  ];
+  const occupied = (p) => taken.some((q) => Math.abs(q.x - p.x) < GRID && Math.abs(q.y - p.y) < GRID);
+  const spot = { x: snap(at.x), y: snap(at.y) };
+  for (let i = 0; i <= taken.length && occupied(spot); i++) {
+    spot.x += CASCADE_STEP;
+    spot.y += CASCADE_STEP;
+  }
+  return spot;
+}
 function onPaletteInsert(payload) {
   if (pendingConnect.value && payload.kind === "manifest") {
     const pc = pendingConnect.value;
@@ -1003,7 +1014,7 @@ function onPaletteInsert(payload) {
   pendingSpliceEdgeId.value = null;
   const rect = flow.vueFlowRef.value?.getBoundingClientRect();
   const center = rect ? flow.screenToFlowCoordinate({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }) : { x: 120, y: 120 };
-  addFromPayload(payload, center);
+  addFromPayload(payload, freeSpotNear(center));
 }
 const pendingSpliceEdgeId = ref(null);
 provide("workflow-edge-actions", {

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

@@ -11,6 +11,7 @@ import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
+import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import WorkflowNodeView from "./WorkflowNodeView.vue";
 import WorkflowTriggerView from "./WorkflowTriggerView.vue";
 import StickyNoteView from "./StickyNoteView.vue";
@@ -18,8 +19,11 @@ import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { OPPOSITE_SIDE } from "./canvasSides";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   workflow: { type: Object, required: true },
   draftPending: { type: Boolean, required: false }
@@ -118,7 +122,6 @@ function buildPreview(blob) {
     return { x: 0, y: 0 };
   };
   const pickSourceSide = (_sourceId, _targetId) => "bottom";
-  const opposite = (s) => s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
   const edgeKind = (sourceNodeId, output) => {
     const wn = blob.nodes.find((n) => n.id === sourceNodeId);
     if (!wn) return "default";
@@ -182,8 +185,8 @@ function buildPreview(blob) {
       id: e.id,
       source: e.from.nodeId,
       target: e.to.nodeId,
-      sourceHandle: `${e.from.output}__${srcSide}`,
-      targetHandle: `__in__${opposite(srcSide)}`,
+      sourceHandle: outputHandleId(e.from.output, srcSide),
+      targetHandle: inputHandleId(OPPOSITE_SIDE[srcSide]),
       type: "flow",
       selectable: false,
       data: { kind, label: isBranchPort ? e.from.output : void 0 },
@@ -222,7 +225,7 @@ async function select(revision) {
       buildPreview(detail.blob);
     }
   } catch (e) {
-    toast.error(e?.message ?? t("integration.history.toast.loadRevisionFailed"));
+    toast.error(errorReason(e, t("integration.history.toast.loadRevisionFailed")));
   } finally {
     detailLoading.value = false;
   }
@@ -239,7 +242,7 @@ async function restoreRevision(rev) {
     await loadList(true);
     void select(null);
   } catch (e) {
-    toast.error(e?.message ?? t("integration.history.toast.restoreFailed"));
+    toast.error(errorReason(e, t("integration.history.toast.restoreFailed")));
   } finally {
     restoring.value = null;
   }
@@ -328,6 +331,14 @@ onMounted(() => {
         </p>
       </div>
 
+      <!-- In the aside's chrome rather than in the scrolling list, so it is on the
+           page while the revisions are on their way (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.history.heading.title')"
+        :loading="listLoading && !entries.length"
+        :text="t('integration.history.state.loading')"
+      />
+
       <div class="flex-1 overflow-y-auto p-2 space-y-1">
         <!-- Current (live) version -->
         <button
@@ -385,7 +396,7 @@ onMounted(() => {
           {{ revisionsApi.error.value }}
         </p>
 
-        <div v-if="listLoading && !entries.length" class="space-y-2 px-2 py-2">
+        <div v-if="listLoading && !entries.length" aria-hidden="true" class="space-y-2 px-2 py-2">
           <div v-for="n in 5" :key="`sk-rev-${n}`" class="flex items-center gap-3 py-1.5">
             <div class="size-7 shrink-0 rounded-md bg-black/[0.07] animate-pulse" />
             <div class="min-w-0 flex-1 space-y-1.5">

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

@@ -5,8 +5,12 @@ import { NodeToolbar } from "@vue-flow/node-toolbar";
 import * as Lucide from "lucide-vue-next";
 import { Copy, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, Repeat, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { NODE_CATEGORIES, findManifest, isVersionExecutable } from "../../data/integrationNodeCatalog";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { isTerminalManifest } from "../../data/nodeInputData";
-import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
+import { resolveLocalized } from "../../utils/localize";
+import { SIDE_POSITION, distributedStyle } from "./canvasSides";
+import { fieldDisplayLabel } from "../../utils/validationFindings";
+import { nodeDisplayName } from "../../utils/nodeDisplayName";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -17,11 +21,11 @@ defineEmits(["updateNodeInternals"]);
 const t = useIntegrationsT();
 const manifest = computed(() => findManifest(props.data.nodeSlug, props.data.nodeVersion));
 const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.value?.category));
-const title = computed(
-  () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
-);
+const title = computed(() => nodeDisplayName(props.data));
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
-const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.join(", ") }));
+const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, {
+  fields: invalidFields.value.map((key) => fieldDisplayLabel(props.data, key)).join(", ")
+}));
 const insideLoops = computed(() => props.data.__loop?.inside ?? []);
 const repeatsLabel = computed(() => t("integration.canvas.node.badge.repeats", insideLoops.value.length, { iterators: insideLoops.value.join(", ") }));
 const bodySize = computed(() => props.data.__loop?.bodySize);
@@ -111,14 +115,6 @@ function portTone(p) {
 const showPortLabels = computed(() => resolvePending.value || outputs.value.length > 1 || outputs.value.some((p) => p.kind !== "default"));
 const IN_SIDES = ["top"];
 const OUT_SIDES = ["bottom"];
-function sideToPosition(s) {
-  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
-}
-function distributedStyle(side, i, total) {
-  const pct = `${(i + 1) / (total + 1) * 100}%`;
-  if (side === "top" || side === "bottom") return { left: pct };
-  return { top: pct };
-}
 const flow = useVueFlow();
 const hovered = ref(false);
 let hoverTimer = null;
@@ -192,22 +188,22 @@ function remove() {
   <NodeToolbar v-if="nodeActions" :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-foreground/80 hover:bg-muted/50"
+      class="flex size-6 items-center justify-center rounded text-sm text-foreground/80 hover:bg-muted/50"
       :title="t('integration.canvas.node.action.duplicate')"
       :aria-label="t('integration.canvas.node.action.duplicateAria')"
       @click="duplicate"
     >
-      <Copy :size="11" />
+      <Copy :size="13" />
     </button>
     <div class="h-4 w-px bg-black/10" />
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      class="flex size-6 items-center justify-center rounded text-sm text-rose-600 hover:bg-rose-50"
       :title="t('integration.common.action.delete')"
       :aria-label="t('integration.canvas.node.action.deleteAria')"
       @click="remove"
     >
-      <TrashBin :size="11" />
+      <TrashBin :size="13" />
     </button>
   </NodeToolbar>
 
@@ -239,10 +235,10 @@ function remove() {
        dots feed the same `__in` port. Clearly visible, ring + shadow. -->
   <Handle
     v-for="side in IN_SIDES"
-    :id="`__in__${side}`"
+    :id="inputHandleId(side)"
     :key="`in-${side}`"
     type="target"
-    :position="sideToPosition(side)"
+    :position="SIDE_POSITION[side]"
     :title="t('integration.canvas.node.handle.input')"
     class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-slate-700"
   />
@@ -252,10 +248,10 @@ function remove() {
   <template v-for="side in OUT_SIDES" :key="`side-${side}`">
     <Handle
       v-for="(p, i) in outputs"
-      :id="`${p.name}__${side}`"
+      :id="outputHandleId(p.name, side)"
       :key="`${p.name}-${side}`"
       type="source"
-      :position="sideToPosition(side)"
+      :position="SIDE_POSITION[side]"
       :title="handleTitle(p)"
       :style="distributedStyle(side, i, outputs.length)"
       class="!size-3 !rounded-full !border-2 !border-white !shadow-sm transition-all hover:!size-3.5"

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

@@ -24,10 +24,14 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { OPPOSITE_SIDE } from "./canvasSides";
+import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { nodeLoopData } from "../../data/loopBody";
 import { triggerGlyph } from "../../data/triggerGlyphs";
+import { formatDuration } from "../../utils/formatDuration";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   workflow: { type: Object, required: true },
   initialRunId: { type: [String, null], required: false },
@@ -59,7 +63,7 @@ async function loadRuns(reset = false) {
     runsPage.value = res.page;
     runsLastPage.value = res.lastPage;
   } catch (e) {
-    toast.error(e?.message ?? t("integration.replay.toast.loadRunsFailed"));
+    toast.error(errorReason(e, t("integration.replay.toast.loadRunsFailed")));
   } finally {
     runsLoading.value = false;
   }
@@ -101,7 +105,7 @@ async function loadSteps(runId, isPoll = false) {
     }
   } catch (e) {
     if (selectedRunId.value === runId) {
-      stepsError.value = e?.message ?? t("integration.replay.error.loadStepsFailed");
+      stepsError.value = errorReason(e, t("integration.replay.error.loadStepsFailed"));
     }
   } finally {
     if (!isPoll) stepsLoading.value = false;
@@ -293,7 +297,6 @@ const vfEdges = computed(() => {
     return { x: 0, y: 0 };
   };
   const pickSourceSide = (_sourceId, _targetId) => "bottom";
-  const opposite = (s) => s === "top" ? "bottom" : s === "right" ? "left" : s === "bottom" ? "top" : "right";
   const edgeKind = (sourceNodeId, output) => {
     const wn = blob.nodes.find((n) => n.id === sourceNodeId);
     if (!wn) return "default";
@@ -331,8 +334,8 @@ const vfEdges = computed(() => {
       id: e.id,
       source: e.from.nodeId,
       target: e.to.nodeId,
-      sourceHandle: `${e.from.output}__${srcSide}`,
-      targetHandle: `__in__${opposite(srcSide)}`,
+      sourceHandle: outputHandleId(e.from.output, srcSide),
+      targetHandle: inputHandleId(OPPOSITE_SIDE[srcSide]),
       type: "flow",
       selectable: false,
       animated: traversed && !targetReached,
@@ -395,12 +398,6 @@ function formatTime(iso) {
     return String(iso);
   }
 }
-function formatDuration(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms} ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)} s`;
-  return `${Math.floor(ms / 6e4)}m ${Math.round(ms % 6e4 / 1e3)}s`;
-}
 function pretty(v) {
   try {
     return JSON.stringify(v, null, 2);

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

@@ -3,6 +3,8 @@ import { computed, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { SIDE_POSITION } from "./canvasSides";
+import { outputHandleId } from "../../data/handleId";
 import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
 import { resolveDisplayName } from "../../utils/localize";
 import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
@@ -45,21 +47,18 @@ function remove() {
   flow.removeNodes([props.id]);
 }
 const OUT_SIDES = ["bottom"];
-function sideToPosition(s) {
-  return s === "top" ? Position.Top : s === "right" ? Position.Right : s === "bottom" ? Position.Bottom : Position.Left;
-}
 </script>
 
 <template>
   <NodeToolbar :is-visible="hovered || selected" :position="Position.Top" :offset="8" class="flex items-center gap-1 rounded-md border border-black/[0.08] bg-white px-1 py-1 shadow-md" @mouseenter="onHoverEnter" @mouseleave="onHoverLeave">
     <button
       type="button"
-      class="flex h-6 items-center gap-1 rounded px-1.5 text-sm text-rose-600 hover:bg-rose-50"
+      class="flex size-6 items-center justify-center rounded text-sm text-rose-600 hover:bg-rose-50"
       :title="t('integration.common.action.delete')"
       :aria-label="t('integration.canvas.trigger.action.deleteAria')"
       @click="remove"
     >
-      <TrashBin :size="11" />
+      <TrashBin :size="13" />
     </button>
   </NodeToolbar>
 
@@ -97,10 +96,10 @@ function sideToPosition(s) {
        "default"; the side suffix is stripped on persist. -->
   <Handle
     v-for="side in OUT_SIDES"
-    :id="`default__${side}`"
+    :id="outputHandleId('default', side)"
     :key="side"
     type="source"
-    :position="sideToPosition(side)"
+    :position="SIDE_POSITION[side]"
     class="!size-3 !rounded-full !border-2 !border-white !bg-emerald-500 !shadow-sm transition-all hover:!size-3.5 hover:!bg-emerald-600"
   />
 </template>

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

@@ -19,6 +19,8 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { deepClone } from "../../utils/deepClone";
+import { copyToClipboard } from "../../utils/clipboard";
 import { languageKeyRead, languageKeyToWrite, resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   open: { type: Boolean, required: true },
@@ -34,7 +36,7 @@ const jsonErrors = reactive({});
 const descDrafts = reactive({});
 watch(() => props.open, (o) => {
   if (!o) return;
-  working.value = JSON.parse(JSON.stringify(props.variables));
+  working.value = deepClone(props.variables);
   for (const k of Object.keys(jsonDrafts)) delete jsonDrafts[k];
   for (const k of Object.keys(jsonErrors)) delete jsonErrors[k];
   for (const k of Object.keys(descDrafts)) delete descDrafts[k];
@@ -146,12 +148,10 @@ function addVariable() {
   newKey.value = "";
 }
 async function copyUsage(key) {
-  try {
-    await navigator.clipboard.writeText(`\${{ vars.${key} }}`);
-    toast.success(t("integration.workflows.variables.toast.copied"));
-  } catch {
-    toast.error(t("integration.workflows.variables.toast.copyFailed"));
-  }
+  await copyToClipboard(`\${{ vars.${key} }}`, {
+    copied: t("integration.workflows.variables.toast.copied"),
+    failed: t("integration.workflows.variables.toast.copyFailed")
+  });
 }
 </script>
 

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

@@ -1,17 +1,12 @@
 <script setup>
-import { RefreshCircle as Loader2, MenuDots as MoreHorizontal } from "#solar-icons";
+import { MenuDots as MoreHorizontal } from "#solar-icons";
 import { toast } from "vue-sonner";
-import { apiValidationIssues } from "../../utils/apiError";
+import { apiValidationIssues, errorReason } from "../../utils/apiError";
+import WorkflowDeleteDialog from "./WorkflowDeleteDialog.vue";
 import WorkflowDuplicateDialog from "./WorkflowDuplicateDialog.vue";
 import WorkflowIconView from "./WorkflowIconView.vue";
 import { Layers } from "#solar-icons";
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
   Badge,
   Button,
   DropdownMenu,
@@ -27,7 +22,7 @@ defineProps({
 });
 const t = useIntegrationsT();
 const router = useRouter();
-const { remove, toggleActive } = useIntegrationsWorkflows();
+const { toggleActive } = useIntegrationsWorkflows();
 const duplicateTarget = ref(null);
 const duplicateOpen = ref(false);
 function askDuplicate(wf) {
@@ -77,21 +72,11 @@ function runBadge(status) {
       return { label: t("integration.workflows.table.status.run.cancelled"), class: "bg-slate-100 text-slate-700 border-slate-200" };
   }
 }
-const pendingDelete = ref(null);
-const deleting = ref(false);
+const deleteOpen = ref(false);
+const deleteTarget = ref(null);
 function askDelete(wf) {
-  pendingDelete.value = wf;
-}
-async function confirmDelete() {
-  const wf = pendingDelete.value;
-  if (!wf) return;
-  deleting.value = true;
-  try {
-    await remove(wf.id);
-    pendingDelete.value = null;
-  } finally {
-    deleting.value = false;
-  }
+  deleteTarget.value = { id: wf.id, name: wf.name };
+  deleteOpen.value = true;
 }
 async function onToggleActive(wf) {
   try {
@@ -102,7 +87,7 @@ async function onToggleActive(wf) {
       toast.error(t("integration.workflows.table.toast.activateBlocked", issues.length, { name: wf.name }));
       return;
     }
-    toast.error(e?.message ?? t("integration.workflows.table.toast.statusChangeFailed"));
+    toast.error(errorReason(e, t("integration.workflows.table.toast.statusChangeFailed")));
   }
 }
 function lifecycleOf(wf) {
@@ -405,30 +390,7 @@ const columns = computed(() => [
     </template>
   </DataTable>
 
-  <AlertDialog :open="!!pendingDelete" @update:open="(v) => {
-  if (!v) pendingDelete = null;
-}">
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>{{ t("integration.workflows.table.deleteDialog.title") }}</AlertDialogTitle>
-        <AlertDialogDescription>
-          <span v-if="pendingDelete">
-            <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
-            {{ t("integration.workflows.table.deleteDialog.description") }}
-          </span>
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-          {{ t("integration.common.action.cancel") }}
-        </Button>
-        <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
-          <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-          {{ deleting ? t("integration.workflows.table.deleteDialog.action.deleting") : t("integration.common.action.delete") }}
-        </Button>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
+  <WorkflowDeleteDialog v-model:open="deleteOpen" :workflow="deleteTarget" />
 
   <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 </template>

package/dist/runtime/components/Integrations/canvasSides.d.ts

@@ -0,0 +1,48 @@
+import { Position } from '@vue-flow/core';
+import type { Side } from '../../data/handleId.js';
+/**
+ * What a connection dot's side means to the canvas: where the library draws it, what
+ * faces it, and where along the edge it sits.
+ *
+ * `data/handleId.ts` owns what a side *is* — the closed set of four, and the id a dot
+ * carries. This owns what the canvas does with one. The split is the import: that
+ * module has none, so its round trip can be proved without the canvas library, and
+ * `Position` is Vue Flow's. Keeping the two apart is what stops a string-shape contract
+ * from depending on a rendering library.
+ *
+ * **Every map here is a `Record<Side, …>`, and that is the point of the module.** Each
+ * was a four-branch ternary ending in an `else`, in a component, and two components had
+ * their own copy of the first one. An `else` absorbs a fifth side silently: a `centre`
+ * dot would have been drawn on the **left**, called `right` its opposite, and spread
+ * along the wrong axis — with no type error and nothing on screen to notice, because
+ * every one of those is a plausible answer for *some* side.
+ *
+ * A `Record<Side, …>` cannot do that. Add a name to `SIDES` and all three of these stop
+ * compiling until they say what it means. That is weaker than PO-258's "one edit" and
+ * better than it: it is still more than one edit, but none of them can be forgotten.
+ */
+/**
+ * The side a dot is on → the position Vue Flow draws it at.
+ *
+ * The two vocabularies happen to be the same four strings today — `Position.Top` is
+ * `'top'` — so this could be a cast, and is not. A cast would tie us to that
+ * coincidence holding in a library we do not own, and it would say nothing when it
+ * stopped: the studio's sides are its own, and this is where they are translated.
+ */
+export declare const SIDE_POSITION: Record<Side, Position>;
+/**
+ * The side facing a given one, which is where an edge arriving from it should land.
+ *
+ * "Opposite" is only meaningful because the four sides are two axes. A fifth position
+ * that is not on an axis — a centre dot — has no opposite at all, and the honest answer
+ * then is to change this type rather than to invent one; the compiler will ask.
+ */
+export declare const OPPOSITE_SIDE: Record<Side, Side>;
+/**
+ * Place the `i`th of `total` output dots evenly along a side.
+ *
+ * Evenly *between* the corners rather than across them — `(i + 1) / (total + 1)` — so
+ * the first and last dot sit inside the card's edge instead of on it, and a single
+ * output lands in the middle.
+ */
+export declare function distributedStyle(side: Side, i: number, total: number): Record<string, string>;