@revenexx/studio-integrations 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @revenexx/studio-integrations
 
+## 2.9.0
+
+### Minor Changes
+
+- f849488: The `{ }` mapping list has a RUN section: the run's ID, the link to the run's page, its workflow's ID and its workflow's name, so a ticket or message a workflow sends can lead back to the run it came from. A value mapped from one of them reads as what it is ("Run ID", "Run link", "Workflow name") rather than as its expression (PO-565).
+- 4df13c7: A step skipped because a branch delivered nothing now says so in run replay and in the run's step list: "Skipped: dead end in branch 2". On the replay canvas the step is drawn as skipped rather than as one that ran, and no taken path leads into it. Any other skip reason reads as a plain "Skipped" (PO-750, with PO-502 reporting the reason).
+- 4df13c7: The canvas shows where a workflow splits and where its branches meet (PO-750). An output with more than one connection leaving it is drawn as a box — a splitter, every branch runs — and an input that gathers the branches of one splitter is a box too — a merger, it waits for every branch. A split inside a split that meets again in one step shows each level without a step of its own as a small box in front of that step's input; it is drawn only, never saved and never run. The editor, the run replay and the version history all draw the same. While a connection is drawn, the editor now refuses the two that could never become valid — one crossing a loop's boundary, and one leading back to a step it comes from — and says why; everything else is still left to the save.
+
+### Patch Changes
+
+- d5898c2: A workflow name cut short on the Schedules page shows itself whole on hover (PO-614).
+- 7ead0a0: A node's credential picker reads the tenant's credentials again each time it opens, and the template install dialog each time it opens. Before, the list was read once per page, so a credential created in another tab stayed missing until the page was reloaded. A re-read that fails keeps the list that was there and reports nothing (PO-653).
+- ece71b7: A multi-line setting that maps values takes a click anywhere in its box. Before, only its first line did: a click on the empty lines below focused nothing, so what was typed went nowhere and a value picked from the data panel landed in the field used before (PO-689).
+- ece00b1: A palette search lists the node named exactly what was typed first. Before, hits came in folder order only, so searching "E-Mail senden" put two Brevo nodes above the node of that name (PO-693).
+- 4df13c7: A change to a workflow's connections that gives it a shape the save will refuse — drawing one, moving an end, inserting a node into one, duplicating or pasting steps, deleting a connection or a step — is still made, but is now said at once: a warning names the step the save will refuse and, where one branch of a split crosses into another, the connection from which output of which step into which step. That step's input is drawn red with the same words as its title, and the crossing connection red and dashed, until the shape is put right (PO-746).
+- 4df13c7: A save refused for how a workflow's branches come back together no longer offers to keep the work as paused — the shape is checked whatever the workflow's state, so that save failed as well. A dialog says the workflow is invalid and cannot be saved like this, and lists each error in plain words in the studio's language — which connection or step, by its name, and what to do about it — instead of the service's English text with step ids. A paused workflow gets the same dialog instead of the raw text in the toolbar (PO-746). The warning on the canvas — said as a connection is drawn, and on the refused input — now uses the same plain words.
+- 4df13c7: The canvas's branch analysis now knows that a step which ends the run, such as Stop and Error, is never the end of a loop's body — the same judgement the save check makes (PO-749). Nothing drawn changes today.
+- 4df13c7: Hovering a merger, a converging input or a level drawn in front of one now names every branch arriving there on a line of its own — the step it ends in, the output it leaves by, and the expression the receiving step reads it with: `${{ in.<step> }}` for a branch gathered with others, `${{ in }}` for the one alternative that arrived (PO-750).
+- 4df13c7: A connection the editor refuses while it is drawn is now explained in a toast with a title and a detail that names the steps involved — "Connection not possible", then which step already runs after which, or which step is inside which loop and which of the loop's outputs may lead in or out (PO-750). Copies that came without some of their connections say so the same way.
+- 4df13c7: Review fixes on the branch rules in the editor (PO-750): a connection drawn from a loop's own Item output to a step reached from outside the loop is explained as such; a new cycle among steps that already sit on another cycle is refused while drawing; a skipped step is drawn as skipped in the replay whatever case the platform writes its status in, and its badge reads "skipped" / "übersprungen" rather than the raw status; checking a connection while it is dragged no longer re-analyses the whole workflow on every pointer move.
+- 560ac24: A node card's output names no longer print over each other. Where the names of a node's outputs would collide evenly spaced — three outputs, or long names, as on the OpenPLZ node in German — the dots are spaced by the names' widths, each under its own name, and the card widens only where even that does not fit. Cards whose names already fit are unchanged. A group's frame follows a card that widened, in the editor, the version history preview and the run replay.
+
+## 2.8.1
+
+### Patch Changes
+
+- 46507f8: Escape in an open option list closes the list and stops there. In a node's dialog, the searchable list of a setting whose options come from the platform let Escape through to the dialog, which took it as Cancel and threw away every setting entered in it (PO-655). Escape with no list open still cancels the dialog.
+
 ## 2.8.0
 
 ### Minor Changes

