@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -1,8 +1,9 @@
 <script setup>
 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 { 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 {
   AlertDialog,
+  AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogFooter,
@@ -20,6 +21,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Switch,
   Textarea
 } from "@revenexx/studio";
 import WorkflowEditor from "../../../components/Integrations/WorkflowEditor.vue";
@@ -31,26 +33,56 @@ 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 { 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` });
 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 dirtyBlob = ref(null);
-const isDirty = computed(() => dirtyBlob.value !== null);
+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 draft = ref(null);
+const isDirty = computed(() => draft.value !== null);
+function draftFrom() {
+  if (draft.value) return draft.value;
+  const w = workflow.value;
+  if (!w) return null;
+  return {
+    name: w.name,
+    description: w.description ?? null,
+    executionMode: w.execution_mode ?? "async_only",
+    tags: [...w.blob.tags ?? []],
+    icon: w.blob.icon ?? null,
+    blob: JSON.parse(JSON.stringify(w.blob))
+  };
+}
+function payloadBlob(d) {
+  const blob = JSON.parse(JSON.stringify(d.blob));
+  blob.name = d.name;
+  if (d.description) blob.description = d.description;
+  else delete blob.description;
+  if (d.tags.length) blob.tags = [...d.tags];
+  else delete blob.tags;
+  if (d.icon) blob.icon = d.icon;
+  else delete blob.icon;
+  return blob;
+}
+const shownName = computed(() => draft.value?.name ?? workflow.value?.name ?? "");
+const draftedMode = computed(() => draft.value?.executionMode ?? workflow.value?.execution_mode ?? "async_only");
+const shownIcon = computed(() => draft.value ? draft.value.icon : workflow.value?.blob.icon ?? null);
+const shownTags = computed(() => draft.value ? draft.value.tags : [...workflow.value?.blob.tags ?? []]);
+const shownDescription = computed(() => (draft.value ? draft.value.description : workflow.value?.description) ?? "");
+const shownBlob = computed(() => draft.value?.blob ?? workflow.value?.blob ?? null);
+useHead({ title: () => t("integration.editor.head.title", { name: shownName.value || t("integration.editor.head.untitled") }) });
 const saving = ref(false);
 const saveError = ref(null);
 const validationWarnings = computed(() => workflow.value?.warnings);
@@ -76,7 +108,7 @@ onMounted(() => {
   void loadCredentials();
 });
 const reauthCredentials = computed(() => {
-  const blob = JSON.stringify(dirtyBlob.value ?? workflow.value?.blob ?? {});
+  const blob = JSON.stringify(shownBlob.value ?? {});
   return needsReauth.value.filter((c) => blob.includes(c.id));
 });
 const buildWorking = computed(() => workflow.value?.buildStatus === "building" || workflow.value?.buildStatus === "pending");
@@ -95,12 +127,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;
@@ -109,13 +141,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;
@@ -123,29 +155,67 @@ const buildNotice = computed(() => {
 });
 watch(id, async () => {
   const w = await get(id.value);
-  if (!w) await router.push("/integrations/workflows");
-  dirtyBlob.value = null;
+  if (!w) await leaveTo("/integrations/workflows");
+  draft.value = null;
   warningsExpanded.value = false;
   if (tab.value === "runs") void loadRuns(1);
 }, { immediate: true });
 function onChange(blob) {
-  dirtyBlob.value = blob;
+  const d = draftFrom();
+  if (d) draft.value = { ...d, blob };
 }
 const editorResetKey = ref(0);
 function discardChanges() {
-  dirtyBlob.value = null;
+  draft.value = null;
   editorResetKey.value++;
 }
+const leaveOpen = ref(false);
+let leaveDecision = null;
+function askBeforeLeaving() {
+  leaveOpen.value = true;
+  return new Promise((resolve) => {
+    leaveDecision = resolve;
+  });
+}
+function answerLeave(leave) {
+  leaveOpen.value = false;
+  leaveDecision?.(leave);
+  leaveDecision = null;
+}
+let leavingOnPurpose = false;
+async function leaveTo(path) {
+  leavingOnPurpose = true;
+  try {
+    await router.push(path);
+  } finally {
+    leavingOnPurpose = false;
+  }
+}
+async function guardTheDraft(to, from) {
+  if (to.path === from.path) return true;
+  if (leavingOnPurpose) return true;
+  if (!isDirty.value) return true;
+  return await askBeforeLeaving();
+}
+onBeforeRouteLeave(guardTheDraft);
+onBeforeRouteUpdate(guardTheDraft);
+function warnBeforeUnload(e) {
+  if (!isDirty.value) return;
+  e.preventDefault();
+  e.returnValue = "unsaved";
+}
+onMounted(() => window.addEventListener("beforeunload", warnBeforeUnload));
+onUnmounted(() => window.removeEventListener("beforeunload", warnBeforeUnload));
 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`);
-  await router.push(`/integrations/workflows/${copy.id}`);
+  toast.success(t("integration.editor.toast.duplicated", { name: copy.name }));
+  await leaveTo(`/integrations/workflows/${copy.id}`);
 }
 async function onRevisionRestored() {
   if (!workflow.value) return;
   await get(workflow.value.id);
-  dirtyBlob.value = null;
+  draft.value = null;
 }
 const { trigger: triggerRun, loadForWorkflow, fetchRun, retryRun } = useIntegrationsRuns();
 const running = ref(false);
