@revenexx/studio-integrations 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,222 @@
 # @revenexx/studio-integrations
 
+## 1.1.0
+
+### Minor Changes
+
+- c8f121b: The Schedules page shows the firing the platform actually holds, and the run it
+  really performed.
+
+  Both times in that list were made up. There was no telemetry to read, so the page
+  computed them from the schedule's own identity — arithmetic over the workflow id
+  and the trigger id — which told the truth about the _shape_ of the answer and
+  nothing about the value. A schedule that fires nightly at 03:00 could read "in
+  18m", and one that had never run could report a last run.
+
+  They are now the platform's: the next firing it holds, with the offset of the
+  schedule's own zone available as the cell's title, and the last run it really
+  performed. The header's live count and the timezones the filter offers are its
+  counts too, taken over the tenant rather than over the rows on screen — so
+  narrowing the list no longer shrinks the menu that narrows it.
+
+  Two promises changed with them.
+
+  A paused schedule used to state neither time, which looked like one rule and was
+  really an artefact of both being invented from the same flag. It has no next
+  firing, because the platform holds none for it — and it keeps the run it performed
+  before it was paused. Forgetting that is how a paused schedule reads as one that
+  never ran.
+
+  "A distance further out than a day is stated as the date and time instead" was a
+  promise with nothing to prove it: the fabricated times stayed inside twelve hours,
+  so no fixture could produce the day-scale form. A weekly schedule reaches it, and
+  it now has a test.
+
+  What the page still cannot say is _why_ a schedule will not fire. The platform
+  distinguishes six reasons beyond "somebody paused it" — the workflow is off, its
+  bundle never built, the expression cannot be read, the zone is not a real one, the
+  rhythm can never come round — and the page shows the absence of a next run and the
+  live/paused badge, which covers the first and leaves the others looking like it.
+
+  Review then found four more things a fully mocked test suite could not see, and
+  they are user-visible.
+
+  A schedule carrying no zone of its own showed a blank timezone and could be found
+  under none of the zones the filter offers — the platform counts such a row under
+  its own default and narrows to it there, so the studio puts that default back
+  rather than showing nothing.
+
+  A run the platform has created and no worker has started now says so, instead of
+  reading as a schedule that has never run: when a run _started_ is recorded only
+  once something picks it up.
+
+  A read the platform refuses says so. Until now the page fell through to the words
+  a tenant with no schedules gets, which on this page is the opposite state — an
+  operator told there are no schedules stops looking, and a tenant whose list merely
+  could not be reached is the one where something may be silently not firing.
+
+  And a date further out than a day is drawn in the schedule's own timezone, so it
+  no longer contradicts the zone stated beside it — or the exact moment on its own
+  hover — by an hour or two.
+
+- 82884b7: The Runs page, its Missed runs tab and the Dashboard read the platform's own
+  lists and figures instead of assembling them in the browser.
+
+  Runs are a per-workflow resource, so the tenant-wide views used to collect them:
+  a request per workflow, paged to the end of each one's history — up to a hundred
+  pages of a hundred rows apiece — and then ordered, filtered and counted here. A
+  tenant's ordering and totals were therefore only ever as complete as that
+  collecting, and nothing said how far back the page reached. The same went for the
+  missed firings and for the four figures on the landing page, four of which could
+  not start until one shared list of workflows had arrived.
+
+  The platform serves all of it now. One request for the runs, ordered by it; one
+  for the counts, taken over the tenant rather than over what happened to load; one
+  for the latest run of each workflow, which is what the Workflows list and the
+  dashboard's two panels actually want. The dashboard no longer loads a run list at
+  all.
+
+  Three things visibly change rather than merely getting faster:
+
+  The trigger column and its filter tell runs apart. Every row claimed to have been
+  started by hand, because the payload carried nothing about what started it, so
+  that menu had one populated option. The platform reports it, so the column is
+  true and narrowing by it works.
+
+  The Workflows list stops being able to say "never run" about a workflow that
+  simply ran a while ago. That cell used to pick the newest run out of the tenant's
+  whole history held in memory, which only worked while all of it was loaded.
+
+  The counts are the tenant's. The Missed runs badge, the runs in flight and the
+  failed figure are counted by the platform under the same narrowing as the list
+  beside them, so a figure and its rows can no longer disagree.
+
+  What is still bounded is depth: the Runs list reaches the most recent hundred
+  runs, and narrowing reaches what is on the page. Paging past that needs the shared
+  studio table to be able to report a narrowing back to the page, which it cannot
+  yet — that is the remaining half of PO-231.
+
+- 59133ea: The canvas says which steps a loop repeats.
+
+  An iterator draws its two outputs — Item and Done — like any other pair of ports,
+  so nothing said that everything hanging off Item runs once per element while
+  everything off Done runs once, afterwards. Somebody who had not drawn the workflow
+  could not see where the repeating part began or how far it reached.
+
+  Every step a loop repeats now carries a mark saying so, and naming the loop; a
+  step inside two loops names both, outermost first. The loop itself carries the
+  number of steps it repeats — including zero, which is what a loop nothing is wired
+  to yet looks like. Selecting the loop draws its whole body as part of the
+  selection, for as long as the selection lasts — and selecting any step of the body
+  does the same from the other end, drawing the loop and everything that repeats
+  alongside it. The marks are on all three canvases
+  that draw a workflow — the editor, the run replay and the revision preview — and
+  they follow a rewiring at once, before anything is saved.
+
+  What is marked is what the engine will actually repeat, which is not always the
+  body as it was drawn: the repeating part has no end anywhere in the workflow, only
+  a reach, so a step wired to the last step of the body runs once per element even
+  when it was meant to run once afterwards. A loop's Output tab now counts the steps
+  it repeats, names them, and says which of them are wired after the loop as well —
+  reported rather than refused, because a body that rejoins the main flow can be
+  exactly what its author wanted.
+
+  The connections themselves are unchanged: they carry importance, never meaning,
+  and colour on them stays reserved for a run that actually happened.
+
+### Patch Changes
+
+- 5385146: A missed run's state is said in the studio's own words.
+
+  The badge on a missed run showed the state as the platform spells it — `PENDING`,
+  `REPLAYED`, `DISCARDED` — while the badge on a run row one tab away said
+  "succeeded" or "running" in the operator's language. A German interface therefore
+  read English in this one list, and any state the platform starts recording
+  tomorrow would have appeared on screen untranslated with nothing to notice it.
+
+  Both lists that carry the entry — the tenant-wide Missed runs tab and the panel
+  inside a workflow's editor — now say the state through the message catalogue: a
+  firing still waiting, one replayed, one discarded, in English and in German. A
+  state the studio has no word for says exactly that and keeps the platform's own
+  value alongside it, so an operator can quote what arrived without the studio
+  passing it off as a word somebody chose.
+
+  The colours of those badges are unchanged, and the two surfaces still tint them
+  differently — that is a separate finding, not this one.
+
+- 630523f: A missed run's state is drawn the same way on both lists.
+
+  The same entry was coloured differently depending on where it was opened. Beside
+  the tenant's runs it read the cockpit-wide status palette, where a waiting firing
+  is tinted like a run that is about to start and the other two states are absent
+  altogether — so _replayed_ and _discarded_ were both grey. Inside a workflow the
+  panel carried a palette of its own: amber for waiting, green for replayed, grey
+  for discarded.
+
+  Both lists now draw a state from one place: waiting asks for attention, replayed
+  reads as finished well, discarded and anything the studio has no word for read as
+  over. The colours are the shared palette's, so this is one more vocabulary mapped
+  into the studio's tones rather than a second set of colours — and the word and the
+  colour for a state now come from a single map, which is what stops the next state
+  being added to one and forgotten in the other.
+
+  Visible change: on the tenant-wide _Missed runs_ tab a waiting firing turns from
+  blue to amber and a replayed one from grey to green. The panel inside a workflow
+  keeps the colours it had, give or take the shared palette's border and text tints.
+
+- 6e1a42e: A run's outcome is drawn the same way wherever it is shown.
+
+  A run terminated by an operator read _failed_ in a list and _failed_ at its own
+  record — in two colours. The word went through the studio's vocabulary, where the
+  platform's `terminated` becomes _failed_, and the colour did not: the palette was
+  handed the platform's word, which it has no branch for, so the badge fell back to
+  the grey a cancelled run wears. Clicking the row took the operator from a red
+  badge to a grey one for the same run.
+
+  The colour is now decided from the same word as the label, everywhere a run's or a
+  step's state is drawn: the runs list, the dashboard's latest runs, a run's record,
+  its timeline and the replay. Nothing changes on the surfaces that were already
+  right — a row's status is mapped before anything draws it — and a run whose state
+  the platform reports as `terminated` or `timed_out` now looks like the failure the
+  badge says it is.
+
+  A cancelled run was affected in the same way, in the _word_ rather than the
+  colour: the platform spells a cancellation the American way, so a run cancelled
+  from its row read _cancelled_ on the row and _canceled_ at its own record — and in
+  German the record said it in English. It now reads the studio's word wherever it
+  is shown.
+
+  One of those surfaces was worse in German than in English: the timeline's step
+  lightbox derived its colour from the word it had already translated, so a failed
+  step was drawn neutral for a German reader and red for an English one. The colour
+  is now taken from the status itself.
+
+  `statusClass` is unchanged and still exports the studio-wide status palette;
+  `runStatusClass` is the run-vocabulary door to it.
+
+- e69e407: A run is called a Run in German too.
+
+  The German interface used two words for one object. Three quarters of the
+  catalogue said _Run_ — the sidebar item, the editor's Runs tab, the Run button, the
+  breadcrumb, every audit entry — while 29 values said _Ausführung_, including the
+  tab sitting directly beside the one that said _Runs_, and two sentences that used
+  both words in the same breath ("Noch keine Ausführungen — im Editor auf Run
+  klicken").
+
+  Those 29 now say _Run_: the editor's _Verpasste Runs_ tab, the dashboard's _Letzte
+  Runs_ panel and its missed-run count, the schedules table's _Letzter Run_ and
+  _Nächster Run_, and the toasts and hints around starting, retrying and replaying
+  one.
+
+  _Ausführung_ stays where it names the act rather than the object —
+  _Ausführungsmodus_, _Ausführungsverhalten_, _Ausführungsverlauf_,
+  _Hintergrundausführung_, and the settings section _Ausführung_. Their English says
+  _Execution_ too, which is the test for the next one: if the English says _run_, the
+  German says _Run_. The rule is now written down in `docs/interface-language.md`
+  rather than living in one catalogue entry's description.
+
+  No English copy changed, and no key was added or removed.
+
 ## 1.0.0
 
 ### Major Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

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

@@ -3,6 +3,7 @@ import { onMounted, ref, watch } from "vue";
 import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -62,11 +63,6 @@ async function onDiscard(dl) {
     busyId.value = null;
   }
 }
