@revenexx/studio-integrations 0.5.0 → 0.6.0

package/dist/runtime/pages/integrations/templates/index.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { Magnifier as Search, RefreshCircle as Loader2, Layers, DangerTriangle as AlertTriangle, Bolt as Zap, ClockCircle as Clock, Global as Webhook, Play } from "#solar-icons";
+import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
-import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
-import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
+import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
+import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 useHead({ title: "Templates \xB7 Integration Studio" });
 const { templates, loading, error, loaded, load, ensureDetails } = useIntegrationsTemplates();
 const { load: loadNodeCatalog } = useIntegrationsNodes();
@@ -15,16 +15,13 @@ const search = ref("");
 const activeCategory = ref("all");
 const activeLevel = ref("all");
 const sortBy = ref("name");
-const CATEGORY_LABELS = Object.fromEntries(
-  TEMPLATE_CATEGORIES.map((c) => [c.key, c.label])
-);
-function categoryLabel(key) {
-  return CATEGORY_LABELS[key] ?? key.charAt(0).toUpperCase() + key.slice(1);
-}
 const categories = computed(() => {
   const counts = /* @__PURE__ */ new Map();
-  for (const t of templates.value) counts.set(t.category, (counts.get(t.category) ?? 0) + 1);
-  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: categoryLabel(key), count }));
+  for (const t of templates.value) {
+    if (!t.category) continue;
+    counts.set(t.category, (counts.get(t.category) ?? 0) + 1);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: templateCategoryLabel(key), count }));
 });
 const LEVELS = ["beginner", "intermediate", "advanced"];
 const LEVEL_RANK = { beginner: 0, intermediate: 1, advanced: 2 };