@@ -172,11 +242,11 @@ 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 || "Sync run failed";
+  return e?.message || t("integration.editor.run.error.syncFailed");
 }
 function refusedForSettings(e) {
   const issues = apiValidationIssues(e);
@@ -189,7 +259,7 @@ function refusedForSettings(e) {
     ...groups.filter((g) => !g.nodeId).flatMap((g) => g.messages)
   ];
   const where = parts.length ? ` \u2014 ${parts.join("; ")}` : "";
-  const line = `Can\u2019t run \u2014 ${summary}${where}`;
+  const line = t("integration.editor.run.error.refusedForSettings", { summary, where });
   return /[.!?]$/.test(line) ? line : `${line}.`;
 }
 async function reportRunFailure(e, fallback) {
@@ -207,7 +277,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;
@@ -243,14 +313,14 @@ async function run(mode) {
     const res = await triggerRun(workflow.value.id, payload, "async");
     runModalRunId.value = extractRunId(res);
   } catch (e) {
-    await reportRunFailure(e, (err) => err?.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;
     void loadRuns(1);
   }
 }
-const payloadDriven = computed(() => payloadFieldsFromBlob(dirtyBlob.value ?? workflow.value?.blob ?? { nodes: [] }).length > 0);
+const payloadDriven = computed(() => payloadFieldsFromBlob(shownBlob.value ?? { nodes: [] }).length > 0);
 async function runFromEditor() {
   if (!workflow.value) return;
   if (payloadDriven.value) {
@@ -266,7 +336,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;
 });
@@ -301,7 +371,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, {
@@ -327,6 +397,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) {
@@ -337,12 +410,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 {
@@ -356,7 +442,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;
   }
@@ -365,20 +451,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() {
@@ -387,7 +496,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, () => {
@@ -410,91 +519,51 @@ 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 executionModeDraft = ref("async_only");
-watch(workflow, (w) => {
-  if (w) executionModeDraft.value = w.execution_mode ?? "async_only";
-}, { immediate: true });
-const savingMode = ref(false);
+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") }
+]);
 function modeLabel(m) {
-  return m === "sync_only" ? "Sync" : m === "caller_decides" ? "Caller decides" : "Async";
-}
-async function saveExecutionMode(mode) {
-  if (!workflow.value || mode === workflow.value.execution_mode) return;
-  const prev = workflow.value.execution_mode ?? "async_only";
-  executionModeDraft.value = mode;
-  savingMode.value = true;
-  saveError.value = null;
-  try {
-    await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: workflow.value.blob,
-      active: workflow.value.active,
-      executionMode: mode
-    });
-    await get(workflow.value.id);
-  } catch (e) {
-    executionModeDraft.value = prev;
-    saveError.value = e.message || "Could not update the execution mode.";
-  } finally {
-    savingMode.value = false;
-  }
+  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");
 }
