@revenexx/studio-integrations 0.7.0 → 1.1.0

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

@@ -49,6 +49,7 @@ import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 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 { groupFindingsByNode } from "../../utils/validationFindings";
 import { reorderBranchSubtrees } from "../../data/branchReorder";
@@ -56,6 +57,7 @@ import { findingsByNodeField } from "../../utils/validationFindings";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   workflow: { type: Object, required: true },
+  draft: { type: [Object, null], required: false },
   runBusy: { type: Boolean, required: false },
   runWaiting: { type: Boolean, required: false },
   overlayOpen: { type: Boolean, required: false }
@@ -63,7 +65,7 @@ const props = defineProps({
 const emit = defineEmits(["change", "run", "toggleActive", "openSettings"]);
 const t = useIntegrationsT();
 const { keys: secretKeys } = useIntegrationsSecrets();
-const blob = ref(clone(props.workflow.blob));
+const blob = ref(clone(props.draft ?? props.workflow.blob));
 watch(() => props.workflow.id, () => {
   blob.value = clone(props.workflow.blob);
   syncFromBlob();
@@ -88,6 +90,29 @@ watch(() => JSON.stringify(invalidNodeFields.value), () => {
   if (dragInFlight) return;
   syncFromBlob();
 });
+const selectedLoopBody = computed(() => {
+  const selected = new Set(flow.getSelectedNodes.value.map((n) => n.id));
+  if (!selected.size) return /* @__PURE__ */ new Set();
+  const loops = iteratorNodeIds(blob.value.nodes);
+  if (!loops.length) return /* @__PURE__ */ new Set();
+  const out = /* @__PURE__ */ new Set();
+  for (const body of computeLoopBodies(loops, blob.value.edges)) {
+    const touched = selected.has(body.iteratorId) || [...body.nodeIds].some((id) => selected.has(id));
+    if (!touched) continue;
+    out.add(body.iteratorId);
+    for (const id of body.nodeIds) out.add(id);
+  }
+  return out;
+});
+provide("workflow-loop-highlight", selectedLoopBody);
+watch(() => iteratorNodeIds(blob.value.nodes).join("|"), () => {
+  if (dragInFlight) return;
+  syncFromBlob();
+});
+watch(useIntegrationsUiLocale(), () => {
+  if (dragInFlight) return;
+  syncFromBlob();
+});
 const dynamicOutputNodes = computed(() => blob.value.nodes.filter((n) => {
   const m = findManifest(n.nodeSlug, n.nodeVersion);
   return (m?.outputs ?? []).some((o) => o.resolveOutputs === true);
@@ -228,6 +253,7 @@ function bornClass(id) {
   return bornIds.value.has(id) ? "node-pop-in" : void 0;
 }
 function syncFromBlob() {
+  const loops = nodeLoopData(blob.value.nodes, blob.value.edges);
   const stickies = [...blob.value.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
   const collapsedBy = collapsedGroupOf();
   const groupNodes = (blob.value.groups ?? []).map((g, i) => {
@@ -283,7 +309,8 @@ function syncFromBlob() {
       data: {
         ...n,
         __resolvedOutputs: dynamicOutputs.value[n.id],
-        __invalidFields: invalidNodeFields.value[n.id]
+        __invalidFields: invalidNodeFields.value[n.id],
+        __loop: loops.get(n.id)
       }
     }))
   ];
@@ -469,22 +496,49 @@ flow.onEdgeUpdate(({ edge, connection }) => {
   syncFromBlob();
   push();
 });
-flow.onEdgesChange((changes) => {
+let pendingEdgeRemovals = [];
+let pendingNodeRemovals = [];
+let removalFlushQueued = false;
+function queueRemovalFlush() {
+  if (removalFlushQueued) return;
+  removalFlushQueued = true;
+  void nextTick(flushRemovals);
+}
+function flushRemovals() {
+  removalFlushQueued = false;
+  const edges = pendingEdgeRemovals;
+  const nodes = pendingNodeRemovals;
+  pendingEdgeRemovals = [];
+  pendingNodeRemovals = [];
+  const goneNodes = new Set(nodes);
   let mutated = false;
+  for (const c of edges) {
+    if (goneNodes.has(c.source) || goneNodes.has(c.target)) continue;
+    blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
+    mutated = true;
+  }
+  if (nodes.length) {
+    dropFromBlob(nodes);
+    mutated = true;
+  }
+  if (mutated) {
+    syncFromBlob();
+    push();
+  }
+}
+flow.onEdgesChange((changes) => {
   for (const c of changes) {
     if (c.type === "remove") {
-      blob.value.edges = blob.value.edges.filter((e) => e.id !== c.id);
-      mutated = true;
+      pendingEdgeRemovals.push({ id: c.id, source: c.source, target: c.target });
     }
   }
-  if (mutated) push();
+  if (pendingEdgeRemovals.length) queueRemovalFlush();
 });
 flow.onNodesChange((changes) => {
   const removed = changes.filter((c) => c.type === "remove").map((c) => c.id);
   if (!removed.length) return;
-  void nextTick(() => {
-    for (const id of removed) removeBlobNode(id);
-  });
+  pendingNodeRemovals.push(...removed);
+  queueRemovalFlush();
 });
 function stripFromGroups(drop) {
   if (!blob.value.groups?.length) return;
@@ -541,7 +595,7 @@ function addSticky(at) {
   syncFromBlob();
   push();
 }
-function removeBlobNodes(ids) {
+function dropFromBlob(ids) {
   if (!ids.length) return;
   const drop = new Set(ids);
   stripFromGroups(drop);
@@ -553,6 +607,10 @@ function removeBlobNodes(ids) {
     if (blob.value.triggerPositions?.[id]) delete blob.value.triggerPositions[id];
   }
   if (selectedId.value && drop.has(selectedId.value)) selectedId.value = null;
+}
+function removeBlobNodes(ids) {
+  if (!ids.length) return;
+  dropFromBlob(ids);
   syncFromBlob();
   push();
 }
@@ -779,14 +837,14 @@ const selectedUpstreamOutputs = computed(() => {
   return blob.value.edges.filter((e) => e.to.nodeId === id).flatMap((e) => {
     const source = blob.value.nodes.find((n) => n.id === e.from.nodeId);
     if (!source) return [];
-    const portDef = (findManifest(source.nodeSlug, source.nodeVersion)?.outputs ?? []).find((o) => o.name === e.from.output);
+    const port = portsForNode(source, findManifest(source.nodeSlug, source.nodeVersion), dynamicOutputs.value[source.id]).find((p) => p.name === e.from.output);
     return [{
       nodeId: source.id,
       // A node's own name is text the user typed — never trimmed, never read
       // as JSON. The manifest strings below it get the normalising resolver.
       nodeName: resolveDisplayName(source.name) || source.nodeSlug,
       output: e.from.output,
-      fields: portDef?.fields
+      fields: port?.fields.map((f) => f.name)
     }];
   });
 });
@@ -1213,6 +1271,14 @@ async function focusPalette() {
   paletteRef.value?.focusSearch();
 }
 const lightboxOpen = computed(() => !!selection.value);
+watch(lightboxOpen, (open) => {
+  if (!open) renameIntent.value = false;
+});
+function onConfigOpenAutoFocus(event) {
+  if (renameIntent.value) return;
+  event.preventDefault();
+  event.target?.focus();
+}
 const canvasHasKeyboard = computed(() => !lightboxOpen.value && !variablesOpen.value && !props.overlayOpen);
 const singleSelected = computed(() => flow.getSelectedNodes.value.length === 1 ? flow.getSelectedNodes.value[0] : null);
 useCanvasShortcuts(() => ({
@@ -1790,6 +1856,7 @@ const edgeTypes = {
            form as a strip down the left of an empty workbench. -->
       <DialogContent
         :show-close-button="false"
+        @open-auto-focus="onConfigOpenAutoFocus"
         class="flex max-w-none flex-col gap-0 overflow-hidden rounded-lg p-0 sm:max-w-none"
         :class="selectionIsTrigger ? 'h-[min(520px,86vh)] w-[min(600px,94vw)]' : 'h-[min(680px,86vh)] w-[min(1100px,94vw)]'"
       >

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

@@ -4,6 +4,22 @@ import '@vue-flow/minimap/dist/style.css';
 import type { Workflow, WorkflowBlob } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * Unsaved work the page is still holding for this workflow, read ONCE, at
+     * mount (behaviour specs/workflow-save.md).
+     *
+     * The editor is mounted per tab, so a trip to the Runs tab and back seeded a
+     * fresh working copy from the SAVED blob while the page still held the draft:
+     * the canvas showed one graph, the header said "Unsaved changes" about
+     * another, and Save wrote the one nobody could see. Seeding from the draft is
+     * what makes a move inside the workflow keep the work.
+     *
+     * Deliberately not watched. The page's draft is a copy of what this editor
+     * last emitted, so following it would re-seed the canvas — and drop the
+     * selection, the undo stack and any open dialog with it — on the user's own
+     * keystrokes.
+     */
+    draft?: WorkflowBlob | null;
     /** Busy flag for the control-pane Play button (a run is being triggered). */
     runBusy?: boolean;
     /** The run is queued behind a bundle build — busy, but worth saying why. */

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -18,9 +18,11 @@ import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import NodeDynamicOutputsResolver from "./NodeDynamicOutputsResolver.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { iteratorNodeIds, nodeLoopData } from "../../data/loopBody";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
 const props = defineProps({
-  workflow: { type: Object, required: true }
+  workflow: { type: Object, required: true },
+  draftPending: { type: Boolean, required: false }
 });
 const emit = defineEmits(["restored"]);
 const revisionsApi = useIntegrationsRevisions();
@@ -141,6 +143,7 @@ function buildPreview(blob) {
     }
     return "default";
   };
+  const loops = nodeLoopData(blob.nodes, blob.edges);
   const stickies = [...blob.stickies ?? []].sort((a, b) => stickyArea(b) - stickyArea(a));
   previewNodes.value = [
     ...previewGroupNodes(blob, nodePos),
@@ -166,7 +169,7 @@ function buildPreview(blob) {
       type: "workflow",
       position: n.position ?? { x: 240, y: 80 },
       draggable: false,
-      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id] }
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.get(n.id) }
     }))
   ];
   previewEdges.value = blob.edges.map((e) => {
@@ -225,7 +228,8 @@ async function select(revision) {
   }
 }
 async function restoreRevision(rev) {
-  if (!confirm(t("integration.history.confirm.restore", { revision: rev.revision }))) return;
+  const question = props.draftPending ? t("integration.history.confirm.restoreWithDraft", { revision: rev.revision }) : t("integration.history.confirm.restore", { revision: rev.revision });
+  if (!confirm(question)) return;
   restoring.value = rev.revision;
   try {
     await revisionsApi.restore(props.workflow.id, rev.revision);
@@ -243,6 +247,12 @@ async function restoreRevision(rev) {
 watch(() => props.workflow.revision, () => {
   if (selected.value === null) buildPreview(props.workflow.blob);
 });
+watch(() => iteratorNodeIds(previewBlob.value.nodes).join("|"), () => {
+  buildPreview(previewBlob.value);
+});
+watch(useIntegrationsUiLocale(), () => {
+  buildPreview(previewBlob.value);
+});
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
   try {

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

@@ -3,6 +3,12 @@ import '@vue-flow/core/dist/theme-default.css';
 import type { Workflow } from '../../types/integrations.js';
 type __VLS_Props = {
     workflow: Workflow;
+    /**
+     * The editor has unsaved work the page is holding. Nothing here shows it — the
+     * canvas behind this tab is not mounted — but a restore is what destroys it, so
+     * the question this panel asks has to name it (specs/workflow-save.md).
+     */
+    draftPending?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     restored: () => any;

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

@@ -9,6 +9,19 @@ interface NodeData extends WorkflowNode {
      *  injected by the editor the same non-persisting way. Read-only canvases
      *  (run replay, history preview) never pass them, so nothing is marked there. */
     __invalidFields?: string[];
+    /**
+     * Where this node stands with respect to an iterator's loop body (PO-277),
+     * computed per sync from the blob's edges (`data/loopBody.ts`) and injected
+     * like the two above. Unlike them it reaches ALL THREE canvases: what repeats
+     * is a property of the workflow rather than of editing it, and a run replay is
+     * where the repetition is most real.
+     */
+    __loop?: {
+        /** The iterators whose body this node is in, outermost first, by label. */
+        inside?: string[];
+        /** Set on an iterator itself: how many nodes hang off its `item` port. */
+        bodySize?: number;
+    };
 }
 type __VLS_Props = {
     id: string;

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

@@ -3,8 +3,8 @@ import { computed, inject, nextTick, 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, TrashBinMinimalistic as TrashBin } from "#solar-icons";
-import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import { Copy, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, Repeat, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { NODE_CATEGORIES, findManifest, isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { isTerminalManifest } from "../../data/nodeInputData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 const props = defineProps({
@@ -20,9 +20,14 @@ const category = computed(() => NODE_CATEGORIES.find((c) => c.key === manifest.v
 const title = computed(
   () => resolveDisplayName(props.data.name) || resolveLocalized(manifest.value?.name) || props.data.nodeSlug
 );
-const inputRequired = computed(() => manifest.value?.input?.required !== false);
 const invalidFields = computed(() => props.data.__invalidFields ?? []);
 const invalidLabel = computed(() => t("integration.canvas.node.badge.invalidConfig", invalidFields.value.length, { fields: invalidFields.value.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);
+const bodySizeLabel = computed(() => t("integration.canvas.node.badge.loopBody", bodySize.value ?? 0));
+const loopHighlight = inject("workflow-loop-highlight", null);
+const inSelectedLoop = computed(() => !!loopHighlight?.value.has(props.id));
 const notes = computed(() => (props.data.notes ?? "").trim());
 const noteOpen = ref(false);
 const noteReady = ref(false);
@@ -31,11 +36,15 @@ const notePlacement = ref(Position.Bottom);
 const noteMaxHeight = ref(0);
 let noteTimer = null;
 const notePanelId = computed(() => `node-note-${props.id}`);
+function handleTitle(p) {
+  return p.hint ? p.label + " \u2014 " + p.hint : p.label;
+}
 function portsFromOutputs(list) {
   const ports = [];
   for (const o of list) {
     if (o.name) {
-      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name });
+      const hint = resolveLocalized(o.description);
+      ports.push({ name: o.name, kind: o.kind, label: resolveLocalized(o.label) || o.name, ...hint ? { hint } : {} });
     } else if (o.sourceFromConfig) {
       const raw = props.data.config?.[o.sourceFromConfig];
       const values = Array.isArray(raw) ? raw : [];
@@ -160,6 +169,8 @@ function releaseNote() {
   }, 250);
 }
 const nodeActions = inject("workflow-node-actions", null);
+const unbuildableVersion = computed(() => nodeActions !== null && !isVersionExecutable(props.data.nodeSlug, props.data.nodeVersion));
+const unbuildableLabel = computed(() => t("integration.canvas.node.badge.noBuiltCode", { version: props.data.nodeVersion }));
 const canConfigure = computed(() => typeof nodeActions?.configure === "function");
 function configure() {
   nodeActions?.configure?.(props.id);
@@ -226,17 +237,15 @@ function remove() {
 
   <!-- Input: ONE logical input, attachable from the left or the top — both
        dots feed the same `__in` port. Clearly visible, ring + shadow. -->
-  <template v-if="inputRequired">
-    <Handle
-      v-for="side in IN_SIDES"
-      :id="`__in__${side}`"
-      :key="`in-${side}`"
-      type="target"
-      :position="sideToPosition(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"
-    />
-  </template>
+  <Handle
+    v-for="side in IN_SIDES"
+    :id="`__in__${side}`"
+    :key="`in-${side}`"
+    type="target"
+    :position="sideToPosition(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"
+  />
 
   <!-- Output handles: right + bottom, distributed per side. Color encodes the
        port semantics (true/false/error/branch/default), matching the edges. -->
@@ -247,7 +256,7 @@ function remove() {
       :key="`${p.name}-${side}`"
       type="source"
       :position="sideToPosition(side)"
-      :title="p.label"
+      :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"
@@ -261,23 +270,76 @@ function remove() {
     @mouseenter="onHoverEnter"
     @mouseleave="onHoverLeave"
     :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' : 'border-black/[0.08] shadow-sm hover:shadow-md hover:border-black/[0.16]',
+  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' : ''
 ]"
   >
-    <!-- Incomplete settings at the last save: the count, amber, at the corner
-         the input handles leave free. Hoverable on purpose — the count alone
-         doesn't say what is wrong, so the title spells it out and lists the
-         fields; `nodrag` keeps that hover from starting a card drag. -->
+    <!-- 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
+         soon as the count reaches two digits. Hoverable on purpose — a symbol or
+         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"
-      role="img"
-      :aria-label="invalidLabel"
-      :title="invalidLabel"
-      class="nodrag absolute -left-2 -top-2 z-10 flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      v-if="invalidFields.length || unbuildableVersion || insideLoops.length || bodySize !== void 0"
+      class="nodrag absolute -left-2 -top-2 z-10 flex items-center gap-1"
     >
-      <Lucide.TriangleAlert :size="9" :stroke-width="2.5" />
-      {{ invalidFields.length }}
+      <span
+        v-if="invalidFields.length"
+        role="img"
+        :aria-label="invalidLabel"
+        :title="invalidLabel"
+        class="flex cursor-help items-center gap-0.5 rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <!-- `weight="Bold"` for the same reason the Lucide draw carried
+             `stroke-width="2.5"`: 9px of white on amber. Solar's default
+             BoldDuotone washes out at that size against the pill. -->
+        <AlertTriangle :size="9" weight="Bold" />
+        {{ invalidFields.length }}
+      </span>
+      <!-- The pinned version cannot be run. Rose rather than amber, and no
+           count: amber on this card means unfinished work of the user's own —
+           settings still to fill in — while this is the platform missing a piece,
+           which the user cannot fix by typing. Hence the stronger colour despite
+           being the one that does NOT block activation. -->
+      <span
+        v-if="unbuildableVersion"
+        role="img"
+        :aria-label="unbuildableLabel"
+        :title="unbuildableLabel"
+        class="flex cursor-help items-center rounded-full bg-rose-600 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <AlertTriangle :size="9" weight="Bold" />
+      </span>
+      <!-- Repetition (PO-277). Slate, not amber or rose: a loop is how the
+           workflow is built, not something wrong with it. The glyph is the
+           mark; the count next to it is the depth, printed from 2 up because
+           "repeats" is the news at one loop and "repeats twice over" is the
+           news above it. Both marks carry their sentence as their accessible
+           name — a bare arrow at a corner is a riddle. -->
+      <span
+        v-if="insideLoops.length"
+        role="img"
+        :aria-label="repeatsLabel"
+        :title="repeatsLabel"
+        class="flex cursor-help items-center gap-0.5 rounded-full bg-slate-600 px-1.5 py-0.5 text-[9px] font-bold leading-none text-white shadow-sm"
+      >
+        <Repeat :size="9" weight="Bold" />
+        <template v-if="insideLoops.length > 1">{{ insideLoops.length }}</template>
+      </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. -->
+      <span
+        v-if="bodySize !== void 0"
+        role="img"
+        :aria-label="bodySizeLabel"
+        :title="bodySizeLabel"
+        class="flex cursor-help items-center gap-0.5 rounded-full border border-slate-300 bg-white px-1.5 py-0.5 text-[9px] font-bold leading-none text-slate-600 shadow-sm"
+      >
+        <Repeat :size="9" weight="Bold" />
+        {{ bodySize }}
+      </span>
     </span>
     <!-- Always-visible edit affordance: single click opens the config lightbox.
          (Double-click on the whole card works too.) Hidden in read-only hosts
@@ -330,7 +392,11 @@ function remove() {
         v-if="resolvePending"
         class="pointer-events-none absolute bottom-1 left-1/2 flex -translate-x-1/2 select-none items-center gap-1 whitespace-nowrap text-[9px] font-semibold uppercase tracking-wide text-muted-foreground"
       >
-        <Lucide.LoaderCircle :size="9" class="animate-spin" />
+        <!-- `weight="Bold"` for the badge's reason one size down: the default
+             BoldDuotone draws a filled disc across the whole viewBox, and a disc
+             turning looks like a disc standing still. Bold knocks the arrows out
+             of the ring, so 9px of it still reads as spinning. -->
+        <Loader2 :size="9" weight="Bold" class="animate-spin" />
         {{ t("integration.canvas.node.port.resolving") }}
       </span>
       <template v-else>

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

@@ -9,6 +9,19 @@ interface NodeData extends WorkflowNode {
      *  injected by the editor the same non-persisting way. Read-only canvases
      *  (run replay, history preview) never pass them, so nothing is marked there. */
     __invalidFields?: string[];
+    /**
+     * Where this node stands with respect to an iterator's loop body (PO-277),
+     * computed per sync from the blob's edges (`data/loopBody.ts`) and injected
+     * like the two above. Unlike them it reaches ALL THREE canvases: what repeats
+     * is a property of the workflow rather than of editing it, and a run replay is
+     * where the repetition is most real.
+     */
+    __loop?: {
+        /** The iterators whose body this node is in, outermost first, by label. */
+        inside?: string[];
+        /** Set on an iterator itself: how many nodes hang off its `item` port. */
+        bodySize?: number;
+    };
 }
 type __VLS_Props = {
     id: string;

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

@@ -11,9 +11,7 @@ import {
   AltArrowRight as Next,
   Play,
   Pause,
-  RefreshCircle as Loader2,
-  ClockCircle as Clock,
-  LinkRound as Webhook
+  RefreshCircle as Loader2
 } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
@@ -26,8 +24,10 @@ import StickyNoteView from "./StickyNoteView.vue";
 import GroupFrameView from "./GroupFrameView.vue";
 import WorkflowEdgeView from "./WorkflowEdgeView.vue";
 import { findManifest } from "../../data/integrationNodeCatalog";
+import { nodeLoopData } from "../../data/loopBody";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import { SAFETY_POLL_MS } from "../../utils/pollBudget";
-import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 const props = defineProps({
   workflow: { type: Object, required: true },
   initialRunId: { type: [String, null], required: false },
@@ -237,6 +237,7 @@ function replayNodeClass(id, type) {
   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 vfNodes = computed(() => {
   const blob = props.workflow.blob;
   const triggerPos = (id, i) => blob.triggerPositions?.[id] ?? { x: -40, y: 60 + i * 140 };
@@ -275,7 +276,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] }
+      data: { ...n, __resolvedOutputs: dynamicOutputs.value[n.id], __loop: loops.value.get(n.id) }
     }))
   ];
 });
@@ -408,7 +409,7 @@ function pretty(v) {
   }
 }
 function triggerIcon(type) {
-  return type === "schedule" ? Clock : type === "webhook" ? Webhook : Play;
+  return triggerGlyph(type);
 }
 const activeStepTitle = computed(() => {
   const s = activeStep.value;
@@ -472,7 +473,7 @@ watch(() => props.initialRunId, (id) => {
         <div class="absolute top-3 left-3 z-10 flex items-center gap-2 rounded-lg border border-black/[0.08] bg-white/95 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur-sm">
           <Play :size="13" class="text-muted-foreground" />
           <span class="font-medium">{{ selectedRunId ? t("integration.replay.canvas.runLabel", { id: selectedRunId }) : t("integration.replay.canvas.pickRun") }}</span>
-          <Badge v-if="runStatus" variant="outline" class="border text-xs font-medium uppercase" :class="statusClass(runStatus)">
+          <Badge v-if="runStatus" variant="outline" class="border text-xs font-medium uppercase" :class="runStatusClass(runStatus)">
             {{ runStatusLabel(runStatus) }}
           </Badge>
           <Badge v-if="stepsSource" variant="outline" class="border text-xs font-medium uppercase text-muted-foreground">
@@ -536,7 +537,7 @@ watch(() => props.initialRunId, (id) => {
             <template v-else>{{ t("integration.replay.debug.noStepSelected") }}</template>
           </div>
         </div>
-        <Badge v-if="activeStep" variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="statusClass(activeStep.status)">
+        <Badge v-if="activeStep" variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="runStatusClass(activeStep.status)">
           {{ runStatusLabel(activeStep.status) }}
         </Badge>
       </div>
@@ -614,8 +615,8 @@ watch(() => props.initialRunId, (id) => {
               <component :is="triggerIcon(r.triggerType)" :size="12" class="shrink-0 text-muted-foreground" />
               <span class="truncate">#{{ r.id }}</span>
             </span>
-            <Badge variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="statusClass(r.status)">
-              {{ r.status }}
+            <Badge variant="outline" class="shrink-0 border text-xs font-medium uppercase" :class="runStatusClass(r.status)">
+              {{ runStatusLabel(r.status) }}
             </Badge>
           </div>
           <div class="mt-0.5 flex items-center justify-between gap-2 text-sm text-muted-foreground">

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

@@ -4,33 +4,32 @@ export interface ExecutionModeOption {
     label: string;
     hint: string;
 }
+/** What this dialog edits — the values as they stand, saved or not. */
+export interface WorkflowSettingsValues {
+    name: string;
+    description: string;
+    tags: string[];
+    icon: WorkflowIcon | null;
+    executionMode: string;
+}
 type __VLS_Props = {
     open: boolean;
     workflow: Workflow;
     modes: ExecutionModeOption[];
-    modeDraft: string;
-    savingMode?: boolean;
-    savingMeta?: boolean;
+    /**
+     * The values to edit: the editor's unsaved ones where it has any, the saved ones
+     * otherwise. Reopening the dialog therefore shows what the operator last entered
+     * rather than what the platform still holds.
+     */
+    current: WorkflowSettingsValues;
     /** Tag suggestions (tags already used across the tenant's workflows). */
     tagSuggestions?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (args_0: boolean) => any;
-    "change-mode": (mode: string) => any;
-    "save-meta": (meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any;
+    apply: (values: WorkflowSettingsValues) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
-    "onChange-mode"?: ((mode: string) => any) | undefined;
-    "onSave-meta"?: ((meta: {
-        name: string;
-        description: string;
-        tags: string[];
-        icon: WorkflowIcon | null;
-    }) => any) | undefined;
+    onApply?: ((values: WorkflowSettingsValues) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;