@revenexx/studio-integrations 1.3.0 → 1.4.1

package/dist/runtime/pages/integrations/credentials.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
 import {
   RefreshCircle as Loader2,
   AddCircle as Plus,
@@ -31,7 +31,7 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
-import { apiFieldErrors, errorReason } from "../../utils/apiError";
+import { apiRefusal, errorReason } from "../../utils/apiError";
 import { CREDENTIAL_STATES, credentialState, credentialStateLabel } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
@@ -92,19 +92,36 @@ const form = reactive({ name: "", config: {} });
 const saving = ref(false);
 const testing = ref(false);
 const testResult = ref(null);
-const saveError = ref(null);
-const fieldErrors = ref({});
+const saveRefusal = ref(null);
 const sourceActive = ref(false);
 const isEdit = computed(() => editing.value !== null);
 function fieldsOf(t2) {
   return t2?.fields ?? [];
 }
+const drawnKeys = computed(() => [
+  "name",
+  ...sourceActive.value ? [] : fieldsOf(pickedType.value).map((f) => `config.${f.key}`)
+]);
+const refusal = computed(() => apiRefusal(saveRefusal.value, drawnKeys.value));
+const fieldErrors = computed(() => refusal.value.atFields);
+const summaryReasons = computed(() => {
+  if (!saveRefusal.value) return [];
+  if (refusal.value.unshown.length) return refusal.value.unshown.map((u) => u.message);
+  if (Object.keys(refusal.value.atFields).length) return [];
+  return [errorReason(saveRefusal.value, t("integration.credentials.error.save"))];
+});
 function configFieldAria(key) {
   return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `cred-field-${key}-error` } : {};
 }
+async function focusFirstRefusedField() {
+  await nextTick();
+  const key = drawnKeys.value.find((k) => k in fieldErrors.value);
+  if (!key) return;
+  const id = key === "name" ? "cred-name" : `cred-field-${key.slice("config.".length)}`;
+  document.getElementById(id)?.focus();
+}
 function clearRefusal() {
-  saveError.value = null;
-  fieldErrors.value = {};
+  saveRefusal.value = null;
 }
 function openCreate(t2) {
   editing.value = null;
@@ -176,9 +193,9 @@ async function submit() {
       }
     }
   } catch (e) {
-    fieldErrors.value = apiFieldErrors(e);
-    saveError.value = errorReason(e, t("integration.credentials.error.save"));
-    toast.error(saveError.value);
+    saveRefusal.value = e;
+    void focusFirstRefusedField();
+    toast.error(errorReason(e, t("integration.credentials.error.save")));
   } finally {
     saving.value = false;
   }
@@ -351,7 +368,10 @@ async function confirmDelete() {
           <IntegrationsCredentialRevenexxSource
             v-if="hasRevenexxSource(pickedType?.slug)"
             :type="pickedType"
-            @update:active="(v) => sourceActive = v"
+            @update:active="(v) => {
+  sourceActive = v;
+  clearRefusal();
+}"
             @apply="(c2) => Object.assign(form.config, c2)"
           />
 
@@ -438,14 +458,16 @@ async function confirmDelete() {
 
         </div>
 
-        <!-- The save was refused. Outside the scrolling form on purpose: the Save
-             button sits in the footer below, so a summary at the end of a form that
-             scrolls — five fields already do — would be a refusal rendered under the
-             fold, which is the defect this whole change is about. Stated here as well
-             as at the field it belongs to, so a refusal with no field — a conflict, a
-             gateway error — is not silent either. -->
-        <div v-if="saveError && pickedType" role="alert" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
-          {{ saveError }}
+        <!-- The save was refused for something no field shows. Outside the scrolling
+             form on purpose: the Save button sits in the footer below, so a summary at
+             the end of a form that scrolls — five fields already do — would be a
+             refusal rendered under the fold. What is marked at a field is not repeated
+             here; what has no field to be marked at — a service-side field, a conflict,
+             a gateway error — would otherwise be silent. -->
+        <div v-if="summaryReasons.length && pickedType" role="alert" class="space-y-1 rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
+          <!-- Keyed by position: two undrawn keys can be refused with the same
+               sentence, and a duplicate key is how one of them goes unrendered. -->
+          <p v-for="(reason, i) in summaryReasons" :key="i">{{ reason }}</p>
         </div>
 
         <DialogFooter v-if="pickedType" class="sm:justify-between">

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref } from "vue";
+import { computed, ref } from "vue";
 import { marked } from "marked";
 import { AltArrowRight as Chevron, CheckCircle as CheckCircle2, Key, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
 import { triggerGlyph as glyphForTrigger } from "../../../data/triggerGlyphs";
@@ -9,27 +9,19 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
-  DialogTitle,
-  Input,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
+  DialogTitle
 } from "@revenexx/studio";
 import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
