@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,7 +1,13 @@
 <script setup>
-import { computed, 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 { 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, SidebarMinimalistic as RailIcon } from "#solar-icons";
 import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
   Badge,
   Button,
   Dialog,
@@ -24,28 +30,47 @@ 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 { createPollBudget, SAFETY_POLL_MS } from "../../../utils/pollBudget";
+import { findingsSummary, groupFindingsByNode, nodeDisplayLabel } from "../../../utils/validationFindings";
 import { payloadFieldsFromBlob } from "../../../data/payloadForm";
 import WorkflowIconView from "../../../components/Integrations/WorkflowIconView.vue";
+const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
 const { workflows, get, update, toggleActive } = useIntegrationsWorkflows();
-const { autoEnable } = useIntegrationsFocus();
-autoEnable();
 const id = computed(() => Number(route.params.id));
 const workflow = computed(() => workflows.value.find((w) => w.id === id.value) ?? null);
-useHead({ title: () => `${workflow.value?.name ?? "Workflow"} \xB7 Revenexx Cockpit` });
+useHead({ title: () => t("integration.editor.head.title", { name: workflow.value?.name ?? t("integration.editor.head.untitled") }) });
 const tab = ref("editor");
-const tabs = [
-  { key: "editor", label: "Editor" },
-  { key: "history", label: "History" },
-  { key: "runs", label: "Runs" },
-  { key: "dead-letters", label: "Missed runs" }
-];
+const tabs = computed(() => [
+  { key: "editor", label: t("integration.editor.tab.editor") },
+  { key: "history", label: t("integration.editor.tab.history") },
+  { key: "runs", label: t("integration.editor.tab.runs") },
+  { key: "dead-letters", label: t("integration.editor.tab.deadLetters") }
+]);
 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();
@@ -70,12 +95,12 @@ async function waitForBuildReady() {
       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.");
+        toast.error(t("integration.editor.build.toast.failed"));
         return false;
       }
       return true;
     }
