@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, useId, watch } from "vue";
 import {
   AddCircle as Plus,
   CheckCircle as Check,
@@ -23,31 +23,37 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import { toast } from "vue-sonner";
+import { REVENEXX_SOURCE_KIND_BY_SLUG } from "../../utils/revenexxCredentialSource";
+import { cockpitSources } from "../../utils/cockpitSources";
 const props = defineProps({
   type: { type: [Object, null], required: true }
 });
 const emit = defineEmits(["update:active", "apply"]);
-const KIND_BY_SLUG = {
-  "revenexx:sftp": "sftp",
-  "revenexx:smtp": "smtp",
-  "revenexx:api": "api"
-};
-const kind = computed(() => props.type ? KIND_BY_SLUG[props.type.slug] ?? null : null);
-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 { tenants, onlyTenantSlug, load: loadTenants } = useConsoleTenants();
-const { markets, activeCode, isGlobal, GLOBAL_MARKET_CODE, fetchMarkets } = useActiveMarket();
-const sftp = useConsoleSftp();
-const mail = useMailAdmin();
-const consoleKeys = useConsoleApiKeys();
+const t = useIntegrationsT();
+const kind = computed(() => props.type ? REVENEXX_SOURCE_KIND_BY_SLUG[props.type.slug] ?? null : null);
+const uid = useId();
+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 ?? []);
+const onlyTenantSlug = computed(() => sources?.tenants.onlyTenantSlug.value ?? null);
+const loadTenants = () => sources?.tenants.load() ?? Promise.resolve();
+const markets = computed(() => sources?.market.markets.value ?? []);
+const activeCode = computed(() => sources?.market.activeCode.value ?? "");
+const fetchMarkets = () => sources?.market.fetchMarkets() ?? Promise.resolve();
+const GLOBAL_MARKET_CODE = sources?.market.GLOBAL_MARKET_CODE ?? "__global__";
+const sftp = sources?.sftp ?? null;
+const mail = sources?.mail ?? null;
+const consoleKeys = sources?.keys ?? null;
 const config = useRuntimeConfig();
 const sftpHost = config.public.sftpHost ?? "share.revenexx.com";
 const sftpPort = Number(config.public.sftpPort ?? 42);
@@ -67,12 +73,13 @@ watch(kind, () => {
   selectedId.value = "";
   applied.value = null;
 });