+import TemplateInstallStep from "../../../components/Integrations/TemplateInstallStep.vue";
+import LoadingAnnouncement from "../../../components/Integrations/LoadingAnnouncement.vue";
 import NodeMark from "../../../components/Integrations/NodeMark.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 import { describeCron } from "../../../utils/schedule";
-import { errorReason } from "../../../utils/apiError";
-const SELECT_LATER = "__later__";
 const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
-const { get, load, loaded, fetchDetail, requirements, instantiate } = useIntegrationsTemplates();
+const { get, load, loaded, fetchDetail, requirements } = useIntegrationsTemplates();
 const { load: loadNodeCatalog, findManifest, resolveLocalized } = useIntegrationsNodes();
 const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
 const { ofType, load: loadCredentials } = useIntegrationsCredentials();
@@ -137,39 +129,13 @@ const setupReady = computed(() => missingSecrets.value === 0 && missingCredentia
 const packageLabel = computed(() => tpl.value ? templatePackageLabel(tpl.value) : null);
 const categoryLabel = computed(() => templateCategoryLabel(tpl.value?.category ?? ""));
 const installOpen = ref(false);
-const installing = ref(false);
-const installError = ref(null);
-const name = ref("");
-const bindings = reactive({});
-function nodesFor(usedBy) {
-  return [...new Set(usedBy.map((u) => u.nodeId))];
-}
+const stepLoading = ref(false);
 function openInstall() {
   if (!tpl.value) return;
-  name.value = tpl.value.name;
-  for (const k of Object.keys(bindings)) delete bindings[k];
-  installError.value = null;
   installOpen.value = true;
 }
-async function confirmInstall() {
-  if (!tpl.value) return;
-  installing.value = true;
-  installError.value = null;
-  try {
-    const credentialBindings = {};
-    for (const [nodeId, credId] of Object.entries(bindings)) {
-      if (credId && credId !== SELECT_LATER) credentialBindings[nodeId] = credId;
-    }
-    const id = await instantiate(tpl.value.slug, {
-      name: name.value.trim() || void 0,
-      credentialBindings
-    });
-    if (id) await router.push(`/integrations/workflows/${id}`);
-  } catch (e) {
-    installError.value = errorReason(e, t("integration.templates.detail.install.error.fallback"));
-  } finally {
-    installing.value = false;
-  }
+async function installed(id) {
+  await router.push(`/integrations/workflows/${id}`);
 }
 const PUBLISHER_KIND_LABEL_KEY = {
   revenexx: "integration.templates.detail.publisher.kind.revenexx",
@@ -471,7 +437,13 @@ function levelDot(level) {
       {{ t("integration.templates.detail.state.notFound") }}
     </div>
 
-    <!-- Install: name + per-node credential binding ------------------------- -->
+    <LoadingAnnouncement
+      :label="t('integration.templates.detail.action.useTemplate')"
+      :loading="stepLoading"
+      :text="t('integration.templates.detail.install.state.loading')"
+    />
+
+    <!-- Install: the shared step, in this page's dialog ------------------- -->
     <Dialog v-model:open="installOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
@@ -481,95 +453,13 @@ function levelDot(level) {
           </DialogDescription>
         </DialogHeader>
 
-        <div class="space-y-4 py-1 max-h-[28rem] overflow-y-auto pr-1">
-          <div class="space-y-1.5">
-            <Label for="wf-name">{{ t("integration.templates.detail.install.nameLabel") }}</Label>
-            <Input id="wf-name" v-model="name" class="bg-white" :placeholder="t('integration.templates.detail.install.namePlaceholder')" />
-          </div>
-
-          <!-- Credentials -->
-          <div class="space-y-2">
-            <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
-              {{ t("integration.templates.detail.credentials.title") }}
-            </div>
-            <p v-if="!credentialReqs.length" class="text-sm text-muted-foreground italic">
-              {{ t("integration.templates.detail.install.noCredentials") }}
-            </p>
-            <div v-for="req in credentialReqs" :key="req.slug" class="space-y-2">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium">{{ req.name ?? req.slug }}</span>
-                <Badge v-if="!req.registered" variant="outline" class="bg-rose-500/10 border-rose-500/20 text-rose-700 text-sm">
-                  {{ t("integration.templates.detail.install.notRegistered") }}
-                </Badge>
-                <Badge v-else-if="!ofType(req.slug).length" variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
-                  {{ t("integration.templates.detail.install.noneYet") }}
-                </Badge>
-              </div>
-
-              <p v-if="!ofType(req.slug).length" class="rounded-md border-l-2 border-black/[0.08] bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground">
-                {{ t("integration.templates.detail.install.noCredentialsOfType") }}
-                <NuxtLink to="/integrations/credentials" class="text-primary hover:underline">{{ t("integration.templates.detail.install.createOneLink") }}</NuxtLink>
-                {{ t("integration.templates.detail.install.orInstallLater") }}
-              </p>
-              <div v-for="nodeId in nodesFor(req.usedBy)" v-else :key="nodeId" class="space-y-1">
-                <Label :for="`tpl-cred-${nodeId}`" class="text-xs text-muted-foreground font-mono">{{ t("integration.templates.detail.install.nodeLabel", { id: nodeId }) }}</Label>
-                <Select
-                  :model-value="bindings[nodeId] ?? SELECT_LATER"
-                  @update:model-value="(v2) => {
-  bindings[nodeId] = v2 ?? SELECT_LATER;
-}"
-                >
-                  <SelectTrigger :id="`tpl-cred-${nodeId}`" class="bg-white">
-                    <SelectValue :placeholder="t('integration.templates.detail.install.selectLater')" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem :value="SELECT_LATER">{{ t("integration.templates.detail.install.selectLater") }}</SelectItem>
-                    <SelectItem v-for="c in ofType(req.slug)" :key="c.id" :value="c.id">
-                      {{ c.name }}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-
-          <!-- Secrets -->
-          <div v-if="secretChecks.length" class="space-y-2">
-            <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
-              {{ t("integration.templates.detail.install.secretsHeader") }}
-            </div>
-            <p class="text-sm text-muted-foreground">
-              {{ t("integration.templates.detail.install.secretsDescription") }}
-              <NuxtLink to="/integrations/secrets" class="text-primary hover:underline">{{ t("integration.nav.item.secrets") }}</NuxtLink> {{ t("integration.templates.detail.install.secretsDescriptionSuffix") }}
-            </p>
-            <ul class="space-y-1">
-              <li
-                v-for="(s, i) in secretChecks"
-                :key="s.key ?? `dlg-secret-${i}`"
-                class="flex items-center justify-between rounded-md border border-black/[0.06] bg-muted/20 px-2 py-1 text-sm"
-              >
-                <code class="font-mono">{{ s.label }}</code>
-                <Badge variant="outline" :class="s.present ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm' : 'bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm'">
-                  {{ s.present ? t("integration.templates.detail.install.secretStored") : t("integration.templates.detail.secrets.missing") }}
-                </Badge>
-              </li>
-            </ul>
-          </div>
-
-          <div v-if="installError" class="rounded-md bg-rose-500/10 px-3 py-2 text-sm text-rose-700">
-            {{ installError }}
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" :disabled="installing" @click="installOpen = false">
-            {{ t("integration.common.action.cancel") }}
-          </Button>
-          <Button :disabled="installing || !name.trim()" @click="confirmInstall">
-            <Loader2 v-if="installing" :size="14" class="mr-1 animate-spin" />
-            {{ installing ? t("integration.templates.detail.install.submitting") : t("integration.templates.detail.install.submit") }}
-          </Button>
-        </DialogFooter>
+        <TemplateInstallStep :slug="slug" @installed="installed" @update:loading="stepLoading = $event">
+          <template #secondary="{ installing }">
+            <Button variant="outline" :disabled="installing" @click="installOpen = false">
+              {{ t("integration.common.action.cancel") }}
+            </Button>
+          </template>
+        </TemplateInstallStep>
       </DialogContent>
     </Dialog>
   </IntegrationsLayout>

package/dist/runtime/pages/integrations/workflows/[id].vue

@@ -46,6 +46,8 @@ import { BUILD_SETTLE_POLL_MS, BUILD_SETTLE_TIMEOUT_MS, createBuildSettle, isBui
 import { splitRunOutputs } from "../../../utils/runOutputs";
 import { isTerminalRun, unwrapRun } from "../../../utils/runEnvelope";
 import { findingsSummary, groupFindingsByNode, nodeDisplayLabel } from "../../../utils/validationFindings";
+import { unwiredErrorPorts } from "../../../utils/errorPathAdvice";
+import { newestExecutableVersion } from "../../../data/integrationNodeCatalog";
 import { payloadFieldsFromBlob } from "../../../data/payloadForm";
 import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
 const t = useIntegrationsT();
@@ -108,6 +110,27 @@ async function revealNode(nodeId) {
   await nextTick();
   editorRef.value?.revealNode(nodeId);
 }
+const errorPathAdvice = computed(() => {
+  const blob = shownBlob.value;
+  if (!blob) return [];
+  const byId = new Map(blob.nodes.map((n) => [n.id, n]));
+  return unwiredErrorPorts(blob).flatMap((a) => {
+    const node = byId.get(a.nodeId);
+    return node ? [{ ...a, label: nodeDisplayLabel(node) }] : [];
+  });
+});
+const adviceExpanded = ref(false);
+const canAttachErrorStop = computed(() => newestExecutableVersion("revenexx:stop-and-error") !== null);
+async function showNodeOnCanvas(nodeId) {
+  tab.value = "editor";
+  await nextTick();
+  editorRef.value?.showNodeOnCanvas(nodeId);
+}
+async function attachErrorStop(nodeId, port) {
+  tab.value = "editor";
+  await nextTick();
+  editorRef.value?.attachErrorStop(nodeId, port);
+}
 const { load: loadNodeCatalog } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodeCatalog();
@@ -177,6 +200,7 @@ watch(id, async () => {
   if (!w) await leaveTo("/integrations/workflows");
   draft.value = null;
   warningsExpanded.value = false;
+  adviceExpanded.value = false;
   if (tab.value === "runs") void loadRuns(1);
   settleBuildStatus();
 }, { immediate: true });
@@ -369,7 +393,7 @@ async function run(mode) {
 const payloadDriven = computed(() => payloadFieldsFromBlob(shownBlob.value ?? { nodes: [] }).length > 0);
 async function runFromEditor() {
   if (!workflow.value) return;
-  if (payloadDriven.value) {
+  if (payloadDriven.value || workflow.value.execution_mode === "caller_decides") {
     runPayloadOpen.value = true;
     return;
   }
@@ -626,16 +650,20 @@ function closeRun(target) {
   tab.value = target;
   void router.replace({ query: { ...route.query, run: void 0, view: void 0 } });
 }
-const canRetryOpenRun = computed(() => !!openRun.value && ["succeeded", "failed", "cancelled"].includes(openRun.value.status));
+const canRetryOpenRun = computed(() => openRun.value?.status === "failed");
 const retryBusy = ref(false);
 async function retryOpenRun() {
-  if (!openRun.value || retryBusy.value) return;
+  const source = openRun.value;
+  if (!source || retryBusy.value) return;
   retryBusy.value = true;
   try {
-    const res = await retryRun(openRun.value.workflowId, openRun.value.id);
+    const res = await retryRun(source.workflowId, source.id);
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
-    toast.success(newId && newId !== openRun.value.id ? t("integration.editor.retry.toast.started", { id: newId }) : t("integration.editor.retry.toast.requested"));
+    toast.success(newId && newId !== source.id ? t("integration.editor.retry.toast.started", { id: newId }) : t("integration.editor.retry.toast.requested"));
     void loadRuns(1, { silent: true });
+    if (newId && newId !== source.id) {
+      await router.push({ query: { ...route.query, run: newId, view: void 0 } });
+    }
   } catch (e) {
     toast.error(errorReason(e, t("integration.editor.retry.error.generic")));
   } finally {
@@ -770,32 +798,32 @@ function formatDateTime(iso) {
       <template v-if="workflow">
         <PageHeader :title="shownName">
         <template #title>
-          <span class="inline-flex min-w-0 items-center gap-1.5">
-            <NuxtLink to="/integrations/workflows" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary">{{ t("integration.editor.breadcrumb.workflows") }}</NuxtLink>
-            <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+          <span class="flex min-w-0 items-center gap-1.5">
+            <NuxtLink to="/integrations/workflows" class="shrink-0 font-normal text-muted-foreground/80 transition-colors hover:text-primary">{{ t("integration.editor.breadcrumb.workflows") }}</NuxtLink>
+            <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
             <!-- Run open: the breadcrumb extends — name and Runs become crumbs
                  back into the workflow surface. -->
             <template v-if="openRunId">
-              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('editor')">{{ shownName }}</button>
-              <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
-              <button type="button" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('runs')">{{ t("integration.editor.breadcrumb.runs") }}</button>
-              <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
+              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" :title="shownName" @click="closeRun('editor')">{{ shownName }}</button>
+              <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
+              <button type="button" class="shrink-0 font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('runs')">{{ t("integration.editor.breadcrumb.runs") }}</button>
+              <Chevron :size="15" weight="Outline" class="shrink-0 text-muted-foreground/50" />
               <!-- The Temporal run id IS the run's identity; the internal
                    number only fills in until the run is handed off. -->
-              <span class="truncate font-mono">{{ openRun?.temporalRunId ?? t("integration.editor.breadcrumb.runNumber", { id: openRunId }) }}</span>
+              <span class="shrink-0 font-mono">{{ openRun?.temporalRunId ?? t("integration.editor.breadcrumb.runNumber", { id: openRunId }) }}</span>
             </template>
             <template v-else>
               <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-slate-100 text-slate-500">
                 <WorkflowIconView :icon="shownIcon" :size="16" />
               </span>
-              <span class="truncate">{{ shownName }}</span>
+              <span class="truncate" :title="shownName">{{ shownName }}</span>
               <!-- The SAVED mode, beside a drafted name, and the difference is not an
                    oversight. A name changes nothing about what happens when Run is
                    pressed, so the header may show what the operator just entered. The
                    dispatch mode decides what a run does — and a run goes to the
                    workflow the platform holds, not to the draft. A badge following the
                    draft would read SYNC over a button that fires an async run. -->
-              <Badge variant="outline" class="ml-1.5 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(workflow.execution_mode) })">
+              <Badge variant="outline" class="ml-1.5 shrink-0 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(workflow.execution_mode) })">
                 {{ modeLabel(workflow.execution_mode) }}
               </Badge>
             </template>
@@ -812,25 +840,33 @@ function formatDateTime(iso) {
                outside it. Leftmost there is as near the rail as the shared header
                allows without a slot of its own.
 
-               It carries its words and not just a pictogram: an icon-only control
-               here is one nobody finds, and the way back out of a folded rail is
-               the one control that cannot afford to be learnt by chance. Rendered
-               only where the canvas fills the page, the one surface it acts on. -->
+               The way back out carries its words; the way in does not. An
+               icon-only control is one nobody finds, and a folded rail is the one
+               state where that is unaffordable — nothing else on the page offers
+               the navigation back. Folding it away needs no such help: the rail
+               is standing right beside the pictogram, and the words cost 159 px
+               of a header row that a long workflow name already fills, where they
+               were the widest thing in it for the least important thing in it.
+               Icon-only, so it carries the same name as before to a screen reader
+               and to a test. Rendered only where the canvas fills the page, the
+               one surface it acts on. -->
           <Button
             v-if="canvasFillsPage"
             variant="ghost"
             size="sm"
-            class="h-7 shrink-0 gap-1.5 px-2 text-sm font-normal text-muted-foreground hover:text-primary"
+            class="h-7 shrink-0 gap-1.5 text-sm font-normal text-muted-foreground hover:text-primary"
+            :class="railFolded ? 'px-2' : 'w-7 px-0'"
+            :aria-label="railFolded ? void 0 : t('integration.nav.action.hide')"
             :title="railFolded ? t('integration.nav.action.show.title') : t('integration.nav.action.hide.title')"
             @click="toggleRail"
           >
             <RailIcon :size="15" />
-            {{ railFolded ? t("integration.nav.action.show") : t("integration.nav.action.hide") }}
+            <template v-if="railFolded">{{ t("integration.nav.action.show") }}</template>
           </Button>
 
           <!-- Run open: run-scoped actions replace the workflow Save. -->
           <template v-if="openRunId">
-            <Button v-if="canRetryOpenRun" variant="outline" class="h-7 text-sm" :disabled="retryBusy" @click="retryOpenRun">
+            <Button v-if="canRetryOpenRun" variant="outline" class="h-7 text-sm" :disabled="retryBusy" :title="t('integration.editor.action.retry.title')" @click="retryOpenRun">
               <Loader2 v-if="retryBusy" :size="12" class="animate-spin" />
               <RetryIcon v-else :size="12" />
               {{ t("integration.editor.action.retry") }}
@@ -843,13 +879,13 @@ function formatDateTime(iso) {
           <template v-else>
             <span
               v-if="buildWorking"
-              class="inline-flex h-7 items-center gap-1.5 rounded-md border border-sky-500/25 bg-sky-500/10 px-2.5 text-sm text-sky-700"
+              class="inline-flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-sky-500/25 bg-sky-500/10 px-2.5 text-sm text-sky-700"
               :title="buildNotice?.text"
             >
               <Loader2 :size="12" class="animate-spin" />
               {{ workflow.buildStatus === "building" ? t("integration.editor.build.chip.building") : t("integration.editor.build.chip.queued") }}
             </span>
-            <span v-if="isDirty" class="text-sm text-amber-600">{{ t("integration.editor.status.unsavedChanges") }}</span>
+            <span v-if="isDirty" class="shrink-0 whitespace-nowrap text-sm text-amber-600">{{ t("integration.editor.status.unsavedChanges") }}</span>
             <!-- What is done to the WORKFLOW, as opposed to the draft in front
                  of it: the buttons beside this menu discard and save an
                  afternoon's work, and these two make and unmake the thing that
@@ -981,6 +1017,62 @@ function formatDateTime(iso) {
         </ul>
       </div>
 
+      <!-- Error-path advice (PO-443, specs/workflow-advice.md).
+           Slate, NOT amber: amber already means "fix this before it runs" twice
+           over in this editor (the reauth strip, the validation banner) and on
+           the node cards, so a third would leave the colour meaning nothing.
+           This blocks nothing — the activation control stays operable while it
+           shows, which is the point of it not being a finding.
+
+           Editor tab only, unlike the validation banner above: every line here
+           acts on the canvas — reveal a card, attach a step to it — so over the
+           run list or the history preview it offers moves to a canvas that is not
+           on screen, and its node names read as part of whatever is. That is not
+           hypothetical: it put a current node's name over a preview of an
+           archived revision (workflow-history.md AC-3). -->
+      <div
+        v-if="tab === 'editor' && !openRunId && errorPathAdvice.length"
+        class="border-b border-slate-500/20 bg-slate-500/5 px-4 py-2 text-sm text-slate-700"
+      >
+        <p class="font-medium">
+          {{ t("integration.editor.errorPath.advice", errorPathAdvice.length) }}
+        </p>
+        <ul
+          class="mt-1 space-y-0.5"
+          :class="adviceExpanded ? 'max-h-36 overflow-y-auto pr-1' : ''"
+        >
+          <li
+            v-for="a in adviceExpanded ? errorPathAdvice : errorPathAdvice.slice(0, WARN_COLLAPSED)"
+            :key="`${a.nodeId}-${a.port}`"
+            class="flex items-baseline gap-1.5"
+          >
+            <span class="select-none text-slate-400">•</span>
+            <button
+              type="button"
+              class="text-left font-medium underline decoration-transparent underline-offset-2 hover:decoration-slate-700"
+              :aria-label="t('integration.editor.errorPath.ariaReveal', { label: a.label, port: a.port })"
+              @click="showNodeOnCanvas(a.nodeId)"
+            >
+              {{ a.label }}
+            </button>
+            <button
+              v-if="canAttachErrorStop"
+              type="button"
+              class="text-slate-600 underline underline-offset-2 hover:text-slate-900"
+              :aria-label="t('integration.editor.errorPath.ariaFix', { label: a.label, port: a.port })"
+              @click="attachErrorStop(a.nodeId, a.port)"
+            >
+              {{ t("integration.editor.errorPath.action.stop") }}
+            </button>
+          </li>
+          <li v-if="!adviceExpanded && errorPathAdvice.length > WARN_COLLAPSED" class="pl-3">
+            <button type="button" class="text-slate-600 underline underline-offset-2 hover:text-slate-900" @click="adviceExpanded = true">
+              {{ t("integration.editor.errorPath.more", { n: errorPathAdvice.length - WARN_COLLAPSED }) }}
+            </button>
+          </li>
+        </ul>
+      </div>
+
       <!-- Only the FAILED build state banners (its message matters); the
            working states live as the header chip — and inside a run the
            workflow's build state is noise, so nothing shows at all. -->
@@ -1005,7 +1097,7 @@ function formatDateTime(iso) {
           </div>
         </div>
         <div v-else class="min-h-0 flex-1">
-          <WorkflowRunReplayPanel :workflow="workflow" :initial-run-id="openRunId" single />
+          <WorkflowRunReplayPanel :workflow="workflow" :initial-run-id="openRunId" />
         </div>
       </template>
 
@@ -1033,7 +1125,7 @@ function formatDateTime(iso) {
       </div>
 
       <!-- Runs — this workflow's full execution history. Manual runs start
-           from the editor's Run split-button (payload via its lightbox). -->
+           from the editor's Run button, through the run dialog. -->
       <div v-else-if="tab === 'runs'" class="p-4 space-y-4 overflow-y-auto">
         <div v-if="runsError" class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700">
           {{ runsError }}
@@ -1078,7 +1170,7 @@ function formatDateTime(iso) {
       </div>
     </div>
 
-    <!-- Run-with-payload lightbox — opened by the editor Run split-button. -->
+    <!-- The run dialog — opened by the editor's Run button. -->
     <Dialog v-model:open="runPayloadOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
@@ -1116,27 +1208,30 @@ function formatDateTime(iso) {
           </p>
         </div>
         <div v-if="workflow" class="flex items-center justify-end gap-2">
+          <!-- Both modes, and the waiting one is the offer: the author pressed Run
+               to see what comes back, so sync is the primary button — which puts it
+               on the right, where every primary button in the studio sits. -->
           <template v-if="workflow.execution_mode === 'caller_decides'">
             <Button
               variant="outline"
               :disabled="running || syncLoading || waitingForBuild || buildFailed"
               :title="buildFailed ? t('integration.editor.build.tooltip.failed') : void 0"
               class="h-8 text-sm"
-              @click="runFromPayloadDialog('sync')"
+              @click="runFromPayloadDialog('async')"
             >
-              <Loader2 v-if="syncLoading || waitingMode === 'sync'" :size="14" class="animate-spin" />
+              <Loader2 v-if="running || waitingMode === 'async'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              {{ waitingMode === "sync" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.sync") }) }}
+              {{ waitingMode === "async" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.async") }) }}
             </Button>
             <Button
               :disabled="running || syncLoading || waitingForBuild || buildFailed"
               :title="buildFailed ? t('integration.editor.build.tooltip.failed') : void 0"
               class="h-8 text-sm"
-              @click="runFromPayloadDialog('async')"
+              @click="runFromPayloadDialog('sync')"
             >
-              <Loader2 v-if="running || waitingMode === 'async'" :size="14" class="animate-spin" />
+              <Loader2 v-if="syncLoading || waitingMode === 'sync'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              {{ waitingMode === "async" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.async") }) }}
+              {{ waitingMode === "sync" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.sync") }) }}
             </Button>
           </template>
           <Button

package/dist/runtime/utils/apiEnvelope.d.ts

@@ -0,0 +1,27 @@
+/**
+ * One record, from `{ data: record }` or from a bare record.
+ *
+ * Throws when the response carries an envelope with nothing in it, or no body at
+ * all — the case the old expression turned into an object with none of the
+ * caller's fields, which every page downstream drew as empty.
+ *
+ * **The thrown message is deliberately empty.** `errorReason(err, fallback)` in
+ * `apiError.ts` falls back to the caller's own translated sentence when the
+ * message is blank, so a shape violation surfaces as the page's ordinary "could
+ * not load this" copy rather than as an untranslated technical string in the UI.
+ * The response that caused it rides along in `body`.
+ */
+export declare function unwrapRecord<T>(res: unknown, ownFields?: readonly string[]): T;
+/**
+ * A list, from `{ data: [ … ] }` or from a bare array.
+ *
+ * An empty collection is `[]` or `{ "data": [] }` and answers empty. A body that is
+ * neither throws, for the same reason the record above does — and it was drafted the
+ * other way round, returning empty for anything unreadable, until a review pointed
+ * out what that costs: the workflows listing used to raise (`ingestList` mapped over
+ * the body and threw inside its own `try`), so an unreadable answer reached the
+ * reader as an error. Empty would have turned that into "no workflows yet" for a
+ * tenant whose workflows are all still there — a silent wrong answer in place of a
+ * loud one, in the change that exists to remove exactly that.
+ */
+export declare function unwrapList<T>(res: unknown): T[];