-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) {
-  if (!workflow.value) return;
-  savingMeta.value = true;
-  saveError.value = null;
-  try {
-    const blob = JSON.parse(JSON.stringify(dirtyBlob.value ?? workflow.value.blob));
-    blob.name = meta.name;
-    if (meta.description) blob.description = meta.description;
-    else delete blob.description;
-    if (meta.tags.length) blob.tags = [...meta.tags];
-    else delete blob.tags;
-    if (meta.icon) blob.icon = meta.icon;
-    else delete blob.icon;
-    await update(workflow.value.id, {
-      name: meta.name,
-      description: meta.description || null,
-      blob,
-      active: workflow.value.active,
-      executionMode: workflow.value.execution_mode
-    });
-    await get(workflow.value.id);
-    dirtyBlob.value = null;
-    toast.success("Appearance saved");
-  } catch (e) {
-    const msg = e.message || "Could not save the appearance.";
-    saveError.value = msg;
-    toast.error(msg);
-  } finally {
-    savingMeta.value = false;
-  }
+const settingsValues = computed(() => ({
+  name: shownName.value,
+  description: shownDescription.value,
+  tags: [...shownTags.value],
+  icon: shownIcon.value,
+  executionMode: draftedMode.value
+}));
+function applySettings(values) {
+  const d = draftFrom();
+  if (!d) return;
+  draft.value = {
+    ...d,
+    name: values.name,
+    description: values.description || null,
+    executionMode: values.executionMode,
+    tags: [...values.tags],
+    icon: values.icon
+  };
 }
 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).`);
+    toast.error(t("integration.editor.activate.error.needsFixing", validationWarnings.value?.length ?? 0));
     return;
   }
   try {
@@ -503,25 +572,26 @@ async function onToggleActive() {
     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.`);
+      toast.error(t("integration.editor.activate.error.validationIssues", issues.length));
       return;
     }
-    toast.error(e.message || "Could not change the workflow status.");
+    toast.error(e.message || t("integration.editor.activate.error.generic"));
   }
 }
 async function save() {
-  if (!workflow.value || !dirtyBlob.value) return;
+  const d = draft.value;
+  if (!workflow.value || !d) return;
   saving.value = true;
   saveError.value = null;
   try {
     await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: dirtyBlob.value,
+      name: d.name,
+      description: d.description,
+      blob: payloadBlob(d),
       active: workflow.value.active,
-      executionMode: workflow.value.execution_mode
+      executionMode: d.executionMode
     });
