@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -28,13 +28,13 @@ type __VLS_Props = {
     refusedFields?: Record<string, string>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => any;
     update: (next: WorkflowTrigger | WorkflowNode) => any;
+    close: () => any;
     remove: () => any;
     navigate: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
     onUpdate?: ((next: WorkflowTrigger | WorkflowNode) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onRemove?: (() => any) | undefined;
     onNavigate?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Integrations/NodeOutputSchema.d.vue.ts

@@ -3,7 +3,8 @@ import type { PortEntry } from '../../data/nodeInputData.js';
  * The ports a node hands downstream, with their declared fields and whatever
  * sample value is known for each.
  *
- * Rendered from one place — the Output tab (specs/node-inspector.md AC-4). It
+ * Rendered from one place — the Output tab (specs/node-configuration.md AC-4,
+ * and AC-19 for the sentences the publisher wrote about a port and its fields). It
  * keeps its own file for readability rather than for reuse: the schema list is
  * a self-contained tree with its own type glyphs and sample formatting, and
  * inlining it would bury the tab's own markup.

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

@@ -1,9 +1,11 @@
 <script setup>
 import { portDotClass } from "../../data/portTone";
-defineProps({
+import { resolveLocalized } from "../../utils/localize";
+const props = defineProps({
   ports: { type: Array, required: true },
   valueAt: { type: Function, required: true }
 });
+const t = useIntegrationsT();
 const TYPE_GLYPHS = {
   string: { char: "A", cls: "text-sky-600" },
   number: { char: "#", cls: "text-amber-600" },
@@ -15,6 +17,15 @@ const TYPE_GLYPHS = {
 function typeGlyph(dataType) {
   return dataType ? TYPE_GLYPHS[dataType] ?? null : null;
 }
+function portText(p) {
+  return resolveLocalized(p.description);
+}
+function fieldText(f) {
+  return resolveLocalized(f.description);
+}
+function saysNoFields(p) {
+  return !portText(p) || props.valueAt(p.name) !== null;
+}
 </script>
 
 <template>
@@ -24,19 +35,35 @@ function typeGlyph(dataType) {
         <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>
       </div>
-      <div v-if="p.fields.length" class="space-y-0.5">
-        <div v-for="f in p.fields" :key="f.name" class="flex min-w-0 items-baseline gap-1 font-mono text-[11px]">
-          <span v-if="typeGlyph(f.dataType)" class="shrink-0 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span>
-          <span class="shrink-0 text-slate-700">{{ f.name }}</span>
-          <span v-if="valueAt(p.name, f.name) !== null" class="min-w-0 truncate text-slate-400">: {{ valueAt(p.name, f.name) }}</span>
-        </div>
+      <p v-if="portText(p)" class="text-[11px] leading-snug text-muted-foreground">
+        {{ portText(p) }}
+      </p>
+      <!-- Two columns, sized to the widest field rather than split down the
+           middle: `max-content` puts every sentence one gap after the longest
+           name, so short names like `count` do not leave the reader crossing the
+           dialog to find what they mean, and the names still line up with each
+           other. The sample value is capped for the same reason — left free it
+           would widen the column and push the sentences back out. Both cells are
+           always emitted, or a field with nothing to say would slide the next
+           row's name into the sentence column. -->
+      <div v-if="p.fields.length" class="grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-6 gap-y-0.5">
+        <template v-for="f in p.fields" :key="f.name">
+          <div class="flex min-w-0 items-baseline gap-1 font-mono text-[11px]">
+            <span v-if="typeGlyph(f.dataType)" class="shrink-0 font-semibold" :class="typeGlyph(f.dataType).cls">{{ typeGlyph(f.dataType).char }}</span>
+            <span class="shrink-0 text-slate-700">{{ f.name }}</span>
+            <span v-if="valueAt(p.name, f.name) !== null" class="max-w-56 truncate text-slate-400">: {{ valueAt(p.name, f.name) }}</span>
+          </div>
+          <p class="min-w-0 text-[11px] leading-snug text-muted-foreground">
+            {{ fieldText(f) }}
+          </p>
+        </template>
       </div>
-      <p v-else class="text-[11px] leading-snug text-muted-foreground">
-        No declared fields<template v-if="valueAt(p.name) !== null">; sampled: <span class="font-mono">{{ valueAt(p.name) }}</span></template>.
+      <p v-else-if="saysNoFields(p)" class="text-[11px] leading-snug text-muted-foreground">
+        {{ t("integration.nodeInspector.output.schema.noFields") }}<template v-if="valueAt(p.name) !== null">{{ t("integration.nodeInspector.output.schema.sampledSuffix") }} <span class="font-mono">{{ valueAt(p.name) }}</span></template>.
       </p>
     </div>
     <p v-if="!ports.length" class="text-xs leading-snug text-muted-foreground">
-      This node declares no outputs.
+      {{ t("integration.nodeInspector.output.schema.noOutputs") }}
     </p>
   </div>
 </template>

package/dist/runtime/components/Integrations/NodeOutputSchema.vue.d.ts

@@ -3,7 +3,8 @@ import type { PortEntry } from '../../data/nodeInputData.js';
  * The ports a node hands downstream, with their declared fields and whatever
  * sample value is known for each.
  *
- * Rendered from one place — the Output tab (specs/node-inspector.md AC-4). It
+ * Rendered from one place — the Output tab (specs/node-configuration.md AC-4,
+ * and AC-19 for the sentences the publisher wrote about a port and its fields). It
  * keeps its own file for readability rather than for reuse: the schema list is
  * a self-contained tree with its own type glyphs and sample formatting, and
  * inlining it would bury the tab's own markup.

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

@@ -1,18 +1,19 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import { AltArrowLeft as ArrowLeft, Bolt as Zap, Magnifier as Search } from "#solar-icons";
+import { triggerGlyph } from "../../data/triggerGlyphs";
 import * as Lucide from "lucide-vue-next";
 import { INTEGRATION_NODE_CATALOG, NODE_CATEGORIES, TRIGGER_TEMPLATES } from "../../data/integrationNodeCatalog";
-import { nodeIcon } from "../../data/nodeIcons";
 import { resolveLocalized } from "../../utils/localize";
 const { load: loadNodes } = useIntegrationsNodes();
 onMounted(() => {
   void loadNodes();
 });
+const t = useIntegrationsT();
 const emit = defineEmits(["insert"]);
 const search = ref("");
 const searchInput = ref(null);
 defineExpose({ focusSearch: () => searchInput.value?.focus() });
-const iconFor = nodeIcon;
 const CORE_GROUP_BY_CATEGORY = {
   control: "Flow",
   transform: "Data",
@@ -75,11 +76,14 @@ function isIntegration(m) {
 function makeGroup(label) {
   return { label, children: /* @__PURE__ */ new Map(), leaves: [], count: 0 };
 }
+function isExecutable(m) {
+  return m.__hasBundle !== false;
+}
 const latestManifests = computed(() => {
   const seen = /* @__PURE__ */ new Set();
   const out = [];
   for (const m of INTEGRATION_NODE_CATALOG) {
-    if (seen.has(m.slug)) continue;
+    if (seen.has(m.slug) || !isExecutable(m)) continue;
     seen.add(m.slug);
     out.push(m);
   }
@@ -88,6 +92,7 @@ const latestManifests = computed(() => {
 const versionsBySlug = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const m of INTEGRATION_NODE_CATALOG) {
+    if (!isExecutable(m)) continue;
     const list = map.get(m.slug);
     if (list) list.push(m);
     else map.set(m.slug, [m]);
@@ -160,8 +165,8 @@ const currentGroup = computed(() => {
   return cursor ?? null;
 });
 const levelTitle = computed(() => {
-  if (triggersLevel.value) return "Triggers";
-  return currentGroup.value?.label ?? "Add node";
+  if (triggersLevel.value) return t("integration.canvas.palette.group.triggers");
+  return currentGroup.value?.label ?? t("integration.canvas.palette.title.addNode");
 });
 function pushPath(path) {
   direction.value = "push";
@@ -194,7 +199,7 @@ const searchHits = computed(() => {
 const matchedTriggers = computed(() => {
   const q = search.value.trim().toLowerCase();
   if (!q || currentGroup.value) return [];
-  const matches = (t) => resolveLocalized(t.name).toLowerCase().includes(q) || t.type.includes(q) || resolveLocalized(t.description).toLowerCase().includes(q);
+  const matches = (tpl) => resolveLocalized(tpl.name).toLowerCase().includes(q) || tpl.type.includes(q) || resolveLocalized(tpl.description).toLowerCase().includes(q);
   return TRIGGER_TEMPLATES.filter(matches);
 });
 const nodeDrag = useNodeDrag();
@@ -278,23 +283,23 @@ const searching = computed(() => search.value.trim().length > 0);
         <button
           type="button"
           class="flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted/50 hover:text-foreground"
-          title="Back"
+          :title="t('integration.canvas.palette.action.back')"
           @click="popLevel"
         >
-          <Lucide.ArrowLeft :size="14" />
+          <ArrowLeft :size="14" />
         </button>
         <div class="min-w-0 flex-1 truncate text-mono text-muted-foreground">
           {{ levelTitle }}
         </div>
       </div>
       <div class="relative">
-        <Lucide.Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
         <input
           ref="searchInput"
           v-model="search"
           type="text"
-          :aria-label="stack.length ? `Search in ${levelTitle}` : 'Search all nodes'"
-          :placeholder="stack.length ? `Search in ${levelTitle}\u2026` : 'Search all nodes\u2026'"
+          :aria-label="stack.length ? t('integration.canvas.palette.search.ariaGroup', { group: levelTitle }) : t('integration.canvas.palette.search.ariaAll')"
+          :placeholder="stack.length ? t('integration.canvas.palette.search.placeholderGroup', { group: levelTitle }) : t('integration.canvas.palette.search.placeholderAll')"
           class="h-7 w-full rounded-md border border-black/[0.08] bg-white pl-7 pr-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
           @keydown.esc="search ? search = '' : stack.length && popLevel()"
         >
@@ -321,28 +326,28 @@ const searching = computed(() => search.value.trim().length > 0);
           <!-- ── Search results (flat, path as subtitle) ─────────────────── -->
           <template v-if="searching">
             <div v-if="matchedTriggers.length" class="mb-1">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Triggers</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.triggers") }}</div>
               <div
-                v-for="t in matchedTriggers"
-                :key="t.id"
+                v-for="tpl in matchedTriggers"
+                :key="tpl.id"
                 class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
                 draggable="true"
-                @dragstart="onTriggerDragStart(t, $event)"
+                @dragstart="onTriggerDragStart(tpl, $event)"
                 @dragend="onDragEnd"
-                @click="insertTrigger(t)"
+                @click="insertTrigger(tpl)"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                  <component :is="iconFor(t.icon)" :size="13" />
+                  <component :is="triggerGlyph(tpl.type)" :size="13" />
                 </span>
                 <div class="min-w-0">
-                  <div class="truncate text-sm font-medium">{{ resolveLocalized(t.name) }}</div>
-                  <div class="text-xs leading-snug text-muted-foreground">Trigger</div>
+                  <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
+                  <div class="text-xs leading-snug text-muted-foreground">{{ t("integration.canvas.badge.trigger") }}</div>
                 </div>
               </div>
             </div>
 
             <p v-if="!searchHits.length && !matchedTriggers.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
-              Nothing matches “{{ search }}”.
+              {{ t("integration.canvas.palette.search.empty", { query: search }) }}
             </p>
             <div
               v-for="hit in searchHits"
@@ -364,7 +369,7 @@ const searching = computed(() => search.value.trim().length > 0);
                     v-if="versionsOf(hit.manifest.slug).length > 1"
                     :value="effVersion(hit.manifest)"
                     class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
-                    :aria-label="`Version to insert for ${resolveLocalized(hit.manifest.name)}`"
+                    :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(hit.manifest.name) })"
                     @click.stop
                     @mousedown.stop
                     @change.stop="setSelectedVersion(hit.manifest.slug, $event.target.value)"
@@ -386,21 +391,21 @@ const searching = computed(() => search.value.trim().length > 0);
           <!-- ── Triggers level ──────────────────────────────────────────── -->
           <template v-else-if="triggersLevel">
             <div
-              v-for="t in TRIGGER_TEMPLATES"
-              :key="t.id"
+              v-for="tpl in TRIGGER_TEMPLATES"
+              :key="tpl.id"
               class="group flex cursor-grab items-center gap-2 rounded-md border border-transparent px-2 py-1.5 transition hover:border-black/[0.08] hover:bg-muted/40 active:cursor-grabbing"
               draggable="true"
-              :title="resolveLocalized(t.name)"
-              @dragstart="onTriggerDragStart(t, $event)"
+              :title="resolveLocalized(tpl.name)"
+              @dragstart="onTriggerDragStart(tpl, $event)"
                 @dragend="onDragEnd"
-              @click="insertTrigger(t)"
+              @click="insertTrigger(tpl)"
             >
               <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600">
-                <component :is="iconFor(t.icon)" :size="13" />
+                <component :is="triggerGlyph(tpl.type)" :size="13" />
               </span>
               <div class="min-w-0">
-                <div class="truncate text-sm font-medium">{{ resolveLocalized(t.name) }}</div>
-                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(t.description) }}</div>
+                <div class="truncate text-sm font-medium">{{ resolveLocalized(tpl.name) }}</div>
+                <div class="text-xs leading-snug text-muted-foreground">{{ resolveLocalized(tpl.description) }}</div>
               </div>
             </div>
           </template>
@@ -409,16 +414,16 @@ const searching = computed(() => search.value.trim().length > 0);
           <template v-else-if="!currentGroup">
             <!-- Triggers group on top -->
             <div v-if="tree.core.children.size">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Core</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.core") }}</div>
               <button
                 type="button"
                 class="flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition hover:border-black/[0.08] hover:bg-muted/40"
                 @click="pushPath(['__triggers'])"
               >
                 <span class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-100 text-emerald-600/80">
-                  <Lucide.Zap :size="13" />
+                  <Zap :size="13" />
                 </span>
-                <span class="min-w-0 flex-1 truncate text-sm font-medium">Triggers</span>
+                <span class="min-w-0 flex-1 truncate text-sm font-medium">{{ t("integration.canvas.palette.group.triggers") }}</span>
                 <span class="text-sm tabular-nums text-muted-foreground">{{ TRIGGER_TEMPLATES.length }}</span>
                 <Lucide.ChevronRight :size="13" class="text-muted-foreground" />
               </button>
@@ -439,7 +444,7 @@ const searching = computed(() => search.value.trim().length > 0);
             </div>
 
             <div v-if="tree.apps.children.size" class="mt-2">
-              <div class="px-2 py-1 text-mono text-muted-foreground">Integrations</div>
+              <div class="px-2 py-1 text-mono text-muted-foreground">{{ t("integration.canvas.palette.group.integrations") }}</div>
               <button
                 v-for="[label, group] in appRows"
                 :key="`app-${label}`"
@@ -499,7 +504,7 @@ const searching = computed(() => search.value.trim().length > 0);
                     v-if="versionsOf(m.slug).length > 1"
                     :value="effVersion(m)"
                     class="shrink-0 rounded border border-black/10 bg-white px-1 py-px text-xs tabular-nums text-muted-foreground"
-                    :aria-label="`Version to insert for ${resolveLocalized(m.name)}`"
+                    :aria-label="t('integration.canvas.palette.version.selectAria', { name: resolveLocalized(m.name) })"
                     @click.stop
                     @mousedown.stop
                     @change.stop="setSelectedVersion(m.slug, $event.target.value)"
@@ -521,7 +526,7 @@ const searching = computed(() => search.value.trim().length > 0);
     </div>
 
     <div class="border-t border-black/[0.06] px-3 py-2 text-sm text-muted-foreground">
-      Drag onto the canvas — or click to insert.
+      {{ t("integration.canvas.palette.footer.hint") }}
     </div>
   </aside>
 </template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import { AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   Button,
   Input,
@@ -15,27 +15,28 @@ const props = defineProps({
   modelValue: { type: null, required: true }
 });
 const emit = defineEmits(["update:modelValue"]);
-const METHODS = [
-  { value: "equal", label: "equals", attribute: true, values: "list" },
-  { value: "notEqual", label: "does not equal", attribute: true, values: "list" },
-  { value: "contains", label: "contains", attribute: true, values: "list" },
-  { value: "search", label: "search", attribute: true, values: "single" },
-  { value: "startsWith", label: "starts with", attribute: true, values: "single" },
-  { value: "endsWith", label: "ends with", attribute: true, values: "single" },
-  { value: "lessThan", label: "less than", attribute: true, values: "single" },
-  { value: "lessThanEqual", label: "less than or equal", attribute: true, values: "single" },
-  { value: "greaterThan", label: "greater than", attribute: true, values: "single" },
-  { value: "greaterThanEqual", label: "greater than or equal", attribute: true, values: "single" },
-  { value: "between", label: "between", attribute: true, values: "list" },
-  { value: "isNull", label: "is empty", attribute: true, values: "none" },
-  { value: "isNotNull", label: "is not empty", attribute: true, values: "none" },
-  { value: "orderAsc", label: "order ascending", attribute: true, values: "none" },
-  { value: "orderDesc", label: "order descending", attribute: true, values: "none" },
-  { value: "limit", label: "limit", attribute: false, values: "single" },
-  { value: "offset", label: "offset", attribute: false, values: "single" }
-];
+const t = useIntegrationsT();
+const METHODS = computed(() => [
+  { value: "equal", label: t("integration.nodeConfig.queryBuilder.method.equal"), attribute: true, values: "list" },
+  { value: "notEqual", label: t("integration.nodeConfig.queryBuilder.method.notEqual"), attribute: true, values: "list" },
+  { value: "contains", label: t("integration.nodeConfig.queryBuilder.method.contains"), attribute: true, values: "list" },
+  { value: "search", label: t("integration.nodeConfig.queryBuilder.method.search"), attribute: true, values: "single" },
+  { value: "startsWith", label: t("integration.nodeConfig.queryBuilder.method.startsWith"), attribute: true, values: "single" },
+  { value: "endsWith", label: t("integration.nodeConfig.queryBuilder.method.endsWith"), attribute: true, values: "single" },
+  { value: "lessThan", label: t("integration.nodeConfig.queryBuilder.method.lessThan"), attribute: true, values: "single" },
+  { value: "lessThanEqual", label: t("integration.nodeConfig.queryBuilder.method.lessThanEqual"), attribute: true, values: "single" },
+  { value: "greaterThan", label: t("integration.nodeConfig.queryBuilder.method.greaterThan"), attribute: true, values: "single" },
+  { value: "greaterThanEqual", label: t("integration.nodeConfig.queryBuilder.method.greaterThanEqual"), attribute: true, values: "single" },
+  { value: "between", label: t("integration.nodeConfig.queryBuilder.method.between"), attribute: true, values: "list" },
+  { value: "isNull", label: t("integration.nodeConfig.queryBuilder.method.isNull"), attribute: true, values: "none" },
+  { value: "isNotNull", label: t("integration.nodeConfig.queryBuilder.method.isNotNull"), attribute: true, values: "none" },
+  { value: "orderAsc", label: t("integration.nodeConfig.queryBuilder.method.orderAsc"), attribute: true, values: "none" },
+  { value: "orderDesc", label: t("integration.nodeConfig.queryBuilder.method.orderDesc"), attribute: true, values: "none" },
+  { value: "limit", label: t("integration.nodeConfig.queryBuilder.method.limit"), attribute: false, values: "single" },
+  { value: "offset", label: t("integration.nodeConfig.queryBuilder.method.offset"), attribute: false, values: "single" }
+]);
 function methodMeta(method) {
-  return METHODS.find((m) => m.value === method) ?? null;
+  return METHODS.value.find((m) => m.value === method) ?? null;
 }
 function formatValue(v) {
   return typeof v === "string" ? v : JSON.stringify(v);
@@ -57,16 +58,16 @@ function parseRow(str) {
   return { kind: "raw", text: str };
 }
 function coerceValue(part) {
-  const t = part.trim();
-  if (/^-?\d+(\.\d+)?$/.test(t)) return Number(t);
-  if (t === "true") return true;
-  if (t === "false") return false;
-  return t;
+  const t2 = part.trim();
+  if (/^-?\d+(\.\d+)?$/.test(t2)) return Number(t2);
+  if (t2 === "true") return true;
+  if (t2 === "false") return false;
+  return t2;
 }
 function rowToString(row) {
   if (row.kind === "raw") {
-    const t = row.text.trim();
-    return t === "" ? null : t;
+    const t2 = row.text.trim();
+    return t2 === "" ? null : t2;
   }
   const meta = methodMeta(row.method);
   if (!meta) return null;
@@ -131,13 +132,13 @@ function writeJson(text) {
   try {
     const parsed = JSON.parse(text);
     if (!Array.isArray(parsed)) {
-      jsonError.value = "Must be a JSON array of query strings.";
+      jsonError.value = t("integration.nodeConfig.queryBuilder.json.notArray");
       return;
     }
     jsonError.value = null;
     emit("update:modelValue", parsed.map(String));
   } catch {
-    jsonError.value = "Not valid JSON yet \u2014 the value is kept once it parses.";
+    jsonError.value = t("integration.nodeConfig.json.invalid");
   }
 }
 const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? methodMeta(r.method) : null));
@@ -153,7 +154,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           :class="mode === 'builder' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
           @click="mode = 'builder'"
         >
-          Builder
+          {{ t("integration.nodeConfig.queryBuilder.mode.builder") }}
         </button>
         <button
           type="button"
@@ -161,7 +162,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           :class="mode === 'json' ? 'bg-slate-100 text-foreground' : 'text-muted-foreground hover:text-foreground'"
           @click="mode = 'json'"
         >
-          JSON
+          {{ t("integration.nodeConfig.object.toggle.json") }}
         </button>
       </div>
     </div>
@@ -175,7 +176,7 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           >
             <!-- A repeating row has no room for visible labels, so each
                  control names itself and says which row it is. -->
-            <SelectTrigger :aria-label="`Filter ${idx + 1} \u2014 comparison`" class="h-7 w-40 shrink-0 bg-white text-sm">
+            <SelectTrigger :aria-label="t('integration.nodeConfig.queryBuilder.row.comparisonAria', { n: idx + 1 })" class="h-7 w-40 shrink-0 bg-white text-sm">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -186,17 +187,17 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
           </Select>
           <Input
             v-if="rowMeta[idx]?.attribute"
-            :aria-label="`Filter ${idx + 1} \u2014 field`"
+            :aria-label="t('integration.nodeConfig.queryBuilder.row.fieldAria', { n: idx + 1 })"
             :model-value="row.attribute"
-            placeholder="field"
+            :placeholder="t('integration.nodeConfig.queryBuilder.row.fieldPlaceholder')"
             class="h-7 w-36 shrink-0 bg-white font-mono text-sm"
             @update:model-value="(v) => setRow(idx, { attribute: String(v) })"
           />
           <Input
             v-if="rowMeta[idx]?.values !== 'none'"
-            :aria-label="`Filter ${idx + 1} \u2014 value`"
+            :aria-label="t('integration.nodeConfig.queryBuilder.row.valueAria', { n: idx + 1 })"
             :model-value="row.values"
-            :placeholder="rowMeta[idx]?.values === 'list' ? 'value, value, \u2026' : 'value'"
+            :placeholder="rowMeta[idx]?.values === 'list' ? t('integration.nodeConfig.queryBuilder.row.valueListPlaceholder') : t('integration.nodeConfig.queryBuilder.row.valuePlaceholder')"
             class="h-7 min-w-0 flex-1 bg-white text-sm"
             @update:model-value="(v) => setRow(idx, { values: String(v) })"
           />
@@ -204,19 +205,19 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         </template>
         <Input
           v-else
-          :aria-label="`Filter ${idx + 1} \u2014 raw text`"
+          :aria-label="t('integration.nodeConfig.queryBuilder.row.rawTextAria', { n: idx + 1 })"
           :model-value="row.text"
           class="h-7 min-w-0 flex-1 bg-white font-mono text-sm"
-          title="This entry is not in the builder vocabulary; edit it as text or in the JSON view."
+          :title="t('integration.nodeConfig.queryBuilder.row.rawTextTitle')"
           @update:model-value="(v) => setRow(idx, { text: String(v) })"
         />
         <button
           type="button"
-          :aria-label="`Remove filter ${idx + 1}`"
+          :aria-label="t('integration.nodeConfig.queryBuilder.row.removeAria', { n: idx + 1 })"
           class="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition hover:text-rose-600"
           @click="removeRow(idx)"
         >
-          <Trash2 :size="11" />
+          <TrashBin :size="11" />
         </button>
       </div>
       <Button
@@ -227,13 +228,13 @@ const rowMeta = computed(() => rows.value.map((r) => r.kind === "query" ? method
         @click="addRow"
       >
         <Plus :size="11" />
-        Add filter
+        {{ t("integration.nodeConfig.queryBuilder.action.addFilter") }}
       </Button>
     </template>
 
     <template v-else>
       <Textarea
-        aria-label="Filters as JSON"
+        :aria-label="t('integration.nodeConfig.queryBuilder.jsonAria')"
         :model-value="jsonDraft"
         :rows="6"
         spellcheck="false"

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

@@ -14,6 +14,7 @@ const props = defineProps({
   run: { type: Object, required: true }
 });
 const emit = defineEmits(["changed"]);
+const t = useIntegrationsT();
 const router = useRouter();
 const { cancelRun, terminateRun, retryRun, resumeRun } = useIntegrationsRuns();
 function viewDetails() {
@@ -26,8 +27,31 @@ const isActive = computed(() => props.run.status === "running" || props.run.stat
 const isTerminal = computed(() => ["succeeded", "failed", "cancelled"].includes(props.run.status));
 const canResume = computed(() => props.run.status === "failed");
 const hasAny = computed(() => isActive.value || isTerminal.value);
-const LABEL = { cancel: "Cancel", terminate: "Terminate", retry: "Retry", resume: "Resume" };
 const busy = ref(false);
+function actionLabel(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.menu.cancel");
+    case "terminate":
+      return t("integration.runs.menu.terminate");
+    case "retry":
+      return t("integration.runs.menu.retry");
+    case "resume":
+      return t("integration.runs.menu.resume");
+  }
+}
+function actionErrorFallback(a) {
+  switch (a) {
+    case "cancel":
+      return t("integration.runs.error.cancel");
+    case "terminate":
+      return t("integration.runs.error.terminate");
+    case "retry":
+      return t("integration.runs.error.retry");
+    case "resume":
+      return t("integration.runs.error.resume");
+  }
+}
 async function runAction(a) {
   if (busy.value) return;
   busy.value = true;
@@ -49,18 +73,18 @@ async function runAction(a) {
     }
     const newId = res && typeof res === "object" && "id" in res ? String(res.id) : null;
     toast.success(
-      (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? `Started run #${newId}` : `${LABEL[a]} requested`
+      (a === "retry" || a === "resume") && newId && newId !== String(props.run.id) ? t("integration.runs.toast.action.started", { id: newId }) : t("integration.runs.toast.action.requested", { action: actionLabel(a) })
     );
     emit("changed");
   } catch (e) {
-    toast.error(e?.message ?? `Could not ${LABEL[a].toLowerCase()} the run.`);
+    toast.error(e?.message ?? actionErrorFallback(a));
   } finally {
     busy.value = false;
   }
 }
 function confirmTerminate() {
-  toast(`Terminate run #${props.run.id}?`, {
-    action: { label: "Terminate", onClick: () => void runAction("terminate") }
+  toast(t("integration.runs.toast.terminate.confirm", { id: props.run.id }), {
+    action: { label: actionLabel("terminate"), onClick: () => void runAction("terminate") }
   });
 }
 </script>
@@ -70,19 +94,19 @@ function confirmTerminate() {
     <DropdownMenuTrigger as-child>
       <!-- Icon-only, so it needs a name of its own — the run id is the only
            thing that tells two rows' menus apart. -->
-      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" :aria-label="`Actions for run #${run.id}`" @click.stop>
+      <Button variant="ghost" size="icon" class="size-7" :disabled="busy" :aria-label="t('integration.runs.menu.aria.actions', { id: run.id })" @click.stop>
         <MoreHorizontal :size="16" />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-40" @click.stop>
-      <DropdownMenuItem @select="viewDetails">View details</DropdownMenuItem>
-      <DropdownMenuItem @select="viewReplay">Replay</DropdownMenuItem>
+      <DropdownMenuItem @select="viewDetails">{{ t("integration.runs.menu.viewDetails") }}</DropdownMenuItem>
+      <DropdownMenuItem @select="viewReplay">{{ t("integration.runs.menu.replay") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="hasAny" />
-      <DropdownMenuItem v-if="isActive" @select="runAction('cancel')">Cancel run</DropdownMenuItem>
-      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmTerminate">Terminate</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" @select="runAction('cancel')">{{ actionLabel("cancel") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isActive" class="text-rose-600" @select="confirmTerminate">{{ actionLabel("terminate") }}</DropdownMenuItem>
       <DropdownMenuSeparator v-if="isActive && (canResume || isTerminal)" />
-      <DropdownMenuItem v-if="canResume" @select="runAction('resume')">Resume</DropdownMenuItem>
-      <DropdownMenuItem v-if="isTerminal" @select="runAction('retry')">Retry</DropdownMenuItem>
+      <DropdownMenuItem v-if="canResume" @select="runAction('resume')">{{ actionLabel("resume") }}</DropdownMenuItem>
+      <DropdownMenuItem v-if="isTerminal" @select="runAction('retry')">{{ actionLabel("retry") }}</DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
 </template>