@revenexx/studio-integrations 0.6.0 → 0.7.0

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

@@ -1,11 +1,12 @@
 <script setup>
 import { onMounted, ref, watch } from "vue";
-import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { RefreshCircle as Loader2, Refresh as ReplayIcon, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
 import { toast } from "vue-sonner";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
+const t = useIntegrationsT();
 const { list, replay, discard } = useIntegrationsDeadLetters();
 const PER_PAGE = 25;
 const items = ref([]);
@@ -25,7 +26,7 @@ async function load(p = page.value) {
     lastPage.value = res.lastPage;
     page.value = res.page;
   } catch (e) {
-    error.value = e?.message ?? "Could not load dead letters.";
+    error.value = e?.message ?? t("integration.deadLetters.error.load");
   } finally {
     loading.value = false;
   }
@@ -41,10 +42,10 @@ async function onReplay(dl) {
   try {
     const res = await replay(dl.id);
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
-    toast.success(newId ? `Replayed \u2014 started run #${newId}` : "Replayed");
+    toast.success(newId ? t("integration.deadLetters.toast.replay.started", { id: newId }) : t("integration.deadLetters.toast.replay.done"));
     await load();
   } catch (e) {
-    toast.error(e?.message ?? "Could not replay.");
+    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
   } finally {
     busyId.value = null;
   }
@@ -53,10 +54,10 @@ async function onDiscard(dl) {
   busyId.value = dl.id;
   try {
     await discard(dl.id);
-    toast.success("Discarded");
+    toast.success(t("integration.deadLetters.toast.discard.done"));
     await load();
   } catch (e) {
-    toast.error(e?.message ?? "Could not discard.");
+    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
   } finally {
     busyId.value = null;
   }
@@ -80,14 +81,14 @@ function fmt(iso) {
   <div class="space-y-3">
     <div class="flex items-center justify-between">
       <div>
-        <h3 class="text-sm font-semibold">Missed runs</h3>
+        <h3 class="text-sm font-semibold">{{ t("integration.deadLetters.panel.title") }}</h3>
         <p class="mt-0.5 text-sm text-muted-foreground">
-          Triggers that fired while this workflow couldn't run (bundle building or failed). Replay starts a fresh run from the captured payload.
+          {{ t("integration.deadLetters.panel.description") }}
         </p>
       </div>
       <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="loading" @click="() => load()">
         <Loader2 v-if="loading" :size="12" class="animate-spin" />
-        Refresh
+        {{ t("integration.common.action.refresh") }}
       </Button>
     </div>
 
@@ -107,7 +108,7 @@ function fmt(iso) {
       </div>
     </div>
     <div v-else-if="!items.length" class="rounded-lg border border-black/[0.06] bg-white p-6 text-center text-sm text-muted-foreground">
-      No missed runs. Every trigger firing made it into a run.
+      {{ t("integration.deadLetters.state.empty") }}
     </div>
 
     <div v-else class="rounded-lg border border-black/[0.06] bg-white divide-y divide-black/[0.04]">
@@ -118,7 +119,7 @@ function fmt(iso) {
       >
         <Badge variant="outline" :class="['border text-xs font-medium uppercase shrink-0 mt-0.5', statusClass(dl.status)]">{{ dl.status }}</Badge>
         <div class="min-w-0 flex-1">
-          <div class="text-sm break-words">{{ dl.reason || "No reason recorded." }}</div>
+          <div class="text-sm break-words">{{ dl.reason || t("integration.deadLetters.reason.fallback") }}</div>
           <div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground font-mono">
             <span>#{{ dl.id }}</span>
             <span v-if="dl.source">{{ dl.source }}</span>
@@ -130,21 +131,21 @@ function fmt(iso) {
           <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="busyId === dl.id" @click="onReplay(dl)">
             <Loader2 v-if="busyId === dl.id" :size="12" class="animate-spin" />
             <ReplayIcon v-else :size="12" />
-            Replay
+            {{ t("integration.deadLetters.action.replay") }}
           </Button>
           <Button variant="ghost" size="sm" class="h-7 text-sm text-rose-600 hover:bg-rose-500/10" :disabled="busyId === dl.id" @click="onDiscard(dl)">
-            <Trash2 :size="12" />
-            Discard
+            <TrashBin :size="12" />
+            {{ t("integration.deadLetters.action.discard") }}
           </Button>
         </div>
       </div>
     </div>
 
     <div v-if="lastPage > 1" class="flex items-center justify-between text-sm text-muted-foreground">
-      <span class="tabular-nums">Page {{ page }} / {{ lastPage }} · {{ total }} total</span>
+      <span class="tabular-nums">{{ t("integration.deadLetters.pagination.summary", { page, lastPage, total }) }}</span>
       <div class="flex gap-2">
-        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page <= 1 || loading" @click="goPage(page - 1)">← Newer</Button>
-        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page >= lastPage || loading" @click="goPage(page + 1)">Older →</Button>
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page <= 1 || loading" @click="goPage(page - 1)">{{ t("integration.deadLetters.pagination.newer") }}</Button>
+        <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="page >= lastPage || loading" @click="goPage(page + 1)">{{ t("integration.deadLetters.pagination.older") }}</Button>
       </div>
     </div>
   </div>

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

@@ -6,6 +6,7 @@ const props = defineProps({
   inputId: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const t = useIntegrationsT();
 const catalog = typeof useDefinedEvents === "function" ? useDefinedEvents() : { emits: ref([]), listens: ref([]), loading: ref(false), load: async () => {
 } };
 onMounted(() => {
@@ -15,8 +16,8 @@ const focused = ref(false);
 const options = computed(() => {
   const out = /* @__PURE__ */ new Map();
   for (const e of catalog.emits.value) out.set(e.topic, { topic: e.topic, source: e.app });
-  for (const t of catalog.listens.value) {
-    if (!out.has(t)) out.set(t, { topic: t, source: null });
+  for (const t2 of catalog.listens.value) {
+    if (!out.has(t2)) out.set(t2, { topic: t2, source: null });
   }
   return [...out.values()].sort((a, b) => a.topic.localeCompare(b.topic));
 });
@@ -48,7 +49,7 @@ function pick(topic) {
       class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
     >
       <div v-if="catalog.loading.value && !filtered.length" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-        Loading event catalogue…
+        {{ t("integration.canvas.eventCombobox.loading") }}
       </div>
       <button
         v-for="o in filtered"

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

@@ -17,6 +17,7 @@ const props = defineProps({
   label: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const t = useIntegrationsT();
 const text = computed(() => String(props.modelValue ?? ""));
 const OPEN = "${{ ";
 const CLOSE = " }}";
@@ -34,12 +35,12 @@ function pillLabel(expr) {
   }
   if (path[0] === "trigger" && path[1] === "payload") {
     const rest = path.slice(2).join(".");
-    return rest ? "Trigger \xB7 " + rest : "Trigger payload";
+    return rest ? t("integration.nodeConfig.expression.pill.triggerPath", { rest }) : t("integration.nodeConfig.expression.pill.triggerPayload");
   }
-  if (path[0] === "vars") return "Variable \xB7 " + path.slice(1).join(".");
+  if (path[0] === "vars") return t("integration.nodeConfig.expression.pill.variable", { path: path.slice(1).join(".") });
   if (path[0] === "in") {
     const rest = path.slice(1).join(".");
-    return rest ? "Input \xB7 " + rest : "Input payload";
+    return rest ? t("integration.nodeConfig.expression.pill.inputPath", { rest }) : t("integration.nodeConfig.expression.pill.inputPayload");
   }
   return expr;
 }
@@ -104,9 +105,9 @@ onBeforeUnmount(() => {
   if (insertHandler?.value === insertToken) insertHandler.value = null;
   editor.destroy();
 });
-watch(text, (t) => {
-  if (docToText(editor.getJSON()) !== t) {
-    editor.commands.setContent(textToDoc(t));
+watch(text, (t2) => {
+  if (docToText(editor.getJSON()) !== t2) {
+    editor.commands.setContent(textToDoc(t2));
   }
 });
 function insertToken(expr) {
@@ -126,7 +127,7 @@ const sections = computed(() => {
     label: key,
     expr: tok("vars." + key)
   }));
-  if (varItems.length) out.push({ heading: "VARIABLES", items: varItems });
+  if (varItems.length) out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.variables"), items: varItems });
   const upstream = props.upstreamOutputs ?? [];
   const nodeItems = upstream.flatMap((u) => {
     const base = "nodes." + u.nodeId + ".outputs." + u.output;
@@ -139,13 +140,13 @@ const sections = computed(() => {
     }
     return rows;
   });
-  if (nodeItems.length) out.push({ heading: "NODE OUTPUTS", items: nodeItems });
+  if (nodeItems.length) out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.nodeOutputs"), items: nodeItems });
   const primary = upstream[0];
-  const inItems = [{ label: "input payload", expr: tok("in") }];
+  const inItems = [{ label: t("integration.nodeConfig.expression.suggestion.inputPayload"), expr: tok("in") }];
   for (const f of primary?.fields ?? []) {
     inItems.push({ label: "input." + f, expr: tok("in." + f) });
   }
-  out.push({ heading: "INPUT", items: inItems });
+  out.push({ heading: t("integration.nodeConfig.expression.suggestion.heading.input"), items: inItems });
   return out;
 });
 const hasSuggestions = computed(() => sections.value.some((s) => s.items.length > 0));
@@ -201,7 +202,7 @@ function insert(expr) {
       </div>
       <button
         type="button"
-        title="Insert expression"
+        :title="t('integration.nodeConfig.expression.insertTitle')"
         class="flex h-8 shrink-0 items-center rounded-md border border-black/[0.08] bg-white px-1.5 font-mono text-sm text-muted-foreground transition hover:text-foreground hover:bg-muted/30"
         :class="open ? 'ring-2 ring-emerald-500/40' : ''"
         @mousedown.prevent="toggle"
@@ -213,7 +214,7 @@ function insert(expr) {
     <p
       v-if="preview"
       class="mt-1 flex min-w-0 items-baseline gap-1 text-[11px]"
-      :title="preview.misses ? 'Parts of this expression have no sample data yet' : preview.resolved"
+      :title="preview.misses ? t('integration.nodeConfig.expression.preview.missTitle') : preview.resolved"
     >
       <span class="shrink-0 text-muted-foreground">→</span>
       <span class="min-w-0 truncate font-mono" :class="preview.misses ? 'text-amber-600' : 'text-emerald-700'">{{ preview.resolved }}</span>
@@ -226,15 +227,15 @@ function insert(expr) {
       <div class="shrink-0 border-b border-black/[0.06] p-1">
         <input
           v-model="query"
-          aria-label="Filter available data"
-          placeholder="Filter…"
+          :aria-label="t('integration.nodeConfig.expression.picker.filterAria')"
+          :placeholder="t('integration.nodeConfig.expression.picker.filterPlaceholder')"
           class="w-full rounded px-1.5 py-1 text-sm outline-none placeholder:text-muted-foreground/60 focus:ring-2 focus:ring-primary/40"
           @mousedown.stop
         >
       </div>
       <div class="min-h-0 flex-1 overflow-y-auto py-1">
         <p v-if="!filteredSections.length" class="px-2 py-1.5 text-muted-foreground">
-          Nothing matches “{{ query }}”.
+          {{ t("integration.nodeConfig.expression.picker.empty", { query }) }}
         </p>
         <template v-for="section in filteredSections" :key="section.heading">
           <div class="px-2 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">

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

@@ -2,7 +2,8 @@
 import { computed, nextTick, ref } from "vue";
 import { Handle, Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
-import { ChevronsDownUp, ChevronsUpDown, Trash2, Ungroup } from "lucide-vue-next";
+import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
+import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { resolveDisplayName } from "../../utils/localize";
 const props = defineProps({
   id: { type: String, required: true },
@@ -10,22 +11,28 @@ const props = defineProps({
   selected: { type: Boolean, required: false }
 });
 defineEmits(["updateNodeInternals"]);
+const t = useIntegrationsT();
 const GROUP_COLORS = [
-  { name: "Amber", bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
-  { name: "Orange", bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
-  { name: "Rose", bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
-  { name: "Green", bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
-  { name: "Blue", bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
-  { name: "Violet", bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
-  { name: "Gray", bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
+  { nameKey: "integration.canvas.color.amber", bg: "rgba(254,243,199,0.45)", border: "#fcd34d", chip: "#f59e0b" },
+  { nameKey: "integration.canvas.color.orange", bg: "rgba(255,237,213,0.45)", border: "#fdba74", chip: "#f97316" },
+  { nameKey: "integration.canvas.color.rose", bg: "rgba(255,228,230,0.45)", border: "#fda4af", chip: "#f43f5e" },
+  { nameKey: "integration.canvas.color.green", bg: "rgba(220,252,231,0.45)", border: "#86efac", chip: "#10b981" },
+  { nameKey: "integration.canvas.color.blue", bg: "rgba(219,234,254,0.45)", border: "#93c5fd", chip: "#3b82f6" },
+  { nameKey: "integration.canvas.color.violet", bg: "rgba(237,233,254,0.45)", border: "#c4b5fd", chip: "#8b5cf6" },
+  { nameKey: "integration.canvas.color.gray", bg: "rgba(245,245,244,0.6)", border: "#d6d3d1", chip: "#78716c" }
 ];
 const color = computed(() => GROUP_COLORS[props.data.group.color ?? 4] ?? GROUP_COLORS[4]);
-const label = computed(() => resolveDisplayName(props.data.group.label) || "Group");
+const label = computed(() => resolveDisplayName(props.data.group.label) || t("integration.canvas.group.defaultLabel"));
 const collapsed = computed(() => props.data.group.collapsed === true);
 const editable = computed(() => !!props.data.actions);
 const editing = ref(false);
 const draft = ref("");
 const inputEl = ref(null);
+function onLabelDoubleClick(event) {
+  if (!editable.value) return;
+  event.stopPropagation();
+  startRename();
+}
 function startRename() {
   if (!editable.value) return;
   draft.value = label.value;
@@ -51,7 +58,7 @@ function onHoverLeave() {
   }, 250);
 }
 const toolbarVisible = computed(() => editable.value && !editing.value && (hovered.value || !!props.selected));
-const memberCountText = computed(() => `${props.data.memberCount} node${props.data.memberCount === 1 ? "" : "s"}`);
+const memberCountText = computed(() => t("integration.canvas.group.memberCount", props.data.memberCount));
 const flow = useVueFlow();
 const resizing = ref(false);
 const liveW = ref(0);
@@ -96,15 +103,15 @@ function onResizeEnd() {
         class="size-4.5 rounded-full border transition hover:scale-110"
         :class="(data.group.color ?? 4) === i ? 'ring-2 ring-black/25 ring-offset-1' : ''"
         :style="{ backgroundColor: c.chip, borderColor: c.border, width: '16px', height: '16px' }"
-        :title="c.name"
-        :aria-label="c.name"
+        :title="t(c.nameKey)"
+        :aria-label="t(c.nameKey)"
         @click="data.actions?.setColor(i)"
       />
       <div class="mx-0.5 h-4 w-px bg-black/10" />
       <button
         type="button"
         class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        :title="collapsed ? 'Expand group' : 'Collapse group'"
+        :title="collapsed ? t('integration.canvas.group.action.expand') : t('integration.canvas.group.action.collapse')"
         @click="data.actions?.toggleCollapse()"
       >
         <component :is="collapsed ? ChevronsUpDown : ChevronsDownUp" :size="13" />
@@ -112,7 +119,7 @@ function onResizeEnd() {
       <button
         type="button"
         class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-        title="Ungroup (keep the nodes)"
+        :title="t('integration.canvas.group.action.ungroup')"
         @click="data.actions?.ungroup()"
       >
         <Ungroup :size="13" />
@@ -120,10 +127,10 @@ function onResizeEnd() {
       <button
         type="button"
         class="flex size-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-rose-50 hover:text-rose-600"
-        title="Remove group frame"
+        :title="t('integration.canvas.group.action.removeFrame')"
         @click="data.actions?.ungroup()"
       >
-        <Trash2 :size="13" />
+        <TrashBin :size="13" />
       </button>
     </div>
   </NodeToolbar>
@@ -136,6 +143,9 @@ function onResizeEnd() {
       :position="Position.Top"
       class="!size-3 !rounded-full !border-2 !border-white !bg-slate-500 !shadow-sm"
     />
+    <!-- The collapsed card stops its own double-click unconditionally, which is
+         safe: both read-only panels build every frame with `collapsed: false`, so
+         this surface is the editor's alone. -->
     <div
       class="w-[220px] rounded-lg border-2 bg-white transition-all duration-150"
       :style="{ borderColor: color.border }"
@@ -183,7 +193,7 @@ function onResizeEnd() {
         v-if="editing"
         ref="inputEl"
         v-model="draft"
-        aria-label="Group name"
+        :aria-label="t('integration.canvas.group.input.nameAria')"
         class="nodrag w-40 rounded border border-black/[0.1] bg-white px-1 py-0.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-primary/40"
         @blur="commitRename"
         @keydown.enter.prevent="commitRename"
@@ -194,7 +204,7 @@ function onResizeEnd() {
         v-else
         class="select-none text-sm font-semibold"
         :style="{ color: color.chip }"
-        @dblclick.stop="startRename"
+        @dblclick="onLabelDoubleClick"
       >
         {{ label }}
       </span>
@@ -206,7 +216,7 @@ function onResizeEnd() {
       v-if="editable"
       class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
       :style="{ color: color.chip }"
-      title="Resize group"
+      :title="t('integration.canvas.group.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"

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

@@ -1,6 +1,12 @@
 <script setup>
+import { nextTick, onMounted, ref } from "vue";
 import Sidebar from "./Sidebar.vue";
+const t = useIntegrationsT();
 const { focused } = useIntegrationsFocus();
+const animate = ref(false);
+onMounted(() => nextTick(() => {
+  animate.value = true;
+}));
 </script>
 
 <template>
@@ -10,11 +16,30 @@ const { focused } = useIntegrationsFocus();
       href="#integrations-main"
       class="sr-only focus:not-sr-only focus:absolute focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-white focus:px-3 focus:py-1.5 focus:text-sm focus:font-medium focus:ring-2 focus:ring-primary/40"
     >
-      Skip to content
+      {{ t("integration.shell.action.skipToContent") }}
     </a>
+    <!-- `inert` + `aria-hidden` are what make the fold real. The inner wrapper
+         below keeps its own `w-64` so the slide-out animates, so a folded rail
+         is merely clipped by `overflow-hidden`: its links keep their size and
+         stay focusable at a negative x, and a keyboard walks into a rail nobody
+         can see (PO-273). `display: none` would fix that too and take the
+         animation with it.
+
+         Both attributes are written to be *absent* rather than false when the
+         rail stands: `inert` is presence-based, so a renderer that emitted
+         `inert="false"` as an attribute would hold the standing rail back
+         instead. That the standing rail really does take focus is asserted in
+         its own right — specs/studio-navigation.md AC-1 is the control for AC-5.
+
+         The id is how a test reaches the rail while it is folded: out of the
+         accessibility tree, it can no longer be addressed by its role, and
+         `nav` alone would catch any navigation the page grows later. -->
     <div
-      class="shrink-0 overflow-hidden transition-[width] duration-200 ease-out border-r border-black/[0.06] bg-white"
-      :class="focused ? 'w-0 !border-r-0' : 'w-64'"
+      id="integrations-nav"
+      class="shrink-0 overflow-hidden border-r border-black/[0.06] bg-white"
+      :class="[focused ? 'w-0 !border-r-0' : 'w-64', animate ? 'transition-[width] duration-200 ease-out' : '']"
+      :inert="focused || void 0"
+      :aria-hidden="focused ? 'true' : void 0"
     >
       <div class="h-full w-64 overflow-y-auto">
         <Sidebar />

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

@@ -11,6 +11,7 @@ const props = defineProps({
   modelValue: { type: null, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
+const t = useIntegrationsT();
 const search = ref("");
 const focused = ref(false);
 const q = useNodeConfigResolve({
@@ -78,25 +79,25 @@ function toggleMulti(optValue) {
     <!-- gated: required dependencies still unset -->
     <template v-if="q.gated.value">
       <div :class="disabledControlClass">—</div>
-      <p class="mt-1 text-sm text-amber-600">Set {{ q.unsatisfied.value.join(", ") }} first</p>
+      <p class="mt-1 text-sm text-amber-600">{{ t("integration.nodeConfig.dynamicField.gated", { keys: q.unsatisfied.value.join(", ") }) }}</p>
     </template>
 
     <!-- first load: no data yet -->
     <template v-else-if="q.isFetching.value && options.length === 0">
-      <div :class="disabledControlClass">resolving options…</div>
+      <div :class="disabledControlClass">{{ t("integration.nodeConfig.dynamicField.resolving") }}</div>
     </template>
 
     <!-- error: build/runtime/etc -->
     <template v-else-if="q.error.value">
       <div :class="disabledControlClass">—</div>
       <div class="mt-1 flex items-center gap-2 text-sm text-amber-600">
-        <span>{{ q.error.value.kind === "building" ? "Node bundle still building." : q.error.value.message }}</span>
+        <span>{{ q.error.value.kind === "building" ? t("integration.nodeConfig.resolve.error.building") : q.error.value.message }}</span>
         <button
           type="button"
           class="rounded border border-black/[0.08] px-1.5 py-0.5 text-mono text-muted-foreground transition hover:text-foreground"
           @click="q.refetch()"
         >
-          RETRY
+          {{ t("integration.nodeConfig.resolve.action.retry") }}
         </button>
       </div>
     </template>
@@ -106,13 +107,13 @@ function toggleMulti(optValue) {
       <Input
         v-if="options.length > 10"
         v-model="multiFilter"
-        :aria-label="`Filter the options for ${resolveLocalized(field.label)}`"
-        placeholder="Filter options"
+        :aria-label="t('integration.nodeConfig.dynamicField.multiselect.filterAria', { label: resolveLocalized(field.label) })"
+        :placeholder="t('integration.nodeConfig.dynamicField.multiselect.filterPlaceholder')"
         class="mb-1.5 h-7 bg-white text-sm"
       />
       <div role="group" :aria-label="resolveLocalized(field.label)" class="flex flex-wrap gap-1">
         <span v-if="visibleMultiOptions.length === 0" class="text-sm text-muted-foreground">
-          {{ options.length === 0 ? "no options available" : "no options match the filter" }}
+          {{ options.length === 0 ? t("integration.nodeConfig.dynamicField.empty") : t("integration.nodeConfig.dynamicField.emptyFiltered") }}
         </span>
         <button
           v-for="opt in visibleMultiOptions"
@@ -131,10 +132,10 @@ function toggleMulti(optValue) {
           :key="m"
           class="rounded-md border border-black/[0.08] bg-white px-1.5 py-0.5 text-sm text-muted-foreground opacity-60"
         >
-          {{ m }} (not in list)
+          {{ t("integration.nodeConfig.dynamicField.notInList", { value: m }) }}
         </span>
       </div>
-      <p v-if="q.isFetching.value && q.hasData.value" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+      <p v-if="q.isFetching.value && q.hasData.value" class="mt-1 text-sm text-muted-foreground">{{ t("integration.nodeConfig.dynamicField.reloading") }}</p>
     </template>
 
     <!-- single select: searchable combobox; typing re-resolves with the term -->
@@ -143,7 +144,7 @@ function toggleMulti(optValue) {
         <Input
           :model-value="focused ? search : currentLabel"
           :aria-label="resolveLocalized(field.label)"
-          :placeholder="resolveLocalized(field.placeholder) || 'Pick one'"
+          :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')"
           class="h-8 bg-white pr-7 text-sm"
           @update:model-value="(v) => {
   search = String(v);
@@ -157,7 +158,7 @@ function toggleMulti(optValue) {
           class="absolute left-0 right-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-md border border-black/[0.08] bg-white py-1 shadow-md"
         >
           <div v-if="q.isFetching.value" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? "searching\u2026" : "resolving options\u2026" }}
+            {{ search ? t("integration.nodeConfig.dynamicField.searching") : t("integration.nodeConfig.dynamicField.resolving") }}
           </div>
           <button
             v-for="opt in visibleOptions"
@@ -170,14 +171,14 @@ function toggleMulti(optValue) {
             <span class="min-w-0 truncate">{{ resolveLocalized(opt.label) || String(opt.value) }}</span>
           </button>
           <div v-if="!q.isFetching.value && visibleOptions.length === 0" class="px-2.5 py-1.5 text-sm text-muted-foreground">
-            {{ search ? 'nothing matches "' + search + '"' : "no options available" }}
+            {{ search ? t("integration.nodeConfig.dynamicField.noMatch", { query: search }) : t("integration.nodeConfig.dynamicField.empty") }}
           </div>
         </div>
       </div>
       <p v-if="currentValue !== '' && !currentKnown" class="mt-1 text-sm text-amber-600">
-        current value not in resolved options
+        {{ t("integration.nodeConfig.dynamicField.currentNotResolved") }}
       </p>
-      <p v-if="q.isFetching.value && q.hasData.value && !focused" class="mt-1 text-sm text-muted-foreground">reloading…</p>
+      <p v-if="q.isFetching.value && q.hasData.value && !focused" class="mt-1 text-sm text-muted-foreground">{{ t("integration.nodeConfig.dynamicField.reloading") }}</p>
     </template>
   </div>
 </template>

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

@@ -13,6 +13,7 @@ const props = defineProps({
   depth: { type: Number, required: false }
 });
 const emit = defineEmits(["set"]);
+const t = useIntegrationsT();
 void IntegrationsApiError;
 const MAX_DEPTH = 5;
 const q = useNodeConfigResolve({
@@ -29,17 +30,17 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
   <div>
     <!-- gated: required dependencies still unset -->
     <p v-if="q.gated.value" class="text-sm text-amber-600">
-      Set {{ q.unsatisfied.value.join(", ") }} first
+      {{ t("integration.nodeConfig.dynamicField.gated", { keys: q.unsatisfied.value.join(", ") }) }}
     </p>
 
     <!-- first load: no fields yet -->
     <p v-else-if="q.isFetching.value && !resolvedFields.length" class="text-sm text-muted-foreground">
-      Resolving fields…
+      {{ t("integration.nodeConfig.dynamicSchema.resolving") }}
     </p>
 
     <!-- error: build/runtime/etc -->
     <div v-else-if="q.error.value" class="flex items-center gap-2 text-sm text-amber-600">
-      <span>{{ q.error.value.kind === "building" ? "Node bundle still building." : q.error.value.message }}</span>
+      <span>{{ q.error.value.kind === "building" ? t("integration.nodeConfig.resolve.error.building") : q.error.value.message }}</span>
       <Button
         type="button"
         variant="outline"
@@ -47,13 +48,13 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
         class="h-6 px-1.5 text-mono text-muted-foreground"
         @click="q.refetch()"
       >
-        RETRY
+        {{ t("integration.nodeConfig.resolve.action.retry") }}
       </Button>
     </div>
 
     <!-- empty: resolved but no fields -->
     <p v-else-if="!resolvedFields.length" class="text-sm text-muted-foreground">
-      No fields resolved.
+      {{ t("integration.nodeConfig.dynamicSchema.empty") }}
     </p>
 
     <!-- fieldset: the resolved child fields, rendered into the flat node config -->
@@ -69,12 +70,12 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
       <template v-for="f in resolvedFields" :key="f.key">
         <!-- collision guard: a resolved key that shadows a static config field is skipped -->
         <p v-if="staticKeys.includes(f.key)" class="text-sm text-amber-600">
-          resolved field '{{ f.key }}' collides with a static config field — skipped
+          {{ t("integration.nodeConfig.dynamicSchema.fieldCollision", { key: f.key }) }}
         </p>
 
         <!-- depth cap: don't expand nested dynamic-schema past MAX_DEPTH -->
         <p v-else-if="f.type === 'dynamic-schema' && (depth ?? 0) >= MAX_DEPTH" class="text-sm text-muted-foreground">
-          nested dynamic-schema is not expanded further
+          {{ t("integration.nodeConfig.dynamicSchema.depthCapped") }}
         </p>
 
         <!-- a resolved field, rendered exactly like a static node config field -->
@@ -92,7 +93,7 @@ const resolvedFields = computed(() => q.data.value?.fields ?? []);
       </template>
 
       <p v-if="q.isFetching.value && q.hasData.value" class="text-sm text-muted-foreground">
-        reloading fields…
+        {{ t("integration.nodeConfig.dynamicSchema.reloading") }}
       </p>
     </fieldset>
   </div>