@revenexx/studio-integrations 0.6.0 → 1.0.0

package/dist/runtime/pages/integrations/templates/[slug].vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 import { marked } from "marked";
-import { AltArrowRight as Chevron, Bolt as Zap, CheckCircle as CheckCircle2, ClockCircle as Clock, Global as Webhook, Key, Play, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { AltArrowRight as Chevron, CheckCircle as CheckCircle2, Key, RefreshCircle as Loader2, Shield as ShieldAlert, User } from "#solar-icons";
+import { triggerGlyph as glyphForTrigger } from "../../../data/triggerGlyphs";
 import {
   Badge,
   Button,
@@ -24,6 +25,7 @@ import NodeMark from "../../../components/Integrations/NodeMark.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
 import { describeCron } from "../../../utils/schedule";
 const SELECT_LATER = "__later__";
+const t = useIntegrationsT();
 const route = useRoute();
 const router = useRouter();
 const { get, load, loaded, fetchDetail, requirements, instantiate } = useIntegrationsTemplates();
@@ -32,7 +34,7 @@ const { keys: secretKeys, load: loadSecrets } = useIntegrationsSecrets();
 const { ofType, load: loadCredentials } = useIntegrationsCredentials();
 const slug = computed(() => String(route.params.slug));
 const tpl = computed(() => get(slug.value));
-useHead({ title: () => `${tpl.value?.name ?? "Template"} \xB7 Integration Studio` });
+useHead({ title: () => t("integration.templates.detail.head.title", { name: tpl.value?.name ?? t("integration.templates.detail.head.fallbackName") }) });
 const reqs = ref(null);
 onMounted(async () => {
   await load();
@@ -50,7 +52,7 @@ const steps = computed(() => {
   if (!blob?.nodes.length) return [];
   const nodeById = new Map(blob.nodes.map((n) => [n.id, n]));
   const happyEdges = (blob.edges ?? []).filter((e) => e.from.output !== "error");
-  const triggerHandles = new Set((blob.triggers ?? []).map((t) => t.id));
+  const triggerHandles = new Set((blob.triggers ?? []).map((t2) => t2.id));
   const incoming = /* @__PURE__ */ new Map();
   for (const e of happyEdges) {
     if (!triggerHandles.has(e.from.nodeId)) incoming.set(e.to.nodeId, (incoming.get(e.to.nodeId) ?? 0) + 1);
@@ -89,29 +91,28 @@ function firstSentence(text) {
   const idx = text.indexOf(". ");
   return idx === -1 ? text : text.slice(0, idx + 1);
 }
-const TRIGGER_ICON = { schedule: Clock, webhook: Webhook, manual: Play, event: Zap };
-const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((t) => {
-  let label = t.type.charAt(0).toUpperCase() + t.type.slice(1);
-  if (t.type === "schedule" && t.config?.cron) {
-    const when = describeCron(String(t.config.cron)) ?? String(t.config.cron);
-    label = `Schedule \xB7 ${when}${t.config.timezone ? ` (${t.config.timezone})` : ""}`;
+const triggerChips = computed(() => (tpl.value?.blob.triggers ?? []).map((trig) => {
+  let label = trig.type.charAt(0).toUpperCase() + trig.type.slice(1);
+  if (trig.type === "schedule" && trig.config?.cron) {
+    const when = describeCron(String(trig.config.cron)) ?? String(trig.config.cron);
+    label = `${t("integration.templates.detail.trigger.schedule")} \xB7 ${when}${trig.config.timezone ? ` (${trig.config.timezone})` : ""}`;
   }
-  if (t.type === "webhook" && t.config?.path) label = `Webhook \xB7 ${t.config.path}`;
-  if (t.type === "manual") label = "Run on demand";
-  return { key: t.id, icon: TRIGGER_ICON[t.type] ?? Zap, label };
+  if (trig.type === "webhook" && trig.config?.path) label = `${t("integration.templates.trigger.webhook")} \xB7 ${trig.config.path}`;
+  if (trig.type === "manual") label = t("integration.templates.trigger.manual");
+  return { key: trig.id, icon: glyphForTrigger(trig.type), label };
 }));
 const variables = computed(() => Object.entries(tpl.value?.blob.variables ?? {}).map(([key, v]) => ({
   key,
   default: String(v?.default ?? ""),
   description: resolveLocalized(v?.description ?? "")
 })));
-const variableColumns = [
-  { key: "key", label: "Variable", width: "minmax(0,180px)", sortable: true },
-  { key: "description", label: "Description" },
+const variableColumns = computed(() => [
+  { key: "key", label: t("integration.templates.detail.variables.column.key"), width: "minmax(0,180px)", sortable: true },
+  { key: "description", label: t("integration.templates.detail.variables.column.description") },
   // Stored as `default` in the blob, but it *is* the value the workflow runs
   // with — see `specs/workflow-variables.md`.
-  { key: "default", label: "Value", width: "minmax(0,200px)" }
-];
+  { key: "default", label: t("integration.templates.detail.variables.column.value"), width: "minmax(0,200px)" }
+]);
 const credentialReqs = computed(() => reqs.value?.credentialTypes ?? []);
 const secretReqs = computed(() => reqs.value?.secrets ?? []);
 const secretChecks = computed(() => {
@@ -119,7 +120,7 @@ const secretChecks = computed(() => {
   if (fromApi.length) {
     return fromApi.map((s) => ({
       key: s.key,
-      label: s.key ?? "(chosen at install)",
+      label: s.key ?? t("integration.templates.detail.secrets.chosenAtInstall"),
       present: s.exists || (s.key ? secretKeys.value.includes(s.key) : false)
     }));
   }
@@ -164,12 +165,20 @@ async function confirmInstall() {
     });
     if (id) await router.push(`/integrations/workflows/${id}`);
   } catch (e) {
-    installError.value = e.message || "Install failed.";
+    installError.value = e.message || t("integration.templates.detail.install.error.fallback");
   } finally {
     installing.value = false;
   }
 }
-const PUBLISHER_KIND_LABEL = { revenexx: "Official", partner: "Partner", community: "Community" };
+const PUBLISHER_KIND_LABEL_KEY = {
+  revenexx: "integration.templates.detail.publisher.kind.revenexx",
+  partner: "integration.templates.detail.publisher.kind.partner",
+  community: "integration.templates.detail.publisher.kind.community"
+};
+function publisherKindLabel(kind) {
+  const key = PUBLISHER_KIND_LABEL_KEY[kind];
+  return key ? t(key) : kind;
+}
 function publisherBadgeClass(kind) {
   return kind === "revenexx" ? "bg-violet-500/10 text-violet-700 border-violet-500/20" : kind === "partner" ? "bg-amber-500/10 text-amber-700 border-amber-500/20" : "bg-slate-500/10 text-slate-700 border-slate-500/20";
 }
@@ -184,21 +193,29 @@ function levelDot(level) {
       <PageHeader :title="tpl.name">
         <template #title>
           <span class="inline-flex items-center gap-1.5">
-            <NuxtLink to="/integrations/templates" class="font-normal text-muted-foreground/80 hover:text-primary transition-colors">Templates</NuxtLink>
+            <NuxtLink to="/integrations/templates" class="font-normal text-muted-foreground/80 hover:text-primary transition-colors">{{ t("integration.templates.detail.breadcrumb.templates") }}</NuxtLink>
             <Chevron :size="15" weight="Outline" class="text-muted-foreground/50" />
             <span class="truncate">{{ tpl.name }}</span>
           </span>
         </template>
         <template #actions>
           <Button class="h-7 text-sm" @click="openInstall">
-            Use template
+            {{ t("integration.templates.detail.action.useTemplate") }}
           </Button>
         </template>
       </PageHeader>
 
       <div class="p-4 space-y-4">
-        <!-- Hero: the live workflow preview on the editor's dotted canvas -->
-        <div class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]">
+        <!-- Hero: the live workflow preview on the editor's dotted canvas.
+             Named like the two panels below it, with `aria-label` because it
+             carries no heading to point at: it was the largest thing on the page
+             and the only one with no name at all, which also left it the one
+             surface drawing the miniature that nothing could address (PO-247). -->
+        <div
+          role="region"
+          :aria-label="t('integration.templates.detail.flow.ariaLabel')"
+          class="relative overflow-hidden rounded-lg border border-black/[0.06] bg-slate-50/70 [background-image:radial-gradient(circle,rgba(15,23,42,0.07)_1px,transparent_1px)] [background-size:14px_14px]"
+        >
           <TemplateFlowPreview v-if="tpl.detailLoaded" :blob="tpl.blob" :height="400" class="px-4" />
           <div v-else class="flex h-[400px] items-center justify-center">
             <Loader2 :size="18" class="animate-spin text-muted-foreground/50" />
@@ -236,7 +253,7 @@ function levelDot(level) {
               aria-labelledby="tpl-about-heading"
               class="rounded-lg border border-black/[0.06] bg-white p-4"
             >
-              <h3 id="tpl-about-heading" class="text-sm font-semibold mb-2">About this template</h3>
+              <h3 id="tpl-about-heading" class="text-sm font-semibold mb-2">{{ t("integration.templates.detail.about.title") }}</h3>
               <div
                 class="text-sm leading-relaxed text-foreground/90 space-y-2 [&_h1]:text-sm [&_h1]:font-semibold [&_h2]:text-sm [&_h2]:font-semibold [&_h3]:text-sm [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:mt-1 [&_code]:rounded [&_code]:bg-slate-100 [&_code]:px-1 [&_code]:py-px [&_code]:font-mono [&_code]:text-[13px] [&_a]:text-primary [&_a]:underline [&_strong]:font-semibold"
                 v-html="descriptionHtml"
@@ -249,7 +266,7 @@ function levelDot(level) {
               aria-labelledby="tpl-steps-heading"
               class="rounded-lg border border-black/[0.06] bg-white p-4"
             >
-              <h3 id="tpl-steps-heading" class="text-sm font-semibold mb-3">Step by step</h3>
+              <h3 id="tpl-steps-heading" class="text-sm font-semibold mb-3">{{ t("integration.templates.detail.steps.title") }}</h3>
               <ol v-if="steps.length" class="space-y-2.5">
                 <li
                   v-for="(step, i) in steps"
@@ -269,7 +286,7 @@ function levelDot(level) {
                 </li>
               </ol>
               <p v-else class="text-sm text-muted-foreground italic">
-                No step-by-step outline for this template yet.
+                {{ t("integration.templates.detail.steps.empty") }}
               </p>
             </div>
 
@@ -284,8 +301,8 @@ function levelDot(level) {
               aria-labelledby="tpl-variables-heading"
               class="rounded-lg border border-black/[0.06] bg-white p-4"
             >
-              <h3 id="tpl-variables-heading" class="text-sm font-semibold mb-1">Variables you can tune</h3>
-              <p class="text-sm text-muted-foreground mb-3">Set once after install, used across the workflow.</p>
+              <h3 id="tpl-variables-heading" class="text-sm font-semibold mb-1">{{ t("integration.templates.detail.variables.title") }}</h3>
+              <p class="text-sm text-muted-foreground mb-3">{{ t("integration.templates.detail.variables.description") }}</p>
               <DataTable
                 :data="variables"
                 :columns="variableColumns"
@@ -315,51 +332,51 @@ function levelDot(level) {
                  shows no heading of its own, so there is no visible string to
                  point `aria-labelledby` at. Copy this pattern only for a panel
                  that genuinely has none. -->
-            <div role="group" aria-label="Setup readiness" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
+            <div role="group" :aria-label="t('integration.templates.detail.setup.ariaLabel')" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
               <div v-if="setupReady" class="flex items-center gap-1.5 text-sm text-emerald-700">
                 <CheckCircle2 :size="14" />
-                Everything is ready to install.
+                {{ t("integration.templates.detail.setup.ready") }}
               </div>
               <div v-else class="text-sm text-amber-700 space-y-0.5">
                 <div v-if="missingCredentials" class="flex items-center gap-1.5">
                   <Key :size="12" />
-                  {{ missingCredentials }} credential{{ missingCredentials === 1 ? "" : "s" }} to connect
+                  {{ t("integration.templates.detail.setup.missingCredentials", missingCredentials) }}
                 </div>
                 <div v-if="missingSecrets" class="flex items-center gap-1.5">
                   <ShieldAlert :size="12" />
-                  {{ missingSecrets }} secret{{ missingSecrets === 1 ? "" : "s" }} missing
+                  {{ t("integration.templates.detail.setup.missingSecrets", missingSecrets) }}
                 </div>
               </div>
               <Button class="w-full h-8 text-sm" @click="openInstall">
-                Use template
+                {{ t("integration.templates.detail.action.useTemplate") }}
               </Button>
               <p class="text-xs text-muted-foreground">
-                Creates a paused copy in your workflows. Nothing runs until you activate it.
+                {{ t("integration.templates.detail.setup.hint") }}
               </p>
             </div>
 
             <div class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
-              <div class="text-mono text-muted-foreground">Publisher</div>
+              <div class="text-mono text-muted-foreground">{{ t("integration.templates.detail.publisher.title") }}</div>
               <div class="flex items-center gap-2">
                 <span class="flex size-6 items-center justify-center rounded-full bg-muted text-muted-foreground">
                   <User :size="12" />
                 </span>
                 <div class="text-sm font-medium truncate">{{ tpl.publisher.name }}</div>
                 <Badge variant="outline" :class="['text-sm border', publisherBadgeClass(tpl.publisher.kind)]">
-                  {{ PUBLISHER_KIND_LABEL[tpl.publisher.kind] ?? tpl.publisher.kind }}
+                  {{ publisherKindLabel(tpl.publisher.kind) }}
                 </Badge>
               </div>
               <div v-if="packageLabel" class="border-t border-black/[0.06] pt-2 text-sm">
-                <div class="text-muted-foreground">Ships with</div>
+                <div class="text-muted-foreground">{{ t("integration.templates.detail.publisher.shipsWith") }}</div>
                 <div class="font-medium">{{ packageLabel }}</div>
               </div>
               <div class="border-t border-black/[0.06] pt-2 grid grid-cols-2 gap-2 text-sm">
                 <div>
-                  <div class="text-muted-foreground">Steps</div>
+                  <div class="text-muted-foreground">{{ t("integration.templates.detail.rail.stepsLabel") }}</div>
                   <div class="font-medium tabular-nums">{{ steps.length || tpl.nodeCount }}</div>
                 </div>
                 <div>
-                  <div class="text-muted-foreground">Level</div>
+                  <div class="text-muted-foreground">{{ t("integration.templates.detail.rail.levelLabel") }}</div>
                   <span class="mt-0.5 inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
                     <span class="size-1.5 rounded-full" :class="levelDot(tpl.level)" />
                     {{ tpl.level }}
@@ -373,7 +390,7 @@ function levelDot(level) {
                  what a screen reader hears instead of what is written. -->
             <div v-if="credentialReqs.length" role="group" aria-labelledby="tpl-credentials-label" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
               <div id="tpl-credentials-label" class="flex items-center gap-1.5 text-mono text-muted-foreground">
-                <Key :size="11" /> Credentials
+                <Key :size="11" /> {{ t("integration.templates.detail.credentials.title") }}
               </div>
               <ul class="space-y-1">
                 <li
@@ -390,22 +407,22 @@ function levelDot(level) {
                     class="shrink-0 bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm"
                   >
                     <CheckCircle2 :size="10" class="mr-0.5" />
-                    {{ ofType(c.slug).length }} ready
+                    {{ t("integration.templates.detail.credentials.readyCount", ofType(c.slug).length) }}
                   </Badge>
                   <Badge v-else variant="outline" class="shrink-0 bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
-                    Connect first
+                    {{ t("integration.templates.detail.credentials.connectFirst") }}
                   </Badge>
                 </li>
               </ul>
-              <NuxtLink to="/integrations/credentials" class="block text-sm text-primary hover:underline">Manage credentials →</NuxtLink>
+              <NuxtLink to="/integrations/credentials" class="block text-sm text-primary hover:underline">{{ t("integration.templates.detail.credentials.manageLink") }} →</NuxtLink>
             </div>
 
             <div v-if="secretChecks.length" role="group" aria-labelledby="tpl-secrets-label" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
               <div class="flex items-center gap-2">
-                <span id="tpl-secrets-label" class="text-mono text-muted-foreground">Required secrets</span>
+                <span id="tpl-secrets-label" class="text-mono text-muted-foreground">{{ t("integration.templates.detail.secrets.title") }}</span>
                 <span v-if="missingSecrets > 0" class="flex items-center gap-1 text-sm text-amber-700">
                   <ShieldAlert :size="11" />
-                  {{ missingSecrets }} missing
+                  {{ t("integration.templates.detail.secrets.missingBadge", missingSecrets) }}
                 </span>
               </div>
               <ul class="space-y-1">
@@ -421,20 +438,20 @@ function levelDot(level) {
                     class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm"
                   >
                     <CheckCircle2 :size="10" class="mr-0.5" />
-                    Set
+                    {{ t("integration.templates.detail.secrets.set") }}
                   </Badge>
                   <Badge v-else variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
-                    Missing
+                    {{ t("integration.templates.detail.secrets.missing") }}
                   </Badge>
                 </li>
               </ul>
             </div>
 
             <div v-if="tpl.industries.length || tpl.vendors.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
-              <div class="text-mono text-muted-foreground">Good fit for</div>
+              <div class="text-mono text-muted-foreground">{{ t("integration.templates.detail.fit.title") }}</div>
               <div class="flex flex-wrap gap-1">
                 <span v-for="ind in tpl.industries" :key="`i-${ind}`" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
-                  {{ ind === "any" ? "Any industry" : ind }}
+                  {{ ind === "any" ? t("integration.templates.detail.fit.anyIndustry") : ind }}
                 </span>
                 <span v-for="v in tpl.vendors" :key="`v-${v}`" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
                   {{ v }}
@@ -447,54 +464,54 @@ function levelDot(level) {
     </template>
     <div v-else-if="!loaded" class="p-12 flex items-center justify-center gap-2 text-sm text-muted-foreground">
       <Loader2 :size="14" class="animate-spin" />
-      Loading template…
+      {{ t("integration.templates.detail.state.loading") }}
     </div>
     <div v-else class="p-12 text-center text-sm text-muted-foreground">
-      Template not found.
+      {{ t("integration.templates.detail.state.notFound") }}
     </div>
 
     <!-- Install: name + per-node credential binding ------------------------- -->
     <Dialog v-model:open="installOpen">
       <DialogContent class="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Use template</DialogTitle>
+          <DialogTitle>{{ t("integration.templates.detail.action.useTemplate") }}</DialogTitle>
           <DialogDescription class="text-sm">
-            Pre-wire credentials, then we create the workflow. It starts inactive, so you can finish wiring in the editor and activate when ready.
+            {{ t("integration.templates.detail.install.description") }}
           </DialogDescription>
         </DialogHeader>
 
         <div class="space-y-4 py-1 max-h-[28rem] overflow-y-auto pr-1">
           <div class="space-y-1.5">
-            <Label for="wf-name">Workflow name</Label>
-            <Input id="wf-name" v-model="name" class="bg-white" placeholder="Workflow name" />
+            <Label for="wf-name">{{ t("integration.templates.detail.install.nameLabel") }}</Label>
+            <Input id="wf-name" v-model="name" class="bg-white" :placeholder="t('integration.templates.detail.install.namePlaceholder')" />
           </div>
 
           <!-- Credentials -->
           <div class="space-y-2">
             <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
-              Credentials
+              {{ t("integration.templates.detail.credentials.title") }}
             </div>
             <p v-if="!credentialReqs.length" class="text-sm text-muted-foreground italic">
-              This template needs no credentials.
+              {{ t("integration.templates.detail.install.noCredentials") }}
             </p>
             <div v-for="req in credentialReqs" :key="req.slug" class="space-y-2">
               <div class="flex items-center gap-2">
                 <span class="text-sm font-medium">{{ req.name ?? req.slug }}</span>
                 <Badge v-if="!req.registered" variant="outline" class="bg-rose-500/10 border-rose-500/20 text-rose-700 text-sm">
-                  not registered
+                  {{ t("integration.templates.detail.install.notRegistered") }}
                 </Badge>
                 <Badge v-else-if="!ofType(req.slug).length" variant="outline" class="bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm">
-                  none yet
+                  {{ t("integration.templates.detail.install.noneYet") }}
                 </Badge>
               </div>
 
               <p v-if="!ofType(req.slug).length" class="rounded-md border-l-2 border-black/[0.08] bg-muted/30 px-2.5 py-1.5 text-sm text-muted-foreground">
-                No credentials of this type yet.
-                <NuxtLink to="/integrations/credentials" class="text-primary hover:underline">Create one</NuxtLink>
-                first, or install now and wire it up in the editor.
+                {{ t("integration.templates.detail.install.noCredentialsOfType") }}
+                <NuxtLink to="/integrations/credentials" class="text-primary hover:underline">{{ t("integration.templates.detail.install.createOneLink") }}</NuxtLink>
+                {{ t("integration.templates.detail.install.orInstallLater") }}
               </p>
               <div v-for="nodeId in nodesFor(req.usedBy)" v-else :key="nodeId" class="space-y-1">
-                <Label :for="`tpl-cred-${nodeId}`" class="text-xs text-muted-foreground font-mono">node {{ nodeId }}</Label>
+                <Label :for="`tpl-cred-${nodeId}`" class="text-xs text-muted-foreground font-mono">{{ t("integration.templates.detail.install.nodeLabel", { id: nodeId }) }}</Label>
                 <Select
                   :model-value="bindings[nodeId] ?? SELECT_LATER"
                   @update:model-value="(v2) => {
@@ -502,10 +519,10 @@ function levelDot(level) {
 }"
                 >
                   <SelectTrigger :id="`tpl-cred-${nodeId}`" class="bg-white">
-                    <SelectValue placeholder="Select later" />
+                    <SelectValue :placeholder="t('integration.templates.detail.install.selectLater')" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem :value="SELECT_LATER">Select later</SelectItem>
+                    <SelectItem :value="SELECT_LATER">{{ t("integration.templates.detail.install.selectLater") }}</SelectItem>
                     <SelectItem v-for="c in ofType(req.slug)" :key="c.id" :value="c.id">
                       {{ c.name }}
                     </SelectItem>
@@ -518,11 +535,11 @@ function levelDot(level) {
           <!-- Secrets -->
           <div v-if="secretChecks.length" class="space-y-2">
             <div class="text-mono text-muted-foreground border-b border-black/[0.06] pb-1.5">
-              Secrets
+              {{ t("integration.templates.detail.install.secretsHeader") }}
             </div>
             <p class="text-sm text-muted-foreground">
-              Referenced secret keys must exist before the workflow runs. Manage them on the
-              <NuxtLink to="/integrations/secrets" class="text-primary hover:underline">Secrets</NuxtLink> page.
+              {{ t("integration.templates.detail.install.secretsDescription") }}
+              <NuxtLink to="/integrations/secrets" class="text-primary hover:underline">{{ t("integration.nav.item.secrets") }}</NuxtLink> {{ t("integration.templates.detail.install.secretsDescriptionSuffix") }}
             </p>
             <ul class="space-y-1">
               <li
@@ -532,7 +549,7 @@ function levelDot(level) {
               >
                 <code class="font-mono">{{ s.label }}</code>
                 <Badge variant="outline" :class="s.present ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-sm' : 'bg-amber-500/10 border-amber-500/20 text-amber-700 text-sm'">
-                  {{ s.present ? "Stored" : "Missing" }}
+                  {{ s.present ? t("integration.templates.detail.install.secretStored") : t("integration.templates.detail.secrets.missing") }}
                 </Badge>
               </li>
             </ul>
@@ -545,11 +562,11 @@ function levelDot(level) {
 
         <DialogFooter>
           <Button variant="outline" :disabled="installing" @click="installOpen = false">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
           <Button :disabled="installing || !name.trim()" @click="confirmInstall">
             <Loader2 v-if="installing" :size="14" class="mr-1 animate-spin" />
-            {{ installing ? "Setting up\u2026" : "Install" }}
+            {{ installing ? t("integration.templates.detail.install.submitting") : t("integration.templates.detail.install.submit") }}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -4,12 +4,13 @@ import { Magnifier as Search, Layers, DangerTriangle as AlertTriangle } from "#s
 import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@revenexx/studio";
 import TemplateCard from "../../../components/Integrations/TemplateCard.vue";
 import { templateCategoryLabel, templatePackageLabel } from "../../../data/integrationTemplates";
-useHead({ title: "Templates \xB7 Integration Studio" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.templates.gallery.head.title") });
 const { templates, loading, error, loaded, load, ensureDetails } = useIntegrationsTemplates();
 const { load: loadNodeCatalog } = useIntegrationsNodes();
 onMounted(async () => {
   await Promise.all([load(true), loadNodeCatalog()]);
-  void ensureDetails(templates.value.map((t) => t.slug));
+  void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const search = ref("");
 const activeCategory = ref("all");
@@ -17,22 +18,31 @@ const activeLevel = ref("all");
 const sortBy = ref("name");
 const categories = computed(() => {
   const counts = /* @__PURE__ */ new Map();
-  for (const t of templates.value) {
-    if (!t.category) continue;
-    counts.set(t.category, (counts.get(t.category) ?? 0) + 1);
+  for (const t2 of templates.value) {
+    if (!t2.category) continue;
+    counts.set(t2.category, (counts.get(t2.category) ?? 0) + 1);
   }
   return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([key, count]) => ({ key, label: templateCategoryLabel(key), count }));
 });
 const LEVELS = ["beginner", "intermediate", "advanced"];
 const LEVEL_RANK = { beginner: 0, intermediate: 1, advanced: 2 };
+const levelOptions = computed(() => LEVELS.map((l) => ({
+  value: l,
+  label: t(`integration.templates.gallery.filter.level.${l}`)
+})));
+const sortOptions = computed(() => [
+  { value: "name", label: t("integration.templates.gallery.sort.name") },
+  { value: "level", label: t("integration.templates.gallery.sort.level") },
+  { value: "nodes", label: t("integration.templates.gallery.sort.nodes") }
+]);
 const filtered = computed(() => {
   const q = search.value.trim().toLowerCase();
   let items = templates.value;
-  if (activeCategory.value !== "all") items = items.filter((t) => t.category === activeCategory.value);
-  if (activeLevel.value !== "all") items = items.filter((t) => t.level === activeLevel.value);
+  if (activeCategory.value !== "all") items = items.filter((t2) => t2.category === activeCategory.value);
+  if (activeLevel.value !== "all") items = items.filter((t2) => t2.level === activeLevel.value);
   if (q) {
     items = items.filter(
-      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q) || t.vendors.some((v) => v.toLowerCase().includes(q)) || (templatePackageLabel(t) ?? "").toLowerCase().includes(q) || t.industries.some((i) => i.toLowerCase().includes(q))
+      (t2) => t2.name.toLowerCase().includes(q) || t2.description.toLowerCase().includes(q) || t2.vendors.some((v) => v.toLowerCase().includes(q)) || (templatePackageLabel(t2) ?? "").toLowerCase().includes(q) || t2.industries.some((i) => i.toLowerCase().includes(q))
     );
   }
   const sorted = [...items];
@@ -42,10 +52,10 @@ const filtered = computed(() => {
   return sorted;
 });
 watch(() => templates.value.length, () => {
-  if (templates.value.length) void ensureDetails(templates.value.map((t) => t.slug));
+  if (templates.value.length) void ensureDetails(templates.value.map((t2) => t2.slug));
 });
 const awaitingCatalogue = computed(() => loading.value && !templates.value.length);
-const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u2026" : "");
+const statusText = computed(() => awaitingCatalogue.value ? t("integration.templates.gallery.state.loading") : "");
 </script>
 
 <template>
@@ -53,8 +63,8 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
     <!-- The toolbar lives in the header's #tabs slot: PageHeader is the
          sticky element (top-0 z-20), so filters + search stay pinned. -->
     <PageHeader
-      title="Templates"
-      description="Pre-built workflows you can clone, then tweak. Wired by revenexx and our partners."
+      :title="t('integration.templates.gallery.header.title')"
+      :description="t('integration.templates.gallery.header.description')"
     >
       <template #tabs>
         <div class="-mx-3 w-[calc(100%+1.5rem)] flex items-center gap-3 border-t border-black/[0.06] px-4 pt-2.5 pb-1">
@@ -65,7 +75,7 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
             :class="activeCategory === 'all' ? 'border-primary/30 bg-primary/10 text-primary font-medium' : 'border-black/[0.08] text-muted-foreground hover:border-black/20'"
             @click="activeCategory = 'all'"
           >
-            All <span class="opacity-70">({{ templates.length }})</span>
+            {{ t("integration.templates.gallery.filter.all") }} <span class="opacity-70">({{ templates.length }})</span>
           </button>
           <button
             v-for="cat in categories"
@@ -80,27 +90,25 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
         </div>
 
         <Select v-model="activeLevel">
-          <SelectTrigger aria-label="Filter by level" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
+          <SelectTrigger :aria-label="t('integration.templates.gallery.filter.levelAria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-36 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">All levels</SelectItem>
-            <SelectItem v-for="l in LEVELS" :key="l" :value="l">{{ l.charAt(0).toUpperCase() + l.slice(1) }}</SelectItem>
+            <SelectItem value="all">{{ t("integration.templates.gallery.filter.levelAllOption") }}</SelectItem>
+            <SelectItem v-for="opt in levelOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
           </SelectContent>
         </Select>
         <Select v-model="sortBy">
-          <SelectTrigger aria-label="Sort templates" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
+          <SelectTrigger :aria-label="t('integration.templates.gallery.sort.aria')" class="h-7 data-[size=default]:h-7 min-h-0 py-0 w-40 rounded-full bg-white text-sm">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="name">Sort: A–Z</SelectItem>
-            <SelectItem value="level">Sort: Simplest first</SelectItem>
-            <SelectItem value="nodes">Sort: Most steps</SelectItem>
+            <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
           </SelectContent>
         </Select>
         <div class="relative w-60">
           <Search :size="12" class="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input v-model="search" aria-label="Search templates and vendors" placeholder="Search templates, vendors…" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
+          <Input v-model="search" :aria-label="t('integration.templates.gallery.search.aria')" :placeholder="t('integration.templates.gallery.search.placeholder')" class="h-7 min-h-0 py-0 rounded-full pl-7 text-sm bg-white" />
           </div>
         </div>
       </template>
@@ -122,7 +130,7 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
            card draws one while its flow miniature loads ("Loading the flow"). Two
            unnamed status regions on one page are two things a reader — and a test —
            cannot tell apart, and this one is about the gallery rather than a card. -->
-      <p role="status" aria-live="polite" aria-label="Template gallery" class="sr-only">{{ statusText }}</p>
+      <p role="status" aria-live="polite" :aria-label="t('integration.templates.gallery.state.regionLabel')" class="sr-only">{{ statusText }}</p>
 
       <!-- The placeholders are taken out of the accessibility tree rather than
            marked busy. `aria-busy` only asks assistive technology to defer
@@ -155,7 +163,7 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
       <div v-else-if="error && !templates.length" role="alert" class="rounded-lg border border-rose-500/20 bg-rose-500/5 p-4 text-sm text-rose-700 flex items-start gap-2">
         <AlertTriangle :size="15" class="mt-0.5 shrink-0" />
         <div>
-          <div class="font-medium">Couldn't load templates.</div>
+          <div class="font-medium">{{ t("integration.templates.gallery.error.title") }}</div>
           <div class="text-rose-700/80">{{ error }}</div>
         </div>
       </div>
@@ -165,15 +173,15 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
         <span class="mx-auto mb-3 flex size-10 items-center justify-center rounded-lg bg-slate-100 text-slate-400">
           <Layers :size="18" />
         </span>
-        <div class="text-sm font-semibold text-foreground">No templates registered yet</div>
+        <div class="text-sm font-semibold text-foreground">{{ t("integration.templates.gallery.empty.registered.title") }}</div>
         <p class="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
-          Templates ship with node packages. Once a package that publishes templates is installed, they show up here.
+          {{ t("integration.templates.gallery.empty.registered.description") }}
         </p>
       </div>
 
       <!-- The group is named so the cards can be addressed as a set; a card names
            itself from what it shows, which TemplateCard says more about. -->
-      <div v-else role="group" aria-label="Templates" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+      <div v-else role="group" :aria-label="t('integration.templates.gallery.cards.ariaLabel')" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <TemplateCard
           v-for="tpl in filtered"
           :key="tpl.slug"
@@ -184,7 +192,7 @@ const statusText = computed(() => awaitingCatalogue.value ? "Loading templates\u
       </div>
 
       <div v-if="templates.length && !filtered.length" class="mt-4 rounded-lg border border-black/[0.06] bg-white p-8 text-center text-sm text-muted-foreground">
-        No templates match these filters.
+        {{ t("integration.templates.gallery.empty.filtered") }}
       </div>
     </div>
   </IntegrationsLayout>