-    toast.error("The bundle build is taking unusually long \u2014 try the run again once it is ready.");
+    toast.error(t("integration.editor.build.toast.timeout"));
     return false;
   } finally {
     waitingForBuild.value = false;
@@ -84,13 +109,13 @@ async function waitForBuildReady() {
 const buildNotice = computed(() => {
   switch (workflow.value?.buildStatus) {
     case "building":
-      return { tone: "info", text: "The workflow bundle is still building \u2014 runs are unavailable until it is ready." };
+      return { tone: "info", text: t("integration.editor.build.notice.building") };
     case "pending":
-      return { tone: "info", text: "The workflow bundle build is queued \u2014 runs are unavailable until it is ready." };
+      return { tone: "info", text: t("integration.editor.build.notice.pending") };
     case "failed":
       return {
         tone: "error",
-        text: `The workflow bundle failed to build${workflow.value?.buildError ? `: ${workflow.value.buildError}` : "."} Save the workflow again to retry the build.`
+        text: workflow.value?.buildError ? t("integration.editor.build.notice.failedWithError", { error: workflow.value.buildError }) : t("integration.editor.build.notice.failed")
       };
     default:
       return null;
@@ -100,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) {
@@ -113,7 +139,7 @@ function discardChanges() {
 const duplicateOpen = ref(false);
 const duplicateTarget = computed(() => workflow.value ? { id: workflow.value.id, name: workflow.value.name } : null);
 async function onDuplicated(copy) {
-  toast.success(`Duplicated as \u201C${copy.name}\u201D`);
+  toast.success(t("integration.editor.toast.duplicated", { name: copy.name }));
   await router.push(`/integrations/workflows/${copy.id}`);
 }
 async function onRevisionRestored() {
@@ -146,11 +172,34 @@ function viewRunFromModal(id2) {
 }
 function syncErrorMessage(e) {
   if (e instanceof IntegrationsApiError) {
-    if (e.status === 504) return "Sync run timed out";
-    if (e.status === 422 && e.body?.status === "failed") return "Sync run failed";
-    return e.message || "Sync run failed";
+    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");
+}
+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 = t("integration.editor.run.error.refusedForSettings", { summary, where });
+  return /[.!?]$/.test(line) ? line : `${line}.`;
+}
+async function reportRunFailure(e, fallback) {
+  const settings = refusedForSettings(e);
+  if (!settings) {
+    syncError.value = fallback(e);
+    return;
   }
-  return e?.message || "Sync run failed";
+  syncError.value = settings;
+  if (workflow.value) await get(workflow.value.id);
 }
 async function run(mode) {
   if (!workflow.value) return;
@@ -158,7 +207,7 @@ async function run(mode) {
   try {
     payload = JSON.parse(payloadText.value || "{}");
   } catch {
-    payloadError.value = "Trigger payload is not valid JSON.";
+    payloadError.value = t("integration.editor.payload.error.invalidJson");
     return;
   }
   payloadError.value = null;
@@ -179,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);
       }
@@ -194,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 || t("integration.editor.run.error.couldNotStart"));
   } finally {
     running.value = false;
     syncLoading.value = false;
@@ -217,7 +266,7 @@ const eventLog = typeof useIntegrationsEvents === "function" ? useIntegrationsEv
 } };
 const prefillBusy = ref(null);
 const eventTriggerTopic = computed(() => {
-  const trigger = (workflow.value?.blob.triggers ?? []).find((t) => t.type === "event");
+  const trigger = (workflow.value?.blob.triggers ?? []).find((t2) => t2.type === "event");
   const topic = trigger?.config?.event_type;
   return typeof topic === "string" && topic.trim() !== "" ? topic.trim() : null;
 });
@@ -252,7 +301,7 @@ async function insertLatestEvent() {
     await eventLog.loadEvents();
     const match = eventLog.events.value.filter((e) => e.topic === topic).sort((a, b) => (b.time ?? "").localeCompare(a.time ?? ""))[0];
     if (!match) {
-      toast.info(`No received ${topic} event in the log yet.`);
+      toast.info(t("integration.editor.event.toast.noneReceived", { topic }));
       return;
     }
     payloadText.value = envelope(topic, match.data, {
@@ -278,6 +327,9 @@ const runsError = ref(null);
 const runsPage = ref(1);
 const runsTotal = ref(0);
 const runsLastPage = ref(1);
+const RUNS_POLL_MS = 3e3;
+const { delivering: realtimeDelivering, runTick, lastRunEvent, buildTick, lastBuildEvent } = useIntegrationsRealtime();
+const runsBudget = createPollBudget({ intervalMs: RUNS_POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
 let runsPoll = null;
 function stopRunsPoll() {
   if (runsPoll) {
@@ -288,12 +340,25 @@ function stopRunsPoll() {
 function startRunsPoll() {
   stopRunsPoll();
   runsPoll = setInterval(() => {
-    if (runsPage.value === 1) void loadRuns(1, { silent: true });
-  }, 3e3);
+    if (runsPage.value === 1 && runsBudget.due(realtimeDelivering.value)) void loadRuns(1, { silent: true });
+  }, RUNS_POLL_MS);
 }
 onUnmounted(stopRunsPoll);
+watch(runTick, () => {
+  if (tab.value !== "runs" || runsPage.value !== 1) return;
+  const eventWorkflow = workflowIdOf(lastRunEvent.value);
+  if (eventWorkflow && eventWorkflow !== String(workflow.value?.id ?? "")) return;
+  void loadRuns(1, { silent: true });
+});
+watch(buildTick, () => {
+  if (!workflow.value) return;
+  const eventWorkflow = lastBuildEvent.value?.topicId ?? workflowIdOf(lastBuildEvent.value);
+  if (eventWorkflow && eventWorkflow !== String(workflow.value.id)) return;
+  void get(workflow.value.id);
+});
 async function loadRuns(page = runsPage.value, opts = {}) {
   if (!workflow.value) return;
+  runsBudget.spend();
   if (!opts.silent) runsLoading.value = true;
   runsError.value = null;
   try {
@@ -307,7 +372,7 @@ async function loadRuns(page = runsPage.value, opts = {}) {
     runsLastPage.value = res.lastPage;
     runsPage.value = res.page;
   } catch (e) {
-    runsError.value = e.message || "Could not load runs.";
+    runsError.value = e.message || t("integration.editor.runs.error.load");
   } finally {
     if (!opts.silent) runsLoading.value = false;
   }
@@ -316,20 +381,43 @@ function goRunsPage(p) {
   const next = Math.min(Math.max(1, p), runsLastPage.value);
   if (next !== runsPage.value) void loadRuns(next);
 }
-watch(tab, (t) => {
-  if (t === "runs") {
+watch(tab, (t2) => {
+  if (t2 === "runs") {
     void loadRuns(1);
     startRunsPoll();
   } else stopRunsPoll();
 });
 const settingsOpen = ref(false);
 const openRunId = computed(() => route.query.run != null ? String(route.query.run) : null);
+const { focused: railFolded, enable, disable } = useIntegrationsFocus();
+const WIDE_CANVAS_KEY = "integrations.editor.wideCanvas";
+const wideCanvasWanted = ref(false);
+try {
+  wideCanvasWanted.value = localStorage.getItem(WIDE_CANVAS_KEY) === "1";
+} catch {
+}
+const canvasFillsPage = computed(() => tab.value === "editor" && !openRunId.value);
+const railShouldFold = computed(() => wideCanvasWanted.value && canvasFillsPage.value);
+function applyRail() {
+  if (railShouldFold.value) enable();
+  else disable();
+}
+onMounted(() => applyRail());
+watch(railShouldFold, () => applyRail());
+onUnmounted(() => disable());
+function toggleRail() {
+  wideCanvasWanted.value = !wideCanvasWanted.value;
+  try {
+    localStorage.setItem(WIDE_CANVAS_KEY, wideCanvasWanted.value ? "1" : "0");
+  } catch {
+  }
+}
 const runView = ref("details");
-const runViews = [
-  { key: "details", label: "Details" },
-  { key: "timeline", label: "Timeline" },
-  { key: "replay", label: "Replay" }
-];
+const runViews = computed(() => [
+  { key: "details", label: t("integration.editor.runView.details") },
+  { key: "timeline", label: t("integration.editor.runView.timeline") },
+  { key: "replay", label: t("integration.editor.runView.replay") }
+]);
 const openRun = ref(null);
 const openRunError = ref(null);
 async function loadOpenRun() {
@@ -338,7 +426,7 @@ async function loadOpenRun() {
   try {
     openRun.value = await fetchRun(workflow.value.id, openRunId.value, workflow.value.name);
   } catch (e) {
-    openRunError.value = e?.message ?? "Could not load the run.";
+    openRunError.value = e?.message ?? t("integration.editor.run.error.loadOpenRun");
   }
 }
 watch(openRunId, () => {
@@ -361,26 +449,26 @@ async function retryOpenRun() {
   try {
     const res = await retryRun(openRun.value.workflowId, openRun.value.id);
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
-    toast.success(newId && newId !== openRun.value.id ? `Started run #${newId}` : "Retry requested");
+    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 ?? "Could not retry the run.");
+    toast.error(e?.message ?? t("integration.editor.retry.error.generic"));
   } finally {
     retryBusy.value = false;
   }
 }
-const EXECUTION_MODES = [
-  { value: "async_only", label: "Async only", hint: "Runs are always queued; the trigger returns immediately." },
-  { value: "sync_only", label: "Sync only", hint: "Runs block until they finish and return the result inline." },
-  { value: "caller_decides", label: "Caller decides", hint: "The caller chooses sync or async per run." }
-];
+const EXECUTION_MODES = computed(() => [
+  { value: "async_only", label: t("integration.editor.executionMode.async.label"), hint: t("integration.editor.executionMode.async.hint") },
+  { value: "sync_only", label: t("integration.editor.executionMode.sync.label"), hint: t("integration.editor.executionMode.sync.hint") },
+  { value: "caller_decides", label: t("integration.editor.executionMode.callerDecides.label"), hint: t("integration.editor.executionMode.callerDecides.hint") }
+]);
 const executionModeDraft = ref("async_only");
 watch(workflow, (w) => {
   if (w) executionModeDraft.value = w.execution_mode ?? "async_only";
 }, { immediate: true });
 const savingMode = ref(false);
 function modeLabel(m) {
-  return m === "sync_only" ? "Sync" : m === "caller_decides" ? "Caller decides" : "Async";
+  return m === "sync_only" ? t("integration.editor.executionMode.sync.short") : m === "caller_decides" ? t("integration.editor.executionMode.callerDecides.label") : t("integration.editor.executionMode.async.short");
 }
 async function saveExecutionMode(mode) {
   if (!workflow.value || mode === workflow.value.execution_mode) return;
@@ -399,7 +487,7 @@ async function saveExecutionMode(mode) {
     await get(workflow.value.id);
   } catch (e) {
     executionModeDraft.value = prev;
-    saveError.value = e.message || "Could not update the execution mode.";
+    saveError.value = e.message || t("integration.editor.executionMode.error.generic");
   } finally {
     savingMode.value = false;
   }
@@ -407,7 +495,7 @@ async function saveExecutionMode(mode) {
 const savingMeta = ref(false);
 const tagSuggestions = computed(() => {
   const all = /* @__PURE__ */ new Set();
-  for (const wf of workflows.value) for (const t of wf.blob.tags ?? []) all.add(t);
+  for (const wf of workflows.value) for (const t2 of wf.blob.tags ?? []) all.add(t2);
   return [...all].sort();
 });
 async function saveWorkflowMeta(meta) {
@@ -432,15 +520,34 @@ async function saveWorkflowMeta(meta) {
     });
     await get(workflow.value.id);
     dirtyBlob.value = null;
-    toast.success("Appearance saved");
+    toast.success(t("integration.editor.appearance.toast.saved"));
   } catch (e) {
-    const msg = e.message || "Could not save the appearance.";
+    const msg = e.message || t("integration.editor.appearance.error.generic");
     saveError.value = msg;
     toast.error(msg);
   } finally {
     savingMeta.value = false;
   }
 }
+async function onToggleActive() {
+  const wf = workflow.value;
+  if (!wf) return;
+  if (!wf.active && isInvalid.value) {
+    toast.error(t("integration.editor.activate.error.needsFixing", validationWarnings.value?.length ?? 0));
+    return;
+  }
+  try {
+    await toggleActive(wf.id);
+  } catch (e) {
+    const issues = apiValidationIssues(e);
+    if (issues.length) {
+      await get(wf.id);
+      toast.error(t("integration.editor.activate.error.validationIssues", issues.length));
+      return;
+    }
+    toast.error(e.message || t("integration.editor.activate.error.generic"));
+  }
+}
 async function save() {
   if (!workflow.value || !dirtyBlob.value) return;
   saving.value = true;
@@ -455,7 +562,43 @@ async function save() {
     });
     dirtyBlob.value = null;
   } catch (e) {
-    saveError.value = e.message || "Save failed.";
+    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 || t("integration.editor.save.error.generic");
+    }
+  } 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(t("integration.editor.deactivate.toast.savedPaused"));
+  } catch (e) {
+    deactivationOpen.value = false;
+    saveError.value = e.message || t("integration.editor.save.error.generic");
   } finally {
     saving.value = false;
   }
@@ -479,41 +622,67 @@ function formatDateTime(iso) {
         <PageHeader :title="workflow.name">
         <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">Workflows</NuxtLink>
+            <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" />
             <!-- 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')">{{ workflow.name }}</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')">Runs</button>
+              <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" />
               <!-- 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 ?? `Run #${openRunId}` }}</span>
+              <span class="truncate 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="workflow.blob.icon" :size="16" />
               </span>
               <span class="truncate">{{ workflow.name }}</span>
-              <Badge variant="outline" class="ml-1.5 border text-xs font-medium uppercase text-muted-foreground" :title="`Execution mode: ${modeLabel(workflow.execution_mode)}`">
+              <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) })">
                 {{ modeLabel(workflow.execution_mode) }}
               </Badge>
             </template>
           </span>
         </template>
         <template #actions>
+          <!-- Folding the rail away, and getting it back (PO-273). It reads as
+               chrome rather than as an action on this workflow, so the natural
+               place was ahead of the breadcrumb — but the shell's `#title` slot
+               *is* the `<h1>`'s content, and a control inside the heading makes
+               the page announce itself as "Hide navigation Workflows › Order
+               sync". `accessibility.md` AC-4 promises one heading that names what
+               the operator is looking at, so this sits in `#actions`, which is
+               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. -->
+          <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"
+            :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") }}
+          </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">
               <Loader2 v-if="retryBusy" :size="12" class="animate-spin" />
               <RetryIcon v-else :size="12" />
-              Retry
+              {{ t("integration.editor.action.retry") }}
             </Button>
             <Button class="h-7 text-sm" @click="closeRun('editor')">
               <ArrowLeft :size="12" />
-              Back to Workflow
+              {{ t("integration.editor.action.backToWorkflow") }}
             </Button>
           </template>
           <template v-else>
@@ -523,30 +692,31 @@ function formatDateTime(iso) {
               :title="buildNotice?.text"
             >
               <Loader2 :size="12" class="animate-spin" />
-              {{ workflow.buildStatus === "building" ? "Building bundle\u2026" : "Build queued\u2026" }}
+              {{ 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">Unsaved changes</span>
-            <Button variant="outline" class="h-7 text-sm" :disabled="saving" title="Duplicate this workflow" @click="duplicateOpen = true">
+            <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" />
-              Duplicate
+              {{ t("integration.editor.action.duplicate.label") }}
             </Button>
-            <Button variant="outline" class="h-7 text-sm" :disabled="!isDirty || saving" title="Discard unsaved changes" @click="discardChanges">
-              Cancel
+            <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>
             <Button class="h-7 text-sm" :disabled="!isDirty || saving" @click="save">
               <Loader2 v-if="saving" :size="12" class="animate-spin" />
               <Save v-else :size="12" />
-              {{ saving ? "Saving\u2026" : "Save" }}
+              {{ saving ? t("integration.editor.action.save.saving") : t("integration.editor.action.save.label") }}
             </Button>
             <Button
               :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 ? t('integration.editor.action.pause.title') : isInvalid ? t('integration.editor.action.activate.title.invalid', validationWarnings?.length ?? 0) : t('integration.editor.action.activate.title')"
+              @click="onToggleActive"
             >
               <component :is="workflow.active ? PauseIcon : Play" :size="12" />
-              {{ workflow.active ? "Pause" : "Activate" }}
+              {{ workflow.active ? t("integration.editor.action.pause.label") : t("integration.editor.action.activate.label") }}
             </Button>
           </template>
         </template>
@@ -561,14 +731,58 @@ function formatDateTime(iso) {
       </div>
 
       <div v-if="reauthCredentials.length" class="border-b border-amber-500/20 bg-amber-500/5 px-4 py-2 text-sm text-amber-800">
-        {{ reauthCredentials.length }} credential{{ reauthCredentials.length === 1 ? "" : "s" }} used here
-        need{{ reauthCredentials.length === 1 ? "s" : "" }} reconnecting
+        {{ t("integration.editor.reauth.banner", reauthCredentials.length) }}
         ({{ reauthCredentials.map((c) => c.name).join(", ") }}) —
         <NuxtLink to="/integrations/credentials" class="font-medium underline">
-          fix in Credentials
+          {{ t("integration.editor.reauth.action.fix") }}
         </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">
+          {{ t("integration.editor.validation.banner.title", { summary: 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="t('integration.editor.validation.node.ariaFix', g.fields.length, { label: 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">
+              {{ t("integration.editor.validation.banner.more", { n: warningGroups.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. -->
@@ -588,7 +802,7 @@ function formatDateTime(iso) {
               {{ openRunError }}
             </div>
             <div v-else class="flex items-center gap-2 p-12 text-sm text-muted-foreground">
-              <Loader2 :size="16" class="animate-spin" /> Loading run…
+              <Loader2 :size="16" class="animate-spin" /> {{ t("integration.editor.run.loading") }}
             </div>
           </div>
         </div>
@@ -598,16 +812,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 || 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>
@@ -624,19 +845,19 @@ function formatDateTime(iso) {
           :loading="runsLoading"
           :pagination="false"
           :show-workflow="false"
-          empty-text="No runs yet — hit Run in the editor."
+          :empty-text="t('integration.editor.runs.empty')"
           @changed="() => loadRuns()"
         />
 
         <!-- Server pagination — the endpoint pages, so the whole history is reachable. -->
         <div v-if="runsLastPage > 1 || runsTotal > wfRuns.length" class="flex items-center justify-between text-sm text-muted-foreground">
-          <span class="tabular-nums">Page {{ runsPage }} / {{ runsLastPage }} · {{ runsTotal }} run{{ runsTotal === 1 ? "" : "s" }}</span>
+          <span class="tabular-nums">{{ t("integration.editor.runs.pagination.page", { page: runsPage, lastPage: runsLastPage }) }} · {{ t("integration.editor.runs.pagination.count", runsTotal) }}</span>
           <div class="flex gap-2">
             <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage <= 1 || runsLoading" @click="goRunsPage(runsPage - 1)">
-              ← Newer
+              {{ t("integration.editor.runs.pagination.newer") }}
             </Button>
             <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="runsPage >= runsLastPage || runsLoading" @click="goRunsPage(runsPage + 1)">
-              Older →
+              {{ t("integration.editor.runs.pagination.older") }}
             </Button>
           </div>
         </div>
@@ -654,7 +875,7 @@ function formatDateTime(iso) {
       </template>
 
       <div v-else class="p-12 text-center text-sm text-muted-foreground">
-        Loading…
+        {{ t("integration.editor.state.loading") }}
       </div>
     </div>
 
@@ -662,31 +883,31 @@ function formatDateTime(iso) {
     <Dialog v-model:open="runPayloadOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Run with payload</DialogTitle>
+          <DialogTitle>{{ t("integration.editor.runPayload.dialog.title") }}</DialogTitle>
           <DialogDescription class="text-sm">
-            Starts a manual run with this trigger payload. The result lands on the Runs tab.
+            {{ t("integration.editor.runPayload.dialog.description") }}
           </DialogDescription>
         </DialogHeader>
         <div v-if="eventTriggerTopic" class="flex flex-wrap items-center gap-1.5">
-          <span class="text-xs text-muted-foreground">Prefill <code class="font-mono">{{ eventTriggerTopic }}</code>:</span>
+          <span class="text-xs text-muted-foreground">{{ t("integration.editor.runPayload.prefill.label") }} <code class="font-mono">{{ eventTriggerTopic }}</code>:</span>
           <Button
             variant="outline"
             class="h-7 text-xs"
             :disabled="!catalogSample"
-            :title="catalogSample ? 'Insert the catalog sample payload' : 'The event catalog has no sample for this topic.'"
+            :title="catalogSample ? t('integration.editor.runPayload.action.sampleEvent.titleAvailable') : t('integration.editor.runPayload.action.sampleEvent.titleUnavailable')"
             @click="insertSampleEvent"
           >
-            Sample event
+            {{ t("integration.editor.runPayload.action.sampleEvent") }}
           </Button>
           <Button
             variant="outline"
             class="h-7 text-xs"
             :disabled="prefillBusy !== null"
-            title="Insert the latest received event of this topic"
+            :title="t('integration.editor.runPayload.action.latestEvent.title')"
             @click="insertLatestEvent"
           >
             <Loader2 v-if="prefillBusy === 'latest'" :size="12" class="animate-spin" />
-            Latest real event
+            {{ t("integration.editor.runPayload.action.latestEvent") }}
           </Button>
         </div>
         <div class="space-y-1">
@@ -700,35 +921,35 @@ function formatDateTime(iso) {
             <Button
               variant="outline"
               :disabled="running || syncLoading || waitingForBuild || buildFailed"
-              :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
+              :title="buildFailed ? t('integration.editor.build.tooltip.failed') : void 0"
               class="h-8 text-sm"
               @click="runFromPayloadDialog('sync')"
             >
               <Loader2 v-if="syncLoading || waitingMode === 'sync'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              {{ waitingMode === "sync" ? "Waiting for build\u2026" : "Run (sync)" }}
+              {{ waitingMode === "sync" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.sync") }) }}
             </Button>
             <Button
               :disabled="running || syncLoading || waitingForBuild || buildFailed"
-              :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
+              :title="buildFailed ? t('integration.editor.build.tooltip.failed') : void 0"
               class="h-8 text-sm"
               @click="runFromPayloadDialog('async')"
             >
               <Loader2 v-if="running || waitingMode === 'async'" :size="14" class="animate-spin" />
               <Play v-else :size="14" />
-              {{ waitingMode === "async" ? "Waiting for build\u2026" : "Run (async)" }}
+              {{ waitingMode === "async" ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t("integration.editor.mode.word.async") }) }}
             </Button>
           </template>
           <Button
             v-else
             :disabled="running || syncLoading || waitingForBuild || buildFailed"
-            :title="buildFailed ? 'The workflow bundle failed to build.' : void 0"
+            :title="buildFailed ? t('integration.editor.build.tooltip.failed') : void 0"
             class="h-8 text-sm"
             @click="runFromPayloadDialog(primaryMode)"
           >
             <Loader2 v-if="running || syncLoading || waitingForBuild" :size="14" class="animate-spin" />
             <Play v-else :size="14" />
-            {{ waitingForBuild ? "Waiting for build\u2026" : `Run (${primaryMode})` }}
+            {{ waitingForBuild ? t("integration.editor.run.waitingForBuild") : t("integration.editor.runPayload.action.run", { mode: t(primaryMode === "sync" ? "integration.editor.mode.word.sync" : "integration.editor.mode.word.async") }) }}
           </Button>
         </div>
       </DialogContent>
@@ -759,5 +980,37 @@ 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>{{ t("integration.editor.deactivate.dialog.title") }}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {{ t("integration.editor.deactivate.dialog.description.pre") }}
+            <span class="font-medium">{{ t("integration.editor.deactivate.dialog.description.paused") }}</span>
+            {{ t("integration.editor.deactivate.dialog.description.post") }}
+          </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">
+            {{ t("integration.editor.deactivate.dialog.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" />
+            {{ t("integration.editor.deactivate.dialog.confirm") }}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   </IntegrationsLayout>
 </template>