@revenexx/studio-integrations 0.6.0 → 1.0.0

package/dist/runtime/components/Integrations/NodeInspector.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2, Copy } from "#solar-icons";
-import { ChevronDown, ChevronLeft, ChevronRight, Clock, Database, MessageSquareText, Play, Search, Webhook, X, Zap } from "lucide-vue-next";
+import { AddCircle as Plus, Copy, Magnifier as Search, TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../data/triggerGlyphs";
+import { ChevronDown, ChevronLeft, ChevronRight, Database, MessageSquareText, X } from "lucide-vue-next";
 import { toast } from "vue-sonner";
 import {
   Button,
@@ -27,9 +28,10 @@ import {
   ToggleGroupItem
 } from "@revenexx/studio";
 import EventTypeCombobox from "./EventTypeCombobox.vue";
-import { NODE_CATEGORIES, findManifest } from "../../data/integrationNodeCatalog";
+import { findManifest, nodeCategoryLabel, isVersionExecutable, newestExecutableVersion } from "../../data/integrationNodeCatalog";
 import {
   collectUpstreamNodes,
+  inputPortsForManifest,
   nodeOutputExpr,
   portsForNode,
   triggerPayloadExpr,
@@ -45,6 +47,7 @@ import {
 } from "../../data/nodeRunData";
 import { resolveDisplayName, resolveLocalized } from "../../utils/localize";
 import { describeRecurrence, parseCron, scheduleTimezone, toCron } from "../../utils/schedule";
+const t = useIntegrationsT();
 const props = defineProps({
   selection: { type: [Object, null], required: true },
   secretKeys: { type: Array, required: true },
@@ -86,35 +89,48 @@ const manifest = computed(() => {
   const wn = draftNode.value;
   return wn ? findManifest(wn.nodeSlug, wn.nodeVersion) : null;
 });
-const TRIGGER_GLYPHS = { manual: Play, schedule: Clock, webhook: Webhook, event: Zap };
-const TRIGGER_LABELS = { manual: "Manual", schedule: "Schedule", webhook: "Webhook", event: "Event" };
-const triggerGlyph = computed(() => TRIGGER_GLYPHS[draftTrigger.value?.type ?? "manual"]);
+const versionExecutable = computed(() => {
+  const wn = draftNode.value;
+  return wn ? isVersionExecutable(wn.nodeSlug, wn.nodeVersion) : true;
+});
+const readyVersion = computed(() => {
+  const wn = draftNode.value;
+  return wn ? newestExecutableVersion(wn.nodeSlug) : null;
+});
+const TRIGGER_LABELS = computed(() => ({
+  manual: t("integration.nodeInspector.trigger.type.manual"),
+  schedule: t("integration.nodeInspector.trigger.type.schedule"),
+  webhook: t("integration.nodeInspector.trigger.type.webhook"),
+  event: t("integration.nodeInspector.trigger.type.event")
+}));
+const triggerGlyph = computed(() => glyphForTrigger(draftTrigger.value?.type));
 const namePlaceholder = computed(() => {
   if (draftNode.value) return resolveLocalized(manifest.value?.name) || draftNode.value.nodeSlug;
-  return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
+  return t("integration.nodeInspector.trigger.placeholder", { type: TRIGGER_LABELS.value[draftTrigger.value?.type ?? "manual"] });
 });
 const subtitleText = computed(() => {
   const wn = draftNode.value;
   if (wn) return wn.nodeSlug + "@" + wn.nodeVersion;
-  return TRIGGER_LABELS[draftTrigger.value?.type ?? "manual"] + " trigger";
+  return t("integration.nodeInspector.trigger.placeholder", { type: TRIGGER_LABELS.value[draftTrigger.value?.type ?? "manual"] });
 });
 const manifestDescription = computed(() => resolveLocalized(manifest.value?.description));
 const groupLabel = computed(() => {
-  if (!isNode.value) return "Trigger";
+  if (!isNode.value) return t("integration.nodeInspector.header.groupTrigger");
   const groups = manifest.value?.groups;
   if (groups?.length) return resolveLocalized(groups[groups.length - 1]);
-  return NODE_CATEGORIES.find((c) => c.key === manifest.value?.category)?.label ?? "Node";
+  return nodeCategoryLabel(manifest.value?.category) || t("integration.nodeInspector.header.groupNode");
 });
 const nameValue = computed(() => {
   const name = draft.value.name;
   return resolveDisplayName(name);
 });
+const dialogTitle = computed(() => t("integration.nodeInspector.dialogTitle", { name: nameValue.value || namePlaceholder.value }));
 function writeName(name) {
   draft.value = { ...draft.value, name };
 }
 const noteOpen = ref(false);
 const noteText = computed(() => (draftNode.value?.notes ?? "").trim());
-const noteLabel = computed(() => noteText.value ? "Note" : "Add note");
+const noteLabel = computed(() => noteText.value ? t("integration.nodeInspector.note.label") : t("integration.nodeInspector.note.addLabel"));
 function writeNote(v) {
   const text = String(v ?? "");
   patchNode({ notes: text.trim() ? text : void 0 });
@@ -122,8 +138,11 @@ function writeNote(v) {
 const tab = ref("parameters");
 const showSettingsTab = computed(() => isNode.value);
 const inspectorTabs = computed(() => [
-  { key: "parameters", label: "Parameters" },
-  ...showSettingsTab.value ? [{ key: "settings", label: "Settings" }, { key: "output", label: "Output" }] : []
+  { key: "parameters", label: t("integration.nodeInspector.tab.parameters") },
+  ...showSettingsTab.value ? [
+    { key: "settings", label: t("integration.nodeInspector.tab.settings") },
+    { key: "output", label: t("integration.nodeInspector.tab.output") }
+  ] : []
 ]);
 watch(showSettingsTab, (hasThem) => {
   if (!hasThem) tab.value = "parameters";
@@ -184,9 +203,9 @@ async function copyConfig() {
   if (!draftNode.value) return;
   try {
     await navigator.clipboard.writeText(JSON.stringify(draftNode.value.config ?? {}, null, 2));
-    toast.success("Config copied");
+    toast.success(t("integration.nodeInspector.toast.configCopied"));
   } catch {
-    toast.error("Could not copy config");
+    toast.error(t("integration.nodeInspector.toast.configCopyFailed"));
   }
 }
 async function pasteConfig() {
@@ -195,22 +214,22 @@ async function pasteConfig() {
   try {
     text = await navigator.clipboard.readText();
   } catch {
-    toast.error("Could not read the clipboard");
+    toast.error(t("integration.nodeInspector.toast.clipboardReadFailed"));
     return;
   }
   let parsed;
   try {
     parsed = JSON.parse(text);
   } catch {
-    toast.error("Clipboard is not valid JSON");
+    toast.error(t("integration.nodeInspector.toast.clipboardInvalidJson"));
     return;
   }
   if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-    toast.error("Clipboard is not a JSON config object");
+    toast.error(t("integration.nodeInspector.toast.clipboardNotConfigObject"));
     return;
   }
   patchNode({ config: parsed });
-  toast.success("Config pasted");
+  toast.success(t("integration.nodeInspector.toast.configPasted"));
 }
 function readTriggerConfig(key) {
   return draftTrigger.value?.config[key];
@@ -223,24 +242,24 @@ function writeTriggerConfig(key, value) {
 const MINUTE_INTERVALS = [1, 2, 5, 10, 15, 20, 30];
 const HOUR_INTERVALS = [2, 3, 4, 6, 8, 12];
 const MINUTES_PAST = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-const DAY_OPTIONS = [
-  { value: 1, short: "Mo", name: "Mondays" },
-  { value: 2, short: "Tu", name: "Tuesdays" },
-  { value: 3, short: "We", name: "Wednesdays" },
-  { value: 4, short: "Th", name: "Thursdays" },
-  { value: 5, short: "Fr", name: "Fridays" },
-  { value: 6, short: "Sa", name: "Saturdays" },
-  { value: 0, short: "Su", name: "Sundays" }
-];
-const FREQUENCY_OPTIONS = [
-  { value: "minutes", label: "Every few minutes" },
-  { value: "hourly", label: "Every hour" },
-  { value: "hours", label: "Every few hours" },
-  { value: "times", label: "Several times a day" },
-  { value: "daily", label: "Every day" },
-  { value: "weekly", label: "Every week" },
-  { value: "monthly", label: "Every month" }
-];
+const DAY_OPTIONS = computed(() => [
+  { value: 1, short: t("integration.nodeInspector.schedule.day.monday.short"), name: t("integration.nodeInspector.schedule.day.monday") },
+  { value: 2, short: t("integration.nodeInspector.schedule.day.tuesday.short"), name: t("integration.nodeInspector.schedule.day.tuesday") },
+  { value: 3, short: t("integration.nodeInspector.schedule.day.wednesday.short"), name: t("integration.nodeInspector.schedule.day.wednesday") },
+  { value: 4, short: t("integration.nodeInspector.schedule.day.thursday.short"), name: t("integration.nodeInspector.schedule.day.thursday") },
+  { value: 5, short: t("integration.nodeInspector.schedule.day.friday.short"), name: t("integration.nodeInspector.schedule.day.friday") },
+  { value: 6, short: t("integration.nodeInspector.schedule.day.saturday.short"), name: t("integration.nodeInspector.schedule.day.saturday") },
+  { value: 0, short: t("integration.nodeInspector.schedule.day.sunday.short"), name: t("integration.nodeInspector.schedule.day.sunday") }
+]);
+const FREQUENCY_OPTIONS = computed(() => [
+  { value: "minutes", label: t("integration.nodeInspector.schedule.frequency.minutes") },
+  { value: "hourly", label: t("integration.nodeInspector.schedule.frequency.hourly") },
+  { value: "hours", label: t("integration.nodeInspector.schedule.frequency.hours") },
+  { value: "times", label: t("integration.nodeInspector.schedule.frequency.times") },
+  { value: "daily", label: t("integration.nodeInspector.schedule.frequency.daily") },
+  { value: "weekly", label: t("integration.nodeInspector.schedule.frequency.weekly") },
+  { value: "monthly", label: t("integration.nodeInspector.schedule.frequency.monthly") }
+]);
 const HOURS_OF_DAY = Array.from({ length: 24 }, (_, h) => h);
 const FREQUENCY_ADVANCED = "advanced";
 const cronValue = computed(() => readTriggerConfig("cron") ?? "");
@@ -416,10 +435,10 @@ async function rotateEndpointSecret() {
       rotatedSecret.value = secret;
       rotateOpen.value = true;
     } else {
-      toast.error("The endpoint did not return a secret.");
+      toast.error(t("integration.nodeInspector.toast.rotateNoSecret"));
     }
   } catch (e) {
-    toast.error(e.message || "Could not rotate the secret.");
+    toast.error(e.message || t("integration.nodeInspector.toast.rotateFailed"));
   } finally {
     rotateBusy.value = false;
   }
@@ -428,25 +447,25 @@ async function copySecret() {
   if (!rotatedSecret.value) return;
   try {
     await navigator.clipboard.writeText(rotatedSecret.value);
-    toast.success("Secret copied");
+    toast.success(t("integration.nodeInspector.toast.secretCopied"));
   } catch {
-    toast.error("Could not copy the secret");
+    toast.error(t("integration.nodeInspector.toast.secretCopyFailed"));
   }
 }
 async function copyWebhookUrl() {
   if (!webhookUrl.value) return;
   try {
     await navigator.clipboard.writeText(webhookUrl.value);
-    toast.success("Webhook URL copied");
+    toast.success(t("integration.nodeInspector.toast.webhookUrlCopied"));
   } catch {
-    toast.error("Could not copy the URL");
+    toast.error(t("integration.nodeInspector.toast.webhookUrlCopyFailed"));
   }
 }
 const definedEvents = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), load: async () => {
 } };
 const eventTopic = computed(() => {
-  const t = readTriggerConfig("event_type");
-  return typeof t === "string" && t.trim() !== "" ? t.trim() : null;
+  const raw = readTriggerConfig("event_type");
+  return typeof raw === "string" && raw.trim() !== "" ? raw.trim() : null;
 });
 watch(eventTopic, (topic) => {
   if (topic) void definedEvents.load();
@@ -490,7 +509,7 @@ async function loadRunData() {
     const { runs } = await loadForWorkflow(Number(props.workflowId), "", { perPage: 10 });
     const source = runs.find((r) => r.status === "succeeded") ?? runs[0];
     if (!source) {
-      runError.value = "No runs yet. Run the workflow once to sample real values.";
+      runError.value = t("integration.nodeInspector.input.runData.empty");
       return;
     }
     const res = await getSteps(props.workflowId, source.id, true);
@@ -505,7 +524,7 @@ async function loadRunData() {
     runData.value = map;
     runInfo.value = { id: source.id, startedAt: source.startedAt };
   } catch (e) {
-    runError.value = e?.message ?? "Could not load run data.";
+    runError.value = e?.message ?? t("integration.nodeInspector.input.runData.loadFailed");
   } finally {
     runLoading.value = false;
   }
@@ -589,19 +608,19 @@ const inputPaneOpen = ref(false);
 const exprInsertHandler = ref(null);
 provide("integrationsExpressionInsert", exprInsertHandler);
 function onCenterFocusIn(e) {
-  const t = e.target;
-  if (t instanceof HTMLElement && t.closest(".expr-editor")) {
+  const target = e.target;
+  if (target instanceof HTMLElement && target.closest(".expr-editor")) {
     lastFocusKind.value = "editor";
     inputPaneOpen.value = true;
     return;
   }
-  if (t instanceof HTMLTextAreaElement) {
-    lastField.value = t;
+  if (target instanceof HTMLTextAreaElement) {
+    lastField.value = target;
     lastFocusKind.value = "native";
     return;
   }
-  if (t instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(t.type)) {
-    lastField.value = t;
+  if (target instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(target.type)) {
+    lastField.value = target;
     lastFocusKind.value = "native";
   }
 }
@@ -623,7 +642,7 @@ function insertExpression(expression) {
     void navigator.clipboard?.writeText(expression);
   } catch {
   }
-  toast("Expression copied. Click into a field first to insert it directly.");
+  toast(t("integration.nodeInspector.toast.expressionCopied"));
 }
 const chipClass = "max-w-full cursor-grab truncate rounded-md border border-black/[0.06] bg-slate-50 px-1.5 py-0.5 font-mono text-[11px] text-slate-700 transition hover:border-black/[0.12] hover:bg-slate-100 active:cursor-grabbing";
 const rowClass = "flex w-full min-w-0 cursor-grab items-center gap-1.5 rounded-md px-1.5 py-[3px] text-left font-mono text-[11px] text-slate-700 transition hover:bg-slate-100 active:cursor-grabbing";
@@ -642,10 +661,10 @@ function onChipDragEnd() {
   dragActive.value = false;
   clearDropHover();
 }
-function expressionTarget(t) {
-  if (t instanceof HTMLTextAreaElement) return t;
-  if (t instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(t.type)) return t;
-  if (t instanceof HTMLElement) return t.closest(".expr-editor");
+function expressionTarget(t2) {
+  if (t2 instanceof HTMLTextAreaElement) return t2;
+  if (t2 instanceof HTMLInputElement && !["number", "checkbox", "radio", "range", "file", "color"].includes(t2.type)) return t2;
+  if (t2 instanceof HTMLElement) return t2.closest(".expr-editor");
   return null;
 }
 function onCenterDragEnter(e) {
@@ -737,7 +756,7 @@ function typeGlyph(dataType) {
   return dataType ? TYPE_GLYPHS[dataType] ?? null : null;
 }
 const sequence = computed(() => [
-  ...(props.triggers ?? []).map((t) => t.id),
+  ...(props.triggers ?? []).map((t2) => t2.id),
   ...(props.nodes ?? []).map((n) => n.id)
 ]);
 const seqIndex = computed(() => sequence.value.indexOf(draft.value.id));
@@ -750,6 +769,7 @@ function navigate(offset) {
   emit("navigate", target);
 }
 const outputView = ref("schema");
+const selfInputs = computed(() => inputPortsForManifest(manifest.value));
 const selfSample = computed(() => draftNode.value ? sampleFor(draftNode.value.id) : void 0);
 const selfPorts = computed(() => draftNode.value ? withSampledFields(portsForNode(draftNode.value, manifest.value, props.dynamicOutputs?.[draftNode.value.id]), selfSample.value) : []);
 const selfSampleJson = computed(() => selfSample.value ? JSON.stringify(selfSample.value, null, 2) : "");
@@ -771,17 +791,17 @@ function savePin() {
   try {
     parsed = JSON.parse(pinDraft.value);
   } catch {
-    pinError.value = "Not valid JSON.";
+    pinError.value = t("integration.nodeInspector.output.pin.invalidJson");
     return;
   }
   if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-    pinError.value = 'Must be an object mapping ports to payloads, e.g. { "default": { \u2026 } }.';
+    pinError.value = t("integration.nodeInspector.output.pin.invalidShape");
     return;
   }
   pinnedSamples.value = { ...pinnedSamples.value, [draftNode.value.id]: parsed };
   persistPins();
   pinEditorOpen.value = false;
-  toast.success("Sample output pinned");
+  toast.success(t("integration.nodeInspector.toast.samplePinned"));
 }
 function removePin() {
   if (!draftNode.value) return;
@@ -820,12 +840,12 @@ async function runTestStep() {
   try {
     const parsed = JSON.parse(testInputDraft.value.trim() || defaultTestInput());
     if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-      testError.value = "Test input must be a JSON object.";
+      testError.value = t("integration.nodeInspector.output.test.inputNotObject");
       return;
     }
     inputs = parsed;
   } catch {
-    testError.value = "Test input is not valid JSON.";
+    testError.value = t("integration.nodeInspector.output.test.inputInvalidJson");
     testInputOpen.value = true;
     return;
   }
@@ -843,10 +863,10 @@ async function runTestStep() {
       [wn.id]: res.outputs && typeof res.outputs === "object" ? res.outputs : {}
     };
     outputView.value = "json";
-    toast.success("Test run finished");
+    toast.success(t("integration.nodeInspector.toast.testRunFinished"));
   } catch (e) {
     const body = e.body;
-    testError.value = body?.error?.message ?? body?.message ?? e?.message ?? "Test run failed.";
+    testError.value = body?.error?.message ?? body?.message ?? e?.message ?? t("integration.nodeInspector.output.test.runFailed");
     testLogs.value = body?.logs ?? [];
   } finally {
     testRunning.value = false;
@@ -858,6 +878,11 @@ async function runTestStep() {
   <!-- Fills the editor's near-fullscreen config lightbox; the Dialog owns
        width/height, border and the close control. -->
   <div class="flex min-h-0 flex-1 flex-col bg-white">
+    <!-- The dialog's accessible name. Not drawn: the header below says the same
+         thing in the name field and the line under it, and says it better. -->
+    <DialogTitle class="sr-only">
+      {{ dialogTitle }}
+    </DialogTitle>
     <!-- Header -->
     <div class="flex shrink-0 items-center gap-3 border-b border-black/[0.06] px-4 py-3">
       <div class="flex size-9 shrink-0 items-center justify-center rounded-md border border-black/[0.06] bg-slate-50 text-slate-600">
@@ -870,7 +895,7 @@ async function runTestStep() {
              type, not for the field. -->
         <input
           ref="nameInput"
-          aria-label="Node name"
+          :aria-label="t('integration.nodeInspector.header.nameAria')"
           :value="nameValue"
           :placeholder="namePlaceholder"
           class="w-full truncate rounded-sm bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground/60 focus:ring-2 focus:ring-primary/40"
@@ -895,13 +920,13 @@ async function runTestStep() {
                    the description at all. -->
               <button
                 type="button"
-                aria-label="What this node does"
+                :aria-label="t('integration.nodeInspector.header.whatThisDoes')"
                 class="relative flex size-4 shrink-0 items-center justify-center rounded-full border border-black/[0.12] text-[10px] font-semibold leading-none transition after:absolute after:-inset-1 after:content-[''] hover:border-black/25 hover:bg-black/[0.04] hover:text-foreground"
               >
                 ?
               </button>
             </PopoverTrigger>
-            <PopoverContent aria-label="What this node does" align="start" class="w-96 rounded-lg border border-black/[0.06] bg-white p-4 shadow-lg">
+            <PopoverContent :aria-label="t('integration.nodeInspector.header.whatThisDoes')" align="start" class="w-96 rounded-lg border border-black/[0.06] bg-white p-4 shadow-lg">
               <div class="flex items-center gap-2.5">
                 <span class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.06] bg-slate-50 text-slate-600">
                   <IntegrationsNodeMark :manifest="manifest" :size="18" />
@@ -943,13 +968,13 @@ async function runTestStep() {
             {{ noteLabel }}
           </button>
         </PopoverTrigger>
-        <PopoverContent aria-label="Note" align="end" class="w-80 space-y-1.5 rounded-lg border border-black/[0.06] bg-white p-3 shadow-lg">
-          <Label class="text-mono text-muted-foreground">Note</Label>
+        <PopoverContent :aria-label="t('integration.nodeInspector.note.label')" align="end" class="w-80 space-y-1.5 rounded-lg border border-black/[0.06] bg-white p-3 shadow-lg">
+          <Label class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.note.label") }}</Label>
           <Textarea
-            aria-label="Note"
+            :aria-label="t('integration.nodeInspector.note.label')"
             :model-value="draftNode.notes ?? ''"
             :rows="4"
-            placeholder="Why this node is here…"
+            :placeholder="t('integration.nodeInspector.note.placeholder')"
             class="rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white"
             @update:model-value="writeNote"
           />
@@ -972,7 +997,7 @@ async function runTestStep() {
         @click="inputPaneOpen = !inputPaneOpen"
       >
         <Database :size="12" />
-        Input data
+        {{ t("integration.nodeInspector.header.inputData") }}
       </button>
       <!-- Icon-only controls: `title` alone leaves them nameless to a screen
            reader (and unaddressable to a test without a CSS selector), so each
@@ -981,8 +1006,8 @@ async function runTestStep() {
         <button
           type="button"
           :disabled="!hasPrev"
-          aria-label="Previous step (saves changes)"
-          title="Previous step (saves changes)"
+          :aria-label="t('integration.nodeInspector.header.previousStep')"
+          :title="t('integration.nodeInspector.header.previousStep')"
           class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
           @click="navigate(-1)"
         >
@@ -991,8 +1016,8 @@ async function runTestStep() {
         <button
           type="button"
           :disabled="!hasNext"
-          aria-label="Next step (saves changes)"
-          title="Next step (saves changes)"
+          :aria-label="t('integration.nodeInspector.header.nextStep')"
+          :title="t('integration.nodeInspector.header.nextStep')"
           class="flex size-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
           @click="navigate(1)"
         >
@@ -1003,8 +1028,8 @@ async function runTestStep() {
            (the DialogContent built-in X floats at its own offset). -->
       <button
         type="button"
-        aria-label="Close"
-        title="Close"
+        :aria-label="t('integration.common.action.close')"
+        :title="t('integration.common.action.close')"
         class="-mr-1.5 flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-black/[0.04] hover:text-foreground"
         @click="emit('close')"
       >
@@ -1018,18 +1043,48 @@ async function runTestStep() {
       <aside v-if="inputPaneOpen" class="flex w-[300px] shrink-0 flex-col border-r border-black/[0.06] bg-muted/10" @dragend="onChipDragEnd">
         <div class="shrink-0 border-b border-black/[0.06] px-3 py-2.5">
           <div class="text-mono text-muted-foreground">
-            Input
+            {{ t("integration.nodeInspector.input.title") }}
           </div>
           <p class="mt-0.5 text-xs leading-snug text-muted-foreground">
-            Available data. Click a value to insert it into the focused field, or drag it onto one.
+            {{ t("integration.nodeInspector.input.description") }}
           </p>
+          <!-- What this node accepts, as opposed to the list below, which is what
+               other nodes offer it. It sits in the header because somebody
+               choosing a value is already reading here, and because the port
+               belongs to the node being configured rather than to any row in the
+               list (AC-20). -->
+          <div v-if="isNode && selfInputs.length" class="mt-2 space-y-1 border-t border-black/[0.06] pt-2">
+            <div v-for="p in selfInputs" :key="p.name" class="space-y-0.5">
+              <div class="flex items-baseline gap-1.5">
+                <!-- Not the uppercase treatment the section labels below use, and
+                     that is the point: NODES / TRIGGER / VARIABLES each head a list
+                     of values a click inserts, so they are a series of *sources*.
+                     This heads nothing and is not a source — it is a statement about
+                     the node being configured. Dressed as a fourth member of that
+                     series it told the reader there was a fourth place to take data
+                     from. -->
+                <span
+                  class="text-xs font-medium text-muted-foreground"
+                  :class="selfInputs.length > 1 ? 'font-mono' : ''"
+                >
+                  {{ selfInputs.length > 1 ? `${p.name}:` : t("integration.nodeInspector.input.expects.heading") }}
+                </span>
+                <span class="font-mono text-[10px] text-slate-500">
+                  {{ p.dataType }}<template v-if="p.dataType"> · </template>{{ p.required ? t("integration.nodeInspector.input.expects.required") : t("integration.nodeInspector.input.expects.optional") }}
+                </span>
+              </div>
+              <p v-if="resolveLocalized(p.description)" class="text-xs leading-snug text-muted-foreground">
+                {{ resolveLocalized(p.description) }}
+              </p>
+            </div>
+          </div>
           <div class="relative mt-2">
             <Search :size="12" class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
             <input
               v-model="inputSearch"
               type="text"
-              aria-label="Search data"
-              placeholder="Search data"
+              :aria-label="t('integration.nodeInspector.input.searchAria')"
+              :placeholder="t('integration.nodeInspector.input.searchAria')"
               class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-6.5 pr-2 text-xs outline-none transition placeholder:text-muted-foreground/60 focus:border-black/[0.16] focus:ring-2 focus:ring-primary/40"
             >
           </div>
@@ -1041,15 +1096,15 @@ async function runTestStep() {
               class="rounded-md border border-black/[0.08] bg-white px-2 py-1 text-[11px] font-medium text-muted-foreground transition hover:bg-muted/30 hover:text-foreground disabled:opacity-50"
               @click="loadRunData"
             >
-              {{ runLoading ? "Loading run data\u2026" : "Use last run data" }}
+              {{ runLoading ? t("integration.nodeInspector.input.runData.loading") : t("integration.nodeInspector.input.runData.use") }}
             </button>
             <template v-else>
               <span class="min-w-0 flex-1 truncate text-[11px] text-emerald-700">
-                Values from run #{{ runInfo.id }}
+                {{ t("integration.nodeInspector.input.runData.from", { id: runInfo.id }) }}
               </span>
               <button
                 type="button"
-                title="Clear run data"
+                :title="t('integration.nodeInspector.input.runData.clear')"
                 class="flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-foreground"
                 @click="clearRunData"
               >
@@ -1066,10 +1121,10 @@ async function runTestStep() {
             <!-- Upstream nodes -->
             <div v-if="!searchQuery || visibleSections.length" class="space-y-3">
               <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-                Nodes
+                {{ t("integration.nodeInspector.input.nodes.heading") }}
               </div>
               <p v-if="!upstreamSections.length" class="text-xs leading-snug text-muted-foreground">
-                No upstream nodes yet. Connect a node into this one to reference its output here.
+                {{ t("integration.nodeInspector.input.nodes.empty") }}
               </p>
               <div v-for="s in visibleSections" :key="s.id" class="rounded-md border border-black/[0.06]">
                 <button
@@ -1083,13 +1138,36 @@ async function runTestStep() {
                   <span
                     v-if="!s.direct"
                     class="shrink-0 rounded bg-slate-100 px-1 py-px text-[9px] font-medium uppercase tracking-wider text-slate-500"
-                    title="Not directly connected; reachable further upstream"
+                    :title="t('integration.nodeInspector.input.nodes.indirectTitle')"
                   >
-                    upstream
+                    {{ t("integration.nodeInspector.input.nodes.indirectBadge") }}
                   </span>
                 </button>
                 <div v-show="!sectionClosed(s.id)" class="space-y-2 border-t border-black/[0.06] px-2 py-2">
-                <div v-for="p in s.ports" :key="p.name" class="space-y-1 pl-0.5">
+                <!-- These ports belong to an UPSTREAM node, so the sentence is that
+                     node's. On a 300px column it is a tooltip rather than text: the
+                     values below are what this panel is for, and a sentence per port
+                     pushes them out of view. The readable copy is the Output tab
+                     (AC-19).
+
+                     The title hangs on the port's whole block, not on its name row:
+                     that row is only drawn for a node with several ports or a
+                     branch/error one, so a single `default` port — which is most
+                     nodes, No Operation among them — would have had nowhere to carry
+                     it and the tooltip would have been dead in the commonest case.
+
+                     What that buys is uneven, and it is the reason this is a
+                     convenience rather than a promise: each field row carries its own
+                     title (the expression to copy), and a child title wins, so the
+                     sentence is read by resting on the port's name or the space around
+                     its rows rather than on a row itself. Where a reader is owed the
+                     text outright, that is the Output tab. -->
+                <div
+                  v-for="p in s.ports"
+                  :key="p.name"
+                  class="space-y-1 pl-0.5"
+                  :title="resolveLocalized(p.description) || void 0"
+                >
                   <div v-if="s.ports.length > 1 || p.kind !== 'default'" class="flex items-center gap-1.5">
                     <span class="size-1.5 rounded-full" :class="portDotClass(p.kind, p.name)" />
                     <span class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{{ p.name }}</span>
@@ -1134,7 +1212,7 @@ async function runTestStep() {
             <!-- Trigger payload -->
             <div v-if="showTriggerChip" class="space-y-1.5">
               <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-                Trigger
+                {{ t("integration.nodeInspector.input.trigger.heading") }}
               </div>
               <div class="flex flex-wrap gap-1">
                 <button
@@ -1150,19 +1228,19 @@ async function runTestStep() {
                 </button>
               </div>
               <p class="text-xs leading-snug text-muted-foreground">
-                The payload the run started with. Append a path for a single value, e.g. trigger.payload.orderId.
+                {{ t("integration.nodeInspector.input.trigger.hint") }}
               </p>
             </div>
           </template>
 
           <p v-else class="text-xs leading-snug text-muted-foreground">
-            Triggers start the workflow, so there is no upstream data. Workflow variables are available everywhere.
+            {{ t("integration.nodeInspector.input.noUpstreamForTrigger") }}
           </p>
 
           <!-- Workflow variables -->
           <div v-if="!searchQuery || visibleVariableNames.length" class="space-y-1.5">
             <div class="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-              Variables
+              {{ t("integration.nodeInspector.input.variables.heading") }}
             </div>
             <!-- Schema rows with the declared default as the value. -->
             <div v-if="variableRows.length" class="space-y-px">
@@ -1183,12 +1261,12 @@ async function runTestStep() {
               </button>
             </div>
             <p v-else class="text-xs leading-snug text-muted-foreground">
-              No workflow variables defined.
+              {{ t("integration.nodeInspector.input.variables.empty") }}
             </p>
           </div>
 
           <p v-if="searchEmpty" class="text-xs leading-snug text-muted-foreground">
-            Nothing matches "{{ inputSearch.trim() }}". Clear the search to see all available data.
+            {{ t("integration.nodeInspector.input.search.empty", { query: inputSearch.trim() }) }}
           </p>
         </div>
       </aside>
@@ -1198,6 +1276,19 @@ async function runTestStep() {
         <!-- Same TabBar as the workflow page — one tab look everywhere. -->
         <TabBar v-model="tab" :tabs="inspectorTabs" class="shrink-0 px-4" />
 
+        <!-- The pinned version has no built code, so nothing here can be tested
+             or resolved. Above the tabs' content rather than inside one of them:
+             the state belongs to the node, not to a tab, and a reader who opens
+             this node on Parameters would otherwise meet the card's mark outside
+             and no word about it inside. Outside the scrolling area so it cannot
+             be scrolled away from. -->
+        <p
+          v-if="isNode && !versionExecutable"
+          class="mx-4 mb-1 shrink-0 rounded-md border border-rose-200 bg-rose-50 px-2.5 py-1.5 text-sm text-rose-700"
+        >
+          {{ readyVersion ? t("integration.nodeInspector.notice.versionNotReady.upgrade", { version: draftNode?.nodeVersion ?? "", ready: readyVersion }) : t("integration.nodeInspector.notice.versionNotReady.none", { version: draftNode?.nodeVersion ?? "" }) }}
+        </p>
+
         <div
           class="min-h-0 flex-1 overflow-y-auto p-4"
           :class="dragActive ? 'chip-drag-live' : ''"
@@ -1215,15 +1306,15 @@ async function runTestStep() {
               <!-- The name lives in the text next to the switch, which is not
                    a <label> — so the switch says it itself. -->
               <Switch
-                aria-label="Active"
+                :aria-label="t('integration.nodeInspector.trigger.active.label')"
                 class="data-[state=unchecked]:bg-slate-300"
                 :model-value="draftTrigger.active !== false"
                 @update:model-value="(v) => patchTrigger({ active: v })"
               />
               <div>
-                <div class="text-sm font-medium">Active</div>
+                <div class="text-sm font-medium">{{ t("integration.nodeInspector.trigger.active.label") }}</div>
                 <p class="text-xs text-muted-foreground">
-                  A run needs at least one active trigger.
+                  {{ t("integration.nodeInspector.trigger.active.hint") }}
                 </p>
               </div>
             </div>
@@ -1237,29 +1328,29 @@ async function runTestStep() {
                 <div class="space-y-1.5">
                   <!-- "Frequency", not "Runs": a run is an execution everywhere
                        else in the studio, and there is a whole page of them. -->
-                  <Label for="ni-frequency" class="text-mono text-muted-foreground">Frequency</Label>
+                  <Label for="ni-frequency" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.frequency.label") }}</Label>
                   <Select :model-value="frequency" @update:model-value="applyFrequency">
-                    <SelectTrigger id="ni-frequency" aria-label="Frequency" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger id="ni-frequency" :aria-label="t('integration.nodeInspector.schedule.frequency.label')" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem v-for="f in FREQUENCY_OPTIONS" :key="f.value" :value="f.value">{{ f.label }}</SelectItem>
                       <SelectSeparator />
-                      <SelectItem :value="FREQUENCY_ADVANCED">Advanced (cron)</SelectItem>
+                      <SelectItem :value="FREQUENCY_ADVANCED">{{ t("integration.nodeInspector.schedule.frequency.advanced") }}</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
 
                 <!-- Every few minutes: the gap between firings. -->
                 <div v-if="frequency === 'minutes'" class="space-y-1.5">
-                  <Label for="ni-minute-interval" class="text-mono text-muted-foreground">Interval</Label>
+                  <Label for="ni-minute-interval" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.interval.label") }}</Label>
                   <Select :model-value="String(carry.minuteInterval)" @update:model-value="applyMinuteInterval">
-                    <SelectTrigger id="ni-minute-interval" aria-label="Interval" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger id="ni-minute-interval" :aria-label="t('integration.nodeInspector.schedule.interval.label')" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem v-for="n in minuteIntervalOptions" :key="n" :value="String(n)">
-                        {{ n === 1 ? "Every minute" : `Every ${n} minutes` }}
+                        {{ t("integration.nodeInspector.schedule.minuteInterval.option", n) }}
                       </SelectItem>
                     </SelectContent>
                   </Select>
@@ -1267,21 +1358,21 @@ async function runTestStep() {
 
                 <!-- Every few hours: the gap, plus where in the hour it lands. -->
                 <div v-if="frequency === 'hours'" class="space-y-1.5">
-                  <Label for="ni-hour-interval" class="text-mono text-muted-foreground">Interval</Label>
+                  <Label for="ni-hour-interval" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.interval.label") }}</Label>
                   <Select :model-value="String(carry.hourInterval)" @update:model-value="applyHourInterval">
-                    <SelectTrigger id="ni-hour-interval" aria-label="Interval" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger id="ni-hour-interval" :aria-label="t('integration.nodeInspector.schedule.interval.label')" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem v-for="n in HOUR_INTERVALS" :key="n" :value="String(n)">Every {{ n }} hours</SelectItem>
+                      <SelectItem v-for="n in HOUR_INTERVALS" :key="n" :value="String(n)">{{ t("integration.nodeInspector.schedule.hourInterval.option", { n }) }}</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
 
                 <div v-if="frequency === 'hourly' || frequency === 'hours' || frequency === 'times'" class="space-y-1.5">
-                  <Label for="ni-minute-past" class="text-mono text-muted-foreground">Minutes past the hour</Label>
+                  <Label for="ni-minute-past" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.minutePast.label") }}</Label>
                   <Select :model-value="String(carry.minute)" @update:model-value="applyMinutePast">
-                    <SelectTrigger id="ni-minute-past" aria-label="Minutes past the hour" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger id="ni-minute-past" :aria-label="t('integration.nodeInspector.schedule.minutePast.label')" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -1294,11 +1385,11 @@ async function runTestStep() {
                      rhythms share, which is why it survives a change of
                      frequency. -->
                 <div v-if="frequency === 'daily' || frequency === 'weekly' || frequency === 'monthly'" class="space-y-1.5">
-                  <Label for="ni-time" class="text-mono text-muted-foreground">Time</Label>
+                  <Label for="ni-time" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.time.label") }}</Label>
                   <Input
                     id="ni-time"
                     type="time"
-                    aria-label="Time"
+                    :aria-label="t('integration.nodeInspector.schedule.time.label')"
                     :model-value="timeValue"
                     class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white tabular-nums"
                     @update:model-value="applyTime"
@@ -1306,9 +1397,9 @@ async function runTestStep() {
                 </div>
 
                 <div v-if="frequency === 'monthly'" class="space-y-1.5">
-                  <Label for="ni-day-of-month" class="text-mono text-muted-foreground">Day of month</Label>
+                  <Label for="ni-day-of-month" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.dayOfMonth.label") }}</Label>
                   <Select :model-value="String(carry.day)" @update:model-value="applyDayOfMonth">
-                    <SelectTrigger id="ni-day-of-month" aria-label="Day of month" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger id="ni-day-of-month" :aria-label="t('integration.nodeInspector.schedule.dayOfMonth.label')" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -1319,10 +1410,10 @@ async function runTestStep() {
 
                 <!-- Advanced: the expression itself, the only place it is shown. -->
                 <div v-if="frequency === FREQUENCY_ADVANCED" class="space-y-1.5">
-                  <Label for="ni-cron" class="text-mono text-muted-foreground">Cron expression</Label>
+                  <Label for="ni-cron" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.cron.label") }}</Label>
                   <Input
                     id="ni-cron"
-                    aria-label="Cron expression"
+                    :aria-label="t('integration.nodeInspector.schedule.cron.label')"
                     :model-value="cronValue"
                     placeholder="0 9-17 * * 1-5"
                     class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white font-mono"
@@ -1338,10 +1429,10 @@ async function runTestStep() {
                 schedule triggers rather than one field per row.
               -->
               <div v-if="frequency === 'times'" class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Hours</Label>
+                <Label class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.hours.label") }}</Label>
                 <ToggleGroup
                   type="multiple"
-                  aria-label="Hours"
+                  :aria-label="t('integration.nodeInspector.schedule.hours.label')"
                   :model-value="selectedHours"
                   class="grid w-fit grid-cols-12 gap-1"
                   @update:model-value="applyHours"
@@ -1361,10 +1452,10 @@ async function runTestStep() {
               <!-- Weekdays: full width, because seven toggles in half of the
                    grid would wrap. Serves both rhythms that fall on days. -->
               <div v-if="frequency === 'weekly' || frequency === 'times'" class="space-y-1.5">
-                <Label class="text-mono text-muted-foreground">Days</Label>
+                <Label class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.schedule.days.label") }}</Label>
                 <ToggleGroup
                   type="multiple"
-                  aria-label="Days"
+                  :aria-label="t('integration.nodeInspector.schedule.days.label')"
                   :model-value="selectedDays"
                   class="justify-start gap-1"
                   @update:model-value="applyDays"
@@ -1386,25 +1477,25 @@ async function runTestStep() {
                 the expression's numbers as wall-clock time in that zone, so a time
                 without its zone would be half an answer.
               -->
-              <p v-if="scheduleSentence" aria-label="When it fires" class="text-xs text-emerald-700">{{ scheduleSentence }}</p>
+              <p v-if="scheduleSentence" :aria-label="t('integration.nodeInspector.schedule.whenItFiresAria')" class="text-xs text-emerald-700">{{ scheduleSentence }}</p>
               <!-- No expression at all is its own answer, and the same one the
                    Schedules page gives for this trigger: it is not written as
                    anything, and it does not run. A trigger placed from the palette
                    carries an expression, so this is for one that arrived without
                    one. -->
-              <p v-else-if="!hasCron" aria-label="When it fires" class="text-xs text-muted-foreground">
-                No schedule set — pick a frequency, or write an expression.
+              <p v-else-if="!hasCron" :aria-label="t('integration.nodeInspector.schedule.whenItFiresAria')" class="text-xs text-muted-foreground">
+                {{ t("integration.nodeInspector.schedule.noneSet") }}
               </p>
               <p v-else class="text-xs text-muted-foreground">
-                This schedule is written as an expression these settings cannot show. It runs exactly as written.
+                {{ t("integration.nodeInspector.schedule.writtenAsExpression") }}
               </p>
               <p v-if="frequency === 'monthly' && carry.day >= 29" class="text-xs text-muted-foreground">
-                Months without this day are skipped.
+                {{ t("integration.nodeInspector.schedule.monthlySkipHint") }}
               </p>
             </template>
             <template v-else-if="draftTrigger.type === 'webhook'">
               <div class="space-y-1.5">
-                <Label for="ni-webhook-url" class="text-mono text-muted-foreground">Webhook URL</Label>
+                <Label for="ni-webhook-url" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.url.label") }}</Label>
                 <div v-if="webhookUrl" class="flex items-center gap-1.5">
                   <Input
                     id="ni-webhook-url"
@@ -1415,7 +1506,7 @@ async function runTestStep() {
                   />
                   <button
                     type="button"
-                    title="Copy URL"
+                    :title="t('integration.nodeInspector.trigger.webhook.url.copyTitle')"
                     class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.08] bg-white text-muted-foreground transition hover:text-foreground"
                     @click="copyWebhookUrl"
                   >
@@ -1423,27 +1514,27 @@ async function runTestStep() {
                   </button>
                 </div>
                 <p class="text-xs text-muted-foreground">
-                  <template v-if="webhookIsPublic">Public ingress endpoint — callers authenticate with the endpoint secret issued when the trigger was exposed.</template>
-                  <template v-else>Authenticated endpoint: callers need a platform API token (Bearer). Enable the public endpoint for external systems.</template>
+                  <template v-if="webhookIsPublic">{{ t("integration.nodeInspector.trigger.webhook.url.publicHint") }}</template>
+                  <template v-else>{{ t("integration.nodeInspector.trigger.webhook.url.privateHint") }}</template>
                 </p>
               </div>
               <div class="flex items-center gap-3 rounded-lg border border-black/[0.06] bg-muted/20 px-3 py-2">
                 <Switch
-                  aria-label="Public endpoint"
+                  :aria-label="t('integration.nodeInspector.trigger.webhook.public.label')"
                   class="data-[state=unchecked]:bg-slate-300"
                   :model-value="webhookIsPublic"
                   @update:model-value="(v) => writeTriggerConfigPatch(v ? { public: true, ...draftTrigger.config.authProfile ? {} : configPatchForAuthChoice('token') } : { public: void 0 })"
                 />
                 <div>
-                  <div class="text-sm font-medium">Public endpoint</div>
+                  <div class="text-sm font-medium">{{ t("integration.nodeInspector.trigger.webhook.public.label") }}</div>
                   <p class="text-xs text-muted-foreground">
-                    Saving provisions a public URL on the webhook ingress (with its own endpoint secret) — for external systems without a platform token.
+                    {{ t("integration.nodeInspector.trigger.webhook.public.hint") }}
                   </p>
                 </div>
               </div>
               <div class="grid grid-cols-2 gap-3">
                 <div class="space-y-1.5">
-                  <Label for="ni-webhook-method" class="text-mono text-muted-foreground">Method</Label>
+                  <Label for="ni-webhook-method" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.method.label") }}</Label>
                   <Select
                     :model-value="readTriggerConfig('method') ?? 'POST'"
                     @update:model-value="(v) => writeTriggerConfig('method', v)"
@@ -1461,23 +1552,23 @@ async function runTestStep() {
                   </Select>
                 </div>
                 <div v-if="webhookIsPublic" class="space-y-1.5">
-                  <Label for="ni-webhook-protection" class="text-mono text-muted-foreground">Protection</Label>
+                  <Label for="ni-webhook-protection" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.protection.label") }}</Label>
                   <Select :model-value="authChoice" @update:model-value="applyAuthChoice">
                     <SelectTrigger id="ni-webhook-protection" size="sm" class="h-8 w-full rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="token">API key / token header</SelectItem>
-                      <SelectItem value="bearer">Bearer token</SelectItem>
-                      <SelectItem value="basic">Basic auth</SelectItem>
-                      <SelectItem value="none">None (capture everything)</SelectItem>
+                      <SelectItem value="token">{{ t("integration.nodeInspector.trigger.webhook.protection.token") }}</SelectItem>
+                      <SelectItem value="bearer">{{ t("integration.nodeInspector.trigger.webhook.protection.bearer") }}</SelectItem>
+                      <SelectItem value="basic">{{ t("integration.nodeInspector.trigger.webhook.protection.basic") }}</SelectItem>
+                      <SelectItem value="none">{{ t("integration.nodeInspector.trigger.webhook.protection.none") }}</SelectItem>
                     </SelectContent>
                   </Select>
-                  <p class="text-xs text-muted-foreground">Verified by the webhook ingress before the workflow runs.</p>
+                  <p class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.protection.hint") }}</p>
                 </div>
               </div>
               <div v-if="webhookIsPublic && authChoice === 'token'" class="space-y-1.5">
-                <Label for="ni-auth-header" class="text-mono text-muted-foreground">Header name</Label>
+                <Label for="ni-auth-header" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.header.label") }}</Label>
                 <Input
                   id="ni-auth-header"
                   :model-value="draftTrigger.config.authConfig?.header ?? ''"
@@ -1485,33 +1576,34 @@ async function runTestStep() {
                   class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
                   @update:model-value="(v) => writeAuthConfigKey('header', String(v))"
                 />
-                <p class="text-xs text-muted-foreground">The header carrying the endpoint secret (e.g. X-Api-Key). Empty uses X-Webhook-Token.</p>
+                <p class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.header.hint") }}</p>
               </div>
               <div v-if="webhookIsPublic && authChoice === 'basic'" class="space-y-1.5">
-                <Label for="ni-auth-username" class="text-mono text-muted-foreground">Username</Label>
+                <Label for="ni-auth-username" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.username.label") }}</Label>
                 <Input
                   id="ni-auth-username"
                   :model-value="draftTrigger.config.authConfig?.username ?? ''"
-                  placeholder="Any username"
+                  :placeholder="t('integration.nodeInspector.trigger.webhook.username.placeholder')"
                   class="h-8 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
                   @update:model-value="(v) => writeAuthConfigKey('username', String(v))"
                 />
-                <p class="text-xs text-muted-foreground">Optional — pins the Basic-auth username. The password is the endpoint secret.</p>
+                <p class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.username.hint") }}</p>
               </div>
               <div v-if="webhookExposed && authChoice !== 'none'" class="flex items-center gap-2">
                 <Button type="button" variant="outline" size="sm" class="h-7 text-sm" :disabled="rotateBusy" @click="rotateEndpointSecret">
-                  {{ rotateBusy ? "Rotating\u2026" : "Rotate endpoint secret" }}
+                  {{ rotateBusy ? t("integration.nodeInspector.trigger.webhook.rotate.busy") : t("integration.nodeInspector.trigger.webhook.rotate.action") }}
                 </Button>
-                <p class="text-xs text-muted-foreground">Issues a new secret (shown once); the previous one keeps working briefly.</p>
+                <p class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.trigger.webhook.rotate.hint") }}</p>
               </div>
 
               <Dialog v-model:open="rotateOpen">
                 <DialogContent class="sm:max-w-md">
                   <DialogHeader>
-                    <DialogTitle>New endpoint secret</DialogTitle>
+                    <DialogTitle>{{ t("integration.nodeInspector.trigger.webhook.rotate.dialogTitle") }}</DialogTitle>
                     <DialogDescription>
-                      Copy it now — it is shown only this once. Give it to the calling system
-                      ({{ authChoice === "basic" ? "as the Basic-auth password" : authChoice === "bearer" ? "as the Bearer token" : "in the token header" }}).
+                      {{ t("integration.nodeInspector.trigger.webhook.rotate.dialogHint", {
+  where: authChoice === "basic" ? t("integration.nodeInspector.trigger.webhook.rotate.whereBasic") : authChoice === "bearer" ? t("integration.nodeInspector.trigger.webhook.rotate.whereBearer") : t("integration.nodeInspector.trigger.webhook.rotate.whereHeader")
+}) }}
                     </DialogDescription>
                   </DialogHeader>
                   <div class="flex items-center gap-1.5">
@@ -1523,7 +1615,7 @@ async function runTestStep() {
                     />
                     <button
                       type="button"
-                      title="Copy secret"
+                      :title="t('integration.nodeInspector.trigger.webhook.rotate.copyTitle')"
                       class="flex size-8 shrink-0 items-center justify-center rounded-md border border-black/[0.08] bg-white text-muted-foreground transition hover:text-foreground"
                       @click="copySecret"
                     >
@@ -1535,36 +1627,36 @@ async function runTestStep() {
             </template>
             <template v-else-if="draftTrigger.type === 'event'">
               <div class="space-y-1.5">
-                <Label for="ni-event-type" class="text-mono text-muted-foreground">Event</Label>
+                <Label for="ni-event-type" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.event.label") }}</Label>
                 <EventTypeCombobox
                   input-id="ni-event-type"
                   :model-value="readTriggerConfig('event_type') ?? ''"
                   @update:model-value="(v) => writeTriggerConfig('event_type', v)"
                 />
                 <p class="text-xs text-muted-foreground">
-                  Runs whenever this platform event fires (e.g. <code class="font-mono">customer.created</code>, <code class="font-mono">order.placed</code>). The event payload is available to the workflow as <code class="font-mono">trigger.payload</code>.
+                  {{ t("integration.nodeInspector.trigger.event.hint.intro") }} <code class="font-mono">customer.created</code>, <code class="font-mono">order.placed</code>{{ t("integration.nodeInspector.trigger.event.hint.mid") }} <code class="font-mono">trigger.payload</code>.
                 </p>
               </div>
               <div v-if="eventSample" class="space-y-1.5">
                 <!-- A caption, not a field label: it heads a read-only block,
                      so it stays a plain line rather than an orphan <label>. -->
-                <div class="text-mono text-muted-foreground">Sample payload</div>
+                <div class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.event.sample.heading") }}</div>
                 <pre class="max-h-72 overflow-auto rounded-md border border-black/[0.06] bg-muted/20 p-2.5 font-mono text-[11px] leading-relaxed text-slate-700">{{ eventSample }}</pre>
-                <p class="text-xs text-muted-foreground">From the event catalogue — the shape this event delivers as <code class="font-mono">trigger.payload</code>.</p>
+                <p class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.trigger.event.sample.hint") }} <code class="font-mono">trigger.payload</code>.</p>
               </div>
               <p v-else-if="eventTopic" class="text-xs text-muted-foreground">
-                No sample payload in the event catalogue for this topic.
+                {{ t("integration.nodeInspector.trigger.event.sample.empty") }}
               </p>
             </template>
             <template v-else>
               <div class="space-y-1.5">
                 <!-- Caption for the field list below, not a label for one
                      control — the row's own controls are named individually. -->
-                <div class="text-mono text-muted-foreground">Run payload fields</div>
+                <div class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.trigger.manual.heading") }}</div>
                 <p class="text-xs text-muted-foreground">
-                  What the Run dialog asks for when this workflow is started by hand. Each field lands in
-                  <code class="font-mono">trigger.payload.&lt;key&gt;</code>; a File field becomes a manual upload.
-                  Fields referenced by nodes via <code class="font-mono">trigger.payload.*</code> are added automatically.
+                  {{ t("integration.nodeInspector.trigger.manual.hint.intro") }}
+                  <code class="font-mono">trigger.payload.&lt;key&gt;</code>{{ t("integration.nodeInspector.trigger.manual.hint.mid") }}
+                  <code class="font-mono">trigger.payload.*</code> {{ t("integration.nodeInspector.trigger.manual.hint.outro") }}
                 </p>
               </div>
               <div v-if="manualFields.length" class="space-y-1.5">
@@ -1572,41 +1664,41 @@ async function runTestStep() {
                   <!-- A repeating row has no room for visible labels, so each
                        control carries its own name and says which row it is. -->
                   <Select :model-value="mf.kind ?? 'text'" @update:model-value="(v) => setManualField(idx, { kind: v })">
-                    <SelectTrigger :aria-label="`Kind of payload field ${idx + 1}`" size="sm" class="h-8 w-24 shrink-0 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
+                    <SelectTrigger :aria-label="t('integration.nodeInspector.trigger.manual.field.kindAria', { n: idx + 1 })" size="sm" class="h-8 w-24 shrink-0 rounded-md border border-black/[0.08] ring-0 shadow-none text-sm bg-white">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="text">Text</SelectItem>
-                      <SelectItem value="file">File</SelectItem>
+                      <SelectItem value="text">{{ t("integration.nodeInspector.trigger.manual.kind.text") }}</SelectItem>
+                      <SelectItem value="file">{{ t("integration.nodeInspector.trigger.manual.kind.file") }}</SelectItem>
                     </SelectContent>
                   </Select>
                   <Input
-                    :aria-label="`Key of payload field ${idx + 1}`"
+                    :aria-label="t('integration.nodeInspector.trigger.manual.field.keyAria', { n: idx + 1 })"
                     :model-value="mf.path"
-                    placeholder="key (e.g. orderId or import.file)"
+                    :placeholder="t('integration.nodeInspector.trigger.manual.field.keyPlaceholder')"
                     class="h-8 w-[38%] rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-sm"
                     @update:model-value="(v) => setManualField(idx, { path: String(v) })"
                   />
                   <Input
-                    :aria-label="`Label of payload field ${idx + 1}`"
+                    :aria-label="t('integration.nodeInspector.trigger.manual.field.labelAria', { n: idx + 1 })"
                     :model-value="mf.label ?? ''"
-                    placeholder="Label shown in the Run dialog"
+                    :placeholder="t('integration.nodeInspector.trigger.manual.field.labelPlaceholder')"
                     class="h-8 min-w-0 flex-1 rounded-md border border-black/[0.08] ring-0 shadow-none bg-white text-sm"
                     @update:model-value="(v) => setManualField(idx, { label: String(v) })"
                   />
                   <button
                     type="button"
-                    :aria-label="`Remove payload field ${idx + 1}`"
+                    :aria-label="t('integration.nodeInspector.trigger.manual.field.removeAria', { n: idx + 1 })"
                     class="flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
                     @click="removeManualField(idx)"
                   >
-                    <Trash2 :size="13" />
+                    <TrashBin :size="13" />
                   </button>
                 </div>
               </div>
               <Button type="button" variant="outline" size="sm" class="h-7 text-sm" @click="addManualField">
                 <Plus :size="12" />
-                Add field
+                {{ t("integration.nodeInspector.trigger.manual.action.addField") }}
               </Button>
             </template>
           </div>
@@ -1615,23 +1707,23 @@ async function runTestStep() {
           <div v-else-if="tab === 'parameters' && draftNode" class="mx-auto w-full max-w-5xl">
             <div v-if="manifest?.config?.length" class="space-y-3">
               <div class="flex items-center justify-between">
-                <span class="text-mono text-muted-foreground">Configuration</span>
+                <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.parameters.heading") }}</span>
                 <div class="flex items-center gap-2">
                   <button
                     type="button"
                     class="flex items-center gap-1 rounded px-1 py-0.5 text-sm text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                    title="Copy this node's config as JSON"
+                    :title="t('integration.nodeInspector.parameters.copyTitle')"
                     @click="copyConfig"
                   >
-                    <Copy :size="12" /> Copy
+                    <Copy :size="12" /> {{ t("integration.common.action.copy") }}
                   </button>
                   <button
                     type="button"
                     class="rounded px-1 py-0.5 text-sm text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-                    title="Replace this node's config from a JSON object in the clipboard"
+                    :title="t('integration.nodeInspector.parameters.pasteTitle')"
                     @click="pasteConfig"
                   >
-                    Paste
+                    {{ t("integration.common.action.paste") }}
                   </button>
                 </div>
               </div>
@@ -1644,6 +1736,7 @@ async function runTestStep() {
                 :version="draftNode.nodeVersion"
                 :secret-keys="secretKeys"
                 :static-keys="(manifest.config ?? []).map((f2) => f2.key)"
+                :sibling-fields="manifest.config ?? []"
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
@@ -1662,7 +1755,7 @@ async function runTestStep() {
                   @click="optionalOpen = true"
                 >
                   <ChevronRight :size="13" />
-                  Show {{ optionalFields.length }} optional setting{{ optionalFields.length === 1 ? "" : "s" }}
+                  {{ t("integration.nodeInspector.parameters.optional.show", optionalFields.length) }}
                 </button>
                 <template v-else>
                   <button
@@ -1672,7 +1765,7 @@ async function runTestStep() {
                     @click="optionalOpen = false"
                   >
                     <ChevronDown :size="13" />
-                    Hide {{ optionalFields.length }} optional setting{{ optionalFields.length === 1 ? "" : "s" }}
+                    {{ t("integration.nodeInspector.parameters.optional.hide", optionalFields.length) }}
                   </button>
                   <IntegrationsNodeConfigField
                     v-for="field in optionalFields"
@@ -1683,6 +1776,7 @@ async function runTestStep() {
                     :version="draftNode.nodeVersion"
                     :secret-keys="secretKeys"
                     :static-keys="(manifest.config ?? []).map((f2) => f2.key)"
+                    :sibling-fields="manifest.config ?? []"
                     :depth="0"
                     :variables="variables"
                     :upstream-outputs="upstreamOutputs"
@@ -1693,11 +1787,11 @@ async function runTestStep() {
               </template>
 
               <p v-if="!parameterFields.length" class="text-sm text-muted-foreground italic">
-                All of this node's options live on the Settings tab.
+                {{ t("integration.nodeInspector.parameters.allOnSettingsTab") }}
               </p>
             </div>
             <div v-else class="text-sm text-muted-foreground italic">
-              This node has no configuration.
+              {{ t("integration.nodeInspector.parameters.noConfiguration") }}
             </div>
           </div>
 
@@ -1710,9 +1804,9 @@ async function runTestStep() {
                  identical-looking numbers with nothing to tell them apart. -->
             <div v-if="settingsFields.length" class="space-y-3">
               <div>
-                <span class="text-mono text-muted-foreground">Options of this node</span>
+                <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.ownOptions.heading") }}</span>
                 <p class="text-xs text-muted-foreground">
-                  Settings this node type defines for itself.
+                  {{ t("integration.nodeInspector.settings.ownOptions.hint") }}
                 </p>
               </div>
               <IntegrationsNodeConfigField
@@ -1724,6 +1818,7 @@ async function runTestStep() {
                 :version="draftNode.nodeVersion"
                 :secret-keys="secretKeys"
                 :static-keys="(manifest?.config ?? []).map((f2) => f2.key)"
+                :sibling-fields="manifest?.config ?? []"
                 :depth="0"
                 :variables="variables"
                 :upstream-outputs="upstreamOutputs"
@@ -1734,9 +1829,9 @@ async function runTestStep() {
             <!-- The rule only earns its place when there is something above to
                  divide from. -->
             <div :class="settingsFields.length ? 'border-t border-black/[0.06] pt-5' : ''">
-              <span class="text-mono text-muted-foreground">How the engine runs this step</span>
+              <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.engine.heading") }}</span>
               <p class="text-xs text-muted-foreground">
-                The same settings on every node type, applied by the engine around whatever the node does.
+                {{ t("integration.nodeInspector.settings.engine.hint") }}
               </p>
             </div>
 
@@ -1746,21 +1841,21 @@ async function runTestStep() {
             <section class="rounded-lg border border-black/[0.06] bg-muted/20">
               <div class="flex items-center gap-3 px-3 py-2">
                 <Switch
-                  aria-label="Retry on failure"
+                  :aria-label="t('integration.nodeInspector.settings.retry.label')"
                   class="data-[state=unchecked]:bg-slate-300"
                   :model-value="!!draftNode.retry"
                   @update:model-value="(v) => patchNode({ retry: v ? { maxAttempts: 3, backoffSeconds: 1, strategy: 'exponential' } : void 0 })"
                 />
                 <div>
-                  <div class="text-sm font-medium">Retry on failure</div>
+                  <div class="text-sm font-medium">{{ t("integration.nodeInspector.settings.retry.label") }}</div>
                   <p class="text-xs text-muted-foreground">
-                    Re-run this node automatically when an attempt fails.
+                    {{ t("integration.nodeInspector.settings.retry.hint") }}
                   </p>
                 </div>
               </div>
               <div v-if="draftNode.retry" class="grid grid-cols-4 gap-3 border-t border-black/[0.06] p-3">
                 <div class="space-y-1.5">
-                  <Label for="ni-retry-attempts" class="text-mono text-muted-foreground">Max attempts</Label>
+                  <Label for="ni-retry-attempts" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.retry.maxAttempts") }}</Label>
                   <Input
                     id="ni-retry-attempts"
                     type="number"
@@ -1771,7 +1866,7 @@ async function runTestStep() {
                   />
                 </div>
                 <div class="space-y-1.5">
-                  <Label for="ni-retry-backoff" class="text-mono text-muted-foreground">Backoff seconds</Label>
+                  <Label for="ni-retry-backoff" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.retry.backoffSeconds") }}</Label>
                   <Input
                     id="ni-retry-backoff"
                     type="number"
@@ -1782,7 +1877,7 @@ async function runTestStep() {
                   />
                 </div>
                 <div class="col-span-2 space-y-1.5">
-                  <Label for="ni-retry-strategy" class="text-mono text-muted-foreground">Strategy</Label>
+                  <Label for="ni-retry-strategy" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.retry.strategy") }}</Label>
                   <Select
                     :model-value="draftNode.retry?.strategy ?? 'exponential'"
                     @update:model-value="(v) => patchNode({ retry: { ...draftNode.retry, strategy: v } })"
@@ -1791,8 +1886,8 @@ async function runTestStep() {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="linear">linear backoff</SelectItem>
-                      <SelectItem value="exponential">exponential backoff</SelectItem>
+                      <SelectItem value="linear">{{ t("integration.nodeInspector.settings.retry.strategyLinear") }}</SelectItem>
+                      <SelectItem value="exponential">{{ t("integration.nodeInspector.settings.retry.strategyExponential") }}</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -1801,7 +1896,7 @@ async function runTestStep() {
 
             <!-- Timeout: engine start-to-close ceiling for one attempt -->
             <section class="space-y-1.5">
-              <Label for="ni-timeout" class="text-mono text-muted-foreground">Timeout</Label>
+              <Label for="ni-timeout" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.timeout.label") }}</Label>
               <Input
                 id="ni-timeout"
                 type="number"
@@ -1813,13 +1908,13 @@ async function runTestStep() {
                 @update:model-value="(v) => patchNode({ timeoutSeconds: Number(v) > 0 ? Math.min(Math.trunc(Number(v)), 7200) : void 0 })"
               />
               <p class="text-xs text-muted-foreground">
-                Seconds per attempt before the engine cancels the node. Empty uses the default (10 minutes); maximum 2 hours.
+                {{ t("integration.nodeInspector.settings.timeout.hint") }}
               </p>
             </section>
 
             <!-- On error: what happens once the retries are exhausted -->
             <section class="space-y-1.5">
-              <Label for="ni-on-error" class="text-mono text-muted-foreground">On error</Label>
+              <Label for="ni-on-error" class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.settings.onError.label") }}</Label>
               <Select
                 :model-value="draftNode.onError ?? 'fail'"
                 @update:model-value="(v) => patchNode({ onError: v === 'route' ? 'route' : void 0 })"
@@ -1828,12 +1923,12 @@ async function runTestStep() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="fail">Fail the run</SelectItem>
-                  <SelectItem value="route">Route to error output</SelectItem>
+                  <SelectItem value="fail">{{ t("integration.nodeInspector.settings.onError.fail") }}</SelectItem>
+                  <SelectItem value="route">{{ t("integration.nodeInspector.settings.onError.route") }}</SelectItem>
                 </SelectContent>
               </Select>
               <p class="text-xs text-muted-foreground">
-                Applies after the retry policy is exhausted. A Stop and Error node always fails the run.
+                {{ t("integration.nodeInspector.settings.onError.hint") }}
               </p>
             </section>
           </div>
@@ -1845,15 +1940,14 @@ async function runTestStep() {
             <section class="space-y-2">
               <div class="flex items-center justify-between gap-2">
                 <p class="text-xs text-muted-foreground">
-                  What downstream nodes receive from this one. Declared by the node type;
-                  filled with real values once the step has run.
+                  {{ t("integration.nodeInspector.output.description") }}
                 </p>
                 <div class="flex shrink-0 items-center rounded-md border border-black/[0.06] bg-white p-0.5">
                   <button type="button" :class="outputView === 'schema' ? segActive : segIdle" @click="outputView = 'schema'">
-                    Schema
+                    {{ t("integration.nodeInspector.output.view.schema") }}
                   </button>
                   <button type="button" :disabled="!selfSample" :class="outputView === 'json' ? segActive : segIdle" @click="outputView = 'json'">
-                    JSON
+                    {{ t("integration.nodeInspector.output.view.json") }}
                   </button>
                 </div>
               </div>
@@ -1864,32 +1958,32 @@ async function runTestStep() {
             </section>
 
             <section class="space-y-2 border-t border-black/[0.06] pt-4">
-              <span class="text-mono text-muted-foreground">Real values</span>
+              <span class="text-mono text-muted-foreground">{{ t("integration.nodeInspector.output.realValues.heading") }}</span>
               <div class="flex items-center gap-2">
                 <Button
                   size="sm"
                   class="h-8"
-                  :disabled="testRunning"
-                  title="Runs this node once with the current draft config"
+                  :disabled="testRunning || !versionExecutable"
+                  :title="versionExecutable ? t('integration.nodeInspector.output.test.runTitle') : void 0"
                   @click="runTestStep"
                 >
-                  {{ testRunning ? "Testing\u2026" : "Test step" }}
+                  {{ testRunning ? t("integration.nodeInspector.output.test.running") : t("integration.nodeInspector.output.test.action") }}
                 </Button>
                 <button
                   type="button"
                   class="rounded px-1 py-1 text-sm font-medium text-muted-foreground transition hover:text-foreground"
                   @click="toggleTestInput"
                 >
-                  {{ testInputOpen ? "Hide input" : "Edit input" }}
+                  {{ testInputOpen ? t("integration.nodeInspector.output.test.hideInput") : t("integration.nodeInspector.output.test.editInput") }}
                 </button>
                 <span class="text-xs text-muted-foreground">
-                  Runs this step alone, against the draft config — the workflow is not started.
+                  {{ versionExecutable ? t("integration.nodeInspector.output.test.runHint") : "" }}
                 </span>
               </div>
               <Textarea
                 v-if="testInputOpen"
                 v-model="testInputDraft"
-                aria-label="Test input"
+                :aria-label="t('integration.nodeInspector.output.test.inputAria')"
                 :rows="8"
                 spellcheck="false"
                 class="rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
@@ -1913,7 +2007,7 @@ async function runTestStep() {
               <template v-if="!pinEditorOpen">
                 <div class="flex items-center gap-2">
                   <Button variant="outline" size="sm" class="h-8" @click="openPinEditor">
-                    {{ selfPinned ? "Edit pinned sample" : "Pin sample output" }}
+                    {{ selfPinned ? t("integration.nodeInspector.output.pin.editAction") : t("integration.nodeInspector.output.pin.pinAction") }}
                   </Button>
                   <button
                     v-if="selfPinned"
@@ -1921,17 +2015,17 @@ async function runTestStep() {
                     class="text-sm font-medium text-rose-600 transition hover:text-rose-700"
                     @click="removePin"
                   >
-                    Unpin
+                    {{ t("integration.nodeInspector.output.pin.unpinAction") }}
                   </button>
                   <span class="text-xs text-muted-foreground">
-                    A pinned sample stands in for run data while you map downstream fields.
+                    {{ t("integration.nodeInspector.output.pin.hint") }}
                   </span>
                 </div>
               </template>
               <template v-else>
                 <Textarea
                   v-model="pinDraft"
-                  aria-label="Pinned sample output"
+                  :aria-label="t('integration.nodeInspector.output.pin.editorAria')"
                   :rows="10"
                   spellcheck="false"
                   class="rounded-md border border-black/[0.08] ring-0 shadow-none bg-white font-mono text-xs"
@@ -1941,10 +2035,10 @@ async function runTestStep() {
                 </p>
                 <div class="flex items-center gap-2">
                   <Button size="sm" class="h-8" @click="savePin">
-                    Pin
+                    {{ t("integration.nodeInspector.output.pin.saveAction") }}
                   </Button>
                   <Button size="sm" variant="outline" class="h-8" @click="pinEditorOpen = false">
-                    Cancel
+                    {{ t("integration.common.action.cancel") }}
                   </Button>
                 </div>
               </template>
@@ -1973,24 +2067,24 @@ async function runTestStep() {
       <Button
         variant="ghost"
         size="sm"
-        aria-label="Remove from workflow"
+        :aria-label="t('integration.nodeInspector.footer.removeFromWorkflow')"
         class="group h-8 gap-0 text-sm text-muted-foreground transition-colors hover:bg-rose-500/10 hover:text-rose-700 focus-visible:bg-rose-500/10 focus-visible:text-rose-700"
         @click="emit('remove')"
       >
-        <Trash2 :size="13" />
+        <TrashBin :size="13" />
         <span
           class="max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-150 group-hover:ml-1.5 group-hover:max-w-48 group-hover:opacity-100 group-focus-visible:ml-1.5 group-focus-visible:max-w-48 group-focus-visible:opacity-100"
         >
-          Remove from workflow
+          {{ t("integration.nodeInspector.footer.removeFromWorkflow") }}
         </span>
       </Button>
       <div class="flex items-center gap-2">
-        <span v-if="dirty" class="text-xs text-muted-foreground">Unsaved changes</span>
+        <span v-if="dirty" class="text-xs text-muted-foreground">{{ t("integration.nodeInspector.footer.unsavedChanges") }}</span>
         <Button variant="outline" size="sm" class="h-8" @click="emit('close')">
-          Cancel
+          {{ t("integration.common.action.cancel") }}
         </Button>
         <Button size="sm" class="h-8" @click="save">
-          Save
+          {{ t("integration.nodeInspector.footer.done") }}
         </Button>
       </div>
     </div>