@revenexx/studio-integrations 0.5.1 → 0.7.0

package/dist/runtime/pages/integrations/index.vue

@@ -1,15 +1,17 @@
 <script setup>
 import { computed, ref, watch } from "vue";
-import TemplateFlowPreview from "../../components/Integrations/TemplateFlowPreview.vue";
+import TemplateCard from "../../components/Integrations/TemplateCard.vue";
 import WorkflowCreateDialog from "../../components/Integrations/WorkflowCreateDialog.vue";
 import { Pulse as Activity, DangerTriangle as AlertTriangle, ArrowRight, Box as Boxes, ClockCircle as Clock, Database, Layers, AddCircle as Plus, Radio, MagicStick as Sparkles, LinkRound as Webhook, Programming as Workflow } from "#solar-icons";
 import { Badge, Button } from "@revenexx/studio";
-useHead({ title: "Dashboard \xB7 Integration Studio" });
+import { runStatusLabel, statusClass } from "../../utils/statusStyle";
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.dashboard.head.title") });
 const { workflows, activeCount: activeWorkflows, loading: workflowsLoading, load: loadWorkflows } = useIntegrationsWorkflows();
 const { runs, runningCount, failedCount, loading: runsLoading, load: loadRuns } = useIntegrationsRuns();
-const { popular, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
-watch(() => popular.value.map((t) => t.slug).join(","), () => {
-  if (popular.value.length) void ensureDetails(popular.value.map((t) => t.slug));
+const { startingPoints, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
+watch(() => startingPoints.value.map((t2) => t2.slug).join(","), () => {
+  if (startingPoints.value.length) void ensureDetails(startingPoints.value.map((t2) => t2.slug));
 }, { immediate: true });
 const { activeCount: schedulesActive, load: loadSchedules } = useIntegrationsSchedules();
 const { pendingCount: missedRuns, globalLoading: missedLoading, loadGlobal: loadMissedRuns } = useIntegrationsDeadLetters();
@@ -24,107 +26,104 @@ onMounted(() => {
   void loadSchedules();
   void loadMissedRuns();
 });
-const latestPerWorkflow = computed(() => {
+const latestByWorkflow = computed(() => {
   const seen = /* @__PURE__ */ new Set();
   const out = [];
   for (const r of runs.value) {
     if (seen.has(r.workflowId)) continue;
     seen.add(r.workflowId);
     out.push(r);
-    if (out.length >= 10) break;
   }
   return out;
 });
-const failedRecent = computed(() => runs.value.filter((r) => r.status === "failed").slice(0, 3));
+const latestPerWorkflow = computed(() => latestByWorkflow.value.slice(0, 10));
+const failedRecent = computed(() => latestByWorkflow.value.filter((r) => r.status === "failed").slice(0, 3));
 function formatRelative(iso) {
   if (!iso) return "\u2014";
   const ms = Date.now() - new Date(iso).getTime();
-  if (ms < 6e4) return "just now";
-  if (ms < 36e5) return `${Math.floor(ms / 6e4)}m ago`;
-  if (ms < 864e5) return `${Math.floor(ms / 36e5)}h ago`;
-  return `${Math.floor(ms / 864e5)}d ago`;
-}
-function statusClass(status) {
-  switch (status) {
-    case "succeeded":
-      return "bg-emerald-500/15 text-emerald-700 border-emerald-500/20";
-    case "running":
-      return "bg-sky-500/15 text-sky-700 border-sky-500/20";
-    case "failed":
-      return "bg-rose-500/15 text-rose-700 border-rose-500/20";
-    case "queued":
-      return "bg-amber-500/15 text-amber-700 border-amber-500/20";
-    case "cancelled":
-      return "bg-slate-500/15 text-slate-700 border-slate-500/20";
-  }
+  if (ms < 6e4) return t("integration.common.time.justNow");
+  if (ms < 36e5) return t("integration.common.time.minutesAgo", Math.floor(ms / 6e4));
+  if (ms < 864e5) return t("integration.common.time.hoursAgo", Math.floor(ms / 36e5));
+  return t("integration.common.time.daysAgo", Math.floor(ms / 864e5));
 }
 const kpis = computed(() => [
   {
-    label: "Active workflows",
+    key: "activeWorkflows",
+    label: t("integration.dashboard.kpi.activeWorkflows.label"),
     value: activeWorkflows.value,
-    sub: `${workflows.value.length - activeWorkflows.value} paused or drafts`,
+    // A plural key, so the count is the second argument. Called without one it
+    // would put the raw "a | b" on screen.
+    sub: t("integration.dashboard.kpi.activeWorkflows.sub", workflows.value.length - activeWorkflows.value),
     icon: Workflow,
     tile: "bg-emerald-500 text-white"
   },
   {
-    label: "Running now",
+    key: "runningNow",
+    label: t("integration.dashboard.kpi.runningNow.label"),
     value: runningCount.value,
-    sub: "live executions in flight",
+    sub: t("integration.dashboard.kpi.runningNow.sub"),
     icon: Activity,
     tile: "bg-sky-500 text-white"
   },
   {
-    label: "Scheduled",
+    key: "scheduled",
+    label: t("integration.dashboard.kpi.scheduled.label"),
     value: schedulesActive.value,
-    sub: "cron triggers active",
+    sub: t("integration.dashboard.kpi.scheduled.sub"),
     icon: Clock,
     tile: "bg-violet-500 text-white"
   },
   {
-    label: "Missed runs",
+    key: "missedRuns",
+    label: t("integration.dashboard.kpi.missedRuns.label"),
     value: missedRuns.value,
-    sub: "trigger firings without a run",
+    sub: t("integration.dashboard.kpi.missedRuns.sub"),
     icon: AlertTriangle,
     tile: missedRuns.value ? "bg-amber-500 text-white" : "bg-slate-300 text-white",
     to: "/integrations/runs?tab=missed"
   }
 ]);
-const surfaces = [
-  { label: "Import & Export", to: "/integrations/io", icon: Database, hint: "Profiles that move catalogue and entity data in and out." },
-  { label: "SFTP Server", to: "/integrations/sftp", icon: Boxes, hint: "Managed SFTP endpoints for file-based exchange." },
-  { label: "Event Stream", to: "/integrations/events", icon: Radio, hint: "Live platform events that workflows subscribe to." },
-  { label: "Webhooks", to: "/integrations/webhooks", icon: Webhook, hint: "Inbound HTTP endpoints that trigger workflows." }
-];
+const surfaces = computed(() => [
+  { label: t("integration.dashboard.surface.io.label"), to: "/integrations/io", icon: Database, hint: t("integration.dashboard.surface.io.hint") },
+  { label: t("integration.dashboard.surface.sftp.label"), to: "/integrations/sftp", icon: Boxes, hint: t("integration.dashboard.surface.sftp.hint") },
+  { label: t("integration.dashboard.surface.events.label"), to: "/integrations/events", icon: Radio, hint: t("integration.dashboard.surface.events.hint") },
+  { label: t("integration.dashboard.surface.webhooks.label"), to: "/integrations/webhooks", icon: Webhook, hint: t("integration.dashboard.surface.webhooks.hint") }
+]);
 </script>
 
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Dashboard"
-      description="Everything that connects Revenue Cloud to the outside world."
+      :title="t('integration.dashboard.header.title')"
+      :description="t('integration.dashboard.header.description')"
     >
       <template #actions>
         <NuxtLink to="/integrations/templates">
           <Button variant="outline" class="h-7 text-sm">
             <Layers :size="12" />
-            Browse templates
+            {{ t("integration.dashboard.action.browseTemplates") }}
           </Button>
         </NuxtLink>
         <Button class="h-7 text-sm" @click="createOpen = true">
           <Plus :size="14" />
-          New workflow
+          {{ t("integration.dashboard.action.newWorkflow") }}
         </Button>
       </template>
     </PageHeader>
 
     <div class="p-4 space-y-4">
-      <!-- KPI strip -->
-      <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+      <!-- KPI strip. Each tile carries its figure in its own name: the Missed-runs
+           tile is a link, and a link takes its name from its label instead of its
+           contents — named "Missed runs" alone it would announce less than the
+           three tiles beside it. -->
+      <div role="group" :aria-label="t('integration.dashboard.kpi.aria.group')" class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
         <component
           :is="k.to ? NuxtLinkComp : 'div'"
           v-for="k in kpis"
-          :key="k.label"
+          :key="k.key"
           :to="k.to"
+          :role="k.to ? void 0 : 'group'"
+          :aria-label="`${k.label}: ${k.value}`"
           class="block rounded-lg border border-black/[0.06] bg-white p-3"
           :class="k.to ? 'transition hover:border-black/20' : ''"
         >
@@ -148,30 +147,34 @@ const surfaces = [
         </component>
       </div>
 
-      <!-- Two-column: recent runs + needs attention + popular templates -->
+      <!-- Two-column: recent runs + needs attention + templates to start from -->
       <div class="grid gap-4 lg:grid-cols-3">
         <!-- Recent runs ─ takes 2 cols -->
-        <div class="lg:col-span-2 rounded-lg border border-black/[0.06] bg-white">
+        <div role="group" :aria-label="t('integration.dashboard.runs.title')" class="lg:col-span-2 rounded-lg border border-black/[0.06] bg-white">
           <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
             <div class="flex items-center gap-2">
               <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
                 <Activity :size="12" />
               </span>
-              <h3 class="text-sm font-semibold">Latest executions</h3>
+              <h3 class="text-sm font-semibold">{{ t("integration.dashboard.runs.title") }}</h3>
             </div>
             <NuxtLink to="/integrations/runs" class="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1">
-              View all <ArrowRight :size="11" />
+              {{ t("integration.common.action.viewAll") }} <ArrowRight :size="11" />
             </NuxtLink>
           </div>
           <div>
-            <div
+            <!-- An entry is a link, not a div that answers a click: that is what
+                 makes it reachable by keyboard, and it is what gives it a name —
+                 the values it shows. A name written onto a plain row would be
+                 heard by nobody, because ARIA does not name a generic element. -->
+            <NuxtLink
               v-for="r in latestPerWorkflow"
               :key="r.id"
-              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 cursor-pointer hover:bg-muted/30"
-              @click="$router.push({ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } })"
+              :to="{ path: `/integrations/workflows/${r.workflowId}`, query: { run: r.id } }"
+              class="grid grid-cols-[90px_minmax(0,1fr)_100px_70px] items-center gap-2 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
             >
               <Badge variant="outline" :class="['border text-xs font-medium uppercase', statusClass(r.status)]">
-                {{ r.status }}
+                {{ runStatusLabel(r.status) }}
               </Badge>
               <div class="truncate">
                 <div class="font-medium text-foreground truncate">{{ r.workflowName }}</div>
@@ -183,7 +186,7 @@ const surfaces = [
               <div class="text-sm text-muted-foreground tabular-nums text-right">
                 {{ r.durationMs == null ? "\u2026" : `${(r.durationMs / 1e3).toFixed(2)}s` }}
               </div>
-            </div>
+            </NuxtLink>
             <template v-if="latestLoading && !latestPerWorkflow.length">
               <div
                 v-for="n in 6"
@@ -200,19 +203,19 @@ const surfaces = [
               </div>
             </template>
             <div v-else-if="!latestPerWorkflow.length" class="px-3 py-8 text-center text-sm text-muted-foreground">
-              No runs yet.
+              {{ t("integration.dashboard.runs.empty") }}
             </div>
           </div>
         </div>
 
         <!-- Needs attention -->
-        <div class="rounded-lg border border-black/[0.06] bg-white">
+        <div role="group" :aria-label="t('integration.dashboard.attention.title')" class="rounded-lg border border-black/[0.06] bg-white">
           <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
             <div class="flex items-center gap-2">
               <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
                 <AlertTriangle :size="12" />
               </span>
-              <h3 class="text-sm font-semibold">Needs attention</h3>
+              <h3 class="text-sm font-semibold">{{ t("integration.dashboard.attention.title") }}</h3>
             </div>
           </div>
           <div v-if="(missedLoading || latestLoading) && !missedRuns && !failedRecent.length" class="space-y-2 p-3">
@@ -225,28 +228,32 @@ const surfaces = [
               to="/integrations/runs?tab=missed"
               class="block space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm hover:bg-muted/30"
             >
-              <div class="font-medium">{{ missedRuns }} missed run{{ missedRuns === 1 ? "" : "s" }}</div>
+              <div class="font-medium">{{ t("integration.dashboard.attention.missedRuns", missedRuns) }}</div>
               <div class="text-sm text-amber-700">
-                Triggers fired while their workflow couldn't run — review &amp; replay.
+                {{ t("integration.dashboard.attention.missedRuns.hint") }}
               </div>
             </NuxtLink>
-            <div
+            <!-- A link, for the same reason as the entries next door — and like
+                 the waiting-firings entry above it, which was one all along. -->
+            <NuxtLink
               v-for="r in failedRecent"
               :key="r.id"
-              class="space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 cursor-pointer hover:bg-muted/30"
-              @click="$router.push(`/integrations/workflows/${r.workflowId}`)"
+              :to="`/integrations/workflows/${r.workflowId}`"
+              class="block space-y-1 border-b border-black/[0.04] px-3 py-2 text-sm last:border-b-0 hover:bg-muted/30"
             >
               <div class="font-medium truncate">{{ r.workflowName }}</div>
               <div class="text-sm text-rose-700 truncate" :title="r.errorMessage">
-                {{ r.errorMessage ?? "Failed." }}
+                {{ r.errorMessage ?? t("integration.dashboard.attention.failed") }}
               </div>
+              <!-- When it failed is when it ended, not when it set off: a run
+                   that broke after an hour would otherwise be dated an hour early. -->
               <div class="text-sm text-muted-foreground tabular-nums">
-                {{ formatRelative(r.startedAt) }}
+                {{ formatRelative(r.finishedAt ?? r.startedAt) }}
               </div>
-            </div>
+            </NuxtLink>
           </div>
           <div v-else class="px-3 py-6 text-center text-sm text-muted-foreground">
-            All workflows healthy.
+            {{ t("integration.dashboard.attention.healthy") }}
           </div>
         </div>
       </div>
@@ -272,49 +279,41 @@ const surfaces = [
         </NuxtLink>
       </div>
 
-      <!-- Popular templates -->
-      <div class="rounded-lg border border-black/[0.06] bg-white">
+      <!-- Named for the offer it makes, not for a ranking nothing measures
+           (PO-238): every template's install count was nought, so the sort that
+           produced this list compared nothing at all. The wording deliberately
+           echoes the create-workflow dialog's "Start from template" tab — the same
+           offer, so the same words, rather than a second name for it. -->
+      <div role="group" :aria-label="t('integration.dashboard.templates.title')" class="rounded-lg border border-black/[0.06] bg-white">
         <div class="flex items-center justify-between border-b border-black/[0.06] px-3 py-2">
           <div class="flex items-center gap-2">
             <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
               <Sparkles :size="12" />
             </span>
-            <h3 class="text-sm font-semibold">Popular templates</h3>
+            <h3 class="text-sm font-semibold">{{ t("integration.dashboard.templates.title") }}</h3>
           </div>
           <NuxtLink to="/integrations/templates" class="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1">
-            See all <ArrowRight :size="11" />
+            {{ t("integration.common.action.seeAll") }} <ArrowRight :size="11" />
           </NuxtLink>
         </div>
-        <div v-if="templatesLoading && !popular.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div v-if="templatesLoading && !startingPoints.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
           <div v-for="n in 4" :key="`sk-tpl-${n}`" class="rounded-md border border-black/[0.06] bg-white p-3 space-y-2">
             <div class="h-5 w-20 rounded bg-black/[0.07] animate-pulse" />
             <div class="h-3 w-3/4 rounded bg-black/[0.07] animate-pulse" />
             <div class="h-3 w-1/2 rounded bg-black/[0.05] animate-pulse" />
           </div>
         </div>
-        <div v-else-if="!popular.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
-          No templates registered yet.
+        <div v-else-if="!startingPoints.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
+          {{ t("integration.dashboard.templates.empty") }}
         </div>
         <div v-else class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
-          <NuxtLink
-            v-for="tpl in popular"
+          <TemplateCard
+            v-for="tpl in startingPoints"
             :key="tpl.slug"
+            :template="tpl"
+            density="compact"
             :to="`/integrations/templates/${tpl.slug}`"
-            class="flex flex-col overflow-hidden rounded-md border border-black/[0.06] bg-white transition hover:border-black/20 hover:shadow-sm"
-          >
-            <div class="relative h-20 shrink-0 border-b border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:12px_12px]">
-              <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="80" class="px-1" />
-              <span class="absolute left-1.5 top-1.5 inline-flex items-center whitespace-nowrap rounded-full bg-slate-100 px-1.5 py-px text-[11px] font-medium uppercase text-slate-700">
-                {{ tpl.category }}
-              </span>
-            </div>
-            <div class="flex min-h-0 flex-1 flex-col p-3">
-              <div class="text-sm font-medium truncate">{{ tpl.name }}</div>
-              <p class="mt-1 text-sm text-muted-foreground line-clamp-2">
-                {{ tpl.description }}
-              </p>
-            </div>
-          </NuxtLink>
+          />
         </div>
       </div>
     </div>

package/dist/runtime/pages/integrations/runs.vue

@@ -1,10 +1,12 @@
 <script setup>
-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";
 import RunsTable from "../../components/Integrations/RunsTable.vue";
+import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { statusClass } from "../../utils/statusStyle";
-useHead({ title: "Runs \xB7 Integration Studio" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
 const { runs, loading, load } = useIntegrationsRuns();
 const {
@@ -17,18 +19,28 @@ const {
 } = useIntegrationsDeadLetters();
 const tab = ref(route.query.tab === "missed" ? "missed" : "runs");
 const tabs = computed(() => [
-  { key: "runs", label: "Runs" },
+  { key: "runs", label: t("integration.runs.tabs.runs.label") },
   // "Missed runs": trigger firings that never became a run (dead letters).
-  { key: "missed", label: "Missed runs", badge: pendingCount.value || null }
+  { key: "missed", label: t("integration.deadLetters.tabs.missed.label"), badge: pendingCount.value || null }
 ]);
+const POLL_MS = 3e3;
 const hasActiveRuns = computed(() => runs.value.some((r) => r.status === "running" || r.status === "queued"));
+const { delivering, runTick, workflowTick } = useIntegrationsRealtime();
+const budget = createPollBudget({ intervalMs: POLL_MS, liveIntervalMs: SAFETY_POLL_MS });
+function reload() {
+  budget.spend();
+  void load(true);
+}
+watch([runTick, workflowTick], () => {
+  reload();
+});
 let pollTimer = null;
 onMounted(() => {
   void load(true);
   void loadGlobal(true);
   pollTimer = setInterval(() => {
-    if (hasActiveRuns.value) void load(true);
-  }, 3e3);
+    if (hasActiveRuns.value && !loading.value && budget.due(delivering.value)) void load(true);
+  }, POLL_MS);
 });
 onUnmounted(() => {
   if (pollTimer) {
@@ -42,11 +54,11 @@ 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 loadGlobal(true);
-    void load(true);
+    reload();
   } catch (e) {
-    toast.error(e?.message ?? "Could not replay.");
+    toast.error(e?.message ?? t("integration.deadLetters.toast.replay.error"));
   } finally {
     busyId.value = null;
   }
@@ -55,10 +67,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 loadGlobal(true);
   } catch (e) {
-    toast.error(e?.message ?? "Could not discard.");
+    toast.error(e?.message ?? t("integration.deadLetters.toast.discard.error"));
   } finally {
     busyId.value = null;
   }
@@ -76,25 +88,25 @@ function fmt(iso) {
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Runs"
-      description="Execution history across every workflow — sourced from Temporal."
+      :title="t('integration.runs.list.header.title')"
+      :description="t('integration.runs.list.header.description')"
     />
 
     <TabBar v-model="tab" :tabs="tabs" class="px-4" />
 
     <div class="p-4 space-y-4">
-      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="() => load(true)" />
+      <RunsTable v-if="tab === 'runs'" :runs="runs" :loading="loading" @changed="reload" />
 
       <!-- Missed runs — trigger firings that never produced a run (the
            workflow wasn't runnable when its schedule/event fired). -->
       <template v-else>
         <div class="flex items-center justify-between">
           <p class="text-sm text-muted-foreground">
-            Triggers that fired while their workflow couldn't run (bundle building or failed). Replay starts a fresh run from the captured payload.
+            {{ t("integration.deadLetters.list.description") }}
           </p>
           <Button variant="outline" size="sm" class="h-7 text-sm" :disabled="missedLoading" @click="() => loadGlobal(true)">
             <Loader2 v-if="missedLoading" :size="12" class="animate-spin" />
-            Refresh
+            {{ t("integration.common.action.refresh") }}
           </Button>
         </div>
 
@@ -109,7 +121,7 @@ function fmt(iso) {
         </div>
         </div>
         <div v-else-if="!missed.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]">
@@ -123,7 +135,7 @@ function fmt(iso) {
               <NuxtLink :to="`/integrations/workflows/${dl.workflow_id}`" class="text-sm font-medium truncate transition-colors hover:text-primary">
                 {{ dl.workflowName }}
               </NuxtLink>
-              <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>
@@ -135,11 +147,11 @@ 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>