package/dist/module.json

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

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

@@ -30,6 +30,12 @@ function tok(inner) {
 }
 const triggerLabel = "{ }";
 const nodeNames = inject("integrationsNodeNames", null);
+const RUN_IDENTITY = [
+  { expr: "run.id", pill: () => t("integration.nodeConfig.expression.pill.runId"), suggestion: () => t("integration.nodeConfig.expression.suggestion.runId"), kind: "number" },
+  { expr: "run.url", pill: () => t("integration.nodeConfig.expression.pill.runUrl"), suggestion: () => t("integration.nodeConfig.expression.suggestion.runUrl"), kind: "string" },
+  { expr: "workflow.id", pill: () => t("integration.nodeConfig.expression.pill.workflowId"), suggestion: () => t("integration.nodeConfig.expression.suggestion.workflowId"), kind: "number" },
+  { expr: "workflow.name", pill: () => t("integration.nodeConfig.expression.pill.workflowName"), suggestion: () => t("integration.nodeConfig.expression.suggestion.workflowName"), kind: "string" }
+];
 function pillLabel(expr) {
   const path = expr.split(".");
   if (path[0] === "nodes" && path[2] === "outputs") {
@@ -42,6 +48,8 @@ function pillLabel(expr) {
     return rest ? t("integration.nodeConfig.expression.pill.triggerPath", { rest }) : t("integration.nodeConfig.expression.pill.triggerPayload");
   }
   if (path[0] === "vars") return t("integration.nodeConfig.expression.pill.variable", { path: path.slice(1).join(".") });
+  const identity = RUN_IDENTITY.find((r) => r.expr === expr);
+  if (identity) return identity.pill();
   if (path[0] === "in") {
     const rest = path.slice(1).join(".");
     return rest ? t("integration.nodeConfig.expression.pill.inputPath", { rest }) : t("integration.nodeConfig.expression.pill.inputPayload");
@@ -255,6 +263,10 @@ const sections = computed(() => {
     inItems.push({ label: "input." + f, expr: tok("in." + f), kind: primary?.fieldTypes?.[f] ?? null });
   }
   out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.input"), items: inItems });
+  out.push({
+    heading: t("integration.nodeConfig.expression.suggestion.heading.run"),
+    items: RUN_IDENTITY.map((r) => ({ label: r.suggestion(), expr: tok(r.expr), kind: r.kind }))
+  });
   return out;
 });
 const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
@@ -285,6 +297,24 @@ function toggle() {
 function onTriggerClick(e) {
   if (e.detail === 0) toggle();
 }
+function onBoxMousedown(e) {
+  if (!props.multiline || e.button !== 0 || e.shiftKey) return;
+  if (e.target.closest(".ProseMirror")) return;
+  const box = e.currentTarget;
+  const outer = box.getBoundingClientRect();
+  if (e.clientX - outer.left - box.clientLeft >= box.clientWidth || e.clientY - outer.top - box.clientTop >= box.clientHeight) return;
+  e.preventDefault();
+  const region = editor.view.dom.getBoundingClientRect();
+  if (e.clientY >= region.bottom) {
+    editor.commands.focus("end", { scrollIntoView: false });
+    return;
+  }
+  const hit = editor.view.posAtCoords({
+    left: Math.min(Math.max(e.clientX, region.left + 1), region.right - 1),
+    top: Math.min(Math.max(e.clientY, region.top + 1), region.bottom - 1)
+  });
+  editor.commands.focus(hit ? hit.pos : "end", { scrollIntoView: false });
+}
 function onFitClick(e) {
   if (e.detail === 0 && singleFit.value) insertToken(singleFit.value.expr);
 }
@@ -333,6 +363,7 @@ function insert(expr) {
   multiline ? 'expr-multiline' : 'h-8 overflow-hidden',
   invalid ? 'border-rose-400' : 'border-black/[0.08]'
 ]"
+        @mousedown="onBoxMousedown"
       >
         <span
           v-if="!text"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
@@ -33,14 +33,44 @@ const options = computed(() => q.data.value?.options ?? []);
 const isMulti = computed(() => props.field.type === "multiselect");
 const disabledControlClass = "flex h-8 items-center rounded-md border border-black/[0.08] bg-white px-2 text-sm text-muted-foreground opacity-50";
 const currentValue = computed(() => String(props.modelValue ?? ""));
+const seenLabels = ref(/* @__PURE__ */ new Map());
+watch(options, (list) => {
+  for (const o of list) seenLabels.value.set(String(o.value), resolveLocalized(o.label) || String(o.value));
+}, { immediate: true });
 const currentKnown = computed(
-  () => options.value.some((o) => String(o.value) === currentValue.value)
+  () => options.value.some((o) => String(o.value) === currentValue.value) || seenLabels.value.has(currentValue.value)
 );
-const currentLabel = computed(() => {
-  const hit = options.value.find((o) => String(o.value) === currentValue.value);
-  return hit ? resolveLocalized(hit.label) || String(hit.value) : currentValue.value;
-});
-const listOpen = computed(() => focused.value && !q.gated.value);
+const currentLabel = computed(() => seenLabels.value.get(currentValue.value) ?? currentValue.value);
+const listDismissed = ref(false);
+const listOpen = computed(() => focused.value && !q.gated.value && !listDismissed.value);
+const escapeHeld = ref(false);
+function onComboEscape(event) {
+  if (event.isComposing) return;
+  const claim = listOpen.value || escapeHeld.value && event.repeat;
+  if (!claim) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (!listOpen.value) return;
+  escapeHeld.value = true;
+  listDismissed.value = true;
+  const input = event.target;
+  void nextTick(() => input.select());
+}
+function onComboEscapeUp() {
+  escapeHeld.value = false;
+}
+function onComboArrowDown(event) {
+  if (!listDismissed.value) return;
+  event.preventDefault();
+  listDismissed.value = false;
+}
+function onComboSearch(v) {
+  search.value = String(v);
+  listDismissed.value = false;
+}
+function onComboClick() {
+  listDismissed.value = false;
+}
 const visibleOptions = computed(() => {
   const term = search.value.trim().toLowerCase();
   if (!focused.value || !term) return options.value;
@@ -51,6 +81,7 @@ const visibleOptions = computed(() => {
 });
 function onComboFocus() {
   search.value = "";
+  listDismissed.value = false;
   focused.value = true;
 }
 function onComboBlur() {
@@ -155,14 +186,16 @@ function toggleMulti(optValue) {
     <template v-else>
       <div class="relative">
         <Input
-          :model-value="focused ? search : currentLabel"
+          :model-value="listOpen ? search : currentLabel"
           :aria-label="resolveLocalized(field.label)"
           :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')"
           class="h-8 bg-white pr-7 text-sm"
-          @update:model-value="(v) => {
-  search = String(v);
-}"
+          @update:model-value="onComboSearch"
           @focus="onComboFocus"
+          @click="onComboClick"
+          @keydown.esc="onComboEscape"
+          @keyup.esc="onComboEscapeUp"
+          @keydown.down="onComboArrowDown"
           @blur="onComboBlur"
         />
         <ChevronDown :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />

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

@@ -106,10 +106,13 @@ const constraintHint = computed(() => {
   }
   return "";
 });
-const { credentials, loaded: credentialsLoaded, load: loadCredentials } = useIntegrationsCredentials();
+const { credentials, loaded: credentialsLoaded, load: loadCredentials, refresh: refreshCredentials } = useIntegrationsCredentials();
 onMounted(() => {
   void loadCredentials();
 });
+function onCredentialPickerOpen(open) {
+  if (open) void refreshCredentials();
+}
 function credsOfType(slug) {
   if (!slug) return credentials.value;
   const slugs = (Array.isArray(slug) ? slug : [slug]).map((s) => s.trim()).filter(Boolean);
@@ -626,6 +629,7 @@ function setArrayItemField(index, fieldKey, v) {
       <Select
         :model-value="value ?? ''"
         @update:model-value="(v) => onCredentialSelect(v)"
+        @update:open="onCredentialPickerOpen"
       >
         <SelectTrigger :aria-label="credTriggerLabel" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
           <!-- The trigger renders the bound credential itself instead of letting

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

@@ -211,18 +211,22 @@ function popLevel() {
   search.value = "";
 }
 const levelKey = computed(() => stack.value.length);
-const searchHits = computed(() => {
-  const q = search.value.trim().toLowerCase();
-  if (!q || triggersLevel.value) return [];
+const normalised = (s) => s.trim().toLowerCase().replace(/\s+/g, " ");
+const SEARCH_CAP = 50;
+const searchResult = computed(() => {
+  const q = normalised(search.value);
+  const exact = [];
+  const partial = [];
+  if (!q || triggersLevel.value) return { exact, partial };
   const scope = currentGroup.value ? inBrowseOrder(currentGroup.value) : rootBrowseOrder.value;
-  const hits = [];
   for (const m of scope) {
-    const hay = `${resolveLocalized(m.name)} ${m.slug} ${resolveLocalized(m.description)}`.toLowerCase();
-    if (hay.includes(q)) hits.push({ manifest: m, path: groupPath(m) });
-    if (hits.length >= 50) break;
+    const name = normalised(resolveLocalized(m.name));
+    if (name === q) exact.push({ manifest: m, path: groupPath(m) });
+    else if (exact.length + partial.length < SEARCH_CAP && `${name} ${m.slug} ${resolveLocalized(m.description).toLowerCase()}`.includes(q)) partial.push({ manifest: m, path: groupPath(m) });
   }
-  return hits;
+  return { exact, partial: partial.slice(0, Math.max(0, SEARCH_CAP - exact.length)) };
 });
+const searchHits = computed(() => [...searchResult.value.exact, ...searchResult.value.partial]);
 const matchedTriggers = computed(() => {
   const q = search.value.trim().toLowerCase();
   if (!q || currentGroup.value) return [];
@@ -353,67 +357,71 @@ const searching = computed(() => search.value.trim().length > 0);
         <div :key="`${levelKey}-${searching}`" class="absolute inset-0 overflow-y-auto overscroll-contain p-2 [scrollbar-color:rgb(0_0_0/0.22)_transparent] [scrollbar-width:thin]">
           <!-- ── Search results (flat, path as subtitle) ─────────────────── -->
           <template v-if="searching">
-            <div v-if="matchedTriggers.length" class="mb-1">
-              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.triggers") }}</div>
-              <div
-                v-for="tpl in matchedTriggers"
-                :key="tpl.id"
-                class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-                draggable="true"
-                @dragstart="onTriggerDragStart(tpl, $event)"
-                @dragend="onDragEnd"
-                @click="insertTrigger(tpl)"
-              >
-                <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="triggerChipClass">
-                  <component :is="triggerGlyph(tpl.type)" :size="13" />
-                </span>
-                <div class="min-w-0">
-                  <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
-                  <div class="text-xs leading-snug text-muted-foreground">{{ t("integration.canvas.badge.trigger") }}</div>
-                </div>
-              </div>
-            </div>
-
             <p v-if="!searchHits.length && !matchedTriggers.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
               {{ t("integration.canvas.palette.search.empty", { query: search }) }}
             </p>
-            <div
-              v-for="hit in searchHits"
-              :key="`${hit.manifest.slug}@${hit.manifest.version}`"
-              class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
-              :draggable="paletteDragEnabled"
-              :title="resolveLocalized(hit.manifest.name)"
-              @dragstart="onManifestDragStart(hit.manifest, $event)"
-              @dragend="onDragEnd"
-              @click="insertManifest(hit.manifest)"
-            >
-              <span class="flex size-8 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(hit.manifest)">
-                <IntegrationsNodeMark :manifest="hit.manifest" :size="18" :badge="false" />
-              </span>
-              <div class="min-w-0 flex-1">
-                <div class="flex items-center gap-1.5">
-                  <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(hit.manifest.name) }}</span>
-                  <select
-                    v-if="versionsOf(hit.manifest.slug).length > 1"
-                    :value="effVersion(hit.manifest)"
-                    class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
-                    :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(hit.manifest.name) })"
-                    @click.stop
-                    @mousedown.stop
-                    @change.stop="setSelectedVersion(hit.manifest.slug, $event.target.value)"
-                    @mouseenter="paletteDragEnabled = false"
-                    @mouseleave="onVersionSelectLeave"
-                    @focus="paletteDragEnabled = false"
-                    @blur="paletteDragEnabled = true"
-                  >
-                    <option v-for="v in versionsOf(hit.manifest.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
-                  </select>
-                  <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ hit.manifest.version }}</span>
+            <!-- A node named exactly what was typed stands above the triggers too (AC-13). -->
+            <template v-for="section in ['exact', 'triggers', 'partial']" :key="section">
+              <div v-if="section === 'triggers' && matchedTriggers.length" class="mb-1">
+                <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.triggers") }}</div>
+                <div
+                  v-for="tpl in matchedTriggers"
+                  :key="tpl.id"
+                  class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+                  draggable="true"
+                  @dragstart="onTriggerDragStart(tpl, $event)"
+                  @dragend="onDragEnd"
+                  @click="insertTrigger(tpl)"
+                >
+                  <span class="flex size-6 shrink-0 items-center justify-center rounded-md" :class="triggerChipClass">
+                    <component :is="triggerGlyph(tpl.type)" :size="13" />
+                  </span>
+                  <div class="min-w-0">
+                    <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
+                    <div class="text-xs leading-snug text-muted-foreground">{{ t("integration.canvas.badge.trigger") }}</div>
+                  </div>
                 </div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(hit.manifest.description) }}</div>
-                <div class="truncate text-xs text-muted-foreground/70">{{ hit.path.join(" \u203A ") }}</div>
               </div>
-            </div>
+              <template v-if="section !== 'triggers'">
+                <div
+                  v-for="hit in section === 'exact' ? searchResult.exact : searchResult.partial"
+                  :key="`${hit.manifest.slug}@${hit.manifest.version}`"
+                  class="group flex cursor-grab items-start gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
+                  :draggable="paletteDragEnabled"
+                  :title="resolveLocalized(hit.manifest.name)"
+                  @dragstart="onManifestDragStart(hit.manifest, $event)"
+                  @dragend="onDragEnd"
+                  @click="insertManifest(hit.manifest)"
+                >
+                  <span class="flex size-8 shrink-0 items-center justify-center rounded-md" :class="nodeCategoryColor(hit.manifest)">
+                    <IntegrationsNodeMark :manifest="hit.manifest" :size="18" :badge="false" />
+                  </span>
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-center gap-1.5">
+                      <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ resolveLocalized(hit.manifest.name) }}</span>
+                      <select
+                        v-if="versionsOf(hit.manifest.slug).length > 1"
+                        :value="effVersion(hit.manifest)"
+                        class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
+                        :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(hit.manifest.name) })"
+                        @click.stop
+                        @mousedown.stop
+                        @change.stop="setSelectedVersion(hit.manifest.slug, $event.target.value)"
+                        @mouseenter="paletteDragEnabled = false"
+                        @mouseleave="onVersionSelectLeave"
+                        @focus="paletteDragEnabled = false"
+                        @blur="paletteDragEnabled = true"
+                      >
+                        <option v-for="v in versionsOf(hit.manifest.slug)" :key="v.version" :value="v.version">v{{ v.version }}</option>
+                      </select>
+                      <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">v{{ hit.manifest.version }}</span>
+                    </div>
+                    <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(hit.manifest.description) }}</div>
+                    <div class="truncate text-xs text-muted-foreground/70">{{ hit.path.join(" \u203A ") }}</div>
+                  </div>
+                </div>
+              </template>
+            </template>
           </template>
 
           <!-- ── Triggers level ──────────────────────────────────────────── -->

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

