@cat-factory/app 0.46.10 → 0.46.12

package/app/components/layout/NotificationsInbox.vue

@@ -7,44 +7,72 @@ import type { Notification } from '~/types/domain'
 // (merge / confirm / retry) or dismissed. Hydrated from the snapshot and patched
 // live via the `notification` WorkspaceEvent.
 
+const { t, te } = useI18n()
+
 const notifications = useNotificationsStore()
 const ui = useUiStore()
 const execution = useExecutionStore()
 
 const busy = ref<string | null>(null)
 
-/** Per-type display metadata (icon, colour, primary-action label). */
+/** Per-type display metadata (icon, colour). The primary-action label is resolved
+ * separately through the i18n catalog (`ACTION_KEYS`). */
 type Accent = 'warning' | 'primary' | 'error'
-const META: Record<Notification['type'], { icon: string; color: Accent; action: string }> = {
-  merge_review: { icon: 'i-lucide-git-pull-request-arrow', color: 'warning', action: 'Merge' },
-  pipeline_complete: { icon: 'i-lucide-circle-check', color: 'primary', action: 'Confirm & merge' },
-  ci_failed: { icon: 'i-lucide-triangle-alert', color: 'error', action: 'Retry run' },
-  test_failed: { icon: 'i-lucide-flask-conical', color: 'error', action: 'Retry run' },
+const META: Record<Notification['type'], { icon: string; color: Accent }> = {
+  merge_review: { icon: 'i-lucide-git-pull-request-arrow', color: 'warning' },
+  pipeline_complete: { icon: 'i-lucide-circle-check', color: 'primary' },
+  ci_failed: { icon: 'i-lucide-triangle-alert', color: 'error' },
+  test_failed: { icon: 'i-lucide-flask-conical', color: 'error' },
   // Clicking the title opens the review window for the task (see `reveal`); "act" just marks
   // it read (the server performs no side-effect for this type).
-  requirement_review: { icon: 'i-lucide-clipboard-list', color: 'primary', action: 'Mark read' },
+  requirement_review: { icon: 'i-lucide-clipboard-list', color: 'primary' },
   // Clicking the title opens the clarity review window for the task (see `reveal`); "act"
   // just marks it read (the server performs no side-effect for this type).
-  clarity_review: { icon: 'i-lucide-bug', color: 'primary', action: 'Mark read' },
+  clarity_review: { icon: 'i-lucide-bug', color: 'primary' },
   // A post-release Datadog regression the on-call agent investigated. The human decides
   // whether to revert (in GitHub via the PR link) or acknowledge; "act" marks it handled.
-  release_regression: { icon: 'i-lucide-activity', color: 'error', action: 'Acknowledge' },
+  release_regression: { icon: 'i-lucide-activity', color: 'error' },
   // Clicking the title opens the parked step's decision surface (companion → step detail
   // with the iteration-cap prompt; requirements → the review window); "act" just marks it
   // read (the decision itself is resolved in that surface, not here).
-  decision_required: { icon: 'i-lucide-circle-help', color: 'warning', action: 'Mark read' },
+  decision_required: { icon: 'i-lucide-circle-help', color: 'warning' },
   // Clicking the title opens the human-testing window for the task (see `reveal`); "act" just
   // marks it read (the gate is resolved in that window — confirm / request a fix — not here).
-  human_test_ready: { icon: 'i-lucide-user-check', color: 'primary', action: 'Mark read' },
+  human_test_ready: { icon: 'i-lucide-user-check', color: 'primary' },
   // Clicking the title opens the visual-confirmation window for the task (see `reveal`); "act"
   // just marks it read (the gate is resolved in that window — approve / request a fix — not here).
-  visual_confirmation_ready: { icon: 'i-lucide-camera', color: 'primary', action: 'Mark read' },
+  visual_confirmation_ready: { icon: 'i-lucide-camera', color: 'primary' },
   // Clicking the title opens the task's gate window (where the human can request a freeform
   // fix); "act" just marks it read (approval happens on GitHub, not here).
-  human_review: { icon: 'i-lucide-users', color: 'primary', action: 'Mark read' },
+  human_review: { icon: 'i-lucide-users', color: 'primary' },
   // Clicking the title opens the Follow-up companion window for the run (see `reveal`); "act"
   // just marks it read (items are decided in that window — file / send back / answer — not here).
-  followup_pending: { icon: 'i-lucide-compass', color: 'warning', action: 'Mark read' },
+  followup_pending: { icon: 'i-lucide-compass', color: 'warning' },
+}
+
+// Per-type primary-action label. An exhaustive Record keyed off the notification
+// type 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 enum value verbatim.
+const ACTION_KEYS: Record<Notification['type'], string> = {
+  merge_review: 'layout.notifications.action.merge_review',
+  pipeline_complete: 'layout.notifications.action.pipeline_complete',
+  ci_failed: 'layout.notifications.action.ci_failed',
+  test_failed: 'layout.notifications.action.test_failed',
+  requirement_review: 'layout.notifications.action.requirement_review',
+  clarity_review: 'layout.notifications.action.clarity_review',
+  release_regression: 'layout.notifications.action.release_regression',
+  decision_required: 'layout.notifications.action.decision_required',
+  human_test_ready: 'layout.notifications.action.human_test_ready',
+  visual_confirmation_ready: 'layout.notifications.action.visual_confirmation_ready',
+  human_review: 'layout.notifications.action.human_review',
+  followup_pending: 'layout.notifications.action.followup_pending',
+}
+
+/** The localized primary-action label for a notification (te()-guarded against a
+ * locale that omits the key, falling back to the generic "mark read" verb). */
+function actionLabel(n: Notification): string {
+  const key = ACTION_KEYS[n.type]
+  return te(key) ? t(key) : t('layout.notifications.action.markRead')
 }
 
 /** A notification the escalation sweep has flagged as overdue (waited past the threshold). */
@@ -176,7 +204,7 @@ function revealDecision(n: Notification) {
     <template #content>
       <div class="max-h-[28rem] w-[min(24rem,92vw)] overflow-y-auto p-2">
         <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          Needs your attention
+          {{ t('layout.notifications.heading') }}
         </div>
         <div
           v-for="n in notifications.open"
@@ -208,7 +236,7 @@ function revealDecision(n: Notification) {
                   v-if="isUrgent(n)"
                   class="shrink-0 rounded bg-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-error-400"
                 >
-                  Overdue
+                  {{ t('layout.notifications.overdue') }}
                 </span>
               </div>
               <p class="mt-0.5 text-[11px] leading-snug text-slate-400">{{ n.body }}</p>
@@ -219,7 +247,8 @@ function revealDecision(n: Notification) {
                 rel="noopener"
                 class="mt-1 inline-flex items-center gap-1 text-[11px] text-sky-400 hover:underline"
               >
-                <UIcon name="i-lucide-external-link" class="h-3 w-3" /> Open PR
+                <UIcon name="i-lucide-external-link" class="h-3 w-3" />
+                {{ t('layout.notifications.openPr') }}
               </a>
               <div class="mt-2 flex items-center gap-1.5">
                 <UButton
@@ -230,7 +259,7 @@ function revealDecision(n: Notification) {
                   :loading="busy === n.id"
                   @click="act(n)"
                 >
-                  {{ META[n.type].action }}
+                  {{ actionLabel(n) }}
                 </UButton>
                 <UButton
                   data-testid="notification-dismiss"
@@ -240,7 +269,7 @@ function revealDecision(n: Notification) {
                   :disabled="busy === n.id"
                   @click="dismiss(n)"
                 >
-                  Dismiss
+                  {{ t('layout.notifications.dismiss') }}
                 </UButton>
               </div>
             </div>

package/app/components/layout/PersonalSetupModal.vue

@@ -5,6 +5,7 @@
 // previously sat, confusingly, among the workspace-wide integrations. Each row reuses the
 // existing per-panel handlers via `ui.openFromPersonal(...)`, so opening one closes this
 // hub, reveals that panel, and gives it a "Back to My setup" control (IntegrationBackTitle).
+const { t } = useI18n()
 const ui = useUiStore()
 const userSecrets = useUserSecretsStore()
 const localModels = useLocalModelsStore()
@@ -54,14 +55,14 @@ const groups = computed<PersonalGroup[]>(() => {
   // --- Source control --------------------------------------------------------
   const pat = !!userSecrets.statusFor('github_pat')
   out.push({
-    title: 'Source control',
+    title: t('layout.personalSetup.sourceControl.title'),
     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.personalSetup.githubToken.label'),
+        description: t('layout.personalSetup.githubToken.description'),
+        status: pat ? t('layout.personalSetup.connected') : undefined,
         connected: pat,
         onClick: () => go(ui.openUserSecrets),
       },
@@ -72,24 +73,27 @@ const groups = computed<PersonalGroup[]>(() => {
   const runnerCount = localModels.endpoints.length
   const subCount = personalSubs.subscriptions.length
   out.push({
-    title: 'Models',
+    title: t('layout.personalSetup.models.title'),
     items: [
       {
         key: 'local-runners',
         icon: 'i-lucide-server',
-        label: 'My local runners',
-        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
-        status: runnerCount ? `${runnerCount} connected` : undefined,
+        label: t('layout.personalSetup.localRunners.label'),
+        description: t('layout.personalSetup.localRunners.description'),
+        status: runnerCount
+          ? t('layout.personalSetup.connectedCount', { count: runnerCount }, runnerCount)
+          : undefined,
         connected: runnerCount > 0,
         onClick: () => go(ui.openLocalModels),
       },
       {
         key: 'personal-subs',
         icon: 'i-lucide-user',
-        label: 'My subscriptions',
-        description:
-          'Individual-usage plans you unlock with a personal password (Claude, GLM, Codex).',
-        status: subCount ? `${subCount} connected` : undefined,
+        label: t('layout.personalSetup.subscriptions.label'),
+        description: t('layout.personalSetup.subscriptions.description'),
+        status: subCount
+          ? t('layout.personalSetup.connectedCount', { count: subCount }, subCount)
+          : undefined,
         connected: subCount > 0,
         onClick: () => go(() => ui.openVendorCredentials('personal')),
       },
@@ -101,11 +105,15 @@ const groups = computed<PersonalGroup[]>(() => {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="My setup" :ui="{ content: 'max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="t('layout.personalSetup.title')"
+    :ui="{ content: 'max-w-xl' }"
+  >
     <template #body>
       <div class="space-y-5">
         <p class="text-xs text-slate-400">
-          Your personal connections — used for runs you start, and visible only to you.
+          {{ t('layout.personalSetup.intro') }}
         </p>
 
         <section v-for="group in groups" :key="group.title">
@@ -125,9 +133,11 @@ const groups = computed<PersonalGroup[]>(() => {
                 <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.personalSetup.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-slate-500">Not connected</span>
+                  <span v-else class="text-[11px] text-slate-500">
+                    {{ t('layout.personalSetup.notConnected') }}
+                  </span>
                 </div>
                 <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
               </div>

package/app/components/layout/ProviderConfigBanner.vue

@@ -7,13 +7,19 @@
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const store = useProviderConnectionsStore()
 
-const LABEL: Record<ProviderConnectionKind, string> = {
-  environment: 'Environment provider',
-  'runner-pool': 'Runner pool',
+// Exhaustive per-kind title/action keys (leaf names mirror the kind verbatim).
+const TITLE_KEYS: Record<ProviderConnectionKind, string> = {
+  environment: 'layout.providerConfigBanner.titleOne.environment',
+  'runner-pool': 'layout.providerConfigBanner.titleOne.runner-pool',
+}
+const ACTION_KEYS: Record<ProviderConnectionKind, string> = {
+  environment: 'layout.providerConfigBanner.action.environment',
+  'runner-pool': 'layout.providerConfigBanner.action.runner-pool',
 }
 
 // Probe both providers once the workspace is ready (the descriptor view is secret-less).
@@ -44,8 +50,8 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
               <h2 class="text-lg font-semibold text-amber-100">
                 {{
                   pending.length > 1
-                    ? 'Providers need configuration'
-                    : `${LABEL[pending[0]!]} needs configuration`
+                    ? t('layout.providerConfigBanner.titleMany')
+                    : t(TITLE_KEYS[pending[0]!])
                 }}
               </h2>
               <UButton
@@ -53,13 +59,12 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
                 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">
-              A provider is wired for this instance but is missing required settings, so it can't
-              run yet. Add the mandatory fields to finish connecting it.
+              {{ t('layout.providerConfigBanner.body') }}
             </p>
             <div class="mt-4 flex flex-wrap gap-2">
               <UButton
@@ -70,7 +75,7 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
                 icon="i-lucide-settings"
                 @click="ui.openProviderConnection(k)"
               >
-                Configure {{ LABEL[k].toLowerCase() }}
+                {{ t(ACTION_KEYS[k]) }}
               </UButton>
             </div>
           </div>

package/app/components/layout/SideBar.vue

@@ -11,6 +11,8 @@ import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 
+const { t } = useI18n()
+
 const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const github = useGitHubStore()
@@ -107,7 +109,7 @@ watch(
       data-testid="sidebar-backdrop"
       role="button"
       tabindex="-1"
-      :aria-label="$t('common.close')"
+      :aria-label="t('common.close')"
       @click="ui.closeMobileNav()"
     />
   </Transition>
@@ -118,7 +120,7 @@ watch(
     tabindex="-1"
     :role="drawerOpen ? 'dialog' : undefined"
     :aria-modal="drawerOpen ? 'true' : undefined"
-    :aria-label="isCompact ? $t('nav.menu') : undefined"
+    :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
     class="fixed inset-y-0 left-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-r border-slate-800 bg-slate-900/95 p-3 backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-slate-900/80"
     :class="ui.mobileNavOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
@@ -134,13 +136,13 @@ watch(
         @click="ui.openCommandBar()"
       >
         <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />
-        <span class="flex-1 truncate">{{ $t('nav.commandBar') }}</span>
+        <span class="flex-1 truncate">{{ t('nav.commandBar') }}</span>
         <UKbd value="⌘K" />
       </button>
 
       <section>
         <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ $t('nav.create') }}
+          {{ t('nav.create') }}
         </h2>
         <div class="space-y-1.5">
           <UButton
@@ -152,7 +154,7 @@ watch(
             class="justify-start"
             @click="ui.openBuilder()"
           >
-            {{ $t('nav.buildPipeline') }}
+            {{ t('nav.buildPipeline') }}
           </UButton>
         </div>
       </section>
@@ -161,7 +163,7 @@ watch(
 
       <section>
         <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ $t('nav.repositories') }}
+          {{ t('nav.repositories') }}
         </h2>
         <div class="space-y-1.5">
           <UButton
@@ -174,7 +176,7 @@ watch(
             class="justify-start"
             @click="ui.openAddService()"
           >
-            {{ $t('nav.addFromRepo') }}
+            {{ t('nav.addFromRepo') }}
           </UButton>
           <UButton
             block
@@ -185,7 +187,7 @@ watch(
             class="justify-start"
             @click="ui.openBootstrap()"
           >
-            {{ $t('nav.bootstrapRepo') }}
+            {{ t('nav.bootstrapRepo') }}
           </UButton>
         </div>
       </section>
@@ -194,7 +196,7 @@ watch(
 
       <section>
         <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ $t('nav.integrations') }}
+          {{ t('nav.integrations') }}
         </h2>
         <div class="space-y-1.5">
           <!-- Every external system the workspace can enable/link now lives behind
@@ -209,7 +211,7 @@ watch(
             class="justify-start"
             @click="ui.openIntegrations()"
           >
-            {{ $t('nav.integrations') }}
+            {{ t('nav.integrations') }}
           </UButton>
           <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
              side of the board. Opens the on-demand testing window. -->
@@ -222,7 +224,7 @@ watch(
             class="justify-start"
             @click="ui.openSandbox()"
           >
-            {{ $t('nav.sandbox') }}
+            {{ t('nav.sandbox') }}
           </UButton>
           <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. -->
           <UButton
@@ -234,7 +236,7 @@ watch(
             class="justify-start"
             @click="ui.openKaizen()"
           >
-            {{ $t('nav.kaizen') }}
+            {{ t('nav.kaizen') }}
           </UButton>
         </div>
       </section>
@@ -243,7 +245,7 @@ watch(
         <USeparator />
         <section>
           <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ $t('nav.workspaceContext') }}
+            {{ t('nav.workspaceContext') }}
           </h2>
           <UButton
             block
@@ -254,7 +256,7 @@ watch(
             class="justify-start"
             @click="ui.openFragmentLibrary()"
           >
-            {{ $t('nav.contextFragments') }}
+            {{ t('nav.contextFragments') }}
           </UButton>
         </section>
       </template>
@@ -262,7 +264,7 @@ watch(
       <USeparator />
       <section>
         <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ $t('nav.configuration') }}
+          {{ t('nav.configuration') }}
         </h2>
         <div class="space-y-1.5">
           <!-- Merge thresholds, issue writeback and default service best practices are
@@ -276,7 +278,7 @@ watch(
             class="justify-start"
             @click="ui.openWorkspaceSettings()"
           >
-            {{ $t('nav.workspaceSettings') }}
+            {{ t('nav.workspaceSettings') }}
           </UButton>
           <UButton
             block
@@ -287,7 +289,7 @@ watch(
             class="justify-start"
             @click="ui.openModelConfig()"
           >
-            {{ $t('nav.modelConfiguration') }}
+            {{ t('nav.modelConfiguration') }}
           </UButton>
           <!-- Account & team: members + roles, invitations, email sender, account API keys.
              Shown once accounts (auth) are enabled. -->
@@ -301,7 +303,7 @@ watch(
             class="justify-start"
             @click="ui.openAccountSettings()"
           >
-            {{ $t('nav.accountSettings') }}
+            {{ t('nav.accountSettings') }}
           </UButton>
         </div>
       </section>

package/app/components/layout/SpendWarningBanner.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+const { t, n } = useI18n()
 const workspace = useWorkspaceStore()
 
 const spend = computed(() => workspace.spend)
@@ -8,18 +9,13 @@ const spend = computed(() => workspace.spend)
 const exceeded = computed(() => spend.value?.exceeded ?? false)
 
 function money(amount: number, currency: string) {
-  try {
-    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
-  } catch {
-    // Fall back if the currency code isn't recognised by the runtime.
-    return `${amount.toFixed(2)} ${currency}`
-  }
+  return n(amount, { key: 'currency', currency })
 }
 
 const tokens = computed(() => {
   const s = spend.value
   if (!s) return ''
-  return new Intl.NumberFormat().format(s.inputTokens + s.outputTokens)
+  return n(s.inputTokens + s.outputTokens, 'decimal')
 })
 
 const resuming = ref(false)
@@ -47,29 +43,33 @@ async function resume() {
           <UIcon name="i-lucide-octagon-alert" class="mt-0.5 h-10 w-10 shrink-0 text-red-400" />
           <div class="min-w-0 flex-1">
             <h2 class="text-lg font-semibold text-red-100">
-              Spend limit reached — agent execution paused
+              {{ t('layout.spendWarningBanner.title') }}
             </h2>
             <p class="mt-1 text-sm text-red-200/90">
-              This month's token spend has hit the configured budget, so running pipelines were
-              paused to avoid further cost. Execution resumes automatically when the budget rolls
-              over next month, or once the limit is raised.
+              {{ t('layout.spendWarningBanner.body') }}
             </p>
 
             <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
               <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Spent</dt>
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+                  {{ t('layout.spendWarningBanner.spent') }}
+                </dt>
                 <dd class="text-base font-semibold tabular-nums text-red-50">
                   {{ money(spend.costSpent, spend.currency) }}
                 </dd>
               </div>
               <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Budget</dt>
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+                  {{ t('layout.spendWarningBanner.budget') }}
+                </dt>
                 <dd class="text-base font-semibold tabular-nums text-red-50">
                   {{ money(spend.costLimit, spend.currency) }}
                 </dd>
               </div>
               <div class="rounded-lg bg-red-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Tokens</dt>
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">
+                  {{ t('layout.spendWarningBanner.tokens') }}
+                </dt>
                 <dd class="text-base font-semibold tabular-nums text-red-50">{{ tokens }}</dd>
               </div>
             </dl>
@@ -82,10 +82,10 @@ async function resume() {
                 :loading="resuming"
                 @click="resume"
               >
-                Resume anyway
+                {{ t('layout.spendWarningBanner.resume') }}
               </UButton>
               <span class="text-xs text-red-300/70">
-                Resuming continues spending; it will pause again if still over budget.
+                {{ t('layout.spendWarningBanner.resumeHint') }}
               </span>
             </div>
           </div>

package/app/components/observability/StepMetricsBar.vue

@@ -19,6 +19,8 @@ import {
 const props = defineProps<{ metrics: StepMetrics; clickable?: boolean }>()
 defineEmits<{ inspect: [] }>()
 
+const { t } = useI18n()
+
 const m = computed(() => props.metrics)
 const headroom = computed(() => headroomRatio(m.value))
 const transport = computed(() => transportRatio(m.value))
@@ -38,24 +40,33 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     <!-- header line: call count + tokens + warning/error badges -->
     <div class="flex items-center gap-2">
       <UIcon name="i-lucide-activity" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
-      <span class="text-slate-300"> {{ m.calls }} {{ m.calls === 1 ? 'call' : 'calls' }} </span>
+      <span class="text-slate-300">
+        {{ t('observability.metricsBar.calls', { count: m.calls }, m.calls) }}
+      </span>
       <span class="text-slate-500">·</span>
-      <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
+      <span
+        class="tabular-nums text-slate-400"
+        :title="t('observability.metricsBar.promptCompletionTokens')"
+      >
         {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
       </span>
       <span
         v-if="(m.cachedPromptTokens ?? 0) > 0"
         class="tabular-nums text-emerald-400/80"
-        title="Prompt tokens served from the provider's cache"
+        :title="t('observability.metricsBar.cachedTokensHint')"
       >
-        ({{ formatTokens(m.cachedPromptTokens ?? 0) }} cached)
+        {{
+          t('observability.metricsBar.cachedTokens', {
+            tokens: formatTokens(m.cachedPromptTokens ?? 0),
+          })
+        }}
       </span>
       <div class="ml-auto flex items-center gap-1">
         <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
-          {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}
+          {{ t('observability.metricsBar.errors', { count: m.errors }, m.errors) }}
         </UBadge>
         <UBadge v-if="m.warnings > 0" color="warning" variant="subtle" size="sm">
-          {{ m.warnings }} warning{{ m.warnings === 1 ? '' : 's' }}
+          {{ t('observability.metricsBar.warnings', { count: m.warnings }, m.warnings) }}
         </UBadge>
         <UIcon v-if="clickable" name="i-lucide-chevron-right" class="h-3.5 w-3.5 text-slate-600" />
       </div>
@@ -64,7 +75,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     <!-- output-limit headroom -->
     <div v-if="headroom !== null" class="mt-2">
       <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Output limit</span>
+        <span class="text-slate-500">{{ t('observability.metricsBar.outputLimit') }}</span>
         <span class="tabular-nums" :class="headroomTone">
           {{ formatTokens(m.peakCompletionTokens) }} /
           {{ formatTokens(m.maxOutputTokens ?? 0) }} ({{ pct(headroom) }}%)
@@ -84,14 +95,20 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         />
       </div>
       <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-rose-400">
-        {{ m.truncatedCalls }} call{{ m.truncatedCalls === 1 ? '' : 's' }} truncated at the limit
+        {{
+          t(
+            'observability.metricsBar.truncatedCalls',
+            { count: m.truncatedCalls },
+            m.truncatedCalls,
+          )
+        }}
       </p>
     </div>
 
     <!-- transport overhead vs model execution -->
     <div v-if="transport !== null" class="mt-2">
       <div class="flex items-center justify-between text-[11px]">
-        <span class="text-slate-500">Transport vs execution</span>
+        <span class="text-slate-500">{{ t('observability.metricsBar.transportVsExecution') }}</span>
         <span class="tabular-nums text-slate-400">
           {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}
         </span>
@@ -100,9 +117,12 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         <div
           class="h-full bg-sky-400/80"
           :style="{ width: `${pct(transport)}%` }"
-          title="Transport / proxy overhead"
+          :title="t('observability.metricsBar.transportOverhead')"
+        />
+        <div
+          class="h-full bg-indigo-400/80 flex-1"
+          :title="t('observability.metricsBar.modelExecution')"
         />
-        <div class="h-full bg-indigo-400/80 flex-1" title="Model execution" />
       </div>
     </div>
   </div>

package/app/components/observability/StepModelActivity.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
 }>()
 
 const ui = useUiStore()
+const { t } = useI18n()
 const hasCalls = computed(() => !!props.metrics && props.metrics.calls > 0)
 
 function openObservability() {
@@ -29,14 +30,14 @@ function openObservability() {
   <div v-if="instanceId || hasCalls">
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        Model activity
+        {{ t('observability.modelActivity') }}
       </span>
       <button
         v-if="instanceId"
         class="text-[11px] text-sky-400 hover:text-sky-300"
         @click="openObservability"
       >
-        View all calls →
+        {{ t('observability.viewAllCalls') }}
       </button>
     </div>
     <StepMetricsBar