-    dirtyBlob.value = null;
+    draft.value = null;
   } catch (e) {
     const issues = apiValidationIssues(e);
     if (issues.length && workflow.value.active) {
@@ -533,33 +603,34 @@ async function save() {
       });
       deactivationOpen.value = true;
     } else {
-      saveError.value = e.message || "Save failed.";
+      saveError.value = e.message || t("integration.editor.save.error.generic");
     }
   } finally {
     saving.value = false;
   }
 }
 async function confirmDeactivate() {
-  if (!workflow.value || !dirtyBlob.value) {
+  const d = draft.value;
+  if (!workflow.value || !d) {
     deactivationOpen.value = false;
     return;
   }
   saving.value = true;
   try {
     await update(workflow.value.id, {
-      name: workflow.value.name,
-      description: workflow.value.description,
-      blob: dirtyBlob.value,
+      name: d.name,
+      description: d.description,
+      blob: payloadBlob(d),
       active: false,
-      executionMode: workflow.value.execution_mode
+      executionMode: d.executionMode
     });
     await get(workflow.value.id);
-    dirtyBlob.value = null;
+    draft.value = null;
     deactivationOpen.value = false;
-    toast.success("Saved as paused \u2014 fix the highlighted settings, then activate again.");
+    toast.success(t("integration.editor.deactivate.toast.savedPaused"));
   } catch (e) {
     deactivationOpen.value = false;
-    saveError.value = e.message || "Save failed.";
+    saveError.value = e.message || t("integration.editor.save.error.generic");
   } finally {
     saving.value = false;
   }
@@ -580,44 +651,76 @@ function formatDateTime(iso) {
          remaining height below the page header. -->
     <div class="flex h-full flex-col">
       <template v-if="workflow">
-        <PageHeader :title="workflow.name">
+        <PageHeader :title="shownName">
         <template #title>
           <span class="inline-flex min-w-0 items-center gap-1.5">
-            <NuxtLink to="/integrations/workflows" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary">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>
+              <button type="button" class="truncate font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('editor')">{{ shownName }}</button>
               <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
-              <button type="button" class="font-normal text-muted-foreground/80 transition-colors hover:text-primary" @click="closeRun('runs')">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" />
+                <WorkflowIconView :icon="shownIcon" :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)}`">
+              <span class="truncate">{{ shownName }}</span>
+              <!-- The SAVED mode, beside a drafted name, and the difference is not an
+                   oversight. A name changes nothing about what happens when Run is
+                   pressed, so the header may show what the operator just entered. The
+                   dispatch mode decides what a run does — and a run goes to the
+                   workflow the platform holds, not to the draft. A badge following the
+                   draft would read SYNC over a button that fires an async run. -->
+              <Badge variant="outline" class="ml-1.5 border text-xs font-medium uppercase text-muted-foreground" :title="t('integration.editor.header.executionMode.title', { mode: modeLabel(workflow.execution_mode) })">
                 {{ 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>
@@ -627,32 +730,52 @@ 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'"
-              :disabled="!workflow.active && isInvalid"
-              :title="workflow.active ? 'Pause this workflow' : isInvalid ? `Fix ${validationWarnings?.length} node setting(s) before activating` : 'Activate this workflow'"
-              @click="onToggleActive"
+            <!-- Activation is a standing state, not a transport control. The play
+                 symbol belongs to Run, 600 px away in the canvas's control pane,
+                 where pressing it makes one thing happen now; arming a workflow's
+                 triggers looks like nothing happening at all. So this states the
+                 state in the words the workflows list uses — Active, Paused — and
+                 the switch beside it is the flip (PO-254).
+
+                 The blocked reason has two homes because a disabled control shows
+                 no native tooltip in Chrome: the title sits on the wrapper, which
+                 is not disabled, and `aria-describedby` puts the same sentence on
+                 the switch for anyone who never hovers. Sighted users also have
+                 the amber banner directly below, which says it at length. -->
+            <div
+              class="flex h-7 items-center gap-2 rounded-md border border-black/[0.08] px-2"
+              :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')"
             >
-              <component :is="workflow.active ? PauseIcon : Play" :size="12" />
-              {{ workflow.active ? "Pause" : "Activate" }}
-            </Button>
+              <Switch
+                :aria-label="t('integration.editor.action.state.label')"
+                :aria-describedby="!workflow.active && isInvalid ? 'wf-activation-blocked' : void 0"
+                class="data-[state=checked]:bg-emerald-600 data-[state=unchecked]:bg-slate-300"
+                :model-value="workflow.active"
+                :disabled="!workflow.active && isInvalid"
+                @update:model-value="onToggleActive"
+              />
+              <span class="text-sm" :class="workflow.active ? 'font-medium text-emerald-700' : 'text-muted-foreground'">
+                {{ workflow.active ? t("integration.workflows.table.status.lifecycle.active") : t("integration.workflows.table.status.lifecycle.paused") }}
+              </span>
+              <span v-if="!workflow.active && isInvalid" id="wf-activation-blocked" class="sr-only">
+                {{ t("integration.editor.action.activate.title.invalid", validationWarnings?.length ?? 0) }}
+              </span>
+            </div>
           </template>
         </template>
 
@@ -666,17 +789,16 @@ 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.
+           be activated. The banner names what's incomplete; the header's state
+           switch stays blocked 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. -->
@@ -685,7 +807,7 @@ function formatDateTime(iso) {
         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 }}:
+          {{ t("integration.editor.validation.banner.title", { summary: warningSummary }) }}
         </p>
         <ul
           class="mt-1 space-y-0.5"
@@ -704,7 +826,7 @@ function formatDateTime(iso) {
               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}`"
+              :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(", ") }}
@@ -713,7 +835,7 @@ function formatDateTime(iso) {
           </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.
+              {{ t("integration.editor.validation.banner.more", { n: warningGroups.length - WARN_COLLAPSED }) }}
             </button>
           </li>
         </ul>
@@ -738,7 +860,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>
@@ -759,9 +881,10 @@ function formatDateTime(iso) {
           :key="editorResetKey"
           ref="editorRef"
           :workflow="workflow"
+          :draft="draft?.blob ?? null"
           :run-busy="running || syncLoading || waitingForBuild"
           :run-waiting="waitingForBuild"
-          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen"
+          :overlay-open="settingsOpen || duplicateOpen || syncOpen || runPayloadOpen || deactivationOpen || leaveOpen"
           @change="onChange"
           @run="runFromEditor"
           @toggle-active="onToggleActive"
@@ -781,19 +904,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>
@@ -806,12 +929,12 @@ function formatDateTime(iso) {
 
       <!-- History — n8n-style: read-only canvas preview + revision list. -->
       <div v-else-if="tab === 'history'" class="flex-1 min-h-0">
-        <WorkflowHistoryPanel :workflow="workflow" @restored="onRevisionRestored" />
+        <WorkflowHistoryPanel :workflow="workflow" :draft-pending="isDirty" @restored="onRevisionRestored" />
       </div>
       </template>
 
       <div v-else class="p-12 text-center text-sm text-muted-foreground">
-        Loading…
+        {{ t("integration.editor.state.loading") }}
       </div>
     </div>
 
@@ -819,31 +942,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">
@@ -857,35 +980,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>
@@ -907,16 +1030,46 @@ function formatDateTime(iso) {
       v-model:open="settingsOpen"
       :workflow="workflow"
       :modes="EXECUTION_MODES"
-      :mode-draft="executionModeDraft"
-      :saving-mode="savingMode"
-      :saving-meta="savingMeta"
+      :current="settingsValues"
       :tag-suggestions="tagSuggestions"
-      @change-mode="(m) => saveExecutionMode(m)"
-      @save-meta="saveWorkflowMeta"
+      @apply="applySettings"
     />
 
     <WorkflowDuplicateDialog v-model:open="duplicateOpen" :workflow="duplicateTarget" @duplicated="onDuplicated" />
 
+    <!-- Leaving the workflow with unsaved work.
+         Staying is the default in the only sense that decides anything: it holds the
+         focus when the dialog opens, so Enter or Space keeps the work. That is what
+         `AlertDialogCancel` is for — the dialog focuses its cancel element, and with
+         none declared it focuses the first tabbable button instead, which was
+         "Discard and leave". A breadcrumb click followed by Enter then threw away the
+         afternoon this dialog exists to protect.
+         `as-child` so the studio's own Button is that element rather than a second one
+         beside it. Escape means the same thing, through `update:open`; a click beside
+         the dialog does nothing at all, which an alert dialog is entitled to. -->
+    <AlertDialog :open="leaveOpen" @update:open="(v) => {
+  if (!v) answerLeave(false);
+}">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{{ t("integration.editor.leave.dialog.title") }}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {{ t("integration.editor.leave.dialog.description") }}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <Button variant="outline" @click="answerLeave(true)">
+            {{ t("integration.editor.leave.dialog.discard") }}
+          </Button>
+          <AlertDialogCancel as-child>
+            <Button @click="answerLeave(false)">
+              {{ t("integration.editor.leave.dialog.stay") }}
+            </Button>
+          </AlertDialogCancel>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- 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) => {
@@ -924,10 +1077,11 @@ function formatDateTime(iso) {
 }">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Can’t keep this workflow active</AlertDialogTitle>
+          <AlertDialogTitle>{{ t("integration.editor.deactivate.dialog.title") }}</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.
+            {{ 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">
@@ -938,11 +1092,11 @@ function formatDateTime(iso) {
         </ul>
         <AlertDialogFooter>
           <Button variant="outline" :disabled="saving" @click="deactivationOpen = false">
-            Cancel
+            {{ 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" />
-            Save as paused
+            {{ t("integration.editor.deactivate.dialog.confirm") }}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>