@revenexx/studio-integrations 1.1.1 → 1.2.0

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

@@ -1,4 +1,5 @@
-import type { WorkflowRun } from '../../types/integrations.js';
+import type { RunStatus, TriggerType, WorkflowRun } from '../../types/integrations.js';
+import type { RunSort, RunSortDirection } from '../../utils/runFeedQuery.js';
 type __VLS_Props = {
     runs: WorkflowRun[];
     loading?: boolean;
@@ -7,14 +8,71 @@ type __VLS_Props = {
     pagination?: boolean;
     /** false inside a workflow — the context makes the column redundant. */
     showWorkflow?: boolean;
+    /**
+     * The owning list reads its page and its narrowing from the platform.
+     *
+     * The table then renders the rows it is handed and reports what the operator
+     * asked for, instead of narrowing and slicing an array. That is what lets the
+     * list reach past the newest hundred runs at all (PO-369).
+     */
+    serverMode?: boolean;
+    /** How many runs match the narrowing. The pager's "of 7"; server mode only. */
+    total?: number;
+    /**
+     * How many rows a page holds — the SAME number the page asks the platform for.
+     *
+     * The shared table works its footer's "showing 1–25 of 140" out from its own
+     * page size, so a table left on its default while the request asks for another
+     * number states a range that is simply wrong: it counted twenty where
+     * twenty-five had arrived.
+     */
+    perPage?: number;
+    /** The narrowing in force. Owned by the page, drawn here. */
+    status?: RunStatus[];
+    triggerType?: TriggerType | '';
+    /** The order the platform is reading the list in. Server mode only. */
+    sort?: RunSort;
+    direction?: RunSortDirection;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & {
+    /** 1-based, as the platform pages. The shared table counts from zero. */
+    'page'?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (text: string) => any;
     changed: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    narrow: (patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any;
+    "page-size": (size: number) => any;
+    reorder: (order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any;
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((text: string) => any) | undefined;
     onChanged?: (() => any) | undefined;
+    onNarrow?: ((patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any) | undefined;
+    "onPage-size"?: ((size: number) => any) | undefined;
+    onReorder?: ((order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
+    sort: RunSort;
     loading: boolean;
+    total: number;
+    direction: RunSortDirection;
+    triggerType: TriggerType | "";
+    perPage: number;
     pagination: boolean;
     showWorkflow: boolean;
+    serverMode: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { RefreshCircle as Loader2 } from "#solar-icons";
 import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@revenexx/studio";
+import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { useIntegrationsCredentials } from "../../composables/useIntegrationsCredentials";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const emit = defineEmits(["created"]);
@@ -64,7 +65,15 @@ async function importAccount(account) {
         </DialogDescription>
       </DialogHeader>
 
-      <div v-if="sftp.loading.value && !activeAccounts.length" class="space-y-2">
+      <!-- Mounts with the dialog, like the one in the create dialog and with the same
+           limit written down there (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.credentials.sftpImport.title')"
+        :loading="sftp.loading.value && !activeAccounts.length"
+        :text="t('integration.credentials.sftpImport.state.loading')"
+      />
+
+      <div v-if="sftp.loading.value && !activeAccounts.length" aria-hidden="true" class="space-y-2">
         <div v-for="n in 3" :key="`sk-${n}`" class="h-9 rounded-md bg-black/[0.07] animate-pulse" />
       </div>
       <p v-else-if="!activeAccounts.length" class="py-4 text-center text-sm text-muted-foreground">

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

@@ -171,7 +171,7 @@ function onViewMouseDown(e) {
         v-for="(c, i) in STICKY_COLORS"
         :key="i"
         type="button"
-        class="size-5 rounded-full border transition hover:scale-110"
+        class="size-6 rounded-full border transition hover:scale-110"
         :class="(data.sticky.color ?? 0) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
         :style="{ backgroundColor: c.bg, borderColor: c.border }"
         :title="t(c.nameKey)"

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

@@ -21,10 +21,12 @@ import {
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 import { TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
+import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import TemplateCard from "./TemplateCard.vue";
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { resolveLocalized } from "../../utils/localize";
+import { errorReason } from "../../utils/apiError";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const t = useIntegrationsT();
 const router = useRouter();
@@ -102,7 +104,7 @@ async function submit() {
     open.value = false;
     await router.push(`/integrations/workflows/${created.id}`);
   } catch (e) {
-    error.value = e.message || t("integration.workflows.create.error.generic");
+    error.value = errorReason(e, t("integration.workflows.create.error.generic"));
   } finally {
     submitting.value = false;
   }
@@ -126,7 +128,7 @@ async function useTemplate(slug) {
     open.value = false;
     await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    toast.error(e?.message ?? t("integration.workflows.create.toast.templateError"));
+    toast.error(errorReason(e, t("integration.workflows.create.toast.templateError")));
   } finally {
     instantiatingSlug.value = null;
   }
@@ -143,6 +145,19 @@ async function useTemplate(slug) {
       <!-- Switcher: the same TabBar the studio surfaces use. -->
       <TabBar v-model="mode" :tabs="modeTabs" class="-mt-1 shrink-0" />
 
+      <!-- Beside the switcher rather than inside the template half, and that is the
+           whole point: the dialog opens on the blank half, so a region placed in the
+           other branch would be inserted at the moment the reader switches to it —
+           with the catalogue already on its way and its own text already set, which is
+           a live region nothing was listening to. Out here it is in the dialog from
+           the moment it opens, and the text changes under a reader who is already
+           there (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.workflows.create.tab.template')"
+        :loading="mode === 'template' && templatesLoading && !templates.length"
+        :text="t('integration.workflows.create.template.state.loading')"
+      />
+
       <!-- ── Blank ─────────────────────────────────────────────────────────── -->
       <!-- -m-1/p-1 keeps the selection rings clear of the scroll clipping. -->
       <form v-if="mode === 'blank'" class="-m-1 max-h-[65vh] space-y-3 overflow-y-auto p-1" @submit.prevent="submit">
@@ -261,7 +276,7 @@ async function useTemplate(slug) {
           >
         </div>
 
-        <div v-if="templatesLoading && !templates.length" class="grid gap-2 p-1 sm:grid-cols-2">
+        <div v-if="templatesLoading && !templates.length" aria-hidden="true" class="grid gap-2 p-1 sm:grid-cols-2">
           <div v-for="n in 6" :key="`sk-tpl-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
             <div class="flex items-center gap-2">
               <div class="size-7 rounded-md bg-black/[0.07] animate-pulse" />

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

@@ -0,0 +1,18 @@
+export type DeletableWorkflow = {
+    id: number;
+    name: string;
+};
+type __VLS_Props = {
+    workflow: DeletableWorkflow | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    deleted: (workflow: DeletableWorkflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDeleted?: ((workflow: DeletableWorkflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, watch } from "vue";
+import { RefreshCircle as Loader2 } from "#solar-icons";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  Button
+} from "@revenexx/studio";
+import { useIntegrationsWorkflows } from "../../composables/useIntegrationsWorkflows";
+import { errorReason } from "../../utils/apiError";
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  workflow: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["deleted"]);
+const t = useIntegrationsT();
+const { remove } = useIntegrationsWorkflows();
+const busy = ref(false);
+const error = ref(null);
+watch(open, (o) => {
+  if (o) error.value = null;
+});
+async function confirm() {
+  const wf = props.workflow;
+  if (!wf || busy.value) return;
+  busy.value = true;
+  error.value = null;
+  try {
+    await remove(wf.id);
+    open.value = false;
+    emit("deleted", wf);
+  } catch (e) {
+    error.value = errorReason(e, t("integration.workflows.delete.error.generic"));
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <AlertDialog :open="open" @update:open="(v) => {
+  if (!v && !busy) open = false;
+}">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ t("integration.workflows.delete.dialog.title") }}</AlertDialogTitle>
+        <AlertDialogDescription>
+          <span v-if="props.workflow">
+            <span class="font-medium text-foreground">{{ props.workflow.name }}</span>
+            {{ t("integration.workflows.delete.dialog.description") }}
+          </span>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <p v-if="error" class="text-sm text-rose-600">{{ error }}</p>
+      <AlertDialogFooter>
+        <Button variant="outline" :disabled="busy" @click="open = false">
+          {{ t("integration.common.action.cancel") }}
+        </Button>
+        <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="busy" @click="confirm">
+          <Loader2 v-if="busy" :size="14" class="animate-spin" />
+          {{ busy ? t("integration.workflows.delete.action.deleting") : t("integration.common.action.delete") }}
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

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

@@ -0,0 +1,18 @@
+export type DeletableWorkflow = {
+    id: number;
+    name: string;
+};
+type __VLS_Props = {
+    workflow: DeletableWorkflow | null;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'open'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    deleted: (workflow: DeletableWorkflow) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDeleted?: ((workflow: DeletableWorkflow) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -3,6 +3,7 @@ import { computed, ref, watch } from "vue";
 import { RefreshCircle as Loader2 } from "#solar-icons";
 import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input } from "@revenexx/studio";
 import { useIntegrationsWorkflows } from "../../composables/useIntegrationsWorkflows";
+import { errorReason } from "../../utils/apiError";
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
   workflow: { type: [Object, null], required: true }
@@ -29,7 +30,7 @@ async function submit() {
     open.value = false;
     emit("duplicated", copy);
   } catch (e) {
-    error.value = e?.message || t("integration.workflows.duplicate.error.generic");
+    error.value = errorReason(e, t("integration.workflows.duplicate.error.generic"));
   } finally {
     busy.value = false;
   }

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

@@ -146,20 +146,20 @@ function spliceNode() {
     >
       <button
         type="button"
-        class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
+        class="flex size-6 items-center justify-center rounded text-muted-foreground transition hover:bg-muted/60 hover:text-foreground"
         :title="t('integration.canvas.edge.action.insertNode')"
         @click.stop="spliceNode"
       >
-        <Plus :size="12" />
+        <Plus :size="13" />
       </button>
       <div class="h-3.5 w-px bg-black/10" />
       <button
         type="button"
-        class="flex size-5 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
+        class="flex size-6 items-center justify-center rounded text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
         :title="t('integration.canvas.edge.action.delete')"
         @click.stop="removeEdge"
       >
-        <TrashBin :size="12" />
+        <TrashBin :size="13" />
       </button>
     </div>
   </EdgeLabelRenderer>

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">