@@ -35,7 +32,7 @@ const filtered = computed(() => {
   if (activeLevel.value !== "all") items = items.filter((t) => t.level === activeLevel.value);
   if (q) {
     items = items.filter(
-      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.vendors.some((v) => v.includes(q)) || (packageLabel(t) ?? "").toLowerCase().includes(q) || t.industries.some((i) => i.includes(q))
+      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.vendors.some((v) => v.toLowerCase().includes(q)) || (templatePackageLabel(t) ?? "").toLowerCase().includes(q) || t.industries.some((i) => i.toLowerCase().includes(q))
     );
   }
   const sorted = [...items];
@@ -47,21 +44,8 @@ const filtered = computed(() => {
 watch(() => templates.value.length, () => {
   if (templates.value.length) void ensureDetails(templates.value.map((t) => t.slug));
 });
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
-const TRIGGER_LABEL = { schedule: "Scheduled", webhook: "Webhook", manual: "Run on demand", event: "Event-driven" };
-function levelDot(level) {
-  return level === "beginner" ? "bg-emerald-500" : level === "intermediate" ? "bg-amber-500" : "bg-rose-500";
-}
-function bannerFor(tpl) {
-  return tpl.images.find((i) => i.category === "banner")?.src ?? null;
-}
-function packageLabel(tpl) {
-  const pkg = tpl.package;
-  if (!pkg) return null;
-  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
-  if (tail === "core") return null;
-  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
-}
+const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
+const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u2026" : "");
 </script>
 
 <template>
@@ -96,7 +80,7 @@ function packageLabel(tpl) {
         </div>
 
         <Select v-model="activeLevel">
-          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
+          <SelectTrigger aria-label="Filter by level" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -105,7 +89,7 @@ function packageLabel(tpl) {
           </SelectContent>
         </Select>
         <Select v-model="sortBy">
-          <SelectTrigger class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
+          <SelectTrigger aria-label="Sort templates" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
@@ -116,15 +100,40 @@ function packageLabel(tpl) {
         </Select>
         <div class="relative w-60">
           <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input v-model="search" placeholder="Search templates, vendors…" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
+          <Input v-model="search" aria-label="Search templates and vendors" placeholder="Search templates, vendors…" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
           </div>
         </div>
       </template>
     </PageHeader>
 
     <div class="p-4">
-      <!-- Loading (first fetch) -->
-      <div v-if="loading && !templates.length" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      <!-- What the page is doing, in words (specs/templates.md AC-9).
+           The shimmer says "still working" only to somebody who can see it, and
+           six blank tiles carry no text, no name and no state — so waiting and
+           "nothing is registered" were the same silence, which are the two states
+           that ask for opposite reactions.
+
+           The region is OUTSIDE the v-if chain below and always in the DOM, with
+           only its text changing. A live region that appears together with its
+           content is a region assistive technology may never have been watching:
+           what is announced is a change inside an existing region.
+
+           Named, because it is not the only `role="status"` on this page: every
+           card draws one while its flow miniature loads ("Loading the flow"). Two
+           unnamed status regions on one page are two things a reader — and a test —
+           cannot tell apart, and this one is about the gallery rather than a card. -->
+      <p role="status" aria-live="polite" aria-label="Template gallery" class="sr-only">{{ statusText }}</p>
+
+      <!-- The placeholders are taken out of the accessibility tree rather than
+           marked busy. `aria-busy` only asks assistive technology to defer
+           exposing changes, and on a role-less div that is not a live region NVDA
+           and JAWS effectively ignore it — it would have expressed the state
+           without keeping anything from being walked. A placeholder carries no
+           information, so there is nothing to lose by removing it, and the region
+           above says in words what this area means. Which is also why the named
+           "Templates" group below is absent while this branch renders: the set of
+           cards does not exist yet, rather than existing and being empty. -->
+      <div v-if="awaitingCatalogue" aria-hidden="true" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <div v-for="n in 6" :key="`sk-${n}`" class="rounded-lg border border-black/[0.06] bg-white p-0 overflow-hidden">
           <div class="h-36 bg-black/[0.04] animate-pulse" />
           <div class="p-4 space-y-2">
@@ -135,8 +144,15 @@ function packageLabel(tpl) {
         </div>
       </div>
 
-      <!-- Fetch failed -->
-      <div v-else-if="error && !templates.length" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
+      <!-- Fetch failed. `role="alert"` because this block is how the wait ends for
+           somebody who was told through the region above to hold on: it is
+           announced when it is inserted, so the sequence is "Loading templates…"
+           then the reason, rather than "Loading templates…" then silence. An alert
+           rather than a copy of the text in the status region, which would put the
+           same sentence in the page twice and read it out twice to anybody walking
+           it. The other two empty states are not alerts: nothing had spoken before
+           them, and their copy is where the reader is going anyway. -->
+      <div v-else-if="error && !templates.length" role="alert" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
         <AlertTriangle :size="15" class="mt-0.5 shrink-0" />
         <div>
           <div class="font-medium">Couldn't load templates.</div>
@@ -155,61 +171,16 @@ function packageLabel(tpl) {
         </p>
       </div>
 
-      <!-- Cards -->
-      <div v-else class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        <NuxtLink
+      <!-- The group is named so the cards can be addressed as a set; a card names
+           itself from what it shows, which TemplateCard says more about. -->
+      <div v-else role="group" aria-label="Templates" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <TemplateCard
           v-for="tpl in filtered"
           :key="tpl.slug"
+          :template="tpl"
+          density="full"
           :to="`/integrations/templates/${tpl.slug}`"
-          class="group flex flex-col overflow-hidden rounded-lg border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
-        >
-          <!-- Live workflow preview (or the registry banner, when one ships) -->
-          <div class="relative h-36 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]">
-            <img
-              v-if="bannerFor(tpl)"
-              :src="bannerFor(tpl)"
-              alt=""
-              class="h-full w-full object-cover"
-            >
-            <TemplateFlowPreview v-else-if="tpl.detailLoaded" :blob="tpl.blob" :height="144" class="px-2" />
-            <div v-else class="flex h-full items-center justify-center">
-              <Loader2 :size="16" class="animate-spin text-muted-foreground/50" />
-            </div>
-            <div class="absolute left-2 top-2 flex items-center gap-1.5">
-              <span class="inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
-                {{ categoryLabel(tpl.category) }}
-              </span>
-              <span
-                v-if="packageLabel(tpl)"
-                class="inline-flex items-center whitespace-nowrap rounded-full bg-violet-100 px-2 py-0.5 uppercase text-xs font-medium text-violet-700"
-              >
-                {{ packageLabel(tpl) }}
-              </span>
-            </div>
-          </div>
-
-          <div class="flex min-h-0 flex-1 flex-col p-4">
-            <div class="text-sm font-semibold text-foreground line-clamp-1">{{ tpl.name }}</div>
-            <p class="mt-1 flex-1 text-sm text-muted-foreground line-clamp-2">{{ tpl.description }}</p>
-
-            <div class="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
-              <span
-                v-for="t in tpl.triggerTypes"
-                :key="t"
-                class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase"
-              >
-                <component :is="TRIGGER_ICON[t] ?? Zap" :size="10" />
-                {{ TRIGGER_LABEL[t] ?? t }}
-              </span>
-              <span class="flex-1" />
-              <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 uppercase">
-                <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
-                {{ tpl.level }}
-              </span>
-              <span v-if="tpl.publisher.kind !== 'revenexx'" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase">{{ tpl.publisher.name }}</span>
-            </div>
-          </div>
-        </NuxtLink>
+        />
       </div>
 
       <div v-if="templates.length && !filtered.length" class="mt-4 rounded-lg border border-black/[0.06] bg-white p-8 text-center text-sm text-muted-foreground">

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

@@ -1,7 +1,13 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, Pause as PauseIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Badge,
   Button,
   Dialog,
@@ -24,7 +30,8 @@ import WorkflowDuplicateDialog from "../../../components/Integrations/WorkflowDu
 import RunsTable from "../../../components/Integrations/RunsTable.vue";
 import RunDetailPanel from "../../../components/Integrations/RunDetailPanel.vue";
 import { toast } from "vue-sonner";
-import { IntegrationsApiError } from "../../../utils/apiError";
+import { IntegrationsApiError, apiValidationIssues } from "../../../utils/apiError";
+import { findingsSummary, groupFindingsByNode, nodeDisplayLabel } from "../../../utils/validationFindings";
 import { payloadFieldsFromBlob } from "../../../data/payloadForm";
 import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
 const route = useRoute();
@@ -46,6 +53,24 @@ const dirtyBlob = ref(null);
 const isDirty = computed(() => dirtyBlob.value !== null);
 const saving = ref(false);
 const saveError = ref(null);
+const validationWarnings = computed(() => workflow.value?.warnings);
+const isInvalid = computed(() => (validationWarnings.value?.length ?? 0) > 0);
+const WARN_COLLAPSED = 3;
+const warningsExpanded = ref(false);
+const warningGroups = computed(() => groupFindingsByNode(validationWarnings.value ?? [], workflow.value?.blob.nodes ?? []));
+const warningSummary = computed(() => findingsSummary(validationWarnings.value?.length ?? 0, warningGroups.value.filter((g) => g.nodeId).length));
+const editorRef = ref(null);
+async function revealNode(nodeId) {
+  tab.value = "editor";
+  await nextTick();
+  editorRef.value?.revealNode(nodeId);
+}
+const { load: loadNodeCatalog } = useIntegrationsNodes();
+onMounted(() => {
+  void loadNodeCatalog();
+});
+const deactivationOpen = ref(false);
+const deactivationIssues = ref([]);
 const { load: loadCredentials, needsReauth } = useIntegrationsCredentials();
 onMounted(() => {
   void loadCredentials();
@@ -54,11 +79,33 @@ const reauthCredentials = computed(() => {
   const blob = JSON.stringify(dirtyBlob.value ?? workflow.value?.blob ?? {});
   return needsReauth.value.filter((c) => blob.includes(c.id));
 });
-const buildBlocked = computed(() => {
-  const s = workflow.value?.buildStatus;
-  return s === "pending" || s === "building" || s === "failed";
-});
 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;
+async function waitForBuildReady() {
+  waitingForBuild.value = true;
+  try {
+    const started = Date.now();
+    while (Date.now() - started < BUILD_WAIT_TIMEOUT_MS) {
+      await new Promise((resolve) => setTimeout(resolve, BUILD_WAIT_POLL_MS));
+      if (!workflow.value) return false;
+      const fresh = await get(workflow.value.id);
+      const status = fresh?.buildStatus;
+      if (status === "pending" || status === "building") continue;
+      if (status === "failed") {
+        toast.error("The workflow bundle failed to build \u2014 the run was not started.");
+        return false;
+      }
+      return true;
+    }
+    toast.error("The bundle build is taking unusually long \u2014 try the run again once it is ready.");
+    return false;
+  } finally {
+    waitingForBuild.value = false;
+  }
+}
 const buildNotice = computed(() => {
   switch (workflow.value?.buildStatus) {
     case "building":
@@ -78,6 +125,7 @@ watch(id, async () => {
   const w = await get(id.value);
   if (!w) await router.push("/integrations/workflows");
   dirtyBlob.value = null;
+  warningsExpanded.value = false;
   if (tab.value === "runs") void loadRuns(1);
 }, { immediate: true });
 function onChange(blob) {
@@ -101,6 +149,7 @@ async function onRevisionRestored() {
 }
 const { trigger: triggerRun, loadForWorkflow, fetchRun, retryRun } = useIntegrationsRuns();
 const running = ref(false);
+const waitingMode = ref(null);
 const payloadText = ref("{}");
 const payloadError = ref(null);
 const primaryMode = computed(() => workflow.value?.execution_mode === "sync_only" ? "sync" : "async");
@@ -129,6 +178,29 @@ function syncErrorMessage(e) {
   }
   return e?.message || "Sync run failed";
 }
+function refusedForSettings(e) {
+  const issues = apiValidationIssues(e);
+  if (!issues.length) return null;
+  const groups = groupFindingsByNode(issues, workflow.value?.blob.nodes ?? []);
+  const named = groups.filter((g) => g.nodeId);
+  const summary = findingsSummary(issues.length, named.length);
+  const parts = [
+    ...named.map((g) => `${g.label} (${g.fields.join(", ")})`),
+    ...groups.filter((g) => !g.nodeId).flatMap((g) => g.messages)
+  ];
+  const where = parts.length ? ` \u2014 ${parts.join("; ")}` : "";
+  const line = `Can\u2019t run \u2014 ${summary}${where}`;
+  return /[.!?]$/.test(line) ? line : `${line}.`;
+}
+async function reportRunFailure(e, fallback) {
+  const settings = refusedForSettings(e);
+  if (!settings) {
+    syncError.value = fallback(e);
+    return;
+  }
+  syncError.value = settings;
+  if (workflow.value) await get(workflow.value.id);
+}
 async function run(mode) {
   if (!workflow.value) return;
   let payload;
@@ -139,6 +211,12 @@ async function run(mode) {
     return;
   }
   payloadError.value = null;
+  if (buildWorking.value) {
+    waitingMode.value = mode;
+    const ready = await waitForBuildReady();
+    waitingMode.value = null;
+    if (!ready) return;
+  }
   runModalMode.value = mode;
   runModalRunId.value = null;
   syncOpen.value = true;
@@ -150,7 +228,7 @@ async function run(mode) {
       syncResponse.value = await triggerRun(workflow.value.id, payload, "sync");
       runModalRunId.value = extractRunId(syncResponse.value);
     } catch (e) {
-      syncError.value = syncErrorMessage(e);
+      await reportRunFailure(e, syncErrorMessage);
       if (e instanceof IntegrationsApiError) {
         runModalRunId.value = extractRunId(e.body?.run);
       }
@@ -165,7 +243,7 @@ async function run(mode) {
     const res = await triggerRun(workflow.value.id, payload, "async");
     runModalRunId.value = extractRunId(res);
   } catch (e) {
-    syncError.value = e.message || "Could not start the run.";
+    await reportRunFailure(e, (err) => err?.message || "Could not start the run.");
   } finally {
     running.value = false;
     syncLoading.value = false;
@@ -412,6 +490,25 @@ async function saveWorkflowMeta(meta) {
     savingMeta.value = false;
   }
 }
+async function onToggleActive() {
+  const wf = workflow.value;
+  if (!wf) return;
+  if (!wf.active && isInvalid.value) {
+    toast.error(`Can\u2019t activate \u2014 ${validationWarnings.value?.length} setting${validationWarnings.value?.length === 1 ? "" : "s"} still need${validationWarnings.value?.length === 1 ? "s" : ""} fixing (see the banner above).`);
+    return;
+  }
+  try {
+    await toggleActive(wf.id);
+  } catch (e) {
+    const issues = apiValidationIssues(e);
+    if (issues.length) {
+      await get(wf.id);
+      toast.error(`Can\u2019t activate \u2014 ${issues.length} validation issue${issues.length === 1 ? "" : "s"} to fix.`);
+      return;
+    }
+    toast.error(e.message || "Could not change the workflow status.");
+  }
+}
 async function save() {
   if (!workflow.value || !dirtyBlob.value) return;
   saving.value = true;
@@ -426,6 +523,42 @@ async function save() {
     });
     dirtyBlob.value = null;
   } catch (e) {
+    const issues = apiValidationIssues(e);
+    if (issues.length && workflow.value.active) {
+      const nodes = workflow.value.blob.nodes;
+      deactivationIssues.value = issues.map((i) => {
+        const m = /^blob\.nodes\.(\d+)\b/.exec(i.path);
+        const node = m ? nodes[Number(m[1])] : void 0;
+        return { ...i, where: node ? nodeDisplayLabel(node) : null };
+      });
+      deactivationOpen.value = true;
+    } else {
+      saveError.value = e.message || "Save failed.";
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+async function confirmDeactivate() {
+  if (!workflow.value || !dirtyBlob.value) {
+    deactivationOpen.value = false;
+    return;
+  }
+  saving.value = true;
+  try {
+    await update(workflow.value.id, {
+      name: workflow.value.name,
+      description: workflow.value.description,
+      blob: dirtyBlob.value,
+      active: false,
+      executionMode: workflow.value.execution_mode
+    });
+    await get(workflow.value.id);
+    dirtyBlob.value = null;
+    deactivationOpen.value = false;
+    toast.success("Saved as paused \u2014 fix the highlighted settings, then activate again.");
+  } catch (e) {
+    deactivationOpen.value = false;
     saveError.value = e.message || "Save failed.";
   } finally {
     saving.value = false;
@@ -513,8 +646,9 @@ function formatDateTime(iso) {
               :variant="workflow.active ? 'outline' : 'default'"
               class="h-7 text-sm"
               :class="workflow.active ? 'text-amber-700 hover:text-amber-800' : 'bg-emerald-600 text-white hover:bg-emerald-700'"
-              :title="workflow.active ? 'Pause this workflow' : 'Activate this workflow'"
-              @click="toggleActive(workflow.id)"
+              :disabled="!workflow.active && isInvalid"
+              :title="workflow.active ? 'Pause this workflow' : isInvalid ? `Fix ${validationWarnings?.length} node setting(s) before activating` : 'Activate this workflow'"
+              @click="onToggleActive"
             >
               <component :is="workflow.active ? PauseIcon : Play" :size="12" />
               {{ workflow.active ? "Pause" : "Activate" }}
@@ -540,6 +674,51 @@ function formatDateTime(iso) {
         </NuxtLink>.
       </div>
 
+      <!-- Manifest validation (PO-186): an inactive workflow with warnings can't
+           be activated. The banner names what's incomplete; the Activate button
+           stays disabled until the next save recomputes an empty warnings set.
+           Amber (not red) — the work is saved fine, it just isn't runnable yet.
+           One line per NODE, listing its fields (PO-209): the messages behind
+           them ride along as the line's title, and the line leads to the node. -->
+      <div
+        v-if="!openRunId && !workflow.active && isInvalid"
+        class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800"
+      >
+        <p class="font-medium">
+          This workflow can’t be activated yet — {{ warningSummary }}:
+        </p>
+        <ul
+          class="mt-1 space-y-0.5"
+          :class="warningsExpanded ? 'max-h-36 overflow-y-auto pr-1' : ''"
+        >
+          <li
+            v-for="(g, i) in warningsExpanded ? warningGroups : warningGroups.slice(0, WARN_COLLAPSED)"
+            :key="`${g.nodeId ?? 'unattributed'}-${i}`"
+            class="flex gap-1.5"
+          >
+            <span class="select-none text-amber-500">•</span>
+            <!-- Attributed to a node: the whole line jumps there and opens its
+                 settings. Otherwise there is nowhere to go — state the finding. -->
+            <button
+              v-if="g.nodeId"
+              type="button"
+              class="text-left underline decoration-amber-700/30 underline-offset-2 hover:decoration-amber-800"
+              :title="g.messages.join('\n')"
+              :aria-label="`Fix ${g.fields.length} setting${g.fields.length === 1 ? '' : 's'} in ${g.label}`"
+              @click="revealNode(g.nodeId)"
+            >
+              <span class="font-medium">{{ g.label }}</span> — {{ g.fields.join(", ") }}
+            </button>
+            <span v-else>{{ g.messages.join(" ") }}</span>
+          </li>
+          <li v-if="!warningsExpanded && warningGroups.length > WARN_COLLAPSED" class="pl-3">
+            <button type="button" class="text-amber-700/90 underline underline-offset-2 hover:text-amber-900" @click="warningsExpanded = true">
+              …and {{ warningGroups.length - WARN_COLLAPSED }} more — open a node to fix its config.
+            </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. -->
@@ -569,15 +748,23 @@ function formatDateTime(iso) {
       </template>
 
       <!-- Editor tab — fills the remaining height inside the panel via
-           the flex wrapper in the studio layout. -->
+           the flex wrapper in the studio layout.
+
+           overlay-open: every lightbox this page owns renders as a sibling of
+           the tabs, so the editor stays mounted underneath one and would keep
+           its keyboard shortcuts live (Delete deleting the selected node behind
+           the dialog — PO-208). Add new page-level dialogs to this list. -->
       <div v-else-if="tab === 'editor'" class="flex-1 min-h-0">
         <WorkflowEditor
           :key="editorResetKey"
+          ref="editorRef"
           :workflow="workflow"
-          :run-busy="running || syncLoading"
+          :run-busy="running || syncLoading || waitingForBuild"
+          :run-waiting="waitingForBuild"
+          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen"
           @change="onChange"
           @run="runFromEditor"
-          @toggle-active="toggleActive(workflow.id)"
+          @toggle-active="onToggleActive"
           @open-settings="settingsOpen = true"
         />
       </div>
@@ -669,36 +856,36 @@ function formatDateTime(iso) {
           <template v-if="workflow.execution_mode === 'caller_decides'">
             <Button
               variant="outline"
-              :disabled="running || syncLoading || buildBlocked"
-              :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+              :disabled="running || syncLoading || waitingForBuild || buildFailed"
+              :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
               class="h-8 text-sm"
               @click="runFromPayloadDialog('sync')"
             >
-              <Loader2 v-if="syncLoading" :size="14" class="animate-spin" />
+              <Loader2 v-if="syncLoading || waitingMode === 'sync'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              Run (sync)
+              {{ waitingMode === "sync" ? "Waiting for build\u2026" : "Run (sync)" }}
             </Button>
             <Button
-              :disabled="running || syncLoading || buildBlocked"
-              :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+              :disabled="running || syncLoading || waitingForBuild || buildFailed"
+              :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
               class="h-8 text-sm"
               @click="runFromPayloadDialog('async')"
             >
-              <Loader2 v-if="running" :size="14" class="animate-spin" />
+              <Loader2 v-if="running || waitingMode === 'async'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              Run (async)
+              {{ waitingMode === "async" ? "Waiting for build\u2026" : "Run (async)" }}
             </Button>
           </template>
           <Button
             v-else
-            :disabled="running || syncLoading || buildBlocked"
-            :title="buildBlocked ? 'The workflow bundle is not ready to run yet.' : void 0"
+            :disabled="running || syncLoading || waitingForBuild || buildFailed"
+            :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
             class="h-8 text-sm"
             @click="runFromPayloadDialog(primaryMode)"
           >
-            <Loader2 v-if="running || syncLoading" :size="14" class="animate-spin" />
+            <Loader2 v-if="running || syncLoading || waitingForBuild" :size="14" class="animate-spin" />
             <Play v-else :size="14" />
-            Run ({{ primaryMode }})
+            {{ waitingForBuild ? "Waiting for build\u2026" : `Run (${primaryMode})` }}
           </Button>
         </div>
       </DialogContent>
@@ -729,5 +916,36 @@ function formatDateTime(iso) {
     />
 
     <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
+
+    <!-- Active-save blocked by manifest validation: keep the work by saving it
+         as paused. Cancelling persists nothing (the 422 already rolled back). -->
+    <AlertDialog :open="deactivationOpen" @update:open="(v) => {
+  if (!v) deactivationOpen = false;
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Can’t keep this workflow active</AlertDialogTitle>
+          <AlertDialogDescription>
+            These node settings must be valid while the workflow is active. Save it as
+            <span class="font-medium">paused</span> to keep your changes, then fix them and activate again — or cancel to discard this save.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <ul class="max-h-48 space-y-0.5 overflow-y-auto rounded-md border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-sm text-amber-800">
+          <li v-for="(w, i) in deactivationIssues" :key="`${w.path}-${i}`" class="flex gap-1.5">
+            <span class="select-none text-amber-500">•</span>
+            <span><span v-if="w.where" class="font-medium">{{ w.where }}:</span> {{ w.message }}</span>
+          </li>
+        </ul>
+        <AlertDialogFooter>
+          <Button variant="outline" :disabled="saving" @click="deactivationOpen = false">
+            Cancel
+          </Button>
+          <Button class="bg-emerald-600 text-white hover:bg-emerald-700" :disabled="saving" @click="confirmDeactivate">
+            <Loader2 v-if="saving" :size="12" class="animate-spin" />
+            Save as paused
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </IntegrationsLayout>
 </template>

package/dist/runtime/pages/integrations/workflows/index.vue

@@ -4,10 +4,11 @@ import { Button } from "@revenexx/studio";
 import WorkflowsTable from "../../../components/Integrations/WorkflowsTable.vue";
 import WorkflowCreateDialog from "../../../components/Integrations/WorkflowCreateDialog.vue";
 useHead({ title: "Workflows \xB7 Revenexx Cockpit" });
-const { workflows, loading, load } = useIntegrationsWorkflows();
+const { workflows, loading, error, load } = useIntegrationsWorkflows();
 onMounted(() => {
   void load();
 });
+const loadFailed = computed(() => !!error && !!error.value && !workflows.value.length);
 const createOpen = ref(false);
 </script>
 
@@ -25,7 +26,19 @@ const createOpen = ref(false);
     </PageHeader>
 
     <div class="p-4">
-      <WorkflowsTable :workflows="workflows" :loading="loading" />
+      <StateCard
+        v-if="loadFailed"
+        variant="error"
+        title="Could not load workflows"
+        :description="error ?? void 0"
+      >
+        <template #actions>
+          <Button variant="outline" class="h-8 text-sm" @click="load(true)">
+            Try again
+          </Button>
+        </template>
+      </StateCard>
+      <WorkflowsTable v-else :workflows="workflows" :loading="loading" />
     </div>
 
     <WorkflowCreateDialog v-model:open="createOpen" />