@cat-factory/app 0.46.11 → 0.47.0

package/app/components/layout/CommandBar.vue

@@ -16,6 +16,7 @@ interface Command {
   run: () => void | Promise<void>
 }
 
+const { t } = useI18n()
 const ui = useUiStore()
 const github = useGitHubStore()
 const slack = useSlackStore()
@@ -34,13 +35,19 @@ const activeIndex = ref(0)
 const commands = computed<Command[]>(() => {
   const list: Command[] = []
 
+  const groupCreate = t('layout.commandBar.groups.create')
+  const groupRepositories = t('layout.commandBar.groups.repositories')
+  const groupIntegrations = t('layout.commandBar.groups.integrations')
+  const groupWorkspace = t('layout.commandBar.groups.workspace')
+  const groupAccount = t('layout.commandBar.groups.account')
+
   // ---- Create -------------------------------------------------------------
   list.push({
     id: 'new-pipeline',
-    label: 'Build a pipeline',
-    group: 'Create',
+    label: t('layout.commandBar.cmd.newPipeline'),
+    group: groupCreate,
     icon: 'i-lucide-workflow',
-    keywords: 'pipeline agents chain',
+    keywords: t('layout.commandBar.keywords.newPipeline'),
     run: () => ui.openBuilder(),
   })
 
@@ -48,19 +55,19 @@ const commands = computed<Command[]>(() => {
   if (github.available) {
     list.push({
       id: 'add-from-repo',
-      label: 'Add service from existing repo',
-      group: 'Repositories',
+      label: t('layout.commandBar.cmd.addFromRepo'),
+      group: groupRepositories,
       icon: 'i-lucide-folder-git-2',
-      keywords: 'github import existing',
+      keywords: t('layout.commandBar.keywords.addFromRepo'),
       run: () => ui.openAddService(),
     })
   }
   list.push({
     id: 'bootstrap-repo',
-    label: 'Bootstrap a new repo',
-    group: 'Repositories',
+    label: t('layout.commandBar.cmd.bootstrapRepo'),
+    group: groupRepositories,
     icon: 'i-lucide-git-branch-plus',
-    keywords: 'scaffold create reference architecture',
+    keywords: t('layout.commandBar.keywords.bootstrapRepo'),
     run: () => ui.openBootstrap(),
   })
 
@@ -68,20 +75,24 @@ const commands = computed<Command[]>(() => {
   if (github.available) {
     list.push({
       id: 'github',
-      label: github.connected ? 'Manage GitHub connection' : 'Connect GitHub',
-      group: 'Integrations',
+      label: github.connected
+        ? t('layout.commandBar.cmd.githubManage')
+        : t('layout.commandBar.cmd.githubConnect'),
+      group: groupIntegrations,
       icon: 'i-lucide-github',
-      keywords: 'git repos pull requests issues',
+      keywords: t('layout.commandBar.keywords.github'),
       run: () => ui.openGitHub(),
     })
   }
   if (slack.available) {
     list.push({
       id: 'slack',
-      label: slack.connected ? 'Manage Slack notifications' : 'Connect Slack',
-      group: 'Integrations',
+      label: slack.connected
+        ? t('layout.commandBar.cmd.slackManage')
+        : t('layout.commandBar.cmd.slackConnect'),
+      group: groupIntegrations,
       icon: 'i-lucide-slack',
-      keywords: 'slack notifications channel mentions',
+      keywords: t('layout.commandBar.keywords.slack'),
       run: () => ui.openSlack(),
     })
   }
@@ -89,20 +100,22 @@ const commands = computed<Command[]>(() => {
     for (const src of documents.sources) {
       list.push({
         id: `doc-connect-${src.source}`,
-        label: documents.isConnected(src.source) ? `Manage ${src.label}` : `Connect ${src.label}`,
-        group: 'Integrations',
+        label: documents.isConnected(src.source)
+          ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
+          : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
+        group: groupIntegrations,
         icon: src.icon,
-        keywords: 'document source prd rfc',
+        keywords: t('layout.commandBar.keywords.documentSource'),
         run: () => ui.openDocumentConnect(src.source),
       })
     }
     if (documents.anyConnected) {
       list.push({
         id: 'doc-import',
-        label: 'Import & spawn from documents',
-        group: 'Integrations',
+        label: t('layout.commandBar.cmd.documentImport'),
+        group: groupIntegrations,
         icon: 'i-lucide-file-down',
-        keywords: 'document import spawn',
+        keywords: t('layout.commandBar.keywords.documentImport'),
         run: () => ui.openDocumentImport(null),
       })
     }
@@ -111,20 +124,22 @@ const commands = computed<Command[]>(() => {
     for (const src of tasks.sources) {
       list.push({
         id: `task-connect-${src.source}`,
-        label: src.available ? `Manage ${src.label}` : `Connect ${src.label}`,
-        group: 'Integrations',
+        label: src.available
+          ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
+          : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
+        group: groupIntegrations,
         icon: src.icon,
-        keywords: 'task source tracker issues',
+        keywords: t('layout.commandBar.keywords.taskSource'),
         run: () => ui.openTaskConnect(src.source),
       })
     }
     if (tasks.anyOffered) {
       list.push({
         id: 'task-import',
-        label: 'Import issues',
-        group: 'Integrations',
+        label: t('layout.commandBar.cmd.taskImport'),
+        group: groupIntegrations,
         icon: 'i-lucide-file-down',
-        keywords: 'task import issues',
+        keywords: t('layout.commandBar.keywords.taskImport'),
         run: () => ui.openTaskImport(null),
       })
     }
@@ -134,68 +149,67 @@ const commands = computed<Command[]>(() => {
   if (library.available) {
     list.push({
       id: 'fragments',
-      label: 'Context fragment library',
-      group: 'Workspace',
+      label: t('layout.commandBar.cmd.fragments'),
+      group: groupWorkspace,
       icon: 'i-lucide-book-marked',
-      keywords: 'prompt fragments best practice guidelines context',
+      keywords: t('layout.commandBar.keywords.fragments'),
       run: () => ui.openFragmentLibrary(),
     })
   }
   list.push({
     id: 'merge-thresholds',
-    label: 'Merge thresholds',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.mergeThresholds'),
+    group: groupWorkspace,
     icon: 'i-lucide-git-merge',
-    keywords: 'merge policy preset auto-merge ci',
+    keywords: t('layout.commandBar.keywords.mergeThresholds'),
     run: () => ui.openWorkspaceSettings('merge'),
   })
   list.push({
     id: 'workspace-settings',
-    label: 'Workspace settings',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.workspaceSettings'),
+    group: groupWorkspace,
     icon: 'i-lucide-sliders-horizontal',
-    keywords: 'limit running tasks per service waiting escalation overdue notification timeout',
+    keywords: t('layout.commandBar.keywords.workspaceSettings'),
     run: () => ui.openWorkspaceSettings(),
   })
   list.push({
     id: 'model-configuration',
-    label: 'Model Configuration',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.modelConfiguration'),
+    group: groupWorkspace,
     icon: 'i-lucide-cpu',
-    keywords: 'model llm routing agent kind default preset configuration',
+    keywords: t('layout.commandBar.keywords.modelConfiguration'),
     run: () => ui.openModelConfig(),
   })
   list.push({
     id: 'service-fragment-defaults',
-    label: 'Default service best practices',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.serviceFragmentDefaults'),
+    group: groupWorkspace,
     icon: 'i-lucide-book-open-check',
-    keywords: 'fragment best practice guideline service default code-aware',
+    keywords: t('layout.commandBar.keywords.serviceFragmentDefaults'),
     run: () => ui.openWorkspaceSettings('fragments'),
   })
   list.push({
     id: 'account-settings',
-    label: 'Account settings',
-    group: 'Account',
+    label: t('layout.commandBar.cmd.accountSettings'),
+    group: groupAccount,
     icon: 'i-lucide-settings',
-    keywords:
-      'account team members roles invitations email api keys fragment best practice library context organization personal',
+    keywords: t('layout.commandBar.keywords.accountSettings'),
     run: () => ui.openAccountSettings(),
   })
   list.push({
     id: 'local-models',
-    label: 'My local runners',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.localModels'),
+    group: groupWorkspace,
     icon: 'i-lucide-server',
-    keywords: 'local model runner ollama lm studio llamacpp vllm endpoint',
+    keywords: t('layout.commandBar.keywords.localModels'),
     run: () => ui.openLocalModels(),
   })
   list.push({
     id: 'sandbox',
-    label: 'Open Sandbox',
-    group: 'Workspace',
+    label: t('layout.commandBar.cmd.sandbox'),
+    group: groupWorkspace,
     icon: 'i-lucide-flask-conical',
-    keywords: 'sandbox prompt model test experiment judge fixture benchmark evaluate',
+    keywords: t('layout.commandBar.keywords.sandbox'),
     run: () => ui.openSandbox(),
   })
 
@@ -285,7 +299,7 @@ function indexOf(cmd: Command) {
             ref="inputRef"
             v-model="query"
             variant="none"
-            placeholder="Search or run a command…"
+            :placeholder="t('layout.commandBar.searchPlaceholder')"
             class="w-full"
             :ui="{ base: 'py-3 text-sm' }"
           />
@@ -294,7 +308,7 @@ function indexOf(cmd: Command) {
 
         <div class="max-h-80 overflow-y-auto p-1.5">
           <p v-if="filtered.length === 0" class="px-3 py-6 text-center text-sm text-slate-500">
-            No matching commands.
+            {{ t('layout.commandBar.noMatches') }}
           </p>
 
           <div v-for="group in groups" :key="group.name" class="mb-1">

package/app/components/layout/GitHubPatBanner.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+const { t } = useI18n()
+
 // Local-mode setup prompt: when the local facade boots without a GitHub PAT, every
 // repo-operating agent step (clone, push, open PR, CI gate, merge) will fail. The server
 // also logs this, but a dev terminal is easy to miss — so surface it in the UI with the
@@ -23,19 +25,20 @@ const show = computed(() => !!setupUrl.value && !dismissed.value)
           <UIcon name="i-lucide-key-round" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
-              <h2 class="text-lg font-semibold text-amber-100">GitHub PAT not configured</h2>
+              <h2 class="text-lg font-semibold text-amber-100">
+                {{ t('layout.githubPatBanner.title') }}
+              </h2>
               <UButton
                 color="neutral"
                 variant="ghost"
                 size="xs"
                 icon="i-lucide-x"
-                aria-label="Dismiss"
+                :aria-label="t('common.close')"
                 @click="dismissed = true"
               />
             </div>
             <p class="mt-1 text-sm text-amber-200/90">
-              Local mode reaches GitHub with a personal access token. Without one, agent steps that
-              clone, push, open PRs, gate on CI or merge will fail.
+              {{ t('layout.githubPatBanner.body') }}
             </p>
 
             <div class="mt-4">
@@ -48,10 +51,14 @@ const show = computed(() => !!setupUrl.value && !dismissed.value)
                 icon="i-lucide-external-link"
                 trailing
               >
-                Create a GitHub token (scopes pre-selected)
+                {{ t('layout.githubPatBanner.createToken') }}
               </UButton>
               <p class="mt-2 text-xs text-amber-300/70">
-                Then set <code class="font-mono">GITHUB_PAT</code> and restart.
+                <i18n-t keypath="layout.githubPatBanner.thenSet" tag="span" scope="global">
+                  <template #envVar>
+                    <code class="font-mono">GITHUB_PAT</code>
+                  </template>
+                </i18n-t>
               </p>
             </div>
           </div>

package/app/components/layout/IntegrationBackTitle.vue

@@ -8,10 +8,13 @@
 // emits `back` and the host panel closes itself + reopens the right hub.
 defineProps<{ title?: string }>()
 const emit = defineEmits<{ back: [] }>()
+const { t } = useI18n()
 const ui = useUiStore()
 const cameFromHub = computed(() => ui.cameFromIntegrations || ui.cameFromPersonal)
 const backLabel = computed(() =>
-  ui.cameFromPersonal ? 'Back to My setup' : 'Back to Integrations',
+  ui.cameFromPersonal
+    ? t('layout.integrationBack.backToMySetup')
+    : t('layout.integrationBack.backToIntegrations'),
 )
 </script>
 

package/app/components/layout/IntegrationsHub.vue

@@ -11,6 +11,7 @@
 // subscriptions) now live in the "My setup" hub (UserMenu → My setup), NOT here — keeping
 // this hub purely workspace-scoped. When auth is disabled there is no UserMenu to host them,
 // so a "Personal (only you)" group falls back into this hub so they stay reachable.
+const { t } = useI18n()
 const ui = useUiStore()
 const auth = useAuthStore()
 const github = useGitHubStore()
@@ -112,14 +113,16 @@ const groups = computed<IntegrationGroup[]>(() => {
   // Top of the hub: an OpenRouter key is the fastest path to 300+ models, so it leads.
   const openRouterKeyConnected = apiKeys.configuredProviders.has('openrouter')
   out.push({
-    title: 'Models & providers',
+    title: t('layout.integrationsHub.groups.models'),
     items: [
       {
         key: 'openrouter',
         icon: 'i-lucide-waypoints',
         label: 'OpenRouter',
-        description: 'One gateway to 300+ models — add your key and enable models in one place.',
-        status: openRouterKeyConnected ? 'Key connected' : undefined,
+        description: t('layout.integrationsHub.items.openrouter.description'),
+        status: openRouterKeyConnected
+          ? t('layout.integrationsHub.status.keyConnected')
+          : undefined,
         connected: openRouterKeyConnected,
         recommended: true,
         onClick: () => go(ui.openOpenRouter),
@@ -127,8 +130,8 @@ const groups = computed<IntegrationGroup[]>(() => {
       {
         key: 'vendors',
         icon: 'i-lucide-key-round',
-        label: 'Vendors & keys',
-        description: 'Workspace LLM subscriptions and provider API keys.',
+        label: t('layout.integrationsHub.items.vendors.label'),
+        description: t('layout.integrationsHub.items.vendors.description'),
         onClick: () => go(ui.openVendorCredentials),
       },
     ],
@@ -141,14 +144,15 @@ const groups = computed<IntegrationGroup[]>(() => {
       key: 'github',
       icon: 'i-lucide-github',
       label: 'GitHub',
-      description: 'Connect the workspace’s GitHub App, browse repos, PRs and issues.',
+      description: t('layout.integrationsHub.items.github.description'),
       status: github.connected ? github.connection?.accountLogin : undefined,
       connected: github.connected,
       recommended: true,
       onClick: () => go(ui.openGitHub),
     })
   }
-  if (code.length) out.push({ title: 'Source control', items: code })
+  if (code.length)
+    out.push({ title: t('layout.integrationsHub.groups.sourceControl'), items: code })
 
   // --- Communication ---------------------------------------------------------
   const comms: IntegrationItem[] = []
@@ -157,13 +161,14 @@ const groups = computed<IntegrationGroup[]>(() => {
       key: 'slack',
       icon: 'i-lucide-slack',
       label: 'Slack',
-      description: 'Route notifications to your team’s Slack workspace.',
+      description: t('layout.integrationsHub.items.slack.description'),
       status: slack.connected ? slack.connection?.teamName : undefined,
       connected: slack.connected,
       onClick: () => go(ui.openSlack),
     })
   }
-  if (comms.length) out.push({ title: 'Communication', items: comms })
+  if (comms.length)
+    out.push({ title: t('layout.integrationsHub.groups.communication'), items: comms })
 
   // --- Documents (dynamic sources: Confluence / Notion / GitHub) -------------
   if (documents.available && documents.sources.length) {
@@ -171,8 +176,12 @@ const groups = computed<IntegrationGroup[]>(() => {
       key: `doc:${src.source}`,
       icon: src.icon,
       label: src.label,
-      description: `Link ${src.label} as a document source for requirements context.`,
-      status: documents.isConnected(src.source) ? 'Connected' : undefined,
+      description: t('layout.integrationsHub.items.documentSource.description', {
+        source: src.label,
+      }),
+      status: documents.isConnected(src.source)
+        ? t('layout.integrationsHub.status.connected')
+        : undefined,
       connected: documents.isConnected(src.source),
       onClick: () => go(() => ui.openDocumentConnect(src.source)),
     }))
@@ -180,12 +189,12 @@ const groups = computed<IntegrationGroup[]>(() => {
       docs.push({
         key: 'doc:import',
         icon: 'i-lucide-file-down',
-        label: 'Import & spawn',
-        description: 'Pull documents from a connected source and spawn structure.',
+        label: t('layout.integrationsHub.items.documentImport.label'),
+        description: t('layout.integrationsHub.items.documentImport.description'),
         onClick: () => go(() => ui.openDocumentImport(null)),
       })
     }
-    out.push({ title: 'Documents', items: docs })
+    out.push({ title: t('layout.integrationsHub.groups.documents'), items: docs })
   }
 
   // --- Task trackers (dynamic sources: Jira / GitHub) ------------------------
@@ -194,32 +203,32 @@ const groups = computed<IntegrationGroup[]>(() => {
       key: `task:${src.source}`,
       icon: src.icon,
       label: src.label,
-      description: `Link ${src.label} to import and reference tracker issues.`,
+      description: t('layout.integrationsHub.items.taskSource.description', { source: src.label }),
       // Available + enabled ⇒ offered (green); available + off ⇒ "Disabled" (amber);
       // not available ⇒ no badge (Jira needs connecting; GitHub needs its App).
       connected: src.available && src.enabled,
       attention: src.available && !src.enabled,
-      attentionLabel: 'Disabled',
+      attentionLabel: t('layout.integrationsHub.status.disabled'),
       onClick: () => go(() => ui.openTaskConnect(src.source)),
     }))
     if (tasks.anyOffered) {
       trackers.push({
         key: 'task:import',
         icon: 'i-lucide-file-down',
-        label: 'Import issues',
-        description: 'Pull issues from a connected tracker onto the board.',
+        label: t('layout.integrationsHub.items.taskImport.label'),
+        description: t('layout.integrationsHub.items.taskImport.description'),
         onClick: () => go(() => ui.openTaskImport(null)),
       })
     }
     // Choosing the filing tracker / writeback is workspace CONFIG, not an integration, so it
     // sits as a quiet footer link under the sources rather than a competing row.
     out.push({
-      title: 'Task trackers',
+      title: t('layout.integrationsHub.groups.taskTrackers'),
       items: trackers,
       footerLink: {
         key: 'task:tracker',
         icon: 'i-lucide-list-checks',
-        label: 'Issue tracker settings',
+        label: t('layout.integrationsHub.items.trackerSettings.label'),
         status: trackerLabel.value,
         onClick: () => go(() => ui.openWorkspaceSettings('tracker')),
       },
@@ -232,14 +241,16 @@ const groups = computed<IntegrationGroup[]>(() => {
   // doesn't show a dead "Connect" row that only 503s.
   if (releaseHealth.available) {
     out.push({
-      title: 'Observability',
+      title: t('layout.integrationsHub.groups.observability'),
       items: [
         {
           key: 'observability',
           icon: 'i-lucide-activity',
-          label: 'Post-release health',
-          description: 'Watch monitors and SLOs after a release ships (Datadog).',
-          status: releaseHealth.connection.connected ? 'Connected' : undefined,
+          label: t('layout.integrationsHub.items.observability.label'),
+          description: t('layout.integrationsHub.items.observability.description'),
+          status: releaseHealth.connection.connected
+            ? t('layout.integrationsHub.status.connected')
+            : undefined,
           connected: releaseHealth.connection.connected,
           onClick: () => go(ui.openObservabilityConnection),
         },
@@ -257,9 +268,9 @@ const groups = computed<IntegrationGroup[]>(() => {
     infra.push({
       key: 'environment',
       icon: 'i-lucide-cloud',
-      label: 'Ephemeral environments',
-      description: 'Where the Tester agent runs against a live preview environment.',
-      status: conn ? 'Connected' : undefined,
+      label: t('layout.integrationsHub.items.environment.label'),
+      description: t('layout.integrationsHub.items.environment.description'),
+      status: conn ? t('layout.integrationsHub.status.connected') : undefined,
       connected: !!conn,
       onClick: () => go(() => ui.openProviderConnection('environment')),
     })
@@ -269,9 +280,9 @@ const groups = computed<IntegrationGroup[]>(() => {
     infra.push({
       key: 'runner-pool',
       icon: 'i-lucide-server-cog',
-      label: 'Self-hosted runner pool',
-      description: 'Where the coding agents run when not using Cloudflare Containers.',
-      status: conn ? 'Connected' : undefined,
+      label: t('layout.integrationsHub.items.runnerPool.label'),
+      description: t('layout.integrationsHub.items.runnerPool.description'),
+      status: conn ? t('layout.integrationsHub.status.connected') : undefined,
       connected: !!conn,
       onClick: () => go(() => ui.openProviderConnection('runner-pool')),
     })
@@ -283,12 +294,13 @@ const groups = computed<IntegrationGroup[]>(() => {
     infra.push({
       key: 'local-mode',
       icon: 'i-lucide-container',
-      label: 'Local mode',
-      description: 'Warm container pool + per-repo checkout reuse for the local runner.',
+      label: t('layout.integrationsHub.items.localMode.label'),
+      description: t('layout.integrationsHub.items.localMode.description'),
       onClick: () => go(ui.openLocalModeSettings),
     })
   }
-  if (infra.length) out.push({ title: 'Infrastructure', items: infra })
+  if (infra.length)
+    out.push({ title: t('layout.integrationsHub.groups.infrastructure'), items: infra })
 
   // --- Personal (only you) — fallback when there is no UserMenu to host "My setup" -------
   // Per-user connections normally live in the My-setup hub; with auth disabled they fold in
@@ -296,22 +308,22 @@ const groups = computed<IntegrationGroup[]>(() => {
   if (!personalHubReachable.value) {
     const pat = !!userSecrets.statusFor('github_pat')
     out.push({
-      title: 'Personal (only you)',
+      title: t('layout.integrationsHub.groups.personal'),
       items: [
         {
           key: 'github-pat',
           icon: 'i-lucide-key-round',
-          label: 'My GitHub token',
-          description: 'A personal access token used for runs you start (pushes, PRs, CI, merge).',
-          status: pat ? 'Connected' : undefined,
+          label: t('layout.integrationsHub.items.githubPat.label'),
+          description: t('layout.integrationsHub.items.githubPat.description'),
+          status: pat ? t('layout.integrationsHub.status.connected') : undefined,
           connected: pat,
           onClick: () => go(ui.openUserSecrets),
         },
         {
           key: 'local-runners',
           icon: 'i-lucide-server',
-          label: 'My local runners',
-          description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
+          label: t('layout.integrationsHub.items.localRunners.label'),
+          description: t('layout.integrationsHub.items.localRunners.description'),
           onClick: () => go(ui.openLocalModels),
         },
       ],
@@ -360,11 +372,15 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Integrations" :ui="{ content: 'max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="t('layout.integrationsHub.title')"
+    :ui="{ content: 'max-w-xl' }"
+  >
     <template #body>
       <div class="space-y-5">
         <p class="text-xs text-slate-400">
-          Connect and manage the external systems this workspace can link in.
+          {{ t('layout.integrationsHub.intro') }}
         </p>
 
         <!-- Get-started cue: an empty workspace gets the two essentials up front so the first
@@ -375,10 +391,10 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
         >
           <div class="mb-2 flex items-center gap-2 text-sm font-medium text-primary-200">
             <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0" />
-            <span>Get started</span>
+            <span>{{ t('layout.integrationsHub.getStarted.title') }}</span>
           </div>
           <p class="mb-3 text-xs text-slate-300">
-            Connect a code source and a model provider to run your first pipeline.
+            {{ t('layout.integrationsHub.getStarted.body') }}
           </p>
           <div class="flex flex-wrap gap-2">
             <UButton
@@ -399,12 +415,12 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
           v-model="query"
           icon="i-lucide-search"
           size="sm"
-          placeholder="Search integrations…"
+          :placeholder="t('layout.integrationsHub.searchPlaceholder')"
           class="w-full"
         />
 
         <p v-if="!filteredGroups.length" class="px-1 py-6 text-center text-sm text-slate-500">
-          No integrations match “{{ query }}”.
+          {{ t('layout.integrationsHub.noMatches', { query }) }}
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
@@ -424,19 +440,21 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                 <div class="flex items-center gap-2">
                   <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
-                    {{ item.status || 'Connected' }}
+                    {{ item.status || t('layout.integrationsHub.status.connected') }}
                   </UBadge>
                   <UBadge v-else-if="item.attention" color="warning" variant="subtle" size="sm">
-                    {{ item.attentionLabel || 'Needs attention' }}
+                    {{ item.attentionLabel || t('layout.integrationsHub.status.needsAttention') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-slate-500">Not connected</span>
+                  <span v-else class="text-[11px] text-slate-500">{{
+                    t('layout.integrationsHub.status.notConnected')
+                  }}</span>
                   <UBadge
                     v-if="!anyConnected && item.recommended && !item.connected"
                     color="primary"
                     variant="subtle"
                     size="sm"
                   >
-                    Recommended
+                    {{ t('layout.integrationsHub.status.recommended') }}
                   </UBadge>
                 </div>
                 <p class="truncate text-xs text-slate-400">{{ item.description }}</p>