@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -29,18 +29,19 @@ const props = defineProps({
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:active", "apply"]);
+const t = useIntegrationsT();
 const kind = computed(() => props.type ? REVENEXX_SOURCE_KIND_BY_SLUG[props.type.slug] ?? null : null);
 const uid = useId();
-const SWITCH_LABEL = {
-  sftp: "Use revenexx SFTP Servers",
-  smtp: "Use revenexx Mail Servers",
-  api: "Use revenexx API Keys"
-};
-const NEW_LABEL = {
-  sftp: "New SFTP account",
-  smtp: "New mail credential",
-  api: "New API key"
-};
+const SWITCH_LABEL = computed(() => ({
+  sftp: t("integration.credentials.revenexxSource.switch.sftp"),
+  smtp: t("integration.credentials.revenexxSource.switch.smtp"),
+  api: t("integration.credentials.revenexxSource.switch.api")
+}));
+const NEW_LABEL = computed(() => ({
+  sftp: t("integration.credentials.revenexxSource.new.sftp"),
+  smtp: t("integration.credentials.revenexxSource.new.smtp"),
+  api: t("integration.credentials.revenexxSource.new.api")
+}));
 const sources = cockpitSources();
 const available = sources !== null;
 const tenants = computed(() => sources?.tenants.tenants.value ?? []);
@@ -74,7 +75,7 @@ watch(kind, () => {
 });
 const sftpOptions = computed(() => (sftp?.accounts.value ?? []).filter((a) => (a.is_active || a.status === "active") && a.login_username).map((a) => ({ value: String(a.id), label: a.login_username })));
 const marketOptions = computed(() => [
-  { code: GLOBAL_MARKET_CODE, label: "Global (tenant baseline)" },
+  { code: GLOBAL_MARKET_CODE, label: t("integration.credentials.revenexxSource.market.global") },
   ...markets.value.map((m) => ({ code: m.code, label: `${m.name} (${m.code})` }))
 ]);
 async function ensureLists() {
@@ -92,7 +93,7 @@ async function ensureLists() {
       await fetchMarkets();
     }
   } catch (e) {
-    toast.error(e?.message ?? "Could not load revenexx resources.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.loadResources"));
   } finally {
     loadingList.value = false;
   }
@@ -105,14 +106,14 @@ function marketSlug() {
 }
 async function applySftp() {
   if (!sftp) return;
-  const t = tenant.value;
+  const tenantSlug = tenant.value;
   const acc = sftp.accounts.value.find((a) => String(a.id) === selectedId.value);
-  if (!t || !acc) return;
+  if (!tenantSlug || !acc) return;
   applying.value = true;
   try {
-    const creds = await sftp.revealPassword(t, acc.id);
+    const creds = await sftp.revealPassword(tenantSlug, acc.id);
     if (!creds) {
-      toast.error("Account still provisioning \u2014 try again in a moment.");
+      toast.error(t("integration.credentials.revenexxSource.error.accountProvisioning"));
       return;
     }
     emit("apply", {
@@ -123,7 +124,7 @@ async function applySftp() {
     });
     applied.value = `${acc.login_username}@${sftpHost}:${sftpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? "Could not read the SFTP password.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readSftpPassword"));
   } finally {
     applying.value = false;
   }
@@ -134,7 +135,7 @@ async function applySmtp() {
   try {
     const cred = await mail.getCredential(selectedId.value);
     if (!cred) {
-      toast.error("That mail credential is no longer there.");
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialGone"));
       return;
     }
     emit("apply", {
@@ -146,7 +147,7 @@ async function applySmtp() {
     });
     applied.value = `${cred.smtp_username}@${mailSmtpHost}:${mailSmtpPort}`;
   } catch (e) {
-    toast.error(e?.message ?? "Could not read the mail credential.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.readMailCredential"));
   } finally {
     applying.value = false;
   }
@@ -178,30 +179,30 @@ function openCreate() {
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 async function createSftp() {
   if (!sftp) return;
-  const t = tenant.value;
-  if (!t) {
-    toast.error("No tenant selected.");
+  const tenantSlug = tenant.value;
+  if (!tenantSlug) {
+    toast.error(t("integration.credentials.revenexxSource.error.noTenant"));
     return;
   }
   creating.value = true;
   try {
-    let acc = await sftp.create(t, createName.value.trim() || void 0);
+    let acc = await sftp.create(tenantSlug, createName.value.trim() || void 0);
     for (let i = 0; i < 24 && !(acc.is_active || acc.status === "active"); i++) {
-      provisioningNote.value = "Provisioning the account\u2026";
+      provisioningNote.value = t("integration.credentials.revenexxSource.status.provisioning");
       await sleep(2500);
-      acc = await sftp.refresh(t, acc.id);
-      if (acc.status === "failed") throw new Error(acc.error_message || "Provisioning failed.");
+      acc = await sftp.refresh(tenantSlug, acc.id);
+      if (acc.status === "failed") throw new Error(acc.error_message || t("integration.credentials.revenexxSource.error.provisioningFailed"));
     }
     if (!(acc.is_active || acc.status === "active")) {
-      throw new Error("Still provisioning \u2014 pick it from the list once it turns active.");
+      throw new Error(t("integration.credentials.revenexxSource.error.stillProvisioning"));
     }
-    await sftp.load(t);
+    await sftp.load(tenantSlug);
     selectedId.value = String(acc.id);
     await applySftp();
     createOpen.value = false;
-    toast.success("SFTP account created");
+    toast.success(t("integration.credentials.revenexxSource.toast.sftpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the SFTP account.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSftp"));
   } finally {
     creating.value = false;
     provisioningNote.value = "";
@@ -213,7 +214,7 @@ async function createSmtp() {
   try {
     const cred = await mail.createCredential({ name: createName.value.trim() || "SMTP", type: "SMTP" });
     if (!cred) {
-      toast.error("The mail credential was not returned \u2014 pick it from the list once it appears.");
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialNotReturned"));
       return;
     }
     emit("apply", {
@@ -227,9 +228,9 @@ async function createSmtp() {
     smtpCreds.value = [{ uuid: cred.uuid, name: cred.name }, ...smtpCreds.value];
     selectedId.value = cred.uuid;
     createOpen.value = false;
-    toast.success("Mail credential created");
+    toast.success(t("integration.credentials.revenexxSource.toast.smtpCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the mail credential.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createSmtp"));
   } finally {
     creating.value = false;
   }
@@ -241,11 +242,11 @@ async function createApiKey() {
     const { secret } = await consoleKeys.create(createName.value.trim() || "Integrations key", ["*"]);
     emit("apply", { apiKey: secret, tenant: tenant.value ?? "", market: marketSlug() });
     apiKeyReady.value = true;
-    applied.value = `Key for ${tenant.value}${marketSlug() ? ` \xB7 ${marketSlug()}` : " \xB7 global"}`;
+    applied.value = marketSlug() ? t("integration.credentials.revenexxSource.status.keyForMarket", { tenant: tenant.value, market: marketSlug() }) : t("integration.credentials.revenexxSource.status.keyForGlobal", { tenant: tenant.value });
     createOpen.value = false;
-    toast.success("API key created");
+    toast.success(t("integration.credentials.revenexxSource.toast.apiKeyCreated"));
   } catch (e) {
-    toast.error(e?.message ?? "Could not create the API key.");
+    toast.error(e?.message ?? t("integration.credentials.revenexxSource.error.createApiKey"));
   } finally {
     creating.value = false;
   }
@@ -269,11 +270,10 @@ function submitCreate() {
              belongs somewhere else. The manual fields stay on screen either way. -->
         <p class="text-xs text-muted-foreground">
           <template v-if="available">
-            Reuse an existing revenexx resource instead of typing access data by hand.
+            {{ t("integration.credentials.revenexxSource.hint.available") }}
           </template>
           <template v-else>
-            Not available here — the managed revenexx resources live in the cockpit.
-            Enter the access data by hand instead.
+            {{ t("integration.credentials.revenexxSource.hint.unavailable") }}
           </template>
         </p>
       </div>
@@ -291,14 +291,14 @@ function submitCreate() {
     <div v-if="active" class="mt-3 space-y-3">
       <!-- Tenant (preselected) -->
       <div class="space-y-1.5">
-        <Label :for="`${uid}-tenant`">Tenant</Label>
+        <Label :for="`${uid}-tenant`">{{ t("integration.credentials.revenexxSource.field.tenant.label") }}</Label>
         <Select :model-value="tenant ?? ''" @update:model-value="(v) => tenant = v">
           <SelectTrigger :id="`${uid}-tenant`" class="bg-white">
-            <SelectValue placeholder="Select tenant" />
+            <SelectValue :placeholder="t('integration.credentials.revenexxSource.field.tenant.placeholder')" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem v-for="t in tenants" :key="t.slug" :value="t.slug">
-              {{ t.name }} ({{ t.slug }})
+            <SelectItem v-for="tn in tenants" :key="tn.slug" :value="tn.slug">
+              {{ tn.name }} ({{ tn.slug }})
             </SelectItem>
           </SelectContent>
         </Select>
@@ -306,10 +306,10 @@ function submitCreate() {
 
       <!-- Market scope — only the Revenexx API credential is market-scoped -->
       <div v-if="kind === 'api'" class="space-y-1.5">
-        <Label :for="`${uid}-market`">Market</Label>
+        <Label :for="`${uid}-market`">{{ t("integration.credentials.revenexxSource.field.market.label") }}</Label>
         <Select :model-value="marketCode" @update:model-value="(v) => marketCode = v">
           <SelectTrigger :id="`${uid}-market`" class="bg-white">
-            <SelectValue placeholder="Select market" />
+            <SelectValue :placeholder="t('integration.credentials.revenexxSource.field.market.placeholder')" />
           </SelectTrigger>
           <SelectContent>
             <SelectItem v-for="m in marketOptions" :key="m.code" :value="m.code">
@@ -321,11 +321,11 @@ function submitCreate() {
 
       <!-- Resource select (SFTP / Mail) -->
       <div v-if="kind === 'sftp' || kind === 'smtp'" class="space-y-1.5">
-        <Label :for="`${uid}-resource`">{{ kind === "sftp" ? "SFTP account" : "Mail credential" }}</Label>
+        <Label :for="`${uid}-resource`">{{ kind === "sftp" ? t("integration.credentials.revenexxSource.field.resource.sftpLabel") : t("integration.credentials.revenexxSource.field.resource.mailLabel") }}</Label>
         <div class="flex items-center gap-2">
           <Select :model-value="selectedId" class="flex-1" @update:model-value="(v) => onSelect(v)">
             <SelectTrigger :id="`${uid}-resource`" class="bg-white">
-              <SelectValue :placeholder="loadingList ? 'Loading\u2026' : 'Select one'" />
+              <SelectValue :placeholder="loadingList ? t('integration.common.state.loading') : t('integration.credentials.revenexxSource.field.resource.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <template v-if="kind === 'sftp'">
@@ -338,7 +338,7 @@ function submitCreate() {
           </Select>
           <Button variant="outline" size="sm" class="shrink-0 bg-white" :disabled="!tenant" @click="openCreate">
             <Plus :size="14" class="mr-1" />
-            New
+            {{ t("integration.credentials.revenexxSource.action.new") }}
           </Button>
         </div>
       </div>
@@ -347,7 +347,7 @@ function submitCreate() {
       <div v-else-if="kind === 'api'">
         <Button variant="outline" size="sm" class="bg-white" :disabled="!tenant" @click="openCreate">
           <Plus :size="14" class="mr-1" />
-          Create new API key
+          {{ t("integration.credentials.revenexxSource.action.createApiKey") }}
         </Button>
       </div>
 
@@ -355,7 +355,7 @@ function submitCreate() {
       <div v-if="applied || applying" class="flex items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700">
         <Loader2 v-if="applying" :size="14" class="animate-spin" />
         <Check v-else :size="14" />
-        <span class="truncate">{{ applying ? "Copying access data\u2026" : `Using ${applied}` }}</span>
+        <span class="truncate">{{ applying ? t("integration.credentials.revenexxSource.status.copying") : t("integration.credentials.revenexxSource.status.using", { value: applied }) }}</span>
       </div>
     </div>
 
@@ -363,36 +363,36 @@ function submitCreate() {
     <Dialog v-model:open="createOpen">
       <DialogContent class="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{{ kind ? NEW_LABEL[kind] : "New" }}</DialogTitle>
+          <DialogTitle>{{ kind ? NEW_LABEL[kind] : t("integration.credentials.revenexxSource.new.fallback") }}</DialogTitle>
           <DialogDescription class="text-sm">
             <template v-if="kind === 'api'">
-              A full-access key is minted for <b>{{ tenant }}</b> and copied straight into this credential.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.api", { tenant }) }}
             </template>
             <template v-else-if="kind === 'sftp'">
-              Reserves a new SFTP account for <b>{{ tenant }}</b> and fills its login here.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.sftp", { tenant }) }}
             </template>
             <template v-else>
-              Creates a new SMTP credential and fills its login here.
+              {{ t("integration.credentials.revenexxSource.createDialog.description.smtp") }}
             </template>
           </DialogDescription>
         </DialogHeader>
 
         <div class="space-y-1.5 py-1">
-          <Label for="rvnxx-new-name">{{ kind === "sftp" ? "Label" : "Name" }}</Label>
+          <Label for="rvnxx-new-name">{{ kind === "sftp" ? t("integration.credentials.revenexxSource.createDialog.field.label") : t("integration.credentials.revenexxSource.createDialog.field.name") }}</Label>
           <Input
             id="rvnxx-new-name"
             v-model="createName"
             class="bg-white"
-            :placeholder="kind === 'sftp' ? 'e.g. imports' : 'e.g. Production'"
+            :placeholder="kind === 'sftp' ? t('integration.credentials.revenexxSource.createDialog.field.placeholder.sftp') : t('integration.credentials.revenexxSource.createDialog.field.placeholder.default')"
           />
           <p v-if="provisioningNote" class="text-xs text-muted-foreground">{{ provisioningNote }}</p>
         </div>
 
         <DialogFooter>
-          <Button variant="ghost" :disabled="creating" @click="createOpen = false">Cancel</Button>
+          <Button variant="ghost" :disabled="creating" @click="createOpen = false">{{ t("integration.common.action.cancel") }}</Button>
           <Button :disabled="creating" @click="submitCreate">
             <Loader2 v-if="creating" :size="14" class="mr-1 animate-spin" />
-            Create
+            {{ t("integration.credentials.revenexxSource.action.create") }}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -7,20 +7,21 @@ const props = defineProps({
   types: { type: Array, required: true }
 });
 const emit = defineEmits(["pick"]);
+const t = useIntegrationsT();
 const query = ref("");
 function authKindLabel(k) {
   switch (k) {
     case "api-key":
-      return "API Key";
+      return t("integration.credentials.shared.authKind.apiKey");
     case "oauth2-authcode":
     case "oauth2-client-credentials":
-      return "OAuth2";
+      return t("integration.credentials.shared.authKind.oauth2");
     case "basic-auth":
-      return "Basic Auth";
+      return t("integration.credentials.shared.authKind.basicAuth");
     case "static":
-      return "Static";
+      return t("integration.credentials.shared.authKind.static");
     case "secret":
-      return "Secret";
+      return t("integration.credentials.shared.authKind.secret");
     default:
       return k ?? "";
   }
@@ -28,7 +29,7 @@ function authKindLabel(k) {
 const filtered = computed(() => {
   const q = query.value.trim().toLowerCase();
   if (!q) return props.types;
-  return props.types.filter((t) => resolveLocalized(t.name).toLowerCase().includes(q));
+  return props.types.filter((t2) => resolveLocalized(t2.name).toLowerCase().includes(q));
 });
 </script>
 
@@ -38,16 +39,16 @@ const filtered = computed(() => {
       <Search :size="15" class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
       <Input
         v-model="query"
-        aria-label="Search for an app"
+        :aria-label="t('integration.credentials.typePicker.search.aria')"
         class="bg-white pl-9"
-        placeholder="Search for an app…"
+        :placeholder="t('integration.credentials.typePicker.search.placeholder')"
         autofocus
       />
     </div>
 
     <div class="mt-2 max-h-80 overflow-y-auto -mx-1 px-1">
       <p v-if="!filtered.length" class="px-2 py-6 text-center text-sm text-muted-foreground">
-        No credential type matches “{{ query }}”.
+        {{ t("integration.credentials.typePicker.empty", { query }) }}
       </p>
       <button
         v-for="t in filtered"

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,28 +214,33 @@ 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>
     </p>
 
+    <!-- Named, because the same expressions are offered twice on this surface —
+         here and in the panel beside the form — and a popup nothing can address
+         is a popup nothing can test either. -->
     <div
       v-if="open && hasSuggestions"
+      role="group"
+      :aria-label="t('integration.nodeConfig.expression.picker.aria')"
       class="absolute right-0 top-full z-50 mt-1 flex max-h-72 w-80 flex-col rounded-md border border-black/[0.08] bg-white text-sm shadow-lg"
     >
       <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">