@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -20,9 +20,11 @@ import {
   SelectValue
 } from "@revenexx/studio";
 import TemplateFlowPreview from "../../../components/Integrations/TemplateFlowPreview.vue";
-import NodeLogo from "../../../components/Integrations/NodeLogo.vue";
-import { TEMPLATE_CATEGORIES } from "../../../data/integrationTemplates";
+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();
@@ -31,7 +33,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();
@@ -49,7 +51,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,23 +91,28 @@ function firstSentence(text) {
   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) label = `Schedule \xB7 ${t.config.cron}${t.config.timezone ? ` (${t.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 };
+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 (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: TRIGGER_ICON[trig.type] ?? Zap, 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" },
-  { key: "default", label: "Default", width: "minmax(0,200px)" }
-];
+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: 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(() => {
@@ -113,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)
     }));
   }
@@ -126,17 +133,8 @@ const secretChecks = computed(() => {
 const missingSecrets = computed(() => secretChecks.value.filter((s) => !s.present).length);
 const missingCredentials = computed(() => credentialReqs.value.filter((c) => !ofType(c.slug).length).length);
 const setupReady = computed(() => missingSecrets.value === 0 && missingCredentials.value === 0);
-const packageLabel = computed(() => {
-  const pkg = tpl.value?.package;
-  if (!pkg) return null;
-  const tail = (pkg.name.split("/").pop() ?? pkg.name).replace(/^integrations-nodes-/, "");
-  if (tail === "core") return null;
-  return pkg.label ?? tail.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(" ");
-});
-const categoryLabel = computed(() => {
-  const cat = tpl.value?.category;
-  return TEMPLATE_CATEGORIES.find((c) => c.key === cat)?.label ?? (cat ? cat.charAt(0).toUpperCase() + cat.slice(1) : "");
-});
+const packageLabel = computed(() => tpl.value ? templatePackageLabel(tpl.value) : null);
+const categoryLabel = computed(() => templateCategoryLabel(tpl.value?.category ?? ""));
 const installOpen = ref(false);
 const installing = ref(false);
 const installError = ref(null);
@@ -167,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";
 }
@@ -187,14 +193,14 @@ 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>
@@ -207,7 +213,7 @@ function levelDot(level) {
             <Loader2 :size="18" class="animate-spin text-muted-foreground/50" />
           </div>
           <div class="absolute left-3 top-3 flex items-center gap-1.5">
-            <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
+            <span v-if="categoryLabel" class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
               {{ categoryLabel }}
             </span>
             <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 uppercase text-xs font-medium text-slate-700">
@@ -233,8 +239,13 @@ function levelDot(level) {
         <div class="grid gap-4 lg:grid-cols-3">
           <div class="lg:col-span-2 space-y-4">
             <!-- About: the registry description, rendered -->
-            <div v-if="descriptionHtml" class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 class="text-sm font-semibold mb-2">About this template</h3>
+            <div
+              v-if="descriptionHtml"
+              role="region"
+              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">{{ 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"
@@ -242,8 +253,12 @@ function levelDot(level) {
             </div>
 
             <!-- Step by step, humanized from the actual nodes -->
-            <div class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 class="text-sm font-semibold mb-3">Step by step</h3>
+            <div
+              role="region"
+              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">{{ t("integration.templates.detail.steps.title") }}</h3>
               <ol v-if="steps.length" class="space-y-2.5">
                 <li
                   v-for="(step, i) in steps"
@@ -254,7 +269,7 @@ function levelDot(level) {
                     {{ i + 1 }}
                   </span>
                   <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-white ring-1 ring-black/[0.08]">
-                    <NodeLogo :manifest="step.manifest" :size="15" />
+                    <NodeMark :manifest="step.manifest" :size="15" :badge="false" />
                   </span>
                   <span class="min-w-0 pt-0.5">
                     <span class="block text-sm font-medium text-foreground">{{ step.label }}</span>
@@ -263,14 +278,23 @@ 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>
 
             <!-- Variables the operator can tune after install -->
-            <div v-if="variables.length" class="rounded-lg border border-black/[0.06] bg-white p-4">
-              <h3 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>
+            <!-- Named by its own heading rather than by a copy of it: two strings
+                 saying the same thing drift, and the test only holds one of them.
+                 `role` stays because this is a div — a bare <section> would be a
+                 region on its own, this one has to say so. -->
+            <div
+              v-if="variables.length"
+              role="region"
+              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">{{ 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"
@@ -296,51 +320,55 @@ function levelDot(level) {
           <!-- Setup rail -->
           <div class="space-y-3">
             <!-- Readiness + CTA -->
-            <div class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2.5">
+            <!-- `aria-label` deliberately, unlike the two panels below: this one
+                 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="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 }}
@@ -349,9 +377,12 @@ function levelDot(level) {
               </div>
             </div>
 
-            <div v-if="credentialReqs.length" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
-              <div class="flex items-center gap-1.5 text-mono text-muted-foreground">
-                <Key :size="11" /> Credentials
+            <!-- Named by the label it shows, like the variables panel above: an
+                 invented name is a second string saying the same thing, and it is
+                 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" /> {{ t("integration.templates.detail.credentials.title") }}
               </div>
               <ul class="space-y-1">
                 <li
@@ -368,22 +399,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" class="rounded-lg border border-black/[0.06] bg-white p-3 space-y-2">
+            <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 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">
@@ -399,20 +430,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 }}
@@ -425,65 +456,65 @@ 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 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) => {
   bindings[nodeId] = v2 ?? SELECT_LATER;
 }"
                 >
-                  <SelectTrigger class="bg-white">
-                    <SelectValue placeholder="Select later" />
+                  <SelectTrigger :id="`tpl-cred-${nodeId}`" class="bg-white">
+                    <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>
@@ -496,11 +527,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
@@ -510,7 +541,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>
@@ -523,11 +554,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>