@revenexx/studio-integrations 0.6.0 → 1.0.0

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

@@ -3,7 +3,7 @@ import { computed, onMounted, reactive, ref } from "vue";
 import {
   RefreshCircle as Loader2,
   AddCircle as Plus,
-  TrashBinTrash as Trash2,
+  TrashBinMinimalistic as TrashBin,
   TestTube as TestIcon
 } from "#solar-icons";
 import {
@@ -32,10 +32,11 @@ import {
 } from "@revenexx/studio";
 import { toast } from "../../utils/notify";
 import { apiFieldErrors, refusalReason } from "../../utils/apiError";
-import { credentialState } from "../../utils/credentialState";
+import { CREDENTIAL_STATES, credentialState, credentialStateLabel } from "../../utils/credentialState";
 import { hasRevenexxSource } from "../../utils/revenexxCredentialSource";
 import { resolveLocalized } from "../../utils/localize";
-useHead({ title: "Credentials \xB7 Revenexx Cockpit" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.credentials.list.head.title") });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
 const { types, load: loadTypes, bySlug } = useCredentialTypes();
 onMounted(async () => {
@@ -47,8 +48,8 @@ function typeFor(slug) {
 function typeName(slug) {
   return resolveLocalized(typeFor(slug)?.name) || slug;
 }
-function isOAuthAuthcode(t) {
-  return t?.auth_kind === "oauth2-authcode";
+function isOAuthAuthcode(t2) {
+  return t2?.auth_kind === "oauth2-authcode";
 }
 function formatDateTime(iso) {
   if (!iso) return "\u2014";
@@ -58,15 +59,32 @@ function formatDateTime(iso) {
     return iso;
   }
 }
-const columns = [
-  { key: "system", label: "System", width: "minmax(160px,220px)", sortable: true, sortGetter: (c) => typeName(c.credential_type_slug).toLowerCase(), searchGetter: (c) => `${typeName(c.credential_type_slug)} ${c.credential_type_slug}` },
-  { key: "name", label: "Name", sortable: true, sortGetter: (c) => c.name.toLowerCase(), searchGetter: (c) => c.name },
-  { key: "status", label: "Status", width: "150px", sortable: true, sortGetter: (c) => credentialState(c).key },
-  { key: "connected", label: "Connected", width: "150px", sortable: true, sortGetter: (c) => c.last_test_ok ? c.last_test_at ?? "" : "" },
-  { key: "created", label: "Created", width: "150px", sortable: true, sortGetter: (c) => c.created_at ?? "" },
-  { key: "updated", label: "Updated", width: "150px", sortable: true, sortGetter: (c) => c.updated_at ?? "" },
+const filterTabs = computed(() => {
+  const systems = [...new Set(credentials.value.map((c) => c.credential_type_slug))].map((slug) => ({ value: slug, label: typeName(slug) })).sort((a, b) => a.label.localeCompare(b.label));
+  return [
+    {
+      key: "state",
+      label: t("integration.credentials.list.table.column.status"),
+      getter: (c) => credentialState(c).key,
+      options: CREDENTIAL_STATES.map((key) => ({ value: key, label: credentialStateLabel(key) }))
+    },
+    {
+      key: "system",
+      label: t("integration.credentials.list.table.column.system"),
+      getter: (c) => c.credential_type_slug,
+      options: systems
+    }
+  ];
+});
+const columns = computed(() => [
+  { key: "system", label: t("integration.credentials.list.table.column.system"), width: "minmax(160px,220px)", sortable: true, sortGetter: (c) => typeName(c.credential_type_slug).toLowerCase(), searchGetter: (c) => `${typeName(c.credential_type_slug)} ${c.credential_type_slug}` },
+  { key: "name", label: t("integration.credentials.list.table.column.name"), sortable: true, sortGetter: (c) => c.name.toLowerCase(), searchGetter: (c) => c.name },
+  { key: "status", label: t("integration.credentials.list.table.column.status"), width: "150px", sortable: true, sortGetter: (c) => credentialState(c).key },
+  { key: "connected", label: t("integration.credentials.list.table.column.connected"), width: "150px", sortable: true, sortGetter: (c) => c.last_test_ok ? c.last_test_at ?? "" : "" },
+  { key: "created", label: t("integration.credentials.list.table.column.created"), width: "150px", sortable: true, sortGetter: (c) => c.created_at ?? "" },
+  { key: "updated", label: t("integration.credentials.list.table.column.updated"), width: "150px", sortable: true, sortGetter: (c) => c.updated_at ?? "" },
   { key: "actions", label: "", width: "80px" }
-];
+]);
 const dialogOpen = ref(false);
 const editing = ref(null);
 const pickedType = ref(null);
@@ -78,8 +96,8 @@ const saveError = ref(null);
 const fieldErrors = ref({});
 const sourceActive = ref(false);
 const isEdit = computed(() => editing.value !== null);
-function fieldsOf(t) {
-  return t?.fields ?? [];
+function fieldsOf(t2) {
+  return t2?.fields ?? [];
 }
 function configFieldAria(key) {
   return fieldErrors.value[`config.${key}`] ? { "aria-invalid": "true", "aria-describedby": `cred-field-${key}-error` } : {};
@@ -88,9 +106,9 @@ function clearRefusal() {
   saveError.value = null;
   fieldErrors.value = {};
 }
-function openCreate(t) {
+function openCreate(t2) {
   editing.value = null;
-  pickedType.value = t ?? null;
+  pickedType.value = t2 ?? null;
   form.name = "";
   form.config = {};
   testResult.value = null;
@@ -144,7 +162,7 @@ async function submit() {
     if (isEdit.value && editing.value) {
       await update(editing.value.id, { name: form.name.trim(), config: buildConfigPayload() });
       dialogOpen.value = false;
-      toast.success("Credential updated");
+      toast.success(t("integration.credentials.toast.updated"));
     } else {
       const created = await create({
         credential_type_slug: pickedType.value.slug,
@@ -152,14 +170,14 @@ async function submit() {
         config: buildConfigPayload()
       });
       dialogOpen.value = false;
-      toast.success("Credential created");
+      toast.success(t("integration.credentials.toast.created"));
       if (isOAuthAuthcode(pickedType.value)) {
         await connect(created);
       }
     }
   } catch (e) {
     fieldErrors.value = apiFieldErrors(e);
-    saveError.value = refusalReason(e, "Could not save credential.");
+    saveError.value = refusalReason(e, t("integration.credentials.error.save"));
     toast.error(saveError.value);
   } finally {
     saving.value = false;
@@ -175,7 +193,7 @@ async function connect(c) {
       if (ev.data?.type === "integrations-oauth-complete") {
         window.removeEventListener("message", onMessage);
         await load(true);
-        toast.success("Connected");
+        toast.success(t("integration.credentials.toast.connected"));
       }
     };
     window.addEventListener("message", onMessage);
@@ -187,7 +205,7 @@ async function connect(c) {
       }
     }, 1e3);
   } catch (e) {
-    toast.error(e?.message ?? "Could not start OAuth connect.");
+    toast.error(e?.message ?? t("integration.credentials.error.oauthConnect"));
   } finally {
     connecting.value = null;
   }
@@ -200,10 +218,10 @@ async function confirmDelete() {
   deleting.value = true;
   try {
     await remove(c.id);
-    toast.success("Credential deleted");
+    toast.success(t("integration.credentials.toast.deleted"));
     pendingDelete.value = null;
   } catch (e) {
-    toast.error(e?.message ?? "Could not delete credential.");
+    toast.error(e?.message ?? t("integration.credentials.error.delete"));
   } finally {
     deleting.value = false;
   }
@@ -213,13 +231,13 @@ async function confirmDelete() {
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Credentials"
-      description="Typed, testable access data for the systems your workflows talk to — one per connection."
+      :title="t('integration.credentials.list.header.title')"
+      :description="t('integration.credentials.list.header.description')"
     >
       <template #actions>
         <Button class="h-7 text-sm" :disabled="!types.length" @click="openCreate()">
           <Plus :size="14" class="mr-1" />
-          New credential
+          {{ t("integration.credentials.list.action.new") }}
         </Button>
       </template>
     </PageHeader>
@@ -234,10 +252,10 @@ async function confirmDelete() {
         :columns="columns"
         :row-key="(c2) => c2.id"
         :default-sort="{ column: 'name', direction: 'asc' }"
-        :search="{ placeholder: 'Search credentials\u2026' }"
-        :filter="true"
+        :search="{ placeholder: t('integration.credentials.list.search.placeholder') }"
+        :filter-tabs="filterTabs"
         :loading="loading"
-        empty-text="No credentials yet — hit “New credential” to connect your first system."
+        :empty-text="t('integration.credentials.list.empty', { action: t('integration.credentials.list.action.new') })"
         @row-click="(c2) => openEdit(c2)"
       >
         <template #cell-system="{ row: c }">
@@ -288,13 +306,13 @@ async function confirmDelete() {
               size="sm"
               class="h-7 text-amber-600"
               :disabled="connecting === c.id"
-              :aria-label="`Reconnect ${c.name}`"
+              :aria-label="t('integration.credentials.list.action.reconnect.aria', { name: c.name })"
               @click="connect(c)"
             >
-              Reconnect
+              {{ t("integration.credentials.list.action.reconnect") }}
             </Button>
-            <button type="button" class="flex size-7 items-center justify-center rounded text-foreground/40 hover:text-rose-600 hover:bg-rose-500/10" :title="`Delete ${c.name}`" :aria-label="`Delete ${c.name}`" @click="pendingDelete = c">
-              <Trash2 :size="13" />
+            <button type="button" class="flex size-7 items-center justify-center rounded text-foreground/40 hover:text-rose-600 hover:bg-rose-500/10" :title="t('integration.credentials.list.action.delete.aria', { name: c.name })" :aria-label="t('integration.credentials.list.action.delete.aria', { name: c.name })" @click="pendingDelete = c">
+              <TrashBin :size="13" />
             </button>
           </div>
         </template>
@@ -305,9 +323,9 @@ async function confirmDelete() {
     <Dialog v-model:open="dialogOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>{{ isEdit ? "Edit credential" : "New credential" }}</DialogTitle>
+          <DialogTitle>{{ isEdit ? t("integration.credentials.shared.dialog.title.edit") : t("integration.credentials.shared.dialog.title.create") }}</DialogTitle>
           <DialogDescription class="text-sm">
-            {{ isEdit ? "Update the credential. Leave secret fields blank to keep the current value." : "Pick a type and fill in its access data." }}
+            {{ isEdit ? t("integration.credentials.list.dialog.description.edit") : t("integration.credentials.list.dialog.description.create") }}
           </DialogDescription>
         </DialogHeader>
 
@@ -315,9 +333,9 @@ async function confirmDelete() {
         <IntegrationsCredentialTypePicker
           v-if="!pickedType"
           :types="types"
-          @pick="(t) => {
-  pickedType = t;
-  form.name = resolveLocalized(t.name);
+          @pick="(picked) => {
+  pickedType = picked;
+  form.name = resolveLocalized(picked.name);
   clearRefusal();
 }"
         />
@@ -325,12 +343,12 @@ async function confirmDelete() {
         <!-- Step 2: dynamic form -->
         <div v-else class="space-y-3 py-1 max-h-[28rem] overflow-y-auto pr-1">
           <div class="space-y-1.5">
-            <Label for="cred-name">Name</Label>
+            <Label for="cred-name">{{ t("integration.credentials.shared.field.name.label") }}</Label>
             <Input
               id="cred-name"
               v-model="form.name"
               class="bg-white"
-              placeholder="e.g. Production SMTP"
+              :placeholder="t('integration.credentials.list.dialog.field.name.placeholder')"
               :aria-invalid="fieldErrors.name ? 'true' : void 0"
               :aria-describedby="fieldErrors.name ? 'cred-name-error' : void 0"
             />
@@ -362,7 +380,7 @@ async function confirmDelete() {
               :model-value="form.config[f.key] ?? ''"
               type="password"
               autocomplete="new-password"
-              :placeholder="isEdit ? 'Leave blank to keep current' : ''"
+              :placeholder="isEdit ? t('integration.credentials.shared.field.secret.placeholder') : ''"
               class="bg-white"
               v-bind="configFieldAria(f.key)"
               @update:model-value="(v) => form.config[f.key] = v"
@@ -388,7 +406,7 @@ async function confirmDelete() {
               @update:model-value="(v) => form.config[f.key] = v"
             >
               <SelectTrigger :id="`cred-field-${f.key}`" class="bg-white" v-bind="configFieldAria(f.key)">
-                <SelectValue placeholder="Pick one" />
+                <SelectValue :placeholder="t('integration.credentials.shared.field.select.placeholder')" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem v-for="opt in f.options ?? []" :key="String(opt.value)" :value="String(opt.value)">
@@ -416,7 +434,7 @@ async function confirmDelete() {
           </div>
 
           <p v-if="isOAuthAuthcode(pickedType) && !isEdit" class="text-sm text-muted-foreground">
-            After saving, a window opens to connect with the provider.
+            {{ t("integration.credentials.shared.oauthHint") }}
           </p>
 
           <div
@@ -424,7 +442,10 @@ async function confirmDelete() {
             class="rounded-md px-3 py-2 text-sm"
             :class="testResult.ok ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700'"
           >
-            {{ testResult.ok ? "Connection ok." : testResult.error ?? "Connection failed." }}
+            <!-- What the credential type said, whichever way the test went. The fixed
+                 sentences are the fallback for a type that reports nothing, not the
+                 first choice (specs/credential-test.md). -->
+            {{ testResult.ok ? testResult.message ?? t("integration.credentials.shared.test.ok") : testResult.error ?? testResult.message ?? t("integration.credentials.shared.test.failed") }}
           </div>
 
         </div>
@@ -442,18 +463,18 @@ async function confirmDelete() {
         <DialogFooter v-if="pickedType" class="sm:justify-between">
           <Button v-if="!isEdit" variant="ghost" size="sm" :disabled="saving || testing" @click="pickedType = null;
   clearRefusal()">
-            Back
+            {{ t("integration.credentials.list.dialog.action.back") }}
           </Button>
           <span v-else />
           <div class="flex items-center gap-2">
             <Button variant="outline" :disabled="saving || testing" @click="runTest">
               <Loader2 v-if="testing" :size="14" class="mr-1 animate-spin" />
               <TestIcon v-else :size="14" class="mr-1" />
-              Connect
+              {{ t("integration.credentials.shared.action.testConnection") }}
             </Button>
             <Button :disabled="saving || !form.name.trim()" @click="submit">
               <Loader2 v-if="saving" :size="14" class="mr-1 animate-spin" />
-              Save
+              {{ t("integration.common.action.save") }}
             </Button>
           </div>
         </DialogFooter>
@@ -465,21 +486,21 @@ async function confirmDelete() {
 }">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete credential?</AlertDialogTitle>
+          <AlertDialogTitle>{{ t("integration.credentials.shared.confirm.delete.title") }}</AlertDialogTitle>
           <AlertDialogDescription>
             <span v-if="pendingDelete">
               <span class="font-medium text-foreground">{{ pendingDelete.name }}</span>
-              will be removed. Workflows that reference it will fail until they are re-bound to another credential.
+              {{ t("integration.credentials.shared.confirm.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>

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

@@ -1,15 +1,19 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import SurfaceCard from "../../components/Integrations/SurfaceCard.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 { servedPaths } from "../../utils/servedPaths";
+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 { startingPoints, loading: templatesLoading, load: loadTemplates, ensureDetails } = useIntegrationsTemplates();
-watch(() => startingPoints.value.map((t) => t.slug).join(","), () => {
-  if (startingPoints.value.length) void ensureDetails(startingPoints.value.map((t) => t.slug));
+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();
@@ -39,80 +43,77 @@ const failedRecent = computed(() => latestByWorkflow.value.filter((r) => r.statu
 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: "scheduled 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") }
+]);
+const router = useRouter();
+function surfaceCards() {
+  const served = servedPaths(router.getRoutes().map((route) => route.path));
+  return surfaces.value.map((sfc) => ({ ...sfc, available: served.has(sfc.to) }));
+}
 </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>
@@ -122,11 +123,11 @@ const surfaces = [
            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="Key figures" class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+      <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}`"
@@ -156,16 +157,16 @@ const surfaces = [
       <!-- 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 role="group" aria-label="Latest executions" 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>
@@ -180,7 +181,7 @@ const surfaces = [
               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>
@@ -209,19 +210,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 role="group" aria-label="Needs attention" 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">
@@ -234,9 +235,9 @@ 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>
             <!-- A link, for the same reason as the entries next door — and like
@@ -249,7 +250,7 @@ const surfaces = [
             >
               <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. -->
@@ -259,30 +260,22 @@ const surfaces = [
             </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>
 
-      <!-- Data exchange & events — the studio surfaces beyond workflows. -->
+      <!-- Data exchange & events — surfaces beyond workflows, and the only cards
+           here that lead OUT of this module: all four are the cockpit's pages.
+           Where the host does not have them the card stays and says so, rather
+           than leading into a 404 (PO-223, `SurfaceCard.vue`). -->
       <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-        <NuxtLink
-          v-for="sfc in surfaces"
+        <SurfaceCard
+          v-for="sfc in surfaceCards()"
           :key="sfc.to"
-          :to="sfc.to"
-          class="group rounded-lg border border-black/[0.06] bg-white p-3 transition hover:border-black/20"
-        >
-          <div class="flex items-center gap-2">
-            <span class="flex size-6 items-center justify-center rounded-md bg-slate-100 text-slate-500">
-              <component :is="sfc.icon" :size="12" />
-            </span>
-            <span class="min-w-0 flex-1 truncate text-sm font-semibold">{{ sfc.label }}</span>
-            <ArrowRight :size="11" class="text-muted-foreground transition-transform group-hover:translate-x-0.5" />
-          </div>
-          <p class="mt-2 text-sm text-muted-foreground">
-            {{ sfc.hint }}
-          </p>
-        </NuxtLink>
+          v-bind="sfc"
+          :note="t('integration.dashboard.surface.unavailable', { surface: sfc.label })"
+        />
       </div>
 
       <!-- Named for the offer it makes, not for a ranking nothing measures
@@ -290,16 +283,16 @@ const surfaces = [
            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="Start from a template" class="rounded-lg border border-black/[0.06] bg-white">
+      <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">Start from a template</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 && !startingPoints.length" class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
@@ -310,7 +303,7 @@ const surfaces = [
           </div>
         </div>
         <div v-else-if="!startingPoints.length" class="px-3 py-6 text-center text-sm text-muted-foreground">
-          No templates registered yet.
+          {{ t("integration.dashboard.templates.empty") }}
         </div>
         <div v-else class="grid gap-2 p-3 sm:grid-cols-2 lg:grid-cols-4">
           <TemplateCard