@revenexx/studio-integrations 0.6.0 → 0.7.0

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 && !loading.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>

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

@@ -2,7 +2,8 @@
 import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
 import { cadenceRank, describeCron } from "../../utils/schedule";
-useHead({ title: "Schedules \xB7 Integration Studio" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.schedules.head.title") });
 const router = useRouter();
 const { entries, activeCount, loading, load } = useIntegrationsSchedules();
 onMounted(() => {
@@ -11,18 +12,38 @@ onMounted(() => {
 function formatRelative(iso) {
   if (!iso) return "\u2014";
   const ms = new Date(iso).getTime() - Date.now();
-  if (Math.abs(ms) < 6e4) return ms > 0 ? "in <1m" : "just now";
+  if (Math.abs(ms) < 6e4) return ms > 0 ? t("integration.schedules.time.inLessThanMinute") : t("integration.common.time.justNow");
   if (Math.abs(ms) < 36e5) {
     const mins = Math.round(Math.abs(ms) / 6e4);
-    return ms > 0 ? `in ${mins}m` : `${mins}m ago`;
+    return ms > 0 ? t("integration.schedules.time.inMinutes", mins) : t("integration.common.time.minutesAgo", mins);
   }
   if (Math.abs(ms) < 864e5) {
     const hrs = Math.round(Math.abs(ms) / 36e5);
-    return ms > 0 ? `in ${hrs}h` : `${hrs}h ago`;
+    return ms > 0 ? t("integration.schedules.time.inHours", hrs) : t("integration.common.time.hoursAgo", hrs);
   }
   return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
 }
-const columns = [
+const filterTabs = computed(() => [
+  {
+    key: "status",
+    label: t("integration.schedules.table.column.status"),
+    // The flag, not the word: a stored value has to survive a language switch, or the
+    // narrowed list empties itself when the host changes language. Only the labels are
+    // translated (see `credentials.vue` for the whole reasoning).
+    getter: (e) => e.active ? "live" : "paused",
+    options: [
+      { value: "live", label: t("integration.schedules.status.live") },
+      { value: "paused", label: t("integration.schedules.status.paused") }
+    ]
+  },
+  {
+    key: "timezone",
+    label: t("integration.schedules.table.column.timezone"),
+    getter: (e) => e.timezone,
+    options: [...new Set(entries.value.map((e) => e.timezone))].sort().map((tz) => ({ value: tz, label: tz }))
+  }
+]);
+const columns = computed(() => [
   // Two columns share the slack, and the sentence gets the larger share of it:
   // "Weekdays, hourly from 09:00 to 17:00" is what this page is for, while a
   // workflow name is a label the reader recognises from its first few words.
@@ -31,26 +52,26 @@ const columns = [
   // The expression stays in the search text although the column no longer shows
   // it: support quotes expressions, and a row has to be findable by the string
   // someone was given.
-  { key: "workflow", label: "Workflow", width: "minmax(180px, 1fr)", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron ?? ""} ${e.timezone} ${describeCron(e.cron) ?? ""}` },
+  { key: "workflow", label: t("integration.schedules.table.column.workflow"), width: "minmax(180px, 1fr)", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron ?? ""} ${e.timezone} ${describeCron(e.cron) ?? ""}` },
   // Sorted by how often a schedule fires. The expression's characters would be
   // meaningless here — the column shows a sentence.
-  { key: "cron", label: "When", width: "minmax(260px, 1.4fr)", sortable: true, sortGetter: (e) => cadenceRank(e.cron) },
-  { key: "timezone", label: "Timezone", width: "140px", sortable: true, sortGetter: (e) => e.timezone },
-  { key: "nextRun", label: "Next run", width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
-  { key: "lastRun", label: "Last run", width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
-  { key: "status", label: "Status", width: "80px", sortable: true, sortGetter: (e) => e.active ? "live" : "paused" }
-];
+  { key: "cron", label: t("integration.schedules.table.column.when"), width: "minmax(260px, 1.4fr)", sortable: true, sortGetter: (e) => cadenceRank(e.cron) },
+  { key: "timezone", label: t("integration.schedules.table.column.timezone"), width: "140px", sortable: true, sortGetter: (e) => e.timezone },
+  { key: "nextRun", label: t("integration.schedules.table.column.nextRun"), width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
+  { key: "lastRun", label: t("integration.schedules.table.column.lastRun"), width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
+  { key: "status", label: t("integration.schedules.table.column.status"), width: "80px", sortable: true, sortGetter: (e) => e.active ? "live" : "paused" }
+]);
 </script>
 
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Schedules"
-      description="Every scheduled trigger across your workflows. Click a row to open the workflow."
+      :title="t('integration.schedules.header.title')"
+      :description="t('integration.schedules.header.description')"
     >
       <template #actions>
         <span class="text-sm text-muted-foreground">
-          <strong class="text-foreground">{{ activeCount }}</strong> active
+          <strong class="text-foreground">{{ activeCount }}</strong> {{ t("integration.schedules.stat.active") }}
         </span>
       </template>
     </PageHeader>
@@ -62,9 +83,9 @@ const columns = [
         :columns="columns"
         :row-key="(e2) => e2.id"
         :default-sort="{ column: 'nextRun', direction: 'asc' }"
-        :search="{ placeholder: 'Search by workflow, schedule, timezone\u2026' }"
-        :filter="true"
-        empty-text="No schedules yet. Add a schedule trigger to any workflow."
+        :search="{ placeholder: t('integration.schedules.search.placeholder') }"
+        :filter-tabs="filterTabs"
+        :empty-text="t('integration.schedules.state.empty')"
         @row-click="(e2) => router.push(`/integrations/workflows/${e2.workflowId}`)"
       >
         <template #cell-workflow="{ row: e }">
@@ -92,17 +113,17 @@ const columns = [
                  at several named times is a long sentence, and half of one is
                  the wrong half. Its title is the expression, so there is no
                  tooltip left to carry the rest of the words. -->
-            <div v-if="describeCron(e.cron)" aria-label="When it fires" :title="e.cron ?? void 0" class="text-sm leading-snug">
+            <div v-if="describeCron(e.cron)" :aria-label="t('integration.schedules.cell.whenItFires.aria')" :title="e.cron ?? void 0" class="text-sm leading-snug">
               {{ describeCron(e.cron) }}
             </div>
             <template v-else-if="e.cron">
-              <div aria-label="When it fires" class="text-sm truncate">
-                Custom schedule
+              <div :aria-label="t('integration.schedules.cell.whenItFires.aria')" class="text-sm truncate">
+                {{ t("integration.schedules.cell.customSchedule") }}
               </div>
-              <code aria-label="Cron expression" class="block font-mono text-xs text-muted-foreground truncate">{{ e.cron }}</code>
+              <code :aria-label="t('integration.schedules.cell.cronExpression.aria')" class="block font-mono text-xs text-muted-foreground truncate">{{ e.cron }}</code>
             </template>
-            <div v-else aria-label="When it fires" class="text-sm text-muted-foreground truncate">
-              No schedule set
+            <div v-else :aria-label="t('integration.schedules.cell.whenItFires.aria')" class="text-sm text-muted-foreground truncate">
+              {{ t("integration.schedules.cell.noSchedule") }}
             </div>
           </div>
         </template>
@@ -123,19 +144,19 @@ const columns = [
           `specs/accessibility.md`).
         -->
         <template #cell-nextRun="{ row: e }">
-          <span aria-label="Next run" class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
+          <span :aria-label="t('integration.schedules.table.column.nextRun')" class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
         </template>
 
         <template #cell-lastRun="{ row: e }">
-          <span aria-label="Last run" class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
+          <span :aria-label="t('integration.schedules.table.column.lastRun')" class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
         </template>
 
         <template #cell-status="{ row: e }">
           <Badge v-if="e.active" variant="outline" class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-xs font-medium uppercase">
-            live
+            {{ t("integration.schedules.status.live") }}
           </Badge>
           <Badge v-else variant="outline" class="text-xs font-medium uppercase">
-            paused
+            {{ t("integration.schedules.status.paused") }}
           </Badge>
         </template>
       </DataTable>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { Eye, EyeClosed as EyeOff, Key as KeyRound, RefreshCircle as Loader2, MenuDots as MoreHorizontal, AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { Eye, EyeClosed as EyeOff, Key as KeyRound, RefreshCircle as Loader2, MenuDots as MoreHorizontal, AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -24,7 +24,8 @@ import {
   Input,
   Label
 } from "@revenexx/studio";
-useHead({ title: "Secrets \xB7 Revenexx Cockpit" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
 onMounted(() => {
   void load();
@@ -45,11 +46,11 @@ function openCreate() {
 async function submitCreate() {
   const key = newKey.value.trim();
   if (!isValidKey(key)) {
-    formError.value = "Key must match ^[A-Z0-9_]+$ (uppercase letters, digits, underscores).";
+    formError.value = t("integration.secrets.form.error.invalidKey");
     return;
   }
   if (!newValue.value) {
-    formError.value = "Value is required.";
+    formError.value = t("integration.secrets.error.valueRequired");
     return;
   }
   saving.value = true;
@@ -79,39 +80,39 @@ function formatDate(iso) {
     return iso;
   }
 }
-const columns = [
-  { key: "key", label: "Key", sortable: true, sortGetter: (s) => s.key.toLowerCase() },
-  { key: "created", label: "Created", width: "160px", sortable: true, sortGetter: (s) => s.created_at, searchGetter: () => "" },
-  { key: "updated", label: "Updated", width: "160px", sortable: true, sortGetter: (s) => s.updated_at, searchGetter: () => "" },
+const columns = computed(() => [
+  { key: "key", label: t("integration.secrets.table.column.key"), sortable: true, sortGetter: (s) => s.key.toLowerCase() },
+  { key: "created", label: t("integration.secrets.table.column.created"), width: "160px", sortable: true, sortGetter: (s) => s.created_at, searchGetter: () => "" },
+  { key: "updated", label: t("integration.secrets.table.column.updated"), width: "160px", sortable: true, sortGetter: (s) => s.updated_at, searchGetter: () => "" },
   { key: "actions", label: "", width: "40px", toggleable: false }
-];
+]);
 </script>
 
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Secrets"
-      description="Per-tenant encrypted key/value store. Values are encrypted at rest and never returned by the API."
+      :title="t('integration.secrets.header.title')"
+      :description="t('integration.secrets.header.description')"
     >
       <template #actions>
         <Dialog v-model:open="createOpen">
           <DialogTrigger as-child>
             <Button class="h-7 text-sm" @click="openCreate">
               <Plus :size="14" />
-              New secret
+              {{ t("integration.secrets.action.new") }}
             </Button>
           </DialogTrigger>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle>Create a secret</DialogTitle>
+              <DialogTitle>{{ t("integration.secrets.dialog.create.title") }}</DialogTitle>
               <DialogDescription class="text-sm">
-                Once stored, the value is encrypted with AES-256-GCM and never echoed back. You can overwrite it later, but to read it you have to know it.
+                {{ t("integration.secrets.dialog.create.description") }}
               </DialogDescription>
             </DialogHeader>
 
             <div class="space-y-4 py-2">
               <div class="space-y-1.5">
-                <Label for="sec-key">Key</Label>
+                <Label for="sec-key">{{ t("integration.secrets.form.key.label") }}</Label>
                 <Input
                   id="sec-key"
                   v-model="newKey"
@@ -120,11 +121,11 @@ const columns = [
                   autocomplete="off"
                 />
                 <p class="text-sm text-muted-foreground">
-                  Pattern: <code class="font-mono">^[A-Z0-9_]+$</code>
+                  {{ t("integration.secrets.form.key.patternLabel") }} <code class="font-mono">^[A-Z0-9_]+$</code>
                 </p>
               </div>
               <div class="space-y-1.5">
-                <Label for="sec-value">Value</Label>
+                <Label for="sec-value">{{ t("integration.secrets.form.value.label") }}</Label>
                 <div class="relative">
                   <Input
                     id="sec-value"
@@ -136,7 +137,7 @@ const columns = [
                   <button
                     type="button"
                     class="absolute right-1 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded text-muted-foreground hover:text-foreground"
-                    :aria-label="showValue ? 'Hide value' : 'Show value'"
+                    :aria-label="showValue ? t('integration.secrets.form.value.hide') : t('integration.secrets.form.value.show')"
                     @click="showValue = !showValue"
                   >
                     <component :is="showValue ? EyeOff : Eye" :size="14" />
@@ -151,11 +152,11 @@ const columns = [
 
             <DialogFooter>
               <Button variant="outline" :disabled="saving" @click="createOpen = false">
-                Cancel
+                {{ t("integration.common.action.cancel") }}
               </Button>
               <Button :disabled="saving" @click="submitCreate">
                 <Loader2 v-if="saving" :size="14" class="animate-spin" />
-                {{ saving ? "Saving\u2026" : "Save" }}
+                {{ saving ? t("integration.common.state.saving") : t("integration.common.action.save") }}
               </Button>
             </DialogFooter>
           </DialogContent>
@@ -173,9 +174,8 @@ const columns = [
         :columns="columns"
         :row-key="(s2) => s2.key"
         :default-sort="{ column: 'key', direction: 'asc' }"
-        :search="{ placeholder: 'Search keys\u2026' }"
-        :filter="true"
-        empty-text="No secrets yet."
+        :search="{ placeholder: t('integration.secrets.search.placeholder') }"
+        :empty-text="t('integration.secrets.state.empty')"
       >
         <template #cell-key="{ row: s }">
           <div class="flex items-center gap-2 min-w-0">
@@ -184,7 +184,7 @@ const columns = [
             </div>
             <div class="min-w-0">
               <div class="font-mono text-sm truncate">{{ s.key }}</div>
-              <div class="text-sm text-muted-foreground">Value masked — write-only</div>
+              <div class="text-sm text-muted-foreground">{{ t("integration.secrets.cell.masked") }}</div>
             </div>
           </div>
         </template>
@@ -204,7 +204,7 @@ const columns = [
           <component
             :is="s.created_at ? 'time' : 'span'"
             :datetime="s.created_at || void 0"
-            :aria-label="`Created for ${s.key}: ${formatDate(s.created_at)}`"
+            :aria-label="t('integration.secrets.cell.created.aria', { key: s.key, date: formatDate(s.created_at) })"
             class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
           >{{ formatDate(s.created_at) }}</component>
         </template>
@@ -213,7 +213,7 @@ const columns = [
           <component
             :is="s.updated_at ? 'time' : 'span'"
             :datetime="s.updated_at || void 0"
-            :aria-label="`Updated for ${s.key}: ${formatDate(s.updated_at)}`"
+            :aria-label="t('integration.secrets.cell.updated.aria', { key: s.key, date: formatDate(s.updated_at) })"
             class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
           >{{ formatDate(s.updated_at) }}</component>
         </template>
@@ -222,16 +222,16 @@ const columns = [
           <div @click.stop>
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
-                <Button variant="ghost" size="icon" class="size-7" :aria-label="`Actions for ${s.key}`">
+                <Button variant="ghost" size="icon" class="size-7" :aria-label="t('integration.secrets.cell.actions.aria', { key: s.key })">
                   <MoreHorizontal :size="14" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuLabel>{{ t("integration.secrets.menu.label") }}</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem class="text-destructive focus:text-destructive" @select="pendingDelete = s">
-                  <Trash2 :size="14" />
-                  Delete
+                  <TrashBin :size="14" />
+                  {{ t("integration.common.action.delete") }}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -245,21 +245,21 @@ const columns = [
 }">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete secret?</AlertDialogTitle>
+          <AlertDialogTitle>{{ t("integration.secrets.dialog.delete.title") }}</AlertDialogTitle>
           <AlertDialogDescription>
             <span v-if="pendingDelete">
               <span class="font-mono font-medium text-foreground">{{ pendingDelete.key }}</span>
-              will be permanently removed. Workflows that reference it will break the next time they run.
+              {{ t("integration.secrets.dialog.delete.body") }}
             </span>
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
           <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
             <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-            {{ deleting ? "Deleting\u2026" : "Delete" }}
+            {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>