@cat-factory/app 0.46.11 → 0.47.0

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -11,6 +11,7 @@ import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const store = useOpenRouterStore()
@@ -89,11 +90,16 @@ const recommendedAvailable = computed(() => {
 
 function contextLabel(tokens: number | undefined): string {
   if (!tokens) return ''
-  return tokens >= 1000 ? `${Math.round(tokens / 1000)}K ctx` : `${tokens} ctx`
+  return tokens >= 1000
+    ? t('settings.openRouterCatalog.contextThousands', { value: Math.round(tokens / 1000) })
+    : t('settings.openRouterCatalog.context', { value: tokens })
 }
 
 function priceLabel(m: OpenRouterModelMeta): string {
-  return `${m.inputPerMillion}/${m.outputPerMillion} per Mtok`
+  return t('settings.openRouterCatalog.price', {
+    input: m.inputPerMillion,
+    output: m.outputPerMillion,
+  })
 }
 
 function toggle(id: string, on: boolean) {
@@ -132,8 +138,8 @@ async function connectKey() {
         else await apiKeys.removeUserKey(created.id).catch(() => {})
       }
       toast.add({
-        title: 'Could not connect key',
-        description: store.refreshError ?? 'OpenRouter rejected the key.',
+        title: t('settings.openRouterCatalog.toast.connectFailed'),
+        description: store.refreshError ?? t('settings.openRouterCatalog.toast.rejected'),
         icon: 'i-lucide-triangle-alert',
         color: 'error',
       })
@@ -141,10 +147,14 @@ async function connectKey() {
     }
     keyValue.value = ''
     keyLabel.value = ''
-    toast.add({ title: 'OpenRouter key connected', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('settings.openRouterCatalog.toast.connected'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not connect key',
+      title: t('settings.openRouterCatalog.toast.connectFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -159,8 +169,8 @@ async function refresh() {
   const result = await store.refresh(workspace.workspaceId)
   if (!result.reachable) {
     toast.add({
-      title: 'Could not reach OpenRouter',
-      description: store.refreshError ?? 'Connect an OpenRouter key first.',
+      title: t('settings.openRouterCatalog.toast.unreachable'),
+      description: store.refreshError ?? t('settings.openRouterCatalog.toast.connectFirst'),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
     })
@@ -179,10 +189,14 @@ async function save() {
     await store.save(workspace.workspaceId, models2)
     // Reflect newly-enabled models in the picker immediately.
     await models.refresh(workspace.workspaceId)
-    toast.add({ title: 'OpenRouter catalog saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('settings.openRouterCatalog.toast.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not save catalog',
+      title: t('settings.openRouterCatalog.toast.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -206,9 +220,11 @@ function manageKeys() {
     <template #body>
       <div class="space-y-4">
         <p class="text-xs text-slate-400">
-          Reach <strong>300+ models</strong> through one gateway. Add your OpenRouter key below,
-          then enable the models you want — they appear in the model picker with their context
-          window and price, and meter against your spend budget.
+          <i18n-t keypath="settings.openRouterCatalog.intro" tag="span" scope="global">
+            <template #models>
+              <strong>{{ t('settings.openRouterCatalog.introModels') }}</strong>
+            </template>
+          </i18n-t>
         </p>
 
         <!-- Step 1: connect a key (inline) — hidden once a key is connected -->
@@ -217,40 +233,49 @@ function manageKeys() {
           class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/60 p-4"
         >
           <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-            Connect your OpenRouter key
+            {{ t('settings.openRouterCatalog.connectHeading') }}
           </h4>
           <ol class="list-decimal space-y-1 pl-5 text-sm text-slate-300">
             <li>
-              Open
-              <a
-                href="https://openrouter.ai/keys"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-primary-400 underline"
-                >openrouter.ai → Keys ↗</a
-              >
-              and create an API key.
+              <i18n-t keypath="settings.openRouterCatalog.step1" tag="span" scope="global">
+                <template #link>
+                  <a
+                    href="https://openrouter.ai/keys"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary-400 underline"
+                    >{{ t('settings.openRouterCatalog.step1Link') }}</a
+                  >
+                </template>
+              </i18n-t>
             </li>
             <li>
-              Copy the key (starts with <span class="font-mono">sk-or-…</span>) and paste it below.
+              <i18n-t keypath="settings.openRouterCatalog.step2" tag="span" scope="global">
+                <template #prefix>
+                  <span class="font-mono">sk-or-…</span>
+                </template>
+              </i18n-t>
             </li>
           </ol>
           <div class="flex flex-wrap items-end gap-3">
-            <UFormField label="Scope">
+            <UFormField :label="t('settings.openRouterCatalog.scope')">
               <USelect
                 v-model="keyScope"
                 :items="[
-                  { label: 'This workspace', value: 'workspace' },
-                  { label: 'My keys (only me)', value: 'user' },
+                  { label: t('settings.openRouterCatalog.scopeWorkspace'), value: 'workspace' },
+                  { label: t('settings.openRouterCatalog.scopeUser'), value: 'user' },
                 ]"
                 class="w-48"
               />
             </UFormField>
-            <UFormField label="Label (optional)" class="flex-1">
-              <UInput v-model="keyLabel" placeholder="e.g. team key" />
+            <UFormField :label="t('settings.openRouterCatalog.labelOptional')" class="flex-1">
+              <UInput
+                v-model="keyLabel"
+                :placeholder="t('settings.openRouterCatalog.labelPlaceholder')"
+              />
             </UFormField>
           </div>
-          <UFormField label="API key">
+          <UFormField :label="t('settings.openRouterCatalog.apiKey')">
             <UTextarea
               v-model="keyValue"
               :rows="2"
@@ -265,7 +290,7 @@ function manageKeys() {
               icon="i-lucide-plus"
               @click="connectKey()"
             >
-              Connect & browse
+              {{ t('settings.openRouterCatalog.connectAndBrowse') }}
             </UButton>
           </div>
         </div>
@@ -277,10 +302,10 @@ function manageKeys() {
         >
           <span class="flex items-center gap-2 text-slate-300">
             <UIcon name="i-lucide-check-circle" class="h-4 w-4 text-emerald-400" />
-            OpenRouter key connected
+            {{ t('settings.openRouterCatalog.keyConnected') }}
           </span>
           <UButton color="neutral" variant="ghost" size="xs" @click="manageKeys()">
-            Manage in Vendors & keys
+            {{ t('settings.openRouterCatalog.manageKeys') }}
           </UButton>
         </div>
 
@@ -295,7 +320,7 @@ function manageKeys() {
               :loading="store.refreshing"
               @click="refresh()"
             >
-              Refresh catalog
+              {{ t('settings.openRouterCatalog.refresh') }}
             </UButton>
             <UButton
               v-if="recommendedAvailable.length"
@@ -305,14 +330,14 @@ function manageKeys() {
               icon="i-lucide-sparkles"
               @click="enableRecommended()"
             >
-              Enable recommended
+              {{ t('settings.openRouterCatalog.enableRecommended') }}
             </UButton>
             <UInput
               v-model="filter"
               size="sm"
               class="flex-1"
               icon="i-lucide-search"
-              placeholder="Filter by name or slug…"
+              :placeholder="t('settings.openRouterCatalog.filterPlaceholder')"
             />
           </div>
 
@@ -341,12 +366,17 @@ function manageKeys() {
             </label>
           </div>
           <p v-else class="text-xs text-slate-500">
-            No models yet — hit <span class="text-slate-300">Refresh catalog</span> to load
-            OpenRouter's live list.
+            <i18n-t keypath="settings.openRouterCatalog.empty" tag="span" scope="global">
+              <template #action>
+                <span class="text-slate-300">{{ t('settings.openRouterCatalog.refresh') }}</span>
+              </template>
+            </i18n-t>
           </p>
 
           <div class="flex items-center justify-between">
-            <span class="text-xs text-slate-500">{{ selectedCount }} enabled</span>
+            <span class="text-xs text-slate-500">{{
+              t('settings.openRouterCatalog.enabledCount', { count: selectedCount }, selectedCount)
+            }}</span>
             <UButton
               color="primary"
               variant="soft"
@@ -355,7 +385,7 @@ function manageKeys() {
               :loading="busy"
               @click="save()"
             >
-              Save
+              {{ t('common.save') }}
             </UButton>
           </div>
         </template>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -12,23 +12,28 @@ import type { ProviderConnectionKind } from '~/types/providerConnections'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const store = useProviderConnectionsStore()
 const toast = useToast()
 
-const META: Record<ProviderConnectionKind, { title: string; icon: string; blurb: string }> = {
-  environment: {
-    title: 'Ephemeral environment provider',
-    icon: 'i-lucide-cloud',
-    blurb:
-      'Where the Tester agent runs against a live preview environment. Configure the per-workspace settings and credentials your provider needs.',
-  },
-  'runner-pool': {
-    title: 'Self-hosted runner pool',
-    icon: 'i-lucide-server-cog',
-    blurb:
-      'Where the coding agents run when not using Cloudflare Containers. Configure the pool scheduler endpoint and credentials.',
-  },
+// Per-kind icon (display-only). The title + blurb copy resolve through the i18n catalog
+// via literal keys keyed off the provider-connection kind (see TITLE_KEYS / BLURB_KEYS).
+const ICONS: Record<ProviderConnectionKind, string> = {
+  environment: 'i-lucide-cloud',
+  'runner-pool': 'i-lucide-server-cog',
+}
+
+// Exhaustive Record keyed off the provider-connection-kind union (a missing member fails
+// the typecheck); each value is a LITERAL catalog key so the typed-message-keys check sees
+// it. Leaf keys mirror the kind verbatim.
+const TITLE_KEYS: Record<ProviderConnectionKind, string> = {
+  environment: 'settings.providerConnection.kind.environment.title',
+  'runner-pool': 'settings.providerConnection.kind.runner-pool.title',
+}
+const BLURB_KEYS: Record<ProviderConnectionKind, string> = {
+  environment: 'settings.providerConnection.kind.environment.blurb',
+  'runner-pool': 'settings.providerConnection.kind.runner-pool.blurb',
 }
 
 const kind = computed<ProviderConnectionKind | null>(() => ui.providerConnectionKind)
@@ -40,7 +45,15 @@ const open = computed({
 })
 const back = useIntegrationBack(open)
 
-const meta = computed(() => (kind.value ? META[kind.value] : null))
+const meta = computed(() =>
+  kind.value
+    ? {
+        title: t(TITLE_KEYS[kind.value]),
+        icon: ICONS[kind.value],
+        blurb: t(BLURB_KEYS[kind.value]),
+      }
+    : null,
+)
 const descriptor = computed(() => (kind.value ? store.descriptorFor(kind.value) : null))
 const connection = computed(() => (kind.value ? store.connectionFor(kind.value) : null))
 
@@ -69,7 +82,7 @@ async function setDelegation(patch: {
   try {
     await settings.update(patch)
   } catch (e) {
-    notifyError('Could not update delegation', e)
+    notifyError(t('settings.providerConnection.delegation.updateFailed'), e)
   } finally {
     savingDelegation.value = false
   }
@@ -226,9 +239,13 @@ async function save() {
       await store.updateSecrets(kind.value, buildSecretsOnly())
     }
     resetDraft()
-    toast.add({ title: `${meta.value?.title} saved`, icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('settings.providerConnection.toast.saved', { title: meta.value?.title ?? '' }),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
-    notifyError('Could not save the connection', e)
+    notifyError(t('settings.providerConnection.toast.saveFailed'), e)
   } finally {
     busy.value = false
   }
@@ -240,9 +257,9 @@ async function remove() {
   try {
     await store.remove(kind.value)
     resetDraft()
-    toast.add({ title: 'Connection removed', icon: 'i-lucide-check' })
+    toast.add({ title: t('settings.providerConnection.toast.removed'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError('Could not remove the connection', e)
+    notifyError(t('settings.providerConnection.toast.removeFailed'), e)
   } finally {
     busy.value = false
   }
@@ -254,16 +271,24 @@ function fieldHelp(key: string): string | undefined {
   if (!f) return undefined
   const filled = (values.value[key] ?? '').trim()
   if (f.default !== undefined && !filled) {
-    return f.help ? `${f.help} · Defaults to ${f.default}` : `Defaults to ${f.default}`
+    const defaulted = t('settings.providerConnection.field.defaultsTo', { value: f.default })
+    return f.help ? `${f.help} · ${defaulted}` : defaulted
   }
   return f.help
 }
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="meta?.title ?? 'Provider'" :ui="{ content: 'max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="meta?.title ?? t('settings.providerConnection.fallbackTitle')"
+    :ui="{ content: 'max-w-xl' }"
+  >
     <template #title>
-      <IntegrationBackTitle :title="meta?.title ?? 'Provider'" @back="back" />
+      <IntegrationBackTitle
+        :title="meta?.title ?? t('settings.providerConnection.fallbackTitle')"
+        @back="back"
+      />
     </template>
     <template #body>
       <!-- Local-mode infrastructure delegation: the local-vs-external choice for BOTH
@@ -273,11 +298,11 @@ function fieldHelp(key: string): string | undefined {
         class="mb-4 space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
       >
         <div>
-          <h3 class="text-sm font-semibold text-slate-200">Local delegation</h3>
+          <h3 class="text-sm font-semibold text-slate-200">
+            {{ t('settings.providerConnection.delegation.title') }}
+          </h3>
           <p class="mt-1 text-[11px] text-slate-400">
-            By default this machine runs everything locally — container agents on host Docker, the
-            Tester's infrastructure via in-container docker-compose. Opt in below to delegate either
-            concern to an external service instead. Applies only in local mode.
+            {{ t('settings.providerConnection.delegation.intro') }}
           </p>
         </div>
 
@@ -290,20 +315,28 @@ function fieldHelp(key: string): string | undefined {
               :disabled="savingDelegation || !runnerPoolRegistered"
               @update:model-value="(v) => setDelegation({ delegateAgentsToRunnerPool: v })"
             />
-            <span class="text-sm text-slate-200">Run container agents on the runner pool</span>
+            <span class="text-sm text-slate-200">
+              {{ t('settings.providerConnection.delegation.agentsToggle') }}
+            </span>
           </label>
           <p class="pl-9 text-[11px] text-slate-400">
-            Dispatch every container agent (coder, tester, merger, bootstrap, …) to this workspace's
-            self-hosted runner pool instead of host Docker.
+            {{ t('settings.providerConnection.delegation.agentsHint') }}
             <template v-if="!runnerPoolRegistered">
-              <button
-                type="button"
-                class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
-                @click="openRunnerPoolPanel"
+              <i18n-t
+                keypath="settings.providerConnection.delegation.registerPoolPrompt"
+                tag="span"
+                scope="global"
               >
-                Register a runner pool
-              </button>
-              first to enable this.
+                <template #link>
+                  <button
+                    type="button"
+                    class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
+                    @click="openRunnerPoolPanel"
+                  >
+                    {{ t('settings.providerConnection.delegation.registerPoolLink') }}
+                  </button>
+                </template>
+              </i18n-t>
             </template>
           </p>
         </div>
@@ -318,12 +351,11 @@ function fieldHelp(key: string): string | undefined {
               @update:model-value="(v) => setDelegation({ delegateTestEnvToProvider: v })"
             />
             <span class="text-sm text-slate-200">
-              Provision Tester environments via the provider
+              {{ t('settings.providerConnection.delegation.envToggle') }}
             </span>
           </label>
           <p class="pl-9 text-[11px] text-slate-400">
-            Stand the Tester's preview environment up through the environment provider configured
-            below instead of in-container docker-compose. Connect a provider first to enable this.
+            {{ t('settings.providerConnection.delegation.envHint') }}
           </p>
         </div>
       </section>
@@ -334,15 +366,17 @@ function fieldHelp(key: string): string | undefined {
         v-if="isLocal && kind === 'runner-pool'"
         class="mb-4 rounded-md border border-slate-700 bg-slate-900/40 px-3 py-2 text-[11px] text-slate-400"
       >
-        Register your pool here, then enable "Run container agents on the runner pool" on the
-        <button
-          type="button"
-          class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
-          @click="ui.openProviderConnection('environment')"
-        >
-          Ephemeral environments
-        </button>
-        screen to route this workspace's agents to it.
+        <i18n-t keypath="settings.providerConnection.runnerPoolLocalHint" tag="span" scope="global">
+          <template #link>
+            <button
+              type="button"
+              class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
+              @click="ui.openProviderConnection('environment')"
+            >
+              {{ t('settings.providerConnection.ephemeralEnvironments') }}
+            </button>
+          </template>
+        </i18n-t>
       </p>
 
       <div v-if="descriptor" class="space-y-4">
@@ -355,7 +389,11 @@ function fieldHelp(key: string): string | undefined {
             class="shrink-0"
             @click="showLogs = !showLogs"
           >
-            {{ showLogs ? 'Hide logs' : 'View logs' }}
+            {{
+              showLogs
+                ? t('settings.providerConnection.hideLogs')
+                : t('settings.providerConnection.viewLogs')
+            }}
           </UButton>
         </div>
 
@@ -369,7 +407,9 @@ function fieldHelp(key: string): string | undefined {
         >
           <div>
             <span class="font-medium text-slate-200">{{ connection.label }}</span>
-            <div class="text-[11px] text-emerald-400">Connected · {{ connection.baseUrl }}</div>
+            <div class="text-[11px] text-emerald-400">
+              {{ t('settings.providerConnection.connectedAt', { baseUrl: connection.baseUrl }) }}
+            </div>
           </div>
           <UButton
             icon="i-lucide-trash-2"
@@ -386,7 +426,11 @@ function fieldHelp(key: string): string | undefined {
           v-if="descriptor.missingRequired.length"
           class="rounded-md border border-amber-500/40 bg-amber-950/40 px-3 py-2 text-xs text-amber-200"
         >
-          Missing required config: {{ descriptor.missingRequired.join(', ') }}
+          {{
+            t('settings.providerConnection.missingConfig', {
+              fields: descriptor.missingRequired.join(', '),
+            })
+          }}
         </div>
 
         <!-- Generic, descriptor-driven field form -->
@@ -395,7 +439,11 @@ function fieldHelp(key: string): string | undefined {
           class="rounded-lg border border-dashed border-slate-700 p-3 space-y-3"
         >
           <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ connection ? 'Update configuration' : 'Connect' }}
+            {{
+              connection
+                ? t('settings.providerConnection.form.updateConfiguration')
+                : t('settings.providerConnection.form.connect')
+            }}
           </p>
           <!-- A native re-register replaces the whole manifest; secrets are write-only so they
                must be re-supplied. Non-secret config is prefilled, so it survives a save. -->
@@ -403,15 +451,22 @@ function fieldHelp(key: string): string | undefined {
             v-if="connection && canAuthor && hasSecretFields"
             class="text-[11px] text-amber-300/80"
           >
-            Re-enter the secret field{{ secretFieldCount > 1 ? 's' : '' }} to save changes — stored
-            secrets are write-only and aren't shown.
+            {{
+              t(
+                'settings.providerConnection.form.reenterSecrets',
+                { count: secretFieldCount },
+                secretFieldCount,
+              )
+            }}
           </p>
 
           <UFormField
             v-for="field in descriptor.configFields"
             :key="field.key"
             :label="
-              field.label + (field.required && field.default === undefined ? '' : ' (optional)')
+              field.required && field.default === undefined
+                ? field.label
+                : t('settings.providerConnection.form.optionalLabel', { label: field.label })
             "
             :help="fieldHelp(field.key)"
           >
@@ -439,19 +494,19 @@ function fieldHelp(key: string): string | undefined {
               :loading="testing"
               @click="test()"
             >
-              Test connection
+              {{ t('settings.providerConnection.test.button') }}
             </UButton>
             <span v-if="testResult && testResult.ok" class="text-xs text-emerald-400">
-              {{ testResult.message ?? 'Connection OK' }}
+              {{ testResult.message ?? t('settings.providerConnection.test.ok') }}
             </span>
             <span v-else-if="testResult" class="text-xs text-rose-400">
-              {{ testResult.message ?? 'Connection failed' }}
+              {{ testResult.message ?? t('settings.providerConnection.test.failed') }}
             </span>
           </div>
 
           <div class="flex justify-end">
             <UButton color="primary" size="sm" :loading="busy" :disabled="!canSave" @click="save()">
-              {{ connection ? 'Save' : 'Connect' }}
+              {{ connection ? t('common.save') : t('settings.providerConnection.form.connect') }}
             </UButton>
           </div>
         </div>
@@ -461,8 +516,7 @@ function fieldHelp(key: string): string | undefined {
           v-else
           class="rounded-md border border-slate-700 bg-slate-900/40 px-3 py-3 text-xs text-slate-400"
         >
-          This provider is configured by authoring a manifest. The in-app manifest editor isn't
-          available yet — register it via the API for now.
+          {{ t('settings.providerConnection.manifestEditorUnavailable') }}
         </div>
       </div>
     </template>

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -6,6 +6,7 @@
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
 import { onMounted, ref } from 'vue'
 
+const { t } = useI18n()
 const fragments = useFragmentsStore()
 const defaults = useServiceFragmentDefaultsStore()
 const ui = useUiStore()
@@ -41,7 +42,7 @@ async function save(ids: string[]) {
     await defaults.set(ids)
   } catch (e) {
     toast.add({
-      title: 'Could not save default fragments',
+      title: t('settings.serviceFragmentDefaults.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -64,16 +65,12 @@ function remove(id: string) {
 <template>
   <div class="space-y-4">
     <p class="text-xs text-slate-400">
-      Pick the best-practice fragments every <span class="text-slate-300">new</span> service starts
-      with. Their guidance is folded into the prompt of every
-      <span class="text-slate-300">code-aware</span> agent (coder, reviewer, architect, fixers) on
-      the service's tasks. You can refine the set per service in its inspector; changing this
-      default does not affect services that already exist.
+      {{ t('settings.serviceFragmentDefaults.intro') }}
     </p>
 
     <div class="flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Default fragments
+        {{ t('settings.serviceFragmentDefaults.defaultFragments') }}
       </span>
       <UDropdownMenu v-if="menu.length" :items="menu" :ui="{ content: 'max-h-72 overflow-y-auto' }">
         <UButton
@@ -84,7 +81,7 @@ function remove(id: string) {
           trailing-icon="i-lucide-chevron-down"
           :loading="busy"
         >
-          Add fragment
+          {{ t('settings.serviceFragmentDefaults.addFragment') }}
         </UButton>
       </UDropdownMenu>
     </div>
@@ -104,26 +101,26 @@ function remove(id: string) {
       </UBadge>
     </div>
     <p v-else class="text-[11px] text-slate-500">
-      None — new services start with no service-level fragments.
+      {{ t('settings.serviceFragmentDefaults.empty') }}
     </p>
 
     <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-slate-800 pt-3 text-[11px]">
       <span class="text-slate-500">
-        Need to add or edit the fragments themselves (hand-authored, linked docs, repos)?
+        {{ t('settings.serviceFragmentDefaults.footer.question') }}
       </span>
       <button
         type="button"
         class="font-medium text-primary-400 hover:underline"
         @click="ui.openFragmentLibrary()"
       >
-        Manage this board's fragment library →
+        {{ t('settings.serviceFragmentDefaults.footer.manageBoard') }}
       </button>
       <button
         type="button"
         class="font-medium text-primary-400 hover:underline"
         @click="ui.openAccountSettings('fragments')"
       >
-        Manage account fragments →
+        {{ t('settings.serviceFragmentDefaults.footer.manageAccount') }}
       </button>
     </div>
   </div>