@revenexx/studio-integrations 1.1.1 → 1.2.0

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

@@ -2,21 +2,52 @@
 import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import LoadingAnnouncement from "../../components/Integrations/LoadingAnnouncement.vue";
 import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
-const { runs, loading, load } = useIntegrationsRuns();
+const { runs, loading, error, load, query, setQuery, narrowedTotal } = useIntegrationsRuns();
 const {
   globalItems: missed,
   globalLoading: missedLoading,
   pendingCount,
+  globalPage: missedPage,
+  globalLastPage: missedLastPage,
+  goGlobalPage,
+  resetGlobalPage,
   loadGlobal,
   replay,
-  discard
+  discard,
+  summary: missedSummary
 } = useIntegrationsDeadLetters();
+const page = computed({
+  get: () => query.value.page,
+  // Only when it actually moved. The shared table returns to its first page
+  // whenever the search or the page size changes, and reports that as a page
+  // change too — so an unguarded setter would send a second request for the page
+  // the list is already on, beside the one the search itself asks for.
+  set: (next) => {
+    if (next !== query.value.page) void setQuery({ page: next });
+  }
+});
+function onNarrow(patch) {
+  void setQuery(patch);
+}
+function onReorder(order) {
+  void setQuery(order);
+}
+let searchTimer;
+function onSearch(text) {
+  clearTimeout(searchTimer);
+  if (text === query.value.search) return;
+  searchTimer = setTimeout(() => {
+    void setQuery({ search: text });
+  }, 250);
+}
 const tab = ref(route.query.tab === "missed" ? "missed" : "runs");
 const tabs = computed(() => [
   { key: "runs", label: t("integration.runs.tabs.runs.label") },
@@ -36,7 +67,8 @@ watch([runTick, workflowTick], () => {
 });
 let pollTimer = null;
 onMounted(() => {
-  void load(true);
+  void setQuery({ search: "", page: 1 });
+  resetGlobalPage();
   void reloadMissedRuns();
   pollTimer = setInterval(() => {
     if (hasActiveRuns.value && !loading.value && budget.due(delivering.value)) void load(true);
@@ -47,8 +79,15 @@ onUnmounted(() => {
     clearInterval(pollTimer);
     pollTimer = null;
   }
+  clearTimeout(searchTimer);
 });
 const busyId = ref(null);
+async function goMissedPage(page2) {
+  try {
+    await goGlobalPage(page2);
+  } catch {
+  }
+}
 async function reloadMissedRuns() {
   try {
     await loadGlobal(true);
@@ -62,7 +101,7 @@ async function onReplay(dl) {
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
     toast.success(newId ? t("integration.deadLetters.toast.replay.started", { id: newId }) : t("integration.deadLetters.toast.replay.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.replay.error")));
     busyId.value = null;
     return;
   }
@@ -76,7 +115,7 @@ async function onDiscard(dl) {
     await discard(dl.id);
     toast.success(t("integration.deadLetters.toast.discard.done"));
   } catch (e) {
-    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
+    toast.error(errorReason(e, t("integration.deadLetters.toast.discard.error")));
     busyId.value = null;
     return;
   }
@@ -107,7 +146,49 @@ function fmt(iso) {
     <TabBar v-model="tab" :tabs="tabs" class="px-4" />
 
     <div class="p-4 space-y-4">
-      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="reload" />
+      <!-- Above the tab chain on purpose: the missed-runs half is drawn by a
+           `v-else`, so a region placed inside it would mount together with the
+           placeholders it speaks for, and a live region that arrives with its own
+           content is one nothing was listening to. Out here it is on the page from
+           the first render and only its text moves (PO-251). -->
+      <LoadingAnnouncement
+        :label="t('integration.deadLetters.tabs.missed.label')"
+        :loading="tab === 'missed' && missedLoading && !missed.length"
+        :text="t('integration.deadLetters.state.loading')"
+      />
+
+      <!--
+        A refused read, said plainly. Without this the page kept the rows it had
+        while `query` had already moved on, so a failed page turn drew rows 1–25
+        under a footer reading "Showing 26–50", and a refused narrowing left the
+        old rows under the new selection — both reading as an answer.
+      -->
+      <div
+        v-if="tab === 'runs' && error"
+        class="rounded-md border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-sm text-rose-700"
+        role="alert"
+      >
+        {{ error }}
+      </div>
+
+      <RunsTable
+        v-if="tab === 'runs'"
+        v-model:page="page"
+        :runs="runs"
+        :loading="loading"
+        server-mode
+        :total="narrowedTotal"
+        :per-page="query.perPage"
+        :status="query.status"
+        :trigger-type="query.triggerType"
+        :sort="query.sort"
+        :direction="query.direction"
+        @narrow="onNarrow"
+        @search="onSearch"
+        @page-size="(size) => setQuery({ perPage: size })"
+        @reorder="onReorder"
+        @changed="reload"
+      />
 
       <!-- Missed runs — trigger firings that never produced a run (the
            workflow wasn't runnable when its schedule/event fired). -->
@@ -122,7 +203,7 @@ function fmt(iso) {
           </Button>
         </div>
 
-        <div v-if="missedLoading && !missed.length"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
+        <div v-if="missedLoading && !missed.length" aria-hidden="true"><div class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
           <div v-for="n in 4" :key="`sk-${n}`" class="flex items-start gap-3 px-3 py-3">
             <div class="h-5 w-16 shrink-0 rounded bg-black/[0.07] animate-pulse" />
             <div class="min-w-0 flex-1 space-y-2">
@@ -168,6 +249,34 @@ function fmt(iso) {
             </div>
           </div>
         </div>
+
+        <!--
+          Server pagination — the endpoint pages, so the whole backlog is
+          reachable. It used to read one page of a hundred and offer no way past
+          it, while `has_more` came back on every read and was shown to nobody
+          (PO-369).
+        -->
+        <div v-if="missedLastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
+          <span class="tabular-nums">
+            {{ t("integration.deadLetters.pagination.summary", { page: missedPage, lastPage: missedLastPage, total: missedSummary.total }) }}
+          </span>
+          <div class="flex gap-2">
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage <= 1 || missedLoading"
+              @click="goMissedPage(missedPage - 1)"
+            >
+              {{ t("integration.deadLetters.pagination.newer") }}
+            </Button>
+            <Button
+              variant="outline" size="sm" class="h-7 text-sm"
+              :disabled="missedPage >= missedLastPage || missedLoading"
+              @click="goMissedPage(missedPage + 1)"
+            >
+              {{ t("integration.deadLetters.pagination.older") }}
+            </Button>
+          </div>
+        </div>
       </template>
     </div>
   </IntegrationsLayout>

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

@@ -24,6 +24,7 @@ import {
   Input,
   Label
 } from "@revenexx/studio";
+import { errorReason } from "../../utils/apiError";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
@@ -58,7 +59,7 @@ async function submitCreate() {
     await upsert(key, newValue.value);
     createOpen.value = false;
   } catch (e) {
-    formError.value = e.message;
+    formError.value = errorReason(e, t("integration.secrets.form.error.saveFailed"));
   } finally {
     saving.value = false;
   }

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

@@ -24,6 +24,7 @@ import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPr
 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();
@@ -165,7 +166,7 @@ async function confirmInstall() {
     });
     if (id) await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    installError.value = e.message || t("integration.templates.detail.install.error.fallback");
+    installError.value = errorReason(e, t("integration.templates.detail.install.error.fallback"));
   } finally {
     installing.value = false;
   }

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

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from "vue";
 import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#solar-icons";
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
+import LoadingAnnouncement from "../../../components/Integrations/LoadingAnnouncement.vue";
 import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 const t = useIntegrationsT();
@@ -55,7 +56,6 @@ watch(() => templates.value.length, () => {
   if (templates.value.length) void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
-const statusText = computed(() => awaitingCatalogue.value ? t("integration.templates.gallery.state.loading") : "");
 </script>
 
 <template>
@@ -115,22 +115,25 @@ const statusText = computed(() => awaitingCatalogue.value ? t("integration.templ
     </PageHeader>
 
     <div class="p-4">
-      <!-- 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.
+      <!-- What the page is doing, in words (specs/templates.md AC-9). The mechanics are
+           in LoadingAnnouncement; three things about this page in particular are not.
 
-           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.
+           The region is NAMED because every card draws a status region of its own while
+           its flow miniature loads, so an unnamed one here would be indistinguishable
+           from six of those.
 
-           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="t('integration.templates.gallery.state.regionLabel')" class="sr-only">{{ statusText }}</p>
+           Only the WAIT gets words. The empty registry and a filter without a match say
+           which they are in copy the reader arrives at or already has focus in, so
+           announcing them too would tell each of them twice.
+
+           A refused catalogue IS announced, but not from here: it is said by the block
+           that shows it, which carries `role="alert"`. Saying it here as well would put
+           the same sentence twice in the DOM, heard twice by anybody walking the page. -->
+      <LoadingAnnouncement
+        :label="t('integration.templates.gallery.state.regionLabel')"
+        :loading="awaitingCatalogue"
+        :text="t('integration.templates.gallery.state.loading')"
+      />
 
       <!-- The placeholders are taken out of the accessibility tree rather than
            marked busy. `aria-busy` only asks assistive technology to defer

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save, SidebarMinimalistic as RailIcon } from "#solar-icons";
+import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, RefreshCircle as Loader2, MenuDots as MoreHorizontal, Play, Refresh as RetryIcon, Diskette as Save, SidebarMinimalistic as RailIcon } from "#solar-icons";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -16,6 +16,12 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Select,
   SelectContent,
   SelectItem,
@@ -24,16 +30,20 @@ import {
   Switch,
   Textarea
 } from "@revenexx/studio";
+import { deepClone } from "../../../utils/deepClone";
 import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
 import WorkflowHistoryPanel from "../../../components/Integrations/WorkflowHistoryPanel.vue";
 import WorkflowRunReplayPanel from "../../../components/Integrations/WorkflowRunReplayPanel.vue";
 import WorkflowSettingsDialog from "../../../components/Integrations/WorkflowSettingsDialog.vue";
+import WorkflowDeleteDialog from "../../../components/Integrations/WorkflowDeleteDialog.vue";
 import WorkflowDuplicateDialog from "../../../components/Integrations/WorkflowDuplicateDialog.vue";
 import RunsTable from "../../../components/Integrations/RunsTable.vue";
 import RunDetailPanel from "../../../components/Integrations/RunDetailPanel.vue";
 import { toast } from "vue-sonner";
-import { IntegrationsApiError, apiValidationIssues } from "../../../utils/apiError";
+import { IntegrationsApiError, apiValidationIssues, errorReason } from "../../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../../utils/pollBudget";
+import { splitRunOutputs } from "../../../utils/runOutputs";
+import { isTerminalRun, unwrapRun } from "../../../utils/runEnvelope";
 import { findingsSummary, groupFindingsByNode, nodeDisplayLabel } from "../../../utils/validationFindings";
 import { payloadFieldsFromBlob } from "../../../data/payloadForm";
 import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
@@ -62,11 +72,11 @@ function draftFrom() {
     executionMode: w.execution_mode ?? "async_only",
     tags: [...w.blob.tags ?? []],
     icon: w.blob.icon ?? null,
-    blob: JSON.parse(JSON.stringify(w.blob))
+    blob: deepClone(w.blob)
   };
 }
 function payloadBlob(d) {
-  const blob = JSON.parse(JSON.stringify(d.blob));
+  const blob = deepClone(d.blob);
   blob.name = d.name;
   if (d.description) blob.description = d.description;
   else delete blob.description;
@@ -138,6 +148,19 @@ 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 buildNotice = computed(() => {
   switch (workflow.value?.buildStatus) {
     case "building":
@@ -159,6 +182,7 @@ watch(id, async () => {
   draft.value = null;
   warningsExpanded.value = false;
   if (tab.value === "runs") void loadRuns(1);
+  void settleBuildStatus();
 }, { immediate: true });
 function onChange(blob) {
   const d = draftFrom();
@@ -212,12 +236,25 @@ async function onDuplicated(copy) {
   toast.success(t("integration.editor.toast.duplicated", { name: copy.name }));
   await leaveTo(`/integrations/workflows/${copy.id}`);
 }
+const deleteOpen = ref(false);
+const deleteTarget = ref(null);
+function askDelete() {
+  if (!workflow.value) return;
+  deleteTarget.value = { id: workflow.value.id, name: workflow.value.name };
+  deleteOpen.value = true;
+}
+async function onDeleted(wf) {
+  draft.value = null;
+  toast.success(t("integration.editor.toast.deleted", { name: wf.name }));
+  await leaveTo("/integrations/workflows");
+}
 async function onRevisionRestored() {
   if (!workflow.value) return;
   await get(workflow.value.id);
   draft.value = null;
+  void settleBuildStatus();
 }
-const { trigger: triggerRun, loadForWorkflow, fetchRun, retryRun } = useIntegrationsRuns();
+const { trigger: triggerRun, loadForWorkflow, fetchRun, getRun, retryRun } = useIntegrationsRuns();
 const running = ref(false);
 const waitingMode = ref(null);
 const payloadText = ref("{}");
@@ -227,6 +264,8 @@ const syncOpen = ref(false);
 const syncLoading = ref(false);
 const syncResponse = ref(null);
 const syncError = ref(null);
+const runObject = ref(null);
+const followingRun = ref(false);
 const runModalMode = ref("sync");
 const runModalRunId = ref(null);
 function extractRunId(res) {
@@ -236,6 +275,13 @@ function extractRunId(res) {
   }
   return null;
 }
+function asRunObject(res) {
+  if (!res || typeof res !== "object" || Array.isArray(res)) return null;
+  const o = res;
+  return "id" in o && "status" in o ? o : null;
+}
+const runOutputs = computed(() => splitRunOutputs(runObject.value?.result, shownBlob.value?.nodes ?? []));
+const runResult = computed(() => runObject.value ? runObject.value.result : syncResponse.value);
 function viewRunFromModal(id2) {
   syncOpen.value = false;
   void router.push({ query: { ...route.query, run: id2 } });
@@ -244,9 +290,8 @@ function syncErrorMessage(e) {
   if (e instanceof IntegrationsApiError) {
     if (e.status === 504) return t("integration.editor.run.error.syncTimeout");
     if (e.status === 422 && e.body?.status === "failed") return t("integration.editor.run.error.syncFailed");
-    return e.message || t("integration.editor.run.error.syncFailed");
   }
-  return e?.message || t("integration.editor.run.error.syncFailed");
+  return errorReason(e, t("integration.editor.run.error.syncFailed"));
 }
 function refusedForSettings(e) {
   const issues = apiValidationIssues(e);
@@ -289,6 +334,8 @@ async function run(mode) {
   }
   runModalMode.value = mode;
   runModalRunId.value = null;
+  stopFollowingRun();
+  runObject.value = null;
   syncOpen.value = true;
   syncLoading.value = true;
   syncResponse.value = null;
@@ -297,6 +344,7 @@ async function run(mode) {
     try {
       syncResponse.value = await triggerRun(workflow.value.id, payload, "sync");
       runModalRunId.value = extractRunId(syncResponse.value);
+      runObject.value = asRunObject(syncResponse.value);
     } catch (e) {
       await reportRunFailure(e, syncErrorMessage);
       if (e instanceof IntegrationsApiError) {
@@ -312,8 +360,10 @@ async function run(mode) {
   try {
     const res = await triggerRun(workflow.value.id, payload, "async");
     runModalRunId.value = extractRunId(res);
+    runObject.value = asRunObject(res);
+    startFollowingRun();
   } catch (e) {
-    await reportRunFailure(e, (err) => err?.message || t("integration.editor.run.error.couldNotStart"));
+    await reportRunFailure(e, (err) => errorReason(err, t("integration.editor.run.error.couldNotStart")));
   } finally {
     running.value = false;
     syncLoading.value = false;
@@ -419,6 +469,61 @@ function startRunsPoll() {
   }, RUNS_POLL_MS);
 }
 onUnmounted(stopRunsPoll);
+const FOLLOW_POLL_MS = 3e3;
+const followBudget = createPollBudget({ intervalMs: FOLLOW_POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
+const FOLLOW_MAX_MISSES = 3;
+let followTimer = null;
+let followMisses = 0;
+let followSeq = 0;
+function stopFollowingRun() {
+  if (followTimer) {
+    clearInterval(followTimer);
+    followTimer = null;
+  }
+  followSeq++;
+  followingRun.value = false;
+}
+function countFollowMiss() {
+  if (++followMisses >= FOLLOW_MAX_MISSES) stopFollowingRun();
+}
+async function readFollowedRun() {
+  const id2 = runModalRunId.value;
+  if (!workflow.value || !id2) return stopFollowingRun();
+  const seq = ++followSeq;
+  try {
+    const raw = await getRun(workflow.value.id, id2);
+    followBudget.spend();
+    if (seq !== followSeq) return;
+    const run2 = asRunObject(unwrapRun(raw));
+    if (!run2) return countFollowMiss();
+    followMisses = 0;
+    runObject.value = run2;
+    if (isTerminalRun(run2)) stopFollowingRun();
+  } catch {
+    if (seq !== followSeq) return;
+    countFollowMiss();
+  }
+}
+function startFollowingRun() {
+  stopFollowingRun();
+  if (!runModalRunId.value || isTerminalRun(runObject.value)) return;
+  followMisses = 0;
+  followingRun.value = true;
+  void readFollowedRun();
+  followTimer = setInterval(() => {
+    if (followBudget.due(realtimeDelivering.value)) void readFollowedRun();
+  }, FOLLOW_POLL_MS);
+}
+watch(runTick, () => {
+  if (!followingRun.value) return;
+  const eventRun = lastRunEvent.value?.topicId;
+  if (eventRun && eventRun !== String(runModalRunId.value ?? "")) return;
+  void readFollowedRun();
+});
+watch(syncOpen, (open) => {
+  if (!open) stopFollowingRun();
+});
+onUnmounted(stopFollowingRun);
 watch(runTick, () => {
   if (tab.value !== "runs" || runsWanted.value !== 1 || runsLoading.value) return;
   const eventWorkflow = workflowIdOf(lastRunEvent.value);
@@ -455,7 +560,7 @@ async function loadRuns(page = runsWanted.value, opts = {}) {
     runsWanted.value = res.page;
   } catch (e) {
     if (seq !== runsSeq) return;
-    runsError.value = e.message || t("integration.editor.runs.error.load");
+    runsError.value = errorReason(e, t("integration.editor.runs.error.load"));
     runsWanted.value = runsPage.value;
   } finally {
     if (!opts.silent && seq === runsLoadingSeq) runsLoading.value = false;
@@ -510,7 +615,7 @@ async function loadOpenRun() {
   try {
     openRun.value = await fetchRun(workflow.value.id, openRunId.value, workflow.value.name);
   } catch (e) {
-    openRunError.value = e?.message ?? t("integration.editor.run.error.loadOpenRun");
+    openRunError.value = errorReason(e, t("integration.editor.run.error.loadOpenRun"));
   }
 }
 watch(openRunId, () => {
@@ -536,7 +641,7 @@ async function retryOpenRun() {
     toast.success(newId && newId !== openRun.value.id ? t("integration.editor.retry.toast.started", { id: newId }) : t("integration.editor.retry.toast.requested"));
     void loadRuns(1, { silent: true });
   } catch (e) {
-    toast.error(e?.message ?? t("integration.editor.retry.error.generic"));
+    toast.error(errorReason(e, t("integration.editor.retry.error.generic")));
   } finally {
     retryBusy.value = false;
   }
@@ -589,7 +694,7 @@ async function onToggleActive() {
       toast.error(t("integration.editor.activate.error.validationIssues", issues.length));
       return;
     }
-    toast.error(e.message || t("integration.editor.activate.error.generic"));
+    toast.error(errorReason(e, t("integration.editor.activate.error.generic")));
   }
 }
 async function save() {
@@ -606,6 +711,7 @@ async function save() {
       executionMode: d.executionMode
     });
     draft.value = null;
+    void settleBuildStatus();
   } catch (e) {
     const issues = apiValidationIssues(e);
     if (issues.length && workflow.value.active) {
@@ -617,7 +723,7 @@ async function save() {
       });
       deactivationOpen.value = true;
     } else {
-      saveError.value = e.message || t("integration.editor.save.error.generic");
+      saveError.value = errorReason(e, t("integration.editor.save.error.generic"));
     }
   } finally {
     saving.value = false;
@@ -642,9 +748,10 @@ async function confirmDeactivate() {
     draft.value = null;
     deactivationOpen.value = false;
     toast.success(t("integration.editor.deactivate.toast.savedPaused"));
+    void settleBuildStatus();
   } catch (e) {
     deactivationOpen.value = false;
-    saveError.value = e.message || t("integration.editor.save.error.generic");
+    saveError.value = errorReason(e, t("integration.editor.save.error.generic"));
   } finally {
     saving.value = false;
   }
@@ -747,10 +854,33 @@ function formatDateTime(iso) {
               {{ 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>
-            <Button variant="outline" class="h-7 text-sm" :disabled="saving" :title="t('integration.editor.action.duplicate.title')" @click="duplicateOpen = true">
-              <CopyIcon :size="12" />
-              {{ t("integration.editor.action.duplicate.label") }}
-            </Button>
+            <!-- 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
+                 work belongs to. Two reasons they are a menu rather than two more
+                 buttons in a row of five. Deleting cannot be undone and has no
+                 business a mis-click away from Save; and a lone Delete under a
+                 Duplicate that stayed a button reads as an oversight rather than
+                 as a grouping — the menu only holds together while it holds both.
+                 Icon-only, so it carries a name of its own. -->
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="outline" size="icon" class="size-7" :disabled="saving" :aria-label="t('integration.editor.action.more.aria')">
+                  <MoreHorizontal :size="12" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>{{ t("integration.editor.action.more.label") }}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem @select="duplicateOpen = true">
+                  {{ t("integration.editor.action.duplicate.label") }}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem class="text-destructive focus:text-destructive" @select="askDelete">
+                  {{ t("integration.common.action.delete") }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
             <Button variant="outline" class="h-7 text-sm" :disabled="!isDirty || saving" :title="t('integration.editor.action.discard.title')" @click="discardChanges">
               {{ t("integration.editor.action.discard.label") }}
             </Button>
@@ -898,7 +1028,7 @@ function formatDateTime(iso) {
           :draft="draft?.blob ?? null"
           :run-busy="running || syncLoading || waitingForBuild"
           :run-waiting="waitingForBuild"
-          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
+          :overlay-open="settingsOpen || duplicateOpen || deleteOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
           @change="onChange"
           @run="runFromEditor"
           @toggle-active="onToggleActive"
@@ -1032,7 +1162,10 @@ function formatDateTime(iso) {
       :open="syncOpen"
       :loading="syncLoading"
       :mode="runModalMode"
-      :response="syncResponse"
+      :run="runObject"
+      :outputs="runOutputs"
+      :result="runResult"
+      :following="followingRun"
       :error="syncError"
       :run-id="runModalRunId"
       @update:open="(v) => syncOpen = v"
@@ -1049,6 +1182,8 @@ function formatDateTime(iso) {
       @apply="applySettings"
     />
 
+    <WorkflowDeleteDialog v-model:open="deleteOpen" :workflow="deleteTarget" @deleted="onDeleted" />
+
     <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 
     <!-- Leaving the workflow with unsaved work.

package/dist/runtime/types/integrations.d.ts

@@ -261,6 +261,11 @@ export interface ConfigField {
     default?: unknown;
     placeholder?: LocalizedString;
     expressionAllowed?: boolean;
+    /** The setting takes several lines — a mail body, a list of instructions one
+     *  per line — so it is drawn with room for them. Read for `string` and
+     *  `expression` fields; every other type ignores it (a dropdown has no
+     *  multi-line meaning, and the JSON fallback is already a text area). */
+    multiline?: boolean;
     options?: ConfigFieldOption[];
     /** When true, this field's `options` are resolved at author-time via
      *  config:resolve with target === this field's `key` (see useNodeConfigResolve). */