@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { AltArrowLeft as ArrowLeft, AltArrowRight as Chevron, Copy as CopyIcon, 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, Pause as PauseIcon, RefreshCircle as Loader2, Play, Refresh as RetryIcon, Diskette as Save, SidebarMinimalistic as RailIcon } from "#solar-icons";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -31,24 +31,24 @@ 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` });
+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);
@@ -95,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;
@@ -109,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;
@@ -139,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() {
@@ -172,11 +172,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 +189,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 +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;
@@ -243,7 +243,7 @@ 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;
@@ -266,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;
 });
@@ -301,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, {
@@ -327,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) {
@@ -337,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 {
@@ -356,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;
   }
@@ -365,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() {
@@ -387,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, () => {
@@ -410,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;
@@ -448,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;
   }
@@ -456,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) {
@@ -481,9 +520,9 @@ 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 {
@@ -494,7 +533,7 @@ 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,10 +542,10 @@ 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() {
@@ -533,7 +572,7 @@ 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;
@@ -556,10 +595,10 @@ async function confirmDeactivate() {
     await get(workflow.value.id);
     dirtyBlob.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;
   }
@@ -583,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>
@@ -627,31 +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'"
               :disabled="!workflow.active && isInvalid"
-              :title="workflow.active ? 'Pause this workflow' : isInvalid ? `Fix ${validationWarnings?.length} node setting(s) before activating` : 'Activate this workflow'"
+              :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>
@@ -666,11 +731,10 @@ 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>
 
@@ -685,7 +749,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 +768,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 +777,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 +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>
@@ -781,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>
@@ -811,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>
 
@@ -819,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">
@@ -857,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>
@@ -924,10 +988,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 +1003,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>