@revenexx/studio-integrations 1.1.1 → 1.3.0

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

@@ -28,7 +28,7 @@ import {
   DropdownMenuTrigger,
   TooltipProvider
 } from "@revenexx/studio";
-import { Braces, EllipsisVertical, GripVertical, Group as GroupIcon, Hand, Map as MapIcon, Minus, MousePointer2, Plus, Settings2, StickyNote } from "lucide-vue-next";
+import { Braces, Database, EllipsisVertical, GripVertical, Group as GroupIcon, Hand, Map as MapIcon, Minus, MousePointer2, Plus, Settings2, StickyNote } from "lucide-vue-next";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import "@vue-flow/minimap/dist/style.css";
@@ -40,6 +40,7 @@ import WorkflowTriggerView from "./WorkflowTriggerView.vue";
 import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowContextMenu, {} from "./WorkflowContextMenu.vue";
+import WorkflowStateNamespacesDialog from "./WorkflowStateNamespacesDialog.vue";
 import WorkflowVariablesDialog from "./WorkflowVariablesDialog.vue";
 import { useCanvasShortcuts } from "../../composables/useCanvasShortcuts";
 import { usePaletteLayout } from "../../composables/usePaletteLayout";
@@ -50,7 +51,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 +69,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 +81,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 +161,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 +250,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 +303,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 +329,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 +354,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 +560,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) {
@@ -572,6 +571,18 @@ function updateSticky(id, patch) {
   push();
 }
 const variablesOpen = ref(false);
+const stateOpen = ref(false);
+const stateCount = computed(() => (blob.value.state ?? []).length);
+function updateStateNamespaces(next) {
+  blob.value.state = next.length ? next : void 0;
+  push();
+}
+function declareStateNamespace(namespace, role, visibility) {
+  const declared = blob.value.state ?? [];
+  if (declared.some((n) => n.namespace === namespace)) return;
+  blob.value.state = [...declared, { namespace, role, visibility }];
+  push();
+}
 const variableCount = computed(() => Object.keys(blob.value.variables ?? {}).length);
 function updateVariables(next) {
   blob.value.variables = Object.keys(next).length ? next : void 0;
@@ -622,7 +633,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 +672,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 +704,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 +915,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 +979,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 +1027,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", {
@@ -1279,7 +1303,7 @@ function onConfigOpenAutoFocus(event) {
   event.preventDefault();
   event.target?.focus();
 }
-const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
+const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !stateOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
   "enter": {
@@ -1324,6 +1348,9 @@ useCanvasShortcuts(() => ({
   "shift+v": () => {
     variablesOpen.value = true;
   },
+  "shift+t": () => {
+    stateOpen.value = true;
+  },
   "shift+alt+s": () => emit("openSettings"),
   "-": () => {
     void flow.zoomOut({ duration: 150 });
@@ -1728,6 +1755,17 @@ const edgeTypes = {
               <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="t('integration.editor.tool.state.tooltip')" shortcut="shift+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="stateOpen = true"
+            >
+              <Database :size="13" />
+              {{ t("integration.editor.tool.state.label") }}
+              <span v-if="stateCount" class="rounded-lg bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">{{ stateCount }}</span>
+            </button>
+          </IntegrationsEditorTip>
           <IntegrationsEditorTip :label="t('integration.editor.tool.settings.tooltip')" shortcut="shift+alt+s">
             <button
               type="button"
@@ -1827,6 +1865,14 @@ const edgeTypes = {
       </div>
     </div>
 
+    <!-- State namespaces lightbox (control-pane entry) — what this workflow may
+         remember between runs. -->
+    <WorkflowStateNamespacesDialog
+      v-model:open="stateOpen"
+      :state="blob.state ?? []"
+      @update:state="updateStateNamespaces"
+    />
+
     <!-- Workflow variables lightbox (control-pane entry). -->
     <WorkflowVariablesDialog
       v-model:open="variablesOpen"
@@ -1865,6 +1911,7 @@ const edgeTypes = {
           :selection="selection"
           :secret-keys="secretKeys"
           :variables="blob.variables"
+          :state-namespaces="blob.state ?? []"
           :upstream-outputs="selectedUpstreamOutputs"
           :autofocus-name="renameIntent"
           :nodes="blob.nodes"
@@ -1880,6 +1927,7 @@ const edgeTypes = {
   selectedId = id;
   renameIntent = false;
 }"
+          @declare-state="declareStateNamespace"
         />
       </DialogContent>
     </Dialog>

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/WorkflowStateNamespacesDialog.d.vue.ts

@@ -0,0 +1,13 @@
+import type { WorkflowStateNamespace } from '../../types/integrations.js';
+type __VLS_Props = {
+    open: boolean;
+    state: WorkflowStateNamespace[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (args_0: boolean) => any;
+    "update:state": (next: WorkflowStateNamespace[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:state"?: ((next: WorkflowStateNamespace[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;