-function statusClass(status) {
-  if (status === "pending") return "bg-amber-500/15 text-amber-700 border-amber-500/25";
-  if (status === "replayed") return "bg-emerald-500/15 text-emerald-700 border-emerald-500/25";
-  return "bg-slate-500/15 text-slate-600 border-slate-500/20";
-}
 function fmt(iso) {
   if (!iso) return "\u2014";
   try {
@@ -117,7 +113,7 @@ function fmt(iso) {
         :key="dl.id"
         class="flex items-start gap-3 px-3 py-2.5"
       >
-        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', statusClass(dl.status)]">{{ dl.status }}</Badge>
+        <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', deadLetterStatusClass(dl.status)]">{{ deadLetterStatusLabel(dl.status) }}</Badge>
         <div class="min-w-0 flex-1">
           <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
           <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">

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

@@ -38,6 +38,8 @@ import {
   variableExpr
 } from "../../data/nodeInputData";
 import { portDotClass } from "../../data/portTone";
+import { computeLoopBodies, manifestIterates } from "../../data/loopBody";
+import { nodeDisplayLabel } from "../../utils/validationFindings";
 import { authChoiceFromConfig, configPatchForAuthChoice } from "../../data/webhookAuth";
 import {
   dataTypeOf,
@@ -772,6 +774,22 @@ const outputView = ref("schema");
 const selfInputs = computed(() => inputPortsForManifest(manifest.value));
 const selfSample = computed(() => draftNode.value ? sampleFor(draftNode.value.id) : void 0);
 const selfPorts = computed(() => draftNode.value ? withSampledFields(portsForNode(draftNode.value, manifest.value, props.dynamicOutputs?.[draftNode.value.id]), selfSample.value) : []);
+const loopBody = computed(() => {
+  if (!draftNode.value || !manifestIterates(manifest.value)) return null;
+  const nodes = props.nodes ?? [];
+  const [body] = computeLoopBodies([draftNode.value.id], props.edges ?? []);
+  if (!body) return null;
+  const labelOf = (id) => {
+    const n = nodes.find((x) => x.id === id);
+    return n ? nodeDisplayLabel(n) : id;
+  };
+  const inBody = (ids) => nodes.filter((n) => ids.has(n.id)).map((n) => labelOf(n.id));
+  return {
+    size: body.nodeIds.size,
+    names: inBody(body.nodeIds),
+    joined: inBody(body.joinedWithDone)
+  };
+});
 const selfSampleJson = computed(() => selfSample.value ? JSON.stringify(selfSample.value, null, 2) : "");
 const selfPinned = computed(() => !!draftNode.value && !!pinnedSamples.value[draftNode.value.id]);
 watch(selfSample, (s) => {
@@ -1937,6 +1955,28 @@ async function runTestStep() {
                rather than a permanent column — it is the last thing done, if it
                is done at all, and it needs the width when it is. -->
           <div v-else-if="tab === 'output' && draftNode" class="mx-auto w-full max-w-5xl space-y-5">
+            <!-- An iterator's own tab leads with what it repeats (PO-277): the
+                 ports below say what leaves Item and Done, and this says how much
+                 of the workflow hangs off the first of them. Above the port
+                 schema on purpose — the count is the thing a reader came here to
+                 check, and it is the one statement the canvas cannot make. -->
+            <section v-if="loopBody" class="space-y-1.5 rounded-md border border-black/[0.06] bg-white p-3">
+              <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.output.loopBody.heading") }}</span>
+              <p class="text-sm text-foreground/80">
+                {{ t("integration.nodeInspector.output.loopBody.size", loopBody.size) }}
+              </p>
+              <p v-if="loopBody.names.length" class="text-xs text-muted-foreground">
+                {{ t("integration.nodeInspector.output.loopBody.names", { names: loopBody.names.join(", ") }) }}
+              </p>
+              <!-- Amber, not rose, and not a validation finding: a body wired
+                   into the Done side may be exactly what the author wanted, so
+                   this states what the engine will do and leaves the judgement
+                   to them. Routing it through the findings would refuse an
+                   activation that is legitimate. -->
+              <p v-if="loopBody.joined.length" class="text-xs text-amber-700">
+                {{ t("integration.nodeInspector.output.loopBody.joined", loopBody.joined.length, { names: loopBody.joined.join(", ") }) }}
+              </p>
+            </section>
             <section class="space-y-2">
               <div class="flex items-center justify-between gap-2">
                 <p class="text-xs text-muted-foreground">

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

@@ -2,7 +2,7 @@
 import { computed, onUnmounted, ref, watch } from "vue";
 import { Download as DownloadIcon, RefreshCircle as RefreshIcon } from "#solar-icons";
 import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@revenexx/studio";
-import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { IntegrationsApiError } from "../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 const props = defineProps({
@@ -270,9 +270,12 @@ function timelineBarClass(row) {
   }
 }
 const timelineDetail = ref(null);
+function timelineRowStatusWord(row) {
+  if (row.durationMs == null) return "running";
+  return row.ok ? "succeeded" : "failed";
+}
 function timelineRowStatus(row) {
-  if (row.durationMs == null) return t("integration.runs.status.running");
-  return t(row.ok ? "integration.runs.status.succeeded" : "integration.runs.status.failed");
+  return runStatusLabel(timelineRowStatusWord(row));
 }
 function fmtClock(ms) {
   try {
@@ -583,7 +586,7 @@ async function confirmAction() {
           <div>
             <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.status") }}</div>
             <div class="mt-0.5">
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(dStatus ?? run.status)]">
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(dStatus ?? run.status)]">
                 {{ runStatusLabel(dStatus ?? run.status) }}
               </Badge>
             </div>
@@ -699,7 +702,7 @@ async function confirmAction() {
               class="w-full flex items-center gap-3 px-3 py-2 text-left"
               @click="toggleStep(i)"
             >
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', statusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runStatusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
               <div class="min-w-0 flex-1">
                 <div class="font-mono text-xs truncate">{{ st.node_slug || st.node_id }}</div>
                 <div class="text-[10px] text-muted-foreground truncate">
@@ -802,7 +805,7 @@ async function confirmAction() {
             <Badge
               v-if="timelineDetail"
               variant="outline"
-              :class="['border text-xs font-medium uppercase', statusClass(timelineRowStatus(timelineDetail))]"
+              :class="['border text-xs font-medium uppercase', runStatusClass(timelineRowStatusWord(timelineDetail))]"
             >{{ timelineRowStatus(timelineDetail) }}</Badge>
             <span v-if="timelineDetail" class="text-sm tabular-nums text-muted-foreground">{{ fmtMs(timelineDetail.durationMs) }}</span>
           </DialogTitle>

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import { Badge } from "@revenexx/studio";
-import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusLabel, statusClass } from "../../utils/statusStyle";
+import { RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
@@ -99,7 +99,7 @@ const columns = computed(() => [
     @row-click="(r) => openRun(r)"
   >
     <template #cell-status="{ row: run }">
-      <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(run.status)]">
+      <Badge variant="outline" :class="['border text-xs font-medium uppercase', runStatusClass(run.status)]">
         {{ runStatusLabel(run.status) }}
       </Badge>
     </template>

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";
@@ -89,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);
@@ -229,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) => {
@@ -284,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)
       }
     }))
   ];

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

@@ -18,6 +18,7 @@ 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 },
@@ -142,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),
@@ -167,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) => {
@@ -245,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/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,7 +3,7 @@ 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, DangerTriangle as AlertTriangle, RefreshCircle as Loader2, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+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";
@@ -22,6 +22,12 @@ const title = computed(
 );
 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);
@@ -264,7 +270,7 @@ 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' : ''
 ]"
   >
@@ -275,7 +281,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"
+      v-if="invalidFields.length || unbuildableVersion || insideLoops.length || bodySize !== void 0"
       class="nodrag absolute -left-2 -top-2 z-10 flex items-center gap-1"
     >
       <span
@@ -305,6 +311,35 @@ function remove() {
       >
         <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

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;