@revenexx/studio-integrations 2.8.1 → 2.10.0

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

@@ -1,16 +1,19 @@
 <script setup>
-import { computed, inject, nextTick, ref, watch } from "vue";
+import { computed, inject, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 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 { branchLineText } from "../../data/canvasShapes";
+import { joinRefusalText } from "../../data/refusalMessage";
 import { isTerminalManifest } from "../../data/nodeInputData";
 import { resolveLocalized } from "../../utils/localize";
-import { SIDE_POSITION, distributedStyle } from "./canvasSides";
-import { fieldDisplayLabel } from "../../utils/validationFindings";
+import { SIDE_POSITION, distributedStyle, spacedByLabel } from "./canvasSides";
+import { fieldDisplayLabel, nodeDisplayLabel } from "../../utils/validationFindings";
 import { nodeDisplayName } from "../../utils/nodeDisplayName";
+import { packageLabel } from "../../utils/packageLabel";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -22,6 +25,7 @@ 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(() => nodeDisplayName(props.data));
+const fromPackage = computed(() => manifest.value?.__package ? packageLabel(manifest.value.__package) : null);
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
 const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, {
   fields: invalidFields.value.map((key) => fieldDisplayLabel(props.data, key)).join(", ")
@@ -116,6 +120,94 @@ 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"];
+const splitPorts = computed(() => new Set(props.data.__shape?.splitPorts ?? []));
+const isMerger = computed(() => props.data.__shape?.merger === true);
+const isRefused = computed(() => props.data.__shape?.refused !== void 0);
+const inputTitle = computed(() => {
+  const shape = props.data.__shape;
+  if (shape?.refused) {
+    const text = joinRefusalText(shape.refused, nodeDisplayLabel(props.data));
+    return [t(text.title), t(text.description, text.params)].join("\n");
+  }
+  const lines = (shape?.inputBranches ?? []).map(branchLineText);
+  if (isMerger.value) return [t("integration.canvas.node.handle.merger"), ...lines].join("\n");
+  if (shape?.converging) {
+    const keyed = shape.inputBranches?.some((b) => b.address !== "in");
+    return [
+      t("integration.canvas.node.handle.converging"),
+      ...keyed ? [t("integration.canvas.node.handle.convergingKeyed")] : [],
+      ...lines
+    ].join("\n");
+  }
+  return t("integration.canvas.node.handle.input");
+});
+const DOT_CLASS = "!size-3 !rounded-full";
+const BOX_CLASS = "!h-3 !w-6 !rounded-[3px] hover:!w-7";
+function outputTitle(p) {
+  return splitPorts.value.has(p.name) ? `${handleTitle(p)} \u2014 ${t("integration.canvas.node.handle.splitter")}` : handleTitle(p);
+}
+const VM_STEP = 44;
+const VM_SPREAD = 56;
+const virtualMergers = computed(() => {
+  const list = props.data.__shape?.virtualMergers ?? [];
+  return list.map((vm) => ({
+    ...vm,
+    x: vm.offset * VM_SPREAD,
+    y: -VM_STEP * vm.level,
+    toX: vm.parent === null ? 0 : list[vm.parent].offset * VM_SPREAD,
+    toY: -VM_STEP * (vm.level - 1),
+    title: [
+      t(vm.kind === "merger" ? "integration.canvas.node.handle.virtualMerger" : "integration.canvas.node.handle.virtualConverging"),
+      ...vm.branches.map(branchLineText)
+    ].join("\n")
+  }));
+});
+const CARD_WIDTH = 220;
+const LABEL_GAP = 8;
+const DOT_ROOM = 14;
+const BOX_ROOM = 28;
+const labelEls = /* @__PURE__ */ new Map();
+const labelWidths = ref({});
+const labelObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measureLabels);
+onBeforeUnmount(() => labelObserver?.disconnect());
+function measureLabels() {
+  const next = { ...labelWidths.value };
+  let changed = false;
+  for (const [name, el] of labelEls) {
+    if (next[name] !== el.offsetWidth) {
+      next[name] = el.offsetWidth;
+      changed = true;
+    }
+  }
+  if (changed) labelWidths.value = next;
+}
+function setLabelEl(el, name) {
+  const node = el instanceof HTMLElement ? el : null;
+  const known = labelEls.get(name);
+  if (known === node) return;
+  if (known) labelObserver?.unobserve(known);
+  if (node) {
+    labelEls.set(name, node);
+    labelObserver?.observe(node);
+  } else {
+    labelEls.delete(name);
+  }
+}
+const portLayout = computed(() => {
+  if (!showPortLabels.value || resolvePending.value) return null;
+  const widths = outputs.value.map((p) => {
+    const w = labelWidths.value[p.name];
+    return w === void 0 || !splitPorts.value.has(p.name) ? w : Math.max(w, BOX_ROOM);
+  });
+  if (widths.includes(void 0)) return null;
+  return spacedByLabel(widths, CARD_WIDTH, LABEL_GAP, DOT_ROOM);
+});
+function outputStyle(side, i) {
+  const centre = portLayout.value?.centres[i];
+  if (centre === void 0 || side !== "bottom" && side !== "top") return distributedStyle(side, i, outputs.value.length);
+  return { left: `${centre}px` };
+}
+watch(() => JSON.stringify(portLayout.value), () => nextTick(() => flow.updateNodeInternals([props.id])));
 const flow = useVueFlow();
 const hovered = ref(false);
 let hoverTimer = null;
@@ -240,12 +332,37 @@ function remove() {
     :key="`in-${side}`"
     type="target"
     :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"
+    :title="inputTitle"
+    class="!border-2 !border-white !shadow-sm transition-all"
+    :class="[
+  isMerger ? BOX_CLASS : `${DOT_CLASS} hover:!size-3.5`,
+  isRefused ? '!bg-rose-600 hover:!bg-rose-700' : '!bg-slate-500 hover:!bg-slate-700'
+]"
+    :data-refused="isRefused ? 'true' : void 0"
+  />
+
+  <!-- Virtual mergers (PO-750): drawn, never stored. Each is a dot of this card's
+       own — a connection of its level arrives here instead of at the input — so it
+       moves with the card, cannot be selected, dragged or deleted on its own, and
+       nothing can be started from it. Dropping a connection on one connects to
+       this node, exactly as the input dot would. -->
+  <Handle
+    v-for="vm in virtualMergers"
+    :id="vm.handleId"
+    :key="vm.handleId"
+    type="target"
+    :position="Position.Top"
+    :connectable-start="false"
+    :title="vm.title"
+    :style="{ top: `${vm.y}px`, left: `calc(50% + ${vm.x}px)` }"
+    class="!h-3 !w-6 !rounded-[3px] !border-2 !border-dashed !border-slate-500 !bg-background dark:!border-slate-400"
   />
 
   <!-- Output handles: right + bottom, distributed per side. Color encodes the
-       port semantics (true/false/error/branch/default), matching the edges. -->
+       port semantics (true/false/error/branch/default), matching the edges.
+       Only the hover size is animated, never the place: a dot gliding to where
+       its name moved it (PO-790) is measured by the canvas on its way there, and
+       its connection is left behind at the old spot. -->
   <template v-for="side in OUT_SIDES" :key="`side-${side}`">
     <Handle
       v-for="(p, i) in outputs"
@@ -253,17 +370,18 @@ function remove() {
       :key="`${p.name}-${side}`"
       type="source"
       :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"
-      :class="portTone(p).handle"
+      :title="outputTitle(p)"
+      :style="outputStyle(side, i)"
+      class="!border-2 !border-white !shadow-sm transition-[width,height]"
+      :class="[portTone(p).handle, splitPorts.has(p.name) ? BOX_CLASS : `${DOT_CLASS} hover:!size-3.5`]"
     />
   </template>
 
   <!-- The card itself — deliberately minimal: icon, name, what it's set to.
        Everything else lives in the config lightbox. -->
   <div
-    class="relative w-[220px] rounded-lg border bg-white transition-all duration-150"
+    class="relative rounded-lg border bg-white transition-[box-shadow,border-color] duration-150"
+    :style="{ width: `${portLayout?.width ?? CARD_WIDTH}px` }"
     :class="[
   selected ? 'border-emerald-500/50 shadow-[0_0_0_2px_rgba(16,185,129,0.18)]' : invalidFields.length ? 'border-amber-500/70 shadow-[0_0_0_2px_rgba(245,158,11,0.22)] hover:shadow-md' : inSelectedLoop ? 'border-slate-400/80 shadow-[0_0_0_2px_rgba(100,116,139,0.20)]' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]',
   showPortLabels ? 'pb-3.5' : ''
@@ -271,6 +389,27 @@ function remove() {
     @mouseenter="onHoverEnter"
     @mouseleave="onHoverLeave"
   >
+    <!-- The lines a virtual merger stands on, down to what it feeds. Inside the
+         card rather than beside it, so the card stays the wrapper's one child that
+         is not a port; it claims no layout and takes no pointer. -->
+    <svg
+      v-if="virtualMergers.length"
+      class="pointer-events-none absolute left-1/2 top-0 overflow-visible text-slate-400 dark:text-slate-500"
+      width="1"
+      height="1"
+      aria-hidden="true"
+    >
+      <line
+        v-for="vm in virtualMergers"
+        :key="`vm-line-${vm.handleId}`"
+        :x1="vm.x"
+        :y1="vm.y"
+        :x2="vm.toX"
+        :y2="vm.toY"
+        stroke="currentColor"
+        stroke-width="2"
+      />
+    </svg>
     <!-- The card's marks, in one row at the corner the input handles leave free.
          A row rather than two absolutely-placed badges: the amber one's width
          follows its count, so any fixed offset for a second badge overlaps it as
@@ -278,7 +417,7 @@ function remove() {
          a bare count at a corner is a riddle, so each carries its own title;
          `nodrag` keeps that hover from starting a card drag. -->
     <span
-      v-if="invalidFields.length || unbuildableVersion || insideLoops.length || bodySize !== void 0"
+      v-if="invalidFields.length || unbuildableVersion || insideLoops.length || bodySize !== void 0 || data.__skipped"
       class="nodrag absolute -left-2 -top-2 z-10 flex items-center gap-1"
     >
       <span
@@ -324,6 +463,17 @@ function remove() {
         <Repeat :size="9" weight="Bold" />
         <template v-if="insideLoops.length > 1">{{ insideLoops.length }}</template>
       </span>
+      <!-- A step the run skipped (PO-750), with the reason as its name and title.
+           Slate and outlined: it is a statement about the run, not a defect. -->
+      <span
+        v-if="data.__skipped"
+        role="img"
+        :aria-label="data.__skipped"
+        :title="data.__skipped"
+        class="flex cursor-help items-center rounded-full border border-slate-400 bg-white px-1.5 py-0.5 text-[9px] font-bold leading-none text-slate-600 shadow-sm"
+      >
+        {{ data.__skipped }}
+      </span>
       <!-- The loop itself, and how much of the canvas it repeats. Outlined
            rather than filled: it names the same fact from the other end, and two
            solid slate pills side by side on a nested iterator would read as one. -->
@@ -400,9 +550,10 @@ function remove() {
         <span
           v-for="(p, i) in outputs"
           :key="`plabel-${p.name}`"
+          :ref="(el) => setLabelEl(el, p.name)"
           class="pointer-events-none absolute bottom-1 select-none whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide"
           :class="portTone(p).label"
-          :style="{ left: `${(i + 1) / (outputs.length + 1) * 100}%`, transform: 'translateX(-50%)' }"
+          :style="{ ...outputStyle('bottom', i), transform: 'translateX(-50%)' }"
         >
           {{ p.label }}
         </span>
@@ -424,6 +575,12 @@ function remove() {
              inspector. Left-aligned and on the second line, clear of the
              top-right edit affordance (PO-192). -->
         <div v-if="data.nodeVersion" class="mt-0.5 flex items-center gap-1.5 text-sm text-muted-foreground">
+          <span
+            v-if="fromPackage"
+            :title="fromPackage"
+            class="min-w-0 truncate text-[10px] font-medium leading-none text-muted-foreground/70"
+          >{{ fromPackage }}</span>
+          <span v-if="fromPackage" aria-hidden="true" class="text-[10px] leading-none text-muted-foreground/40">·</span>
           <span
             class="shrink-0 text-[10px] font-medium leading-none tabular-nums text-muted-foreground/55"
             :title="t('integration.canvas.node.meta.versionTitle', { version: data.nodeVersion })"

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

@@ -1,3 +1,4 @@
+import type { NodeShapeData } from '../../data/canvasShapes.js';
 import type { NodeManifestOutput, WorkflowNode } from '../../types/integrations.js';
 interface NodeData extends WorkflowNode {
     __selected?: boolean;
@@ -22,6 +23,19 @@ interface NodeData extends WorkflowNode {
         /** Set on an iterator itself: how many nodes hang off its `item` port. */
         bodySize?: number;
     };
+    /**
+     * Run replay only (PO-750): the node's step was skipped, and this says why —
+     * "Skipped: dead end in branch 2", or a plain "Skipped" for a reason the studio
+     * does not name. Injected like the markers above; no other canvas passes it.
+     */
+    __skipped?: string;
+    /**
+     * Where the workflow splits and merges at this node (PO-750), computed per sync
+     * from the blob's edges (`data/canvasShapes.ts`) and injected into all three
+     * canvases like `__loop`: a split port and a merging input are drawn as boxes,
+     * and the levels of a nested merge as small boxes in front of the input.
+     */
+    __shape?: NodeShapeData;
 }
 type __VLS_Props = {
     id: string;

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

@@ -26,9 +26,11 @@ import { findManifest } from "../../data/integrationNodeCatalog";
 import { OPPOSITE_SIDE } from "./canvasSides";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { nodeLoopData } from "../../data/loopBody";
+import { canvasShapes } from "../../data/canvasShapes";
 import { formatDuration } from "../../utils/formatDuration";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { executedNodeIds, isSkippedStep, skipReasonMessage, stepStatusLabel } from "../../utils/skippedStep";
 import { errorReason } from "../../utils/apiError";
 const props = defineProps({
   workflow: { type: Object, required: true },
@@ -139,6 +141,10 @@ preview.onPaneReady(() => {
   void preview.fitView({ padding: 0.2, maxZoom: 1 });
 });
 provide("workflow-node-actions", null);
+function memberSize(id) {
+  const d = preview.findNode(id)?.dimensions;
+  return d && d.width > 0 ? d : { width: 220, height: 64 };
+}
 const dynamicOutputs = ref({});
 const dynamicOutputNodes = computed(() => props.workflow.blob.nodes.filter((n) => {
   const m = findManifest(n.nodeSlug, n.nodeVersion);
@@ -161,14 +167,14 @@ const finalStatus = computed(() => {
   for (const s of steps.value) m.set(s.node_id, s.status);
   return m;
 });
-const runNodeIds = computed(() => new Set(steps.value.map((s) => s.node_id)));
+const runNodeIds = computed(() => executedNodeIds(steps.value));
 const triggerIds = computed(() => new Set(props.workflow.blob.triggers.map((t2) => t2.id)));
 function edgeColorByKind(kind) {
   return kind === "error" ? "#cbd5e1" : "#94a3b8";
 }
 const GROUP_PAD = 24;
 const GROUP_LABEL_ROOM = 26;
-function previewGroupNodes(blob, nodePos) {
+function previewGroupNodes(blob, nodePos, nodeSize) {
   return (blob.groups ?? []).map((g, i) => {
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
@@ -176,10 +182,11 @@ function previewGroupNodes(blob, nodePos) {
     let maxY = Number.NEGATIVE_INFINITY;
     for (const id of g.nodeIds) {
       const pos = nodePos(id);
+      const size = nodeSize(id);
       minX = Math.min(minX, pos.x);
       minY = Math.min(minY, pos.y);
-      maxX = Math.max(maxX, pos.x + 220);
-      maxY = Math.max(maxY, pos.y + 64);
+      maxX = Math.max(maxX, pos.x + size.width);
+      maxY = Math.max(maxY, pos.y + size.height);
     }
     if (!Number.isFinite(minX)) return null;
     return {
@@ -203,17 +210,28 @@ function previewGroupNodes(blob, nodePos) {
 function stickyArea(s) {
   return (s.size?.width ?? 240) * (s.size?.height ?? 160);
 }
+function skippedLabel(nodeId) {
+  const step = steps.value.findLast((s) => s.node_id === nodeId);
+  if (!step || !isSkippedStep(step)) return void 0;
+  return stepSkipText(step);
+}
+function stepSkipText(step) {
+  const m = skipReasonMessage(step);
+  return m ? t(m.key, m.params) : t("integration.runs.skip.plain");
+}
 function replayNodeClass(id, type) {
   if (type === "sticky") return "replay-dim";
   if (type === "trigger") return steps.value.length ? "replay-node-ok" : "";
   const final = finalStatus.value.get(id);
   if (!final) return "replay-dim";
   const reached = reachedStatus.value.has(id);
+  if (isSkippedStep({ status: final })) return `replay-node-skipped${activeStep.value?.node_id === id ? " replay-node-active" : ""}`;
   const tone = final === "failed" ? "replay-node-failed" : final === "running" ? "replay-node-running" : "replay-node-ok";
   const active = activeStep.value?.node_id === id ? " replay-node-active" : "";
   return `${tone}${reached ? "" : " replay-unreached"}${active}`;
 }
 const loops = computed(() => nodeLoopData(props.workflow.blob.nodes, props.workflow.blob.edges));
+const shapes = computed(() => canvasShapes(props.workflow.blob.nodes, props.workflow.blob.edges, props.workflow.blob.triggers));
 const vfNodes = computed(() => {
   const blob = props.workflow.blob;
   const triggerPos = (id, i) => blob.triggerPositions?.[id] ?? { x: -40, y: 60 + i * 140 };
@@ -226,7 +244,7 @@ const vfNodes = computed(() => {
   };
   const stickies = [...blob.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
   return [
-    ...previewGroupNodes(blob, posOf),
+    ...previewGroupNodes(blob, posOf, memberSize),
     ...stickies.map((s, i) => ({
       id: s.id,
       type: "sticky",
@@ -244,7 +262,7 @@ const vfNodes = computed(() => {
       position: triggerPos(t2.id, i),
       draggable: false,
       class: replayNodeClass(t2.id, "trigger"),
-      data: t2
+      data: { ...t2, __split: shapes.value.splitTriggers.has(t2.id) }
     })),
     ...blob.nodes.map((n) => ({
       id: n.id,
@@ -252,7 +270,7 @@ const vfNodes = computed(() => {
       position: n.position ?? { x: 240, y: 80 },
       draggable: false,
       class: replayNodeClass(n.id, "workflow"),
-      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.value.get(n.id) }
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.value.get(n.id), __skipped: skippedLabel(n.id), __shape: shapes.value.byNode.get(n.id) }
     }))
   ];
 });
@@ -300,7 +318,7 @@ const vfEdges = computed(() => {
       source: e.from.nodeId,
       target: e.to.nodeId,
       sourceHandle: outputHandleId(e.from.output, srcSide),
-      targetHandle: inputHandleId(OPPOSITE_SIDE[srcSide]),
+      targetHandle: shapes.value.arrivalHandle(e) ?? inputHandleId(OPPOSITE_SIDE[srcSide]),
       type: "flow",
       selectable: false,
       animated: traversed && !targetReached,
@@ -365,7 +383,7 @@ function pretty(v) {
 const activeStepTitle = computed(() => {
   const s = activeStep.value;
   if (!s) return "";
-  return `${s.node_slug || s.node_id}${s.attempt > 0 ? ` (#${s.attempt + 1})` : ""}`;
+  return `${s.node_slug || s.node_id}${(s.attempt ?? 0) > 0 ? ` (#${(s.attempt ?? 0) + 1})` : ""}`;
 });
 onMounted(() => {
   if (props.initialRunId) selectRun(props.initialRunId);
@@ -478,7 +496,7 @@ watch(() => props.initialRunId, (id) => {
           </div>
         </div>
         <Badge v-if="activeStep" variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="runStatusClass(activeStep.status)">
-          {{ runStatusLabel(activeStep.status) }}
+          {{ stepStatusLabel(activeStep.status) }}
         </Badge>
       </div>
 
@@ -486,7 +504,7 @@ watch(() => props.initialRunId, (id) => {
         <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
           <div>
             <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.attempt") }}</div>
-            <div class="tabular-nums">{{ activeStep.attempt + 1 }}</div>
+            <div class="tabular-nums">{{ activeStep.attempt == null ? "\u2014" : activeStep.attempt + 1 }}</div>
           </div>
           <div>
             <div class="text-mono text-muted-foreground">{{ t("integration.replay.debug.field.duration") }}</div>
@@ -502,6 +520,10 @@ watch(() => props.initialRunId, (id) => {
           </div>
         </div>
 
+        <div v-if="isSkippedStep(activeStep) && skipReasonMessage(activeStep)" class="text-sm" data-testid="replay-skip-reason">
+          {{ stepSkipText(activeStep) }}
+        </div>
+
         <div v-if="activeStep.branch" class="text-sm">
           <div class="text-mono text-muted-foreground mb-1">{{ t("integration.replay.debug.field.branch") }}</div>
           <code class="rounded bg-black/[0.05] px-1.5 py-0.5 font-mono">{{ activeStep.branch }}</code>
@@ -536,5 +558,5 @@ watch(() => props.initialRunId, (id) => {
 </template>
 
 <style>
-.vue-flow__node.replay-dim{opacity:.35}.vue-flow__node.replay-unreached{opacity:.45}.vue-flow__node.replay-node-ok{filter:drop-shadow(0 0 5px rgba(16,185,129,.45))}.vue-flow__node.replay-node-failed{filter:drop-shadow(0 0 5px rgba(244,63,94,.5))}.vue-flow__node.replay-node-running{filter:drop-shadow(0 0 5px rgba(14,165,233,.5))}.vue-flow__node.replay-node-active{filter:drop-shadow(0 0 10px rgba(59,130,246,.65))}
+.vue-flow__node.replay-dim{opacity:.35}.vue-flow__node.replay-unreached{opacity:.45}.vue-flow__node.replay-node-skipped{border-radius:12px;filter:grayscale(1);opacity:.55;outline:2px dashed #94a3b8;outline-offset:3px}.vue-flow__node.replay-node-ok{filter:drop-shadow(0 0 5px rgba(16,185,129,.45))}.vue-flow__node.replay-node-failed{filter:drop-shadow(0 0 5px rgba(244,63,94,.5))}.vue-flow__node.replay-node-running{filter:drop-shadow(0 0 5px rgba(14,165,233,.5))}.vue-flow__node.replay-node-active{filter:drop-shadow(0 0 10px rgba(59,130,246,.65))}
 </style>

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

@@ -1,7 +1,14 @@
 import type { WorkflowTrigger } from '../../types/integrations.js';
 type __VLS_Props = {
     id: string;
-    data: WorkflowTrigger;
+    /**
+     * `__split`: the trigger's one output has more than one connection leaving it,
+     * so it is a splitter and drawn as a box (PO-750). Injected per sync by every
+     * canvas, never stored.
+     */
+    data: WorkflowTrigger & {
+        __split?: boolean;
+    };
     selected?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -105,6 +105,8 @@ const OUT_SIDES = ["bottom"];
     :key="side"
     type="source"
     :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"
+    :title="data.__split ? t('integration.canvas.node.handle.splitter') : void 0"
+    class="!border-2 !border-white !bg-emerald-500 !shadow-sm transition-all hover:!bg-emerald-600"
+    :class="data.__split ? '!h-3 !w-6 !rounded-[3px] hover:!w-7' : '!size-3 !rounded-full hover:!size-3.5'"
   />
 </template>

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

@@ -1,7 +1,14 @@
 import type { WorkflowTrigger } from '../../types/integrations.js';
 type __VLS_Props = {
     id: string;
-    data: WorkflowTrigger;
+    /**
+     * `__split`: the trigger's one output has more than one connection leaving it,
+     * so it is a splitter and drawn as a box (PO-750). Injected per sync by every
+     * canvas, never stored.
+     */
+    data: WorkflowTrigger & {
+        __split?: boolean;
+    };
     selected?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -46,3 +46,30 @@ export declare const OPPOSITE_SIDE: Record<Side, Side>;
  * output lands in the middle.
  */
 export declare function distributedStyle(side: Side, i: number, total: number): Record<string, string>;
+/**
+ * Where the output dots go when their names would not fit evenly spaced (PO-790), or
+ * `null` when they do — and then {@link distributedStyle} places them as it always has.
+ *
+ * Each name is centred over its dot, so evenly spaced dots give every name the same
+ * room whatever its length: three outputs on a 220px card stand 55px apart, and
+ * "NICHT GEFUNDEN" alone is 81px. Spaced instead with equal gaps *between the names*,
+ * the same three fit with room to spare, and each dot moves under the centre of its
+ * name. Only where even that does not fit does the card grow, to exactly the width
+ * the names need.
+ *
+ * Returning `null` for the case that fits is deliberate: a card that reads well today
+ * keeps its dots exactly where they were, and so do the connections leaving them.
+ *
+ * A name is never narrower than its dot, though: an empty switch case, or a one-letter
+ * one, still has a 12px dot under it, and spacing names that take no room would put
+ * two dots on top of each other — one of them no longer reachable.
+ *
+ * @param measured  the rendered width of each name, in port order
+ * @param width     the card's width
+ * @param gap       the least space between two names, and between a name and the edge
+ * @param least     the least room a name takes: its dot's, at its hover size
+ */
+export declare function spacedByLabel(measured: readonly number[], width: number, gap: number, least: number): {
+    width: number;
+    centres: number[];
+} | null;

package/dist/runtime/components/Integrations/canvasSides.js

@@ -20,3 +20,25 @@ const SIDE_SPREAD_AXIS = {
 export function distributedStyle(side, i, total) {
   return { [SIDE_SPREAD_AXIS[side]]: `${(i + 1) / (total + 1) * 100}%` };
 }
+export function spacedByLabel(measured, width, gap, least) {
+  const n = measured.length;
+  if (n === 0) return null;
+  const widths = measured.map((w) => Math.max(w, least));
+  const even = widths.map((_, i) => width * (i + 1) / (n + 1));
+  const fitsEvenly = widths.every(
+    (w, i) => i === 0 ? even[0] - w / 2 >= gap : even[i] - even[i - 1] >= (widths[i - 1] + w) / 2 + gap
+  ) && width - even[n - 1] - widths[n - 1] / 2 >= gap;
+  if (fitsEvenly) return null;
+  const total = widths.reduce((a, b) => a + b, 0);
+  const needed = total + gap * (n + 1);
+  const cardWidth = Math.max(width, needed);
+  const space = (cardWidth - total) / (n + 1);
+  const centres = [];
+  let x = 0;
+  for (const w of widths) {
+    x += space;
+    centres.push(x + w / 2);
+    x += w;
+  }
+  return { width: cardWidth, centres };
+}

package/dist/runtime/composables/useIntegrationsCredentials.d.ts

@@ -40,7 +40,10 @@ export declare function useIntegrationsCredentials(): {
     loaded: any;
     total: import("vue").ComputedRef<any>;
     needsReauth: import("vue").ComputedRef<any>;
-    load: (force?: boolean) => Promise<Credential[]>;
+    load: (force?: boolean, { quiet }?: {
+        quiet?: boolean | undefined;
+    }) => Promise<Credential[]>;
+    refresh: () => Promise<Credential[]>;
     ofType: (slug: string) => Credential[];
     get: (id: string) => Promise<Credential>;
     create: (input: {

package/dist/runtime/composables/useIntegrationsCredentials.js

@@ -12,19 +12,23 @@ export function useIntegrationsCredentials() {
   const gate = useLoadGate("integrations.credentials", { loading, loaded });
   const api = useIntegrationsApi();
   const t = useIntegrationsT();
-  async function load(force = false) {
+  async function load(force = false, { quiet = false } = {}) {
     if (!await gate.claim(force)) return credentials.value;
-    error.value = null;
+    if (!quiet) error.value = null;
     try {
       credentials.value = unwrapList(await api.get("/credentials"));
       loaded.value = true;
+      error.value = null;
     } catch (e) {
-      error.value = errorReason(e, t("integration.credentials.error.loadFailed"));
+      if (!quiet) error.value = errorReason(e, t("integration.credentials.error.loadFailed"));
     } finally {
       gate.release();
     }
     return credentials.value;
   }
+  function refresh() {
+    return load(true, { quiet: loaded.value });
+  }
   function ofType(slug) {
     return credentials.value.filter((c) => c.credential_type_slug === slug);
   }
@@ -80,6 +84,7 @@ export function useIntegrationsCredentials() {
     total,
     needsReauth,
     load,
+    refresh,
     ofType,
     get,
     create,