@cat-factory/app 0.47.3 → 0.47.5

package/app/components/documents/ContextDocumentPicker.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits<{ pick: [item: PendingContext] }>()
 
+const { t } = useI18n()
 const documents = useDocumentsStore()
 
 const chosen = computed(() => new Set(props.chosenKeys ?? []))
@@ -182,14 +183,14 @@ onMounted(() => {
       class="w-full"
       :placeholder="
         searchable
-          ? 'Search pages or paste a URL/ID…'
-          : (descriptor?.refPlaceholder ?? 'Paste a page URL or ID…')
+          ? t('documents.picker.searchPlaceholder')
+          : (descriptor?.refPlaceholder ?? t('documents.picker.refPlaceholder'))
       "
       @keydown.enter="refRow && pickRef(refRow)"
     />
 
     <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
-      Search failed: {{ searchError }}
+      {{ t('documents.picker.searchFailed', { error: searchError }) }}
     </p>
 
     <div class="max-h-56 space-y-0.5 overflow-y-auto">
@@ -203,7 +204,9 @@ onMounted(() => {
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
         <span class="truncate">{{ d.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">imported</UBadge>
+        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">{{
+          t('documents.picker.importedBadge')
+        }}</UBadge>
       </button>
 
       <!-- Source search hits (imported on add). -->
@@ -226,18 +229,22 @@ onMounted(() => {
         @click="pickRef(refRow)"
       >
         <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
-        <span class="truncate"
-          >Attach <span class="text-slate-200">{{ refRow }}</span> by reference</span
-        >
+        <span class="truncate">
+          <i18n-t keypath="documents.picker.attachByReference" scope="global">
+            <template #ref>
+              <span class="text-slate-200">{{ refRow }}</span>
+            </template>
+          </i18n-t>
+        </span>
       </button>
 
       <p v-if="empty" class="px-2 py-1.5 text-[11px] text-slate-500">
         {{
           query.trim()
-            ? 'No matching pages.'
+            ? t('documents.picker.noMatches')
             : searchable
-              ? 'Search by title, or pick an imported document.'
-              : 'Paste a page URL or ID to attach it.'
+              ? t('documents.picker.emptySearchable')
+              : t('documents.picker.emptyRefOnly')
         }}
       </p>
     </div>

package/app/components/documents/DocumentImportModal.vue

@@ -6,6 +6,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 // board structure. A source selector lets the user choose which connected source
 // to import from (Confluence, Notion, …). Carries an optional target frame from
 // the inspector so "Preview & spawn" lands the structure inside that frame.
+const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const board = useBoardStore()
@@ -60,10 +61,13 @@ async function doImport() {
   try {
     const doc = await documents.importDocument(source.value, value)
     ref_.value = ''
-    toast.add({ title: `Imported "${doc.title}"`, icon: 'i-lucide-file-down' })
+    toast.add({
+      title: t('documents.import.imported', { title: doc.title }),
+      icon: 'i-lucide-file-down',
+    })
   } catch (e) {
     toast.add({
-      title: 'Import failed',
+      title: t('documents.import.importFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -79,14 +83,14 @@ function preview(externalId: string) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Import from a document source">
+  <UModal v-model:open="open" :title="t('documents.import.title')">
     <template #title>
-      <IntegrationBackTitle title="Import from a document source" @back="back" />
+      <IntegrationBackTitle :title="t('documents.import.title')" @back="back" />
     </template>
     <template #body>
       <div v-if="!documents.anyConnected" class="space-y-3 text-center">
         <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
-        <p class="text-sm text-slate-400">Connect a document source first.</p>
+        <p class="text-sm text-slate-400">{{ t('documents.import.connectFirst') }}</p>
         <div class="flex justify-center gap-2">
           <UButton
             v-for="s in documents.sources"
@@ -96,22 +100,29 @@ function preview(externalId: string) {
             :icon="s.icon"
             @click="ui.openDocumentConnect(s.source)"
           >
-            Connect {{ s.label }}
+            {{ t('documents.import.connectSource', { source: s.label }) }}
           </UButton>
         </div>
       </div>
 
       <div v-else class="space-y-4">
         <p v-if="targetFrameTitle" class="text-xs text-slate-400">
-          Spawning into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+          <i18n-t keypath="documents.import.spawningInto" scope="global">
+            <template #frame>
+              <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+            </template>
+          </i18n-t>
         </p>
 
-        <UFormField v-if="sourceItems.length > 1" label="Source">
+        <UFormField v-if="sourceItems.length > 1" :label="t('documents.import.sourceLabel')">
           <USelect v-model="source" :items="sourceItems" class="w-full" />
         </UFormField>
 
         <div class="flex items-end gap-2">
-          <UFormField :label="descriptor?.refLabel ?? 'Page URL or ID'" class="flex-1">
+          <UFormField
+            :label="descriptor?.refLabel ?? t('documents.import.refLabel')"
+            class="flex-1"
+          >
             <UInput
               v-model="ref_"
               :placeholder="descriptor?.refPlaceholder"
@@ -126,13 +137,13 @@ function preview(externalId: string) {
             :disabled="!ref_.trim()"
             @click="doImport"
           >
-            Import
+            {{ t('documents.import.importButton') }}
           </UButton>
         </div>
 
         <div v-if="sourceDocs.length" class="space-y-2">
           <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            Imported documents
+            {{ t('documents.import.importedHeading') }}
           </h3>
           <div
             v-for="doc in sourceDocs"
@@ -158,12 +169,14 @@ function preview(externalId: string) {
                 icon="i-lucide-wand-sparkles"
                 @click="preview(doc.externalId)"
               >
-                Preview &amp; spawn
+                {{ t('documents.import.previewSpawn') }}
               </UButton>
             </div>
           </div>
         </div>
-        <p v-else class="text-center text-xs text-slate-500">No documents imported yet.</p>
+        <p v-else class="text-center text-xs text-slate-500">
+          {{ t('documents.import.noneImported') }}
+        </p>
       </div>
     </template>
   </UModal>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -6,6 +6,7 @@
 // "Connected" with empty fields.
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const toast = useToast()
@@ -54,14 +55,14 @@ async function submit() {
   try {
     await documents.connect(source.value, credentials)
     toast.add({
-      title: `${descriptor.value!.label} connected`,
+      title: t('documents.connect.connected', { source: descriptor.value!.label }),
       icon: 'i-lucide-check',
       color: 'success',
     })
     ui.closeDocumentConnect()
   } catch (e) {
     toast.add({
-      title: 'Could not connect',
+      title: t('documents.connect.connectFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -75,7 +76,9 @@ async function disconnect() {
   if (!source.value) return
   await documents.disconnect(source.value)
   toast.add({
-    title: `${descriptor.value?.label ?? 'Source'} disconnected`,
+    title: t('documents.connect.disconnected', {
+      source: descriptor.value?.label ?? t('documents.connect.sourceFallback'),
+    }),
     icon: 'i-lucide-unplug',
   })
   ui.closeDocumentConnect()
@@ -83,15 +86,17 @@ async function disconnect() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+  <UModal v-model:open="open" :title="descriptor?.label ?? t('documents.connect.title')">
     <template #title>
-      <IntegrationBackTitle :title="descriptor?.label ?? 'Connect source'" @back="back" />
+      <IntegrationBackTitle
+        :title="descriptor?.label ?? t('documents.connect.title')"
+        @back="back"
+      />
     </template>
     <template #body>
       <div v-if="descriptor" class="space-y-4">
         <p class="text-sm text-slate-400">
-          Connect {{ descriptor.label }} to import requirements, RFCs and PRDs, then spawn board
-          structure or attach them to tasks as agent context.
+          {{ t('documents.connect.intro', { source: descriptor.label }) }}
         </p>
 
         <p
@@ -101,8 +106,7 @@ async function disconnect() {
         >
           <UIcon name="i-lucide-user" class="mt-0.5 size-3.5 shrink-0" />
           <span>
-            Personal connection — this credential authenticates as you and is stored only for your
-            account, never shared with the rest of the workspace.
+            {{ t('documents.connect.personalNote') }}
           </span>
         </p>
 
@@ -130,7 +134,7 @@ async function disconnect() {
             icon="i-lucide-unplug"
             @click="disconnect"
           >
-            Disconnect
+            {{ t('documents.connect.disconnect') }}
           </UButton>
           <div v-else />
           <UButton
@@ -140,7 +144,7 @@ async function disconnect() {
             :disabled="!canSubmit"
             @click="submit"
           >
-            {{ connected ? 'Update connection' : 'Connect' }}
+            {{ connected ? t('documents.connect.update') : t('documents.connect.connect') }}
           </UButton>
         </div>
       </div>

package/app/components/documents/SpawnPreviewModal.vue

@@ -4,6 +4,7 @@ import type { DocumentBoardPlan } from '~/types/domain'
 // Preview the structure an imported document expands into, then spawn it. The
 // plan is fetched fresh on open; a badge makes clear whether an LLM or the
 // deterministic heading parser produced it.
+const { t } = useI18n()
 const ui = useUiStore()
 const documents = useDocumentsStore()
 const board = useBoardStore()
@@ -36,7 +37,7 @@ watch(
       plan.value = await documents.plan(preview.source, externalId)
     } catch (e) {
       toast.add({
-        title: 'Could not build a plan',
+        title: t('documents.spawn.planFailed'),
         description: e instanceof Error ? e.message : String(e),
         icon: 'i-lucide-triangle-alert',
         color: 'error',
@@ -59,8 +60,12 @@ async function spawn() {
       targetFrameId.value ?? undefined,
     )
     toast.add({
-      title: 'Structure spawned',
-      description: `${result.frames} frames · ${result.modules} modules · ${result.tasks} tasks`,
+      title: t('documents.spawn.spawned'),
+      description: t('documents.spawn.summary', {
+        frames: t('documents.spawn.frameCount', { count: result.frames }, result.frames),
+        modules: t('documents.spawn.moduleCount', { count: result.modules }, result.modules),
+        tasks: t('documents.spawn.taskCount', { count: result.tasks }, result.tasks),
+      }),
       icon: 'i-lucide-check',
       color: 'success',
     })
@@ -68,7 +73,7 @@ async function spawn() {
     ui.closeDocumentImport()
   } catch (e) {
     toast.add({
-      title: 'Spawn failed',
+      title: t('documents.spawn.spawnFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -80,7 +85,7 @@ async function spawn() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Preview structure">
+  <UModal v-model:open="open" :title="t('documents.spawn.title')">
     <template #body>
       <div class="space-y-4">
         <div v-if="plan" class="flex items-center justify-between gap-2">
@@ -89,16 +94,25 @@ async function spawn() {
             variant="subtle"
             size="sm"
           >
-            {{ plan.planner === 'llm' ? 'AI-generated' : 'From headings' }}
+            {{
+              plan.planner === 'llm'
+                ? t('documents.spawn.plannerLlm')
+                : t('documents.spawn.plannerHeadings')
+            }}
           </UBadge>
           <span v-if="targetFrameTitle" class="text-xs text-slate-400">
-            into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+            <i18n-t keypath="documents.spawn.intoFrame" scope="global">
+              <template #frame>
+                <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+              </template>
+            </i18n-t>
           </span>
-          <span v-else class="text-xs text-slate-400">as new top-level frames</span>
+          <span v-else class="text-xs text-slate-400">{{ t('documents.spawn.asTopLevel') }}</span>
         </div>
 
         <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-slate-400">
-          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" /> Building plan…
+          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" />
+          {{ t('documents.spawn.buildingPlan') }}
         </div>
 
         <div v-else-if="plan" class="max-h-80 space-y-3 overflow-y-auto pr-1">
@@ -144,7 +158,9 @@ async function spawn() {
         </div>
 
         <div class="flex justify-end gap-2 pt-1">
-          <UButton color="neutral" variant="ghost" @click="ui.closeSpawnPreview()">Cancel</UButton>
+          <UButton color="neutral" variant="ghost" @click="ui.closeSpawnPreview()">{{
+            t('common.cancel')
+          }}</UButton>
           <UButton
             color="primary"
             icon="i-lucide-wand-sparkles"
@@ -152,7 +168,7 @@ async function spawn() {
             :disabled="!plan || loadingPlan"
             @click="spawn"
           >
-            Spawn onto board
+            {{ t('documents.spawn.spawnOntoBoard') }}
           </UButton>
         </div>
       </div>

package/app/components/documents/TaskContextDocs.vue

@@ -7,6 +7,7 @@ import type { Block, DocumentSourceKind } from '~/types/domain'
 // backend's userPromptFor). Rendered only when the integration is available.
 const props = defineProps<{ block: Block }>()
 
+const { t } = useI18n()
 const documents = useDocumentsStore()
 const ui = useUiStore()
 const toast = useToast()
@@ -20,10 +21,10 @@ const linked = computed(() => documents.docsForBlock(props.block.id))
 async function attach(source: DocumentSourceKind, externalId: string) {
   try {
     await documents.linkToBlock(props.block.id, source, externalId)
-    toast.add({ title: 'Document attached', icon: 'i-lucide-link' })
+    toast.add({ title: t('documents.taskDocs.attached'), icon: 'i-lucide-link' })
   } catch (e) {
     toast.add({
-      title: 'Could not attach',
+      title: t('documents.taskDocs.attachFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -41,7 +42,7 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
       onSelect: () => attach(d.source, d.externalId),
     }))
   items.push({
-    label: 'Import a page…',
+    label: t('documents.taskDocs.importPage'),
     icon: 'i-lucide-file-down',
     onSelect: () => ui.openDocumentImport(null),
   })
@@ -53,10 +54,12 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
   <div v-if="documents.available" class="space-y-2">
     <div class="flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Context documents
+        {{ t('documents.taskDocs.heading') }}
       </span>
       <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
-        <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">Attach</UButton>
+        <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">{{
+          t('documents.taskDocs.attach')
+        }}</UButton>
       </UDropdownMenu>
     </div>
 
@@ -77,7 +80,7 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
       </a>
     </div>
     <p v-else class="text-[11px] text-slate-500">
-      Attach a requirement, RFC or PRD so agents see it while implementing this task.
+      {{ t('documents.taskDocs.empty') }}
     </p>
   </div>
 </template>

package/app/components/github/AddServiceFromRepoModal.vue

@@ -15,6 +15,7 @@ import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const github = useGitHubStore()
 const board = useBoardStore()
@@ -39,18 +40,6 @@ async function loadRepos() {
   }
 }
 
-// On open: ensure we know the connection + which repos the App can access, and
-// the workspace's already-tracked repos (to flag ones already on the board).
-watch(
-  open,
-  (isOpen) => {
-    if (!isOpen) return
-    resetSelection()
-    void loadRepos()
-  },
-  { immediate: true },
-)
-
 // If the user connects from inside the modal (the not-connected prompt), pull the
 // repo list as soon as the connection is bound.
 watch(
@@ -72,9 +61,13 @@ const onBoardIds = computed(
 const repoItems = computed(() =>
   github.availableRepos.map((r) => {
     const onBoard = onBoardIds.value.has(r.githubId) && !r.isMonorepo
-    const mono = r.isMonorepo ? ' · monorepo' : ''
+    const suffix = [
+      r.private ? t('github.addService.repoLabel.private') : '',
+      r.isMonorepo ? t('github.addService.repoLabel.monorepo') : '',
+      onBoard ? t('github.addService.repoLabel.onBoard') : '',
+    ].join('')
     return {
-      label: `${r.owner}/${r.name}${r.private ? ' (private)' : ''}${mono}${onBoard ? ' · already on board' : ''}`,
+      label: `${r.owner}/${r.name}${suffix}`,
       // Searched on (lowercased once) — the owner/name, so the filter matches either.
       search: `${r.owner}/${r.name}`.toLowerCase(),
       value: r.githubId,
@@ -152,6 +145,20 @@ const configuredBlock = computed(() =>
   configuredBlockId.value ? board.getBlock(configuredBlockId.value) : undefined,
 )
 
+// On open: ensure we know the connection + which repos the App can access, and
+// the workspace's already-tracked repos (to flag ones already on the board).
+// Declared after every ref resetSelection() touches so the `immediate` run
+// doesn't access them inside their temporal dead zone.
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    resetSelection()
+    void loadRepos()
+  },
+  { immediate: true },
+)
+
 // A monorepo service needs a chosen directory; a whole-repo service can be added once.
 const canAdd = computed(
   () =>
@@ -173,8 +180,8 @@ async function add() {
     configuredBlockId.value = block.id
     configuredDirectory.value = isMonorepo.value ? selectedDirectory.value : undefined
     toast.add({
-      title: 'Service added',
-      description: `${block.title} is on the board — configure it below.`,
+      title: t('github.addService.toast.addedTitle'),
+      description: t('github.addService.toast.addedDescription', { title: block.title }),
       icon: 'i-lucide-check',
       color: 'success',
     })
@@ -182,7 +189,7 @@ async function add() {
     selectedDirectory.value = undefined
   } catch (e) {
     toast.add({
-      title: 'Could not add service',
+      title: t('github.addService.toast.addFailedTitle'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -198,12 +205,11 @@ function done() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Add a service from a repository" :ui="{ content: 'max-w-xl' }">
+  <UModal v-model:open="open" :title="t('github.addService.title')" :ui="{ content: 'max-w-xl' }">
     <template #body>
       <div class="space-y-6">
         <p class="text-sm text-slate-400">
-          Pick an existing GitHub repository to add as a board service. No bootstrapping — the repo
-          is linked to a new service frame as-is, and tasks you run on it target that repo.
+          {{ t('github.addService.intro') }}
         </p>
 
         <!-- not connected: linking a repo needs the App bound to this workspace -->
@@ -214,8 +220,7 @@ function done() {
           <div class="flex items-start gap-2">
             <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
             <p class="text-sm text-amber-200/90">
-              Connect this workspace to GitHub first. Link an installation the App is already on, or
-              install it.
+              {{ t('github.addService.connectFirst') }}
             </p>
           </div>
           <GitHubConnect />
@@ -223,18 +228,18 @@ function done() {
 
         <template v-else>
           <UFormField
-            label="Repository"
-            description="Repositories the GitHub App can access. Don't see yours? Grant the App access below, then refresh."
+            :label="t('github.addService.repository')"
+            :description="t('github.addService.repositoryHint')"
             required
           >
             <div v-if="!hasRepos" class="text-sm text-slate-400">
-              No repositories available yet — grant the App access to one below, then refresh.
+              {{ t('github.addService.noReposAvailable') }}
             </div>
             <div v-else class="space-y-1.5">
               <UInput
                 v-model="repoSearch"
                 icon="i-lucide-search"
-                placeholder="Filter by owner/name…"
+                :placeholder="t('github.addService.filterPlaceholder')"
                 class="w-full"
                 :ui="{ trailing: 'pe-1' }"
               >
@@ -244,7 +249,7 @@ function done() {
                     variant="link"
                     size="sm"
                     icon="i-lucide-x"
-                    aria-label="Clear filter"
+                    :aria-label="t('github.addService.clearFilter')"
                     @click="repoSearch = ''"
                   />
                 </template>
@@ -252,11 +257,16 @@ function done() {
               <USelect
                 v-model="selectedRepoId"
                 :items="filteredRepoItems"
-                placeholder="Choose a repository"
+                :placeholder="t('github.addService.chooseRepository')"
                 class="w-full"
               />
               <p class="text-xs text-slate-500">
-                Showing {{ filteredRepoItems.length }} of {{ repoItems.length }} repositories.
+                {{
+                  t('github.addService.showingCount', {
+                    shown: filteredRepoItems.length,
+                    total: repoItems.length,
+                  })
+                }}
               </p>
             </div>
           </UFormField>
@@ -265,8 +275,8 @@ function done() {
           <div v-if="selectedRepoId !== undefined" class="space-y-3">
             <USwitch
               :model-value="isMonorepo"
-              label="This is a monorepo (hosts more than one service)"
-              description="Add several services from one repo, each pinned to a subdirectory."
+              :label="t('github.addService.monorepoLabel')"
+              :description="t('github.addService.monorepoDescription')"
               @update:model-value="toggleMonorepo"
             />
 
@@ -275,8 +285,7 @@ function done() {
               class="rounded-md border border-slate-700/60 bg-slate-900/40 p-3"
             >
               <p class="mb-2 text-xs text-slate-400">
-                Browse the repository and pick the directory of the service you want to add. Agents
-                working on this service will run within that subdirectory.
+                {{ t('github.addService.monorepoBrowseHint') }}
               </p>
               <RepoTreeBrowser
                 v-model="selectedDirectory"
@@ -285,10 +294,10 @@ function done() {
               />
               <p class="mt-2 truncate text-xs text-slate-400">
                 <template v-if="selectedDirectory">
-                  Service directory:
+                  {{ t('github.addService.serviceDirectory') }}
                   <code class="text-slate-200">{{ selectedDirectory }}</code>
                 </template>
-                <template v-else>No directory selected yet.</template>
+                <template v-else>{{ t('github.addService.noDirectorySelected') }}</template>
               </p>
             </div>
           </div>
@@ -302,7 +311,7 @@ function done() {
               class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-400"
             >
               <UIcon name="i-lucide-check" class="h-3.5 w-3.5" />
-              {{ configuredBlock.title }} added — configure it
+              {{ t('github.addService.addedConfigure', { title: configuredBlock.title }) }}
             </div>
             <ServiceTestConfig
               :block="configuredBlock"
@@ -319,10 +328,10 @@ function done() {
               size="sm"
               icon="i-lucide-shield-check"
               trailing-icon="i-lucide-external-link"
-              title="Open the App's installation settings to grant it access to a repository"
+              :title="t('github.addService.grantAccessTitle')"
               @click="openManageInstall"
             >
-              Grant the App access to a repo
+              {{ t('github.addService.grantAccess') }}
             </UButton>
             <UButton
               color="neutral"
@@ -332,13 +341,13 @@ function done() {
               :loading="github.loadingAvailable"
               @click="github.loadAvailableRepos()"
             >
-              Refresh list
+              {{ t('github.addService.refreshList') }}
             </UButton>
           </div>
 
           <div class="flex justify-end gap-2">
             <UButton v-if="configuredBlock" color="neutral" variant="soft" size="sm" @click="done">
-              Done
+              {{ t('github.addService.done') }}
             </UButton>
             <UButton
               v-if="!configuredBlock || isMonorepo"
@@ -348,7 +357,11 @@ function done() {
               :disabled="!canAdd"
               @click="add"
             >
-              {{ configuredBlock && isMonorepo ? 'Add another service' : 'Add service' }}
+              {{
+                configuredBlock && isMonorepo
+                  ? t('github.addService.addAnother')
+                  : t('github.addService.add')
+              }}
             </UButton>
           </div>
         </template>