-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 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() {
+  if (!sftp || !mail) return;
   loadingList.value = true;
   try {
     await loadTenants();
@@ -86,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;
   }
@@ -98,14 +105,15 @@ function marketSlug() {
   return marketCode.value === GLOBAL_MARKET_CODE ? "" : marketCode.value;
 }
 async function applySftp() {
-  const t = tenant.value;
+  if (!sftp) return;
+  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", {
@@ -116,15 +124,20 @@ 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;
   }
 }
 async function applySmtp() {
+  if (!mail) return;
   applying.value = true;
   try {
     const cred = await mail.getCredential(selectedId.value);
+    if (!cred) {
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialGone"));
+      return;
+    }
     emit("apply", {
       host: mailSmtpHost,
       port: mailSmtpPort,
@@ -134,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;
   }
@@ -165,39 +178,45 @@ function openCreate() {
 }
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 async function createSftp() {
-  const t = tenant.value;
-  if (!t) {
-    toast.error("No tenant selected.");
+  if (!sftp) return;
+  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 = "";
   }
 }
 async function createSmtp() {
+  if (!mail) return;
   creating.value = true;
   try {
     const cred = await mail.createCredential({ name: createName.value.trim() || "SMTP", type: "SMTP" });
+    if (!cred) {
+      toast.error(t("integration.credentials.revenexxSource.error.mailCredentialNotReturned"));
+      return;
+    }
     emit("apply", {
       host: mailSmtpHost,
       port: mailSmtpPort,
@@ -209,24 +228,25 @@ 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;
   }
 }
 async function createApiKey() {
+  if (!consoleKeys) return;
   creating.value = true;
   try {
     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;
   }
@@ -244,24 +264,41 @@ function submitCreate() {
     <div class="flex items-center justify-between gap-3">
       <div class="min-w-0">
         <div class="text-sm font-medium">{{ SWITCH_LABEL[kind] }}</div>
+        <!-- Two sentences, one per state. Saying WHERE the sources are missing is
+             the point: without it an operator in the dev studio or another host
+             reads a dead switch and cannot tell a broken feature from one that
+             belongs somewhere else. The manual fields stay on screen either way. -->
         <p class="text-xs text-muted-foreground">
-          Reuse an existing revenexx resource instead of typing access data by hand.
+          <template v-if="available">
+            {{ t("integration.credentials.revenexxSource.hint.available") }}
+          </template>
+          <template v-else>
+            {{ t("integration.credentials.revenexxSource.hint.unavailable") }}
+          </template>
         </p>
       </div>
-      <Switch :model-value="active" @update:model-value="(v) => active = v" />
+      <!-- Disabled rather than hidden: a control that vanishes leaves nothing to
+           read the explanation from, and the operator cannot tell whether the
+           feature exists at all. -->
+      <Switch
+        :aria-label="SWITCH_LABEL[kind]"
+        :disabled="!available"
+        :model-value="active"
+        @update:model-value="(v) => active = v"
+      />
     </div>
 
     <div v-if="active" class="mt-3 space-y-3">
       <!-- Tenant (preselected) -->
       <div class="space-y-1.5">
-        <Label>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 class="bg-white">
-            <SelectValue placeholder="Select tenant" />
+          <SelectTrigger :id="`${uid}-tenant`" class="bg-white">
+            <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>
@@ -269,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>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 class="bg-white">
-            <SelectValue placeholder="Select market" />
+          <SelectTrigger :id="`${uid}-market`" class="bg-white">
+            <SelectValue :placeholder="t('integration.credentials.revenexxSource.field.market.placeholder')" />
           </SelectTrigger>
           <SelectContent>
             <SelectItem v-for="m in marketOptions" :key="m.code" :value="m.code">
@@ -284,11 +321,11 @@ function submitCreate() {
 
       <!-- Resource select (SFTP / Mail) -->
       <div v-if="kind === 'sftp' || kind === 'smtp'" class="space-y-1.5">
-        <Label>{{ 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 class="bg-white">
-              <SelectValue :placeholder="loadingList ? 'Loading\u2026' : 'Select one'" />
+            <SelectTrigger :id="`${uid}-resource`" class="bg-white">
+              <SelectValue :placeholder="loadingList ? t('integration.common.state.loading') : t('integration.credentials.revenexxSource.field.resource.placeholder')" />
             </SelectTrigger>
             <SelectContent>
               <template v-if="kind === 'sftp'">
@@ -301,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>
@@ -310,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>
 
@@ -318,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>
 
@@ -326,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

@@ -2,30 +2,26 @@
 import { computed, ref } from "vue";
 import { Magnifier as Search } from "#solar-icons";
 import { Input } from "@revenexx/studio";
+import { resolveLocalized } from "../../utils/localize";
 const props = defineProps({
   types: { type: Array, required: true }
 });
 const emit = defineEmits(["pick"]);
+const t = useIntegrationsT();
 const query = ref("");
-function loc(v) {
-  if (!v) return "";
-  if (typeof v === "string") return v;
-  const o = v;
-  return o.en ?? o.de ?? Object.values(o)[0] ?? "";
-}
 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 ?? "";
   }
@@ -33,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) => loc(t.name).toLowerCase().includes(q));
+  return props.types.filter((t2) => resolveLocalized(t2.name).toLowerCase().includes(q));
 });
 </script>
 
@@ -43,15 +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="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"
@@ -62,7 +59,7 @@ const filtered = computed(() => {
       >
         <IntegrationsCredentialLogo :type="t" :size="16" />
         <div class="min-w-0 flex-1 truncate text-sm">
-          <span class="font-medium">{{ loc(t.name) || t.slug }}</span>
+          <span class="font-medium">{{ resolveLocalized(t.name) || t.slug }}</span>
           <span class="ml-1.5 text-muted-foreground">({{ authKindLabel(t.auth_kind) }})</span>
         </div>
       </button>

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.d.vue.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     modelValue: string;
+    inputId?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -2,9 +2,11 @@
 import { computed, onMounted, ref } from "vue";
 import { Input } from "@revenexx/studio";
 const props = defineProps({
-  modelValue: { type: String, required: true }
+  modelValue: { type: String, required: true },
+  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(() => {
@@ -14,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));
 });
@@ -34,6 +36,7 @@ function pick(topic) {
 <template>
   <div class="relative">
     <Input
+      :id="props.inputId"
       :model-value="modelValue"
       placeholder="customer.created"
       class="h-8 text-sm bg-white font-mono"
@@ -46,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 catalog…
+        {{ t("integration.canvas.eventCombobox.loading") }}
       </div>
       <button
         v-for="o in filtered"

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

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     modelValue: string;
+    inputId?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

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

@@ -10,6 +10,10 @@ type __VLS_Props = {
     placeholder?: string;
     variables?: Record<string, WorkflowVariable>;
     upstreamOutputs?: UpstreamOutput[];
+    /** Draw the editor as at fault — the field above owns the reason. */
+    invalid?: boolean;
+    /** The setting's label, so the editable region has an accessible name. */
+    label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;