@revenexx/studio-integrations 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,259 @@
 # @revenexx/studio-integrations
 
+## 1.1.1
+
+### Patch Changes
+
+- 77ea454: A workflow's Runs tab no longer puts the operator back on the newest page while
+  they are paging. The tab's own refresh used to consult the page that last arrived
+  rather than the page that was asked for, so a refresh falling due between "show me
+  the older runs" and those runs arriving won the race and undid the click. It now
+  leaves a pending page alone, and a refresh that was already on its way no longer
+  draws over the page the operator asked for.
+- ddb95eb: The `{ }` button beside a node setting is no longer announced as its own glyph.
+  It now carries a name saying what it does and what it opens ("Insert expression —
+  available data for this setting", and the German equivalent), reports whether the
+  list of available data is open, and points at that list while it is there.
+
+  It can also be operated from the keyboard at all now: it acted on a mouse press
+  alone, so Enter and Space did nothing, and Escape while it had focus closed the whole
+  node configuration dialog instead of the list. Nothing changes for a pointer.
+
+- ec8f025: A run row no longer offers actions the platform will refuse. A run that has been
+  accepted but not started yet has no execution to act on, and the API answers a
+  cancel, a terminate or a resume for it with a 409 — so the row now withholds all
+  three, the way the run's own record already does, instead of turning the click into
+  an error toast.
+
+  Two German words on the same menu are fixed with it: the row's "Retry" and the
+  record's were shipped untranslated, and the entry that opens a run's replay said
+  "Wiederholen", which reads as an offer to run it again. They now read "Erneut
+  ausführen" and "Wiedergabe" — the word the replay surface itself already uses.
+
+- 0de6228: A run's outcome is no longer cut off or drawn over the workflow name beside it. The
+  Status column in both lists of runs — the Runs page and the dashboard's latest runs —
+  was a fixed width measured against the English words, so the German
+  "fehlgeschlagen" ran out of its cell; the dashboard's own column was narrower still,
+  and even "erfolgreich" overflowed it. Both now share one track that keeps a floor and
+  grows to the widest word on the page, in whatever language the studio is read.
+
+## 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.1",
   "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/ExpressionInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
 import { Node } from "@tiptap/core";
 import Document from "@tiptap/extension-document";
@@ -158,10 +158,16 @@ const filteredSections = computed(() => {
 });
 const open = ref(false);
 const wrapRef = ref(null);
+const triggerRef = ref(null);
+const listOpen = computed(() => open.value && hasSuggestions.value);
+const pickerId = useId();
 function toggle() {
   if (!open.value && !hasSuggestions.value) return;
   open.value = !open.value;
 }
+function onTriggerClick(e) {
+  if (e.detail === 0) toggle();
+}
 function onFocusOut(e) {
   if (wrapRef.value && e.relatedTarget instanceof globalThis.Node && wrapRef.value.contains(e.relatedTarget)) return;
   open.value = false;
@@ -173,6 +179,13 @@ function onKeydown(e) {
     open.value = false;
   }
 }
+function onPickerKeydown(e) {
+  if (e.key !== "Escape" || !open.value) return;
+  e.stopPropagation();
+  e.preventDefault();
+  open.value = false;
+  triggerRef.value?.focus();
+}
 function onDocMousedown(e) {
   if (wrapRef.value && !wrapRef.value.contains(e.target)) open.value = false;
 }
@@ -188,7 +201,11 @@ function insert(expr) {
 </script>
 
 <template>
-  <div ref="wrapRef" class="relative" @focusout="onFocusOut">
+  <!-- `keydown` on the widget rather than on the editor alone: with focus on the
+       trigger, Escape used to reach the configuration lightbox and close the whole
+       dialog. The editor keeps its own handler, which stops the event before it
+       arrives here. -->
+  <div ref="wrapRef" class="relative" @focusout="onFocusOut" @keydown="onKeydown">
     <div class="flex items-center gap-1">
       <div
         class="expr-editor relative h-8 min-w-0 flex-1 overflow-hidden rounded-md border bg-white px-2 text-sm transition focus-within:outline-2 focus-within:-outline-offset-1 focus-within:outline-ring"
@@ -200,12 +217,22 @@ function insert(expr) {
         >{{ placeholder }}</span>
         <EditorContent :editor="editor" class="h-full" @keydown="onKeydown" />
       </div>
+      <!-- The name says what the button does AND what it opens, because the glyph
+           says neither; `aria-expanded` says whether the list is there, and
+           `aria-controls` only while it is — an id pointing at nothing is worse
+           than no link. See the docblock on `listOpen` for why this is not the
+           shared popover. -->
       <button
+        ref="triggerRef"
         type="button"
         :title="t('integration.nodeConfig.expression.insertTitle')"
+        :aria-label="t('integration.nodeConfig.expression.insertAria')"
+        :aria-expanded="listOpen"
+        :aria-controls="listOpen ? pickerId : void 0"
         class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
-        :class="open ? 'ring-2 ring-emerald-500/40' : ''"
+        :class="listOpen ? 'ring-2 ring-emerald-500/40' : ''"
         @mousedown.prevent="toggle"
+        @click="onTriggerClick"
       >
         {{ triggerLabel }}
       </button>
@@ -224,8 +251,10 @@ function insert(expr) {
          here and in the panel beside the form — and a popup nothing can address
          is a popup nothing can test either. -->
     <div
-      v-if="open && hasSuggestions"
+      v-if="listOpen"
+      :id="pickerId"
       role="group"
+      @keydown="onPickerKeydown"
       :aria-label="t('integration.nodeConfig.expression.picker.aria')"
       class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
     >

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/RunActionsMenu.vue

@@ -23,9 +23,10 @@ function viewDetails() {
 function viewReplay() {
   void router.push({ path: `/integrations/workflows/${props.run.workflowId}`, query: { run: props.run.id, view: "replay" } });
 }
-const isActive = computed(() => props.run.status === "running" || props.run.status === "queued");
+const hasExecution = computed(() => !!props.run.temporalRunId);
+const isActive = computed(() => (props.run.status === "running" || props.run.status === "queued") && hasExecution.value);
 const isTerminal = computed(() => ["succeeded", "failed", "cancelled"].includes(props.run.status));
-const canResume = computed(() => props.run.status === "failed");
+const canResume = computed(() => props.run.status === "failed" && hasExecution.value);
 const hasAny = computed(() => isActive.value || isTerminal.value);
 const busy = ref(false);
 function actionLabel(a) {

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_COLUMN_WIDTH, 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 },
@@ -70,7 +70,11 @@ const columns = computed(() => [
   // Sorted and searched by the word on screen, not by the raw field: a column
   // with no `searchGetter` is searched through its `sortGetter`, so a German
   // reader typing the status they can see has to find the row that shows it.
-  { key: "status", label: t("integration.runs.table.column.status"), width: "100px", sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
+  // One floor for both lists of runs, this one and the dashboard's, rather than a
+  // number guessed twice — see `RUN_STATUS_COLUMN_WIDTH` for how it was chosen and
+  // why the track cannot be elastic. At the 100px it used to be, the German
+  // "fehlgeschlagen" ran out of its cell and under the workflow name (PO-362).
+  { key: "status", label: t("integration.runs.table.column.status"), width: RUN_STATUS_COLUMN_WIDTH, sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
   ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.workflow"), sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => r.workflowName }] : [],
   // Fixed floor wide enough for a full UUID, flexible above it — header and
   // body rows are separate grids, so a content-sized track (max-content)
@@ -99,7 +103,15 @@ 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)]">
+      <!-- `max-w-full` is the net, not the fix: a word wider than the column above is
+           then clipped inside its own cell instead of being drawn over the one beside
+           it, and the `title` keeps it readable. A hard clip, not an ellipsis — the
+           badge is an inline-flex box, where `text-overflow` does not apply. -->
+      <Badge
+        variant="outline"
+        :title="runStatusLabel(run.status)"
+        :class="['border text-xs font-medium uppercase max-w-full', 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 {