@@ -3,6 +3,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 { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { isSkippedStep, skipReasonMessage, stepStatusLabel } from "../../utils/skippedStep";
 import { IntegrationsApiError, errorReason } from "../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { formatDuration } from "../../utils/formatDuration";
@@ -41,6 +42,10 @@ const details = ref(null);
 const detailsLoading = ref(false);
 const detailsError = ref(null);
 const steps = ref([]);
+const skipNotes = computed(() => steps.value.map((st) => {
+  const m = skipReasonMessage(st);
+  return m ? t(m.key, m.params) : "";
+}));
 const stepsLoading = ref(false);
 const stepsError = ref(null);
 const expandedStep = ref(null);
@@ -313,7 +318,7 @@ function stepKey(st, i) {
   return `${st.node_id}-${st.scheduled_event_id ?? i}`;
 }
 function cachedPayload(st) {
-  return st.scheduled_event_id === null ? void 0 : payloadCache.value.get(st.scheduled_event_id);
+  return st.scheduled_event_id == null ? void 0 : payloadCache.value.get(st.scheduled_event_id);
 }
 function hasPayload(st) {
   return cachedPayload(st) !== void 0;
@@ -362,7 +367,7 @@ async function loadPayloads(opened) {
     if (props.run.id !== runId) return;
     const next = new Map(payloadCache.value);
     for (const row of res?.steps ?? []) {
-      if (row.scheduled_event_id === null) continue;
+      if (row.scheduled_event_id == null) continue;
       next.set(row.scheduled_event_id, {
         status: row.status,
         input: row.input,
@@ -382,6 +387,7 @@ async function loadPayloads(opened) {
   if (expandedStep.value !== readFor) void loadPayloads(true);
 }
 function toggleStep(st, i) {
+  if (isSkippedStep(st)) return;
   const key = stepKey(st, i);
   expandedStep.value = expandedStep.value === key ? null : key;
   if (expandedStep.value !== null) void loadPayloads(true);
@@ -748,15 +754,15 @@ async function confirmAction() {
               class="w-full flex items-center gap-3 px-3 py-2 text-left"
               @click="toggleStep(st, i)"
             >
-              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runStatusClass(st.status)]">{{ runStatusLabel(st.status) }}</Badge>
+              <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0', runStatusClass(st.status)]">{{ stepStatusLabel(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">
-                  {{ st.node_id }}<template v-if="st.branch"> · {{ t("integration.runs.detail.steps.branchLabel") }} {{ st.branch }}</template><template v-if="st.attempt"> · {{ t("integration.runs.detail.steps.attemptLabel") }} {{ st.attempt + 1 }}</template>
+                  {{ st.node_id }}<template v-if="st.branch"> · {{ t("integration.runs.detail.steps.branchLabel") }} {{ st.branch }}</template><template v-if="skipNotes[i]"> · {{ skipNotes[i] }}</template><template v-if="st.attempt"> · {{ t("integration.runs.detail.steps.attemptLabel") }} {{ st.attempt + 1 }}</template>
                 </div>
               </div>
               <span class="text-xs text-muted-foreground tabular-nums shrink-0">{{ fmtMs(st.duration_ms) }}</span>
-              <span class="text-[10px] text-muted-foreground shrink-0">{{ expandedStep === stepKey(st, i) ? "\u25BC" : "\u25B6" }}</span>
+              <span v-if="!isSkippedStep(st)" class="text-[10px] text-muted-foreground shrink-0">{{ expandedStep === stepKey(st, i) ? "\u25BC" : "\u25B6" }}</span>
             </button>
             <div v-if="st.error" class="px-3 pb-2 -mt-1">
               <div class="rounded-md border border-rose-500/20 bg-rose-500/5 px-2 py-1 text-xs text-rose-700 break-words">{{ st.error }}</div>

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

@@ -22,7 +22,7 @@ const emit = defineEmits(["installed", "update:loading", "update:installing"]);
 const t = useIntegrationsT();
 const { get, load, fetchDetail, requirements, instantiate } = useIntegrationsTemplates();
 const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
-const { ofType, load: loadCredentials } = useIntegrationsCredentials();
+const { ofType, refresh: refreshCredentials } = useIntegrationsCredentials();
 const reqs = ref(null);
 const loading = ref(true);
 const installing = ref(false);
@@ -40,7 +40,7 @@ watch(() => props.slug, async (slug) => {
   await load();
   if (mine !== run) return;
   if (name.value === "") name.value = get(slug)?.name ?? "";
-  await Promise.all([fetchDetail(slug), loadCredentials(), loadSecrets()]);
+  await Promise.all([fetchDetail(slug), refreshCredentials(), loadSecrets()]);
   if (mine !== run) return;
   const answer = await requirements(slug);
   if (mine !== run) return;

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

@@ -42,6 +42,12 @@ interface Data {
     replay?: {
         ahead: boolean;
     };
+    /**
+     * Where one branch of a split crosses into another, so the save will refuse
+     * the step the branches meet at (decided 19 Oct 2026): drawn red and dashed
+     * as the connection to change. The replay's colour wins over it.
+     */
+    crossing?: boolean;
 }
 type __VLS_Props = EdgeProps<Data>;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -67,6 +67,7 @@ const path = computed(() => getSmoothStepPath({
   centerY: centerY.value
 }));
 const NEUTRAL = { stroke: "#94a3b8", label: "#475569", bg: "#f1f5f9" };
+const CROSSING_STROKE = "#e11d48";
 const MUTED = { stroke: "#cbd5e1", label: "#94a3b8", bg: "#f8fafc" };
 const palette = {
   default: NEUTRAL,
@@ -116,8 +117,9 @@ function spliceNode() {
     :path="path[0]"
     :marker-end="props.markerEnd"
     :style="{
-  stroke: props.data?.replay ? '#3b82f6' : color.stroke,
-  strokeWidth: props.data?.replay ? 2.5 : isSelected || hovered ? 2.5 : 1.75,
+  stroke: props.data?.replay ? '#3b82f6' : props.data?.crossing ? CROSSING_STROKE : color.stroke,
+  strokeWidth: props.data?.replay ? 2.5 : isSelected || hovered || props.data?.crossing ? 2.5 : 1.75,
+  ...props.data?.crossing && !props.data?.replay ? { strokeDasharray: '6 4' } : {},
   transition: 'stroke-width 120ms ease-out'
 }"
   />

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

@@ -42,6 +42,12 @@ interface Data {
     replay?: {
         ahead: boolean;
     };
+    /**
+     * Where one branch of a split crosses into another, so the save will refuse
+     * the step the branches meet at (decided 19 Oct 2026): drawn red and dashed
+     * as the connection to change. The replay's colour wins over it.
+     */
+    crossing?: boolean;
 }
 type __VLS_Props = EdgeProps<Data>;
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;