@revenexx/studio-integrations 1.2.0 → 1.4.0

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

@@ -42,9 +42,12 @@ import RunDetailPanel from "../../../components/Integrations/RunDetailPanel.vue"
 import { toast } from "vue-sonner";
 import { IntegrationsApiError, apiValidationIssues, errorReason } from "../../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../../utils/pollBudget";
+import { BUILD_SETTLE_POLL_MS, BUILD_SETTLE_TIMEOUT_MS, createBuildSettle, isBuildUnsettled } from "../../../utils/buildSettle";
 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();
@@ -107,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();
@@ -124,8 +148,8 @@ const reauthCredentials = computed(() => {
 const buildWorking = computed(() => workflow.value?.buildStatus === "building" || workflow.value?.buildStatus === "pending");
 const buildFailed = computed(() => workflow.value?.buildStatus === "failed");
 const waitingForBuild = ref(false);
-const BUILD_WAIT_POLL_MS = 2500;
-const BUILD_WAIT_TIMEOUT_MS = 5 * 6e4;
+const BUILD_WAIT_POLL_MS = BUILD_SETTLE_POLL_MS;
+const BUILD_WAIT_TIMEOUT_MS = BUILD_SETTLE_TIMEOUT_MS;
 async function waitForBuildReady() {
   waitingForBuild.value = true;
   try {
@@ -148,19 +172,14 @@ async function waitForBuildReady() {
     waitingForBuild.value = false;
   }
 }
-let buildWatch = 0;
-async function settleBuildStatus() {
-  const mine = ++buildWatch;
-  const started = Date.now();
-  while (Date.now() - started < BUILD_WAIT_TIMEOUT_MS) {
-    if (mine !== buildWatch || !workflow.value) return;
-    const status = workflow.value.buildStatus;
-    if (status !== "pending" && status !== "building") return;
-    await new Promise((resolve) => setTimeout(resolve, BUILD_WAIT_POLL_MS));
-    if (mine !== buildWatch || !workflow.value) return;
-    await get(workflow.value.id);
-  }
+const buildSettle = createBuildSettle();
+function settleBuildStatus() {
+  void buildSettle.settle({
+    unsettled: () => !!workflow.value && isBuildUnsettled(workflow.value.buildStatus),
+    read: () => get(workflow.value.id)
+  });
 }
+onUnmounted(() => buildSettle.stop());
 const buildNotice = computed(() => {
   switch (workflow.value?.buildStatus) {
     case "building":
@@ -181,8 +200,9 @@ 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);
-  void settleBuildStatus();
+  settleBuildStatus();
 }, { immediate: true });
 function onChange(blob) {
   const d = draftFrom();
@@ -252,7 +272,7 @@ async function onRevisionRestored() {
   if (!workflow.value) return;
   await get(workflow.value.id);
   draft.value = null;
-  void settleBuildStatus();
+  settleBuildStatus();
 }
 const { trigger: triggerRun, loadForWorkflow, fetchRun, getRun, retryRun } = useIntegrationsRuns();
 const running = ref(false);
@@ -373,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;
   }
@@ -630,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 {
@@ -711,7 +735,7 @@ async function save() {
       executionMode: d.executionMode
     });
     draft.value = null;
-    void settleBuildStatus();
+    settleBuildStatus();
   } catch (e) {
     const issues = apiValidationIssues(e);
     if (issues.length && workflow.value.active) {
@@ -748,7 +772,7 @@ async function confirmDeactivate() {
     draft.value = null;
     deactivationOpen.value = false;
     toast.success(t("integration.editor.deactivate.toast.savedPaused"));
-    void settleBuildStatus();
+    settleBuildStatus();
   } catch (e) {
     deactivationOpen.value = false;
     saveError.value = errorReason(e, t("integration.editor.save.error.generic"));
@@ -774,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>
@@ -816,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") }}
@@ -847,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
@@ -985,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. -->
@@ -1009,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>
 
@@ -1037,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 }}
@@ -1082,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>
@@ -1120,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
@@ -1195,7 +1286,18 @@ function formatDateTime(iso) {
          afternoon this dialog exists to protect.
          `as-child` so the studio's own Button is that element rather than a second one
          beside it. Escape means the same thing, through `update:open`; a click beside
-         the dialog does nothing at all, which an alert dialog is entitled to. -->
+         the dialog does nothing at all, which an alert dialog is entitled to.
+
+         The class list on that Button is the price of `as-child`: `AlertDialogCancel`
+         applies the outline variant to whatever it renders, and every dialog in this
+         module draws the answer on the right as a filled one. So the two variants meet
+         on one element and `tailwind-merge` decides between them per group — which it
+         cannot do where the outline variant names a group the default one does not, and
+         those are the five that have to be said here. Left to itself the merge produced
+         a background from the outline variant and a text colour from the default, which
+         resolve to the same colour in this theme: the label was invisible until hovered
+         (PO-415). Nothing marks this answer as the one holding the keyboard otherwise —
+         `focus-visible` does not match after the click that opened the dialog. -->
     <AlertDialog :open="leaveOpen" @update:open="(v) => {
   if (!v) answerLeave(false);
 }">
@@ -1211,7 +1313,10 @@ function formatDateTime(iso) {
             {{ t("integration.editor.leave.dialog.discard") }}
           </Button>
           <AlertDialogCancel as-child>
-            <Button @click="answerLeave(false)">
+            <Button
+              class="border-transparent bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground dark:border-transparent dark:bg-primary dark:hover:bg-primary/90"
+              @click="answerLeave(false)"
+            >
               {{ t("integration.editor.leave.dialog.stay") }}
             </Button>
           </AlertDialogCancel>