@cat-factory/app 0.46.10 → 0.46.11

package/app/components/panels/inspector/RecurringScheduleSettings.vue

@@ -9,6 +9,7 @@ const props = defineProps<{ block: Block }>()
 const recurring = useRecurringPipelinesStore()
 const pipelines = usePipelinesStore()
 const toast = useToast()
+const { t, d } = useI18n()
 
 const schedule = computed(() => recurring.byBlock(props.block.id))
 const runs = computed(() =>
@@ -32,17 +33,30 @@ const pipelineName = computed(
   () => pipelines.getPipeline(schedule.value?.pipelineId ?? '')?.name ?? schedule.value?.pipelineId,
 )
 
+const WEEKDAY_KEYS = [
+  'inspector.recurring.weekdays.sun',
+  'inspector.recurring.weekdays.mon',
+  'inspector.recurring.weekdays.tue',
+  'inspector.recurring.weekdays.wed',
+  'inspector.recurring.weekdays.thu',
+  'inspector.recurring.weekdays.fri',
+  'inspector.recurring.weekdays.sat',
+] as const
+
 function describeCadence(r: Recurrence): string {
-  const every = r.intervalHours % 24 === 0 ? `${r.intervalHours / 24}d` : `${r.intervalHours}h`
+  const every =
+    r.intervalHours % 24 === 0
+      ? t('inspector.recurring.intervalDays', { count: r.intervalHours / 24 })
+      : t('inspector.recurring.intervalHours', { count: r.intervalHours })
   const days =
     r.weekdays.length === 0
-      ? 'any day'
-      : r.weekdays.map((d) => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d]).join(' ')
+      ? t('inspector.recurring.anyDay')
+      : r.weekdays.map((wd) => t(WEEKDAY_KEYS[wd]!)).join(' ')
   const window =
     r.windowStartHour === null && r.windowEndHour === null
       ? ''
       : ` · ${String(r.windowStartHour ?? 0).padStart(2, '0')}:00–${String(r.windowEndHour ?? 24).padStart(2, '0')}:00`
-  return `Every ${every} · ${days}${window} · ${r.timezone}`
+  return t('inspector.recurring.cadence', { every, days, window, timezone: r.timezone })
 }
 
 function startEdit() {
@@ -58,7 +72,11 @@ async function saveEdit() {
     await recurring.update(schedule.value.id, { recurrence: draft.value })
     editing.value = false
   } catch (e) {
-    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.updateFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -70,7 +88,11 @@ async function toggleEnabled() {
   try {
     await recurring.update(schedule.value.id, { enabled: !schedule.value.enabled })
   } catch (e) {
-    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.updateFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -82,7 +104,11 @@ async function runNow() {
   try {
     await recurring.runNow(schedule.value.id)
   } catch (e) {
-    toast.add({ title: 'Could not run now', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.runNowFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -98,8 +124,17 @@ const RUN_COLOR: Record<string, string> = {
   failed: 'text-rose-400',
   skipped: 'text-slate-500',
 }
+const RUN_STATUS_KEYS: Record<string, string> = {
+  running: 'inspector.recurring.runStatus.running',
+  done: 'inspector.recurring.runStatus.done',
+  failed: 'inspector.recurring.runStatus.failed',
+  skipped: 'inspector.recurring.runStatus.skipped',
+}
+function runStatusLabel(status: string): string {
+  return RUN_STATUS_KEYS[status] ? t(RUN_STATUS_KEYS[status]!) : status
+}
 function fmtTime(ms: number) {
-  return new Date(ms).toLocaleString()
+  return d(new Date(ms), 'long')
 }
 </script>
 
@@ -113,10 +148,10 @@ function fmtTime(ms: number) {
         class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-indigo-300"
       >
         <UIcon name="i-lucide-repeat" class="h-3.5 w-3.5" />
-        Recurring pipeline
+        {{ t('inspector.recurring.title') }}
       </span>
       <UBadge :color="schedule.enabled ? 'primary' : 'neutral'" variant="subtle" size="xs">
-        {{ schedule.enabled ? 'Active' : 'Paused' }}
+        {{ schedule.enabled ? t('inspector.recurring.active') : t('inspector.recurring.paused') }}
       </UBadge>
     </div>
 
@@ -126,10 +161,12 @@ function fmtTime(ms: number) {
 
     <template v-if="!editing">
       <p class="text-[11px] text-slate-400">{{ describeCadence(schedule.recurrence) }}</p>
-      <p class="text-[11px] text-slate-500">Next run: {{ fmtTime(schedule.nextRunAt) }}</p>
+      <p class="text-[11px] text-slate-500">
+        {{ t('inspector.recurring.nextRun', { time: fmtTime(schedule.nextRunAt) }) }}
+      </p>
       <div class="flex flex-wrap gap-1.5 pt-1">
         <UButton size="xs" variant="soft" icon="i-lucide-play" :loading="busy" @click="runNow">
-          Run now
+          {{ t('inspector.recurring.runNow') }}
         </UButton>
         <UButton
           size="xs"
@@ -139,7 +176,7 @@ function fmtTime(ms: number) {
           :loading="busy"
           @click="toggleEnabled"
         >
-          {{ schedule.enabled ? 'Pause' : 'Resume' }}
+          {{ schedule.enabled ? t('inspector.recurring.pause') : t('inspector.recurring.resume') }}
         </UButton>
         <UButton
           size="xs"
@@ -148,7 +185,7 @@ function fmtTime(ms: number) {
           icon="i-lucide-pencil"
           @click="startEdit"
         >
-          Edit cadence
+          {{ t('inspector.recurring.editCadence') }}
         </UButton>
       </div>
     </template>
@@ -156,19 +193,23 @@ function fmtTime(ms: number) {
     <template v-else-if="draft">
       <RecurringRecurrenceEditor v-model="draft" />
       <div class="flex justify-end gap-1.5 pt-1">
-        <UButton size="xs" variant="ghost" color="neutral" @click="editing = false">Cancel</UButton>
-        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">Save</UButton>
+        <UButton size="xs" variant="ghost" color="neutral" @click="editing = false">{{
+          t('common.cancel')
+        }}</UButton>
+        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">{{
+          t('common.save')
+        }}</UButton>
       </div>
     </template>
 
     <!-- run history -->
     <div v-if="runs.length" class="space-y-1 border-t border-slate-800 pt-2">
       <span class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
-        Recent runs
+        {{ t('inspector.recurring.recentRuns') }}
       </span>
       <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-[11px]">
-        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0 capitalize">
-          {{ run.status }}
+        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0">
+          {{ runStatusLabel(run.status) }}
         </span>
         <span class="truncate text-slate-500">{{ fmtTime(run.startedAt) }}</span>
         <span v-if="run.outcome" class="ml-auto truncate text-slate-500">{{ run.outcome }}</span>

package/app/components/panels/inspector/ServiceFragments.vue

@@ -9,6 +9,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
@@ -49,7 +50,7 @@ function removeFragment(id: string) {
   <div>
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Service best practices
+        {{ t('inspector.fragments.serviceTitle') }}
       </span>
       <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
         <UButton
@@ -76,7 +77,7 @@ function removeFragment(id: string) {
       </UBadge>
     </div>
     <div v-else class="text-[11px] text-slate-500">
-      None — code-aware agents on this service follow their default guidance.
+      {{ t('inspector.fragments.serviceEmpty') }}
     </div>
   </div>
 </template>

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -11,6 +11,7 @@ const props = defineProps<{ block: Block }>()
 const store = useReleaseHealthStore()
 const ui = useUiStore()
 const toast = useToast()
+const { t } = useI18n()
 
 const busy = ref(false)
 const draft = reactive({ monitorIds: '', sloIds: '', envTag: '' })
@@ -56,9 +57,13 @@ async function save() {
       sloIds: parseIds(draft.sloIds),
       envTag: draft.envTag.trim() || null,
     })
-    toast.add({ title: 'Monitoring saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('inspector.releaseHealth.savedToast'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
-    notifyError('Could not save the mapping', e)
+    notifyError(t('inspector.releaseHealth.saveFailed'), e)
   } finally {
     busy.value = false
   }
@@ -72,7 +77,7 @@ async function clear() {
     draft.sloIds = ''
     draft.envTag = ''
   } catch (e) {
-    notifyError('Could not clear the mapping', e)
+    notifyError(t('inspector.releaseHealth.clearFailed'), e)
   } finally {
     busy.value = false
   }
@@ -83,7 +88,7 @@ async function clear() {
   <div class="space-y-2">
     <div class="flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Post-release health
+        {{ t('inspector.releaseHealth.title') }}
       </span>
       <UButton
         v-if="saved"
@@ -94,7 +99,7 @@ async function clear() {
         :loading="busy"
         @click="clear"
       >
-        Clear
+        {{ t('inspector.releaseHealth.clear') }}
       </UButton>
     </div>
 
@@ -103,32 +108,32 @@ async function clear() {
       v-if="!connected"
       class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-[11px] text-slate-400"
     >
-      <span>Connect an observability integration to watch this service after releases.</span>
+      <span>{{ t('inspector.releaseHealth.connectPrompt') }}</span>
       <UButton
         color="neutral"
         variant="soft"
         size="xs"
         icon="i-lucide-plug"
-        title="Connect an observability integration first"
+        :title="t('inspector.releaseHealth.connectFirst')"
         @click="ui.openObservabilityConnection()"
       >
-        Connect
+        {{ t('inspector.releaseHealth.connect') }}
       </UButton>
     </div>
 
     <div v-else class="space-y-2">
       <p class="text-[11px] text-slate-500">
-        The monitors and SLOs the gate watches after this service ships. Comma-separate ids.
+        {{ t('inspector.releaseHealth.hint') }}
       </p>
       <div class="grid grid-cols-2 gap-2">
-        <UFormField label="Monitor ids">
+        <UFormField :label="t('inspector.releaseHealth.monitorIds')">
           <UInput v-model="draft.monitorIds" placeholder="123, 456" size="sm" class="w-full" />
         </UFormField>
-        <UFormField label="SLO ids">
+        <UFormField :label="t('inspector.releaseHealth.sloIds')">
           <UInput v-model="draft.sloIds" placeholder="abc, def" size="sm" class="w-full" />
         </UFormField>
       </div>
-      <UFormField label="Env tag (optional)">
+      <UFormField :label="t('inspector.releaseHealth.envTag')">
         <UInput v-model="draft.envTag" placeholder="prod" size="sm" class="w-full" />
       </UFormField>
       <div class="flex justify-end">
@@ -140,7 +145,7 @@ async function clear() {
           :loading="busy"
           @click="save"
         >
-          Save monitoring
+          {{ t('inspector.releaseHealth.saveMonitoring') }}
         </UButton>
       </div>
     </div>

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -20,6 +20,7 @@ const board = useBoardStore()
 const accounts = useAccountsStore()
 const github = useGitHubStore()
 const services = useServicesStore()
+const { t } = useI18n()
 
 const composePath = computed(() => props.block.testComposePath ?? '')
 const noInfra = computed(() => props.block.noInfraDependencies === true)
@@ -29,14 +30,20 @@ const noInfra = computed(() => props.block.noInfraDependencies === true)
 // against a provisioned environment. A task can override it per-task in its agent
 // settings. Absent ⇒ the built-in `ephemeral`.
 type TestEnvironment = 'local' | 'ephemeral'
-const TEST_ENVIRONMENTS: { value: TestEnvironment; label: string; hint: string }[] = [
-  {
-    value: 'ephemeral',
-    label: 'Ephemeral environment',
-    hint: 'tests run against a provisioned env',
-  },
-  { value: 'local', label: 'Local (docker-compose)', hint: 'the Tester stands deps up locally' },
-]
+const TEST_ENVIRONMENTS = computed<{ value: TestEnvironment; label: string; hint: string }[]>(
+  () => [
+    {
+      value: 'ephemeral',
+      label: t('inspector.testConfig.env.ephemeral'),
+      hint: t('inspector.testConfig.env.ephemeralHint'),
+    },
+    {
+      value: 'local',
+      label: t('inspector.testConfig.env.local'),
+      hint: t('inspector.testConfig.env.localHint'),
+    },
+  ],
+)
 const effectiveTestEnv = computed<TestEnvironment>(
   () => props.block.defaultTestEnvironment ?? 'ephemeral',
 )
@@ -86,20 +93,20 @@ function toggleNoInfra(value: boolean) {
   board.updateBlock(props.block.id, { noInfraDependencies: value })
 }
 
-const PROVIDERS: { value: CloudProvider; label: string }[] = [
+const PROVIDERS = computed<{ value: CloudProvider; label: string }[]>(() => [
   { value: 'cloudflare', label: 'Cloudflare' },
-  { value: 'docker', label: 'Docker (local)' },
+  { value: 'docker', label: t('inspector.testConfig.providers.docker') },
   { value: 'aws', label: 'AWS' },
   { value: 'gcp', label: 'GCP' },
   { value: 'azure', label: 'Azure' },
-  { value: 'custom', label: 'Custom' },
-]
-const SIZES: { value: InstanceSize; label: string }[] = [
-  { value: 'small', label: 'Small' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'large', label: 'Large' },
-  { value: 'xlarge', label: 'XLarge' },
-]
+  { value: 'custom', label: t('inspector.testConfig.providers.custom') },
+])
+const SIZES = computed<{ value: InstanceSize; label: string }[]>(() => [
+  { value: 'small', label: t('inspector.testConfig.sizes.small') },
+  { value: 'medium', label: t('inspector.testConfig.sizes.medium') },
+  { value: 'large', label: t('inspector.testConfig.sizes.large') },
+  { value: 'xlarge', label: t('inspector.testConfig.sizes.xlarge') },
+])
 
 function setProvider(value: CloudProvider) {
   board.updateBlock(props.block.id, { cloudProvider: value })
@@ -114,11 +121,11 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
 <template>
   <div class="space-y-3">
     <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-      Test infrastructure
+      {{ t('inspector.testConfig.title') }}
     </div>
 
     <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">Default test environment</span>
+      <span class="text-[11px] text-slate-400">{{ t('inspector.testConfig.defaultEnv') }}</span>
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="e in TEST_ENVIRONMENTS"
@@ -133,13 +140,12 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
         </UButton>
       </div>
       <p class="text-[11px] leading-snug text-slate-500">
-        The default tasks under this service are spawned with — each task can override it in its
-        agent settings.
+        {{ t('inspector.testConfig.defaultEnvHint') }}
       </p>
     </div>
 
     <div class="space-y-1">
-      <label class="text-[11px] text-slate-400">docker-compose path</label>
+      <label class="text-[11px] text-slate-400">{{ t('inspector.testConfig.composePath') }}</label>
       <div class="flex items-center gap-1">
         <UInput
           :model-value="composePath"
@@ -159,20 +165,20 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
           color="neutral"
           icon="i-lucide-folder-search"
           :disabled="noInfra"
-          title="Browse the repository for the compose file"
+          :title="t('inspector.testConfig.browseRepo')"
           @click="openBrowse"
         />
       </div>
       <p class="text-[11px] leading-snug text-slate-500">
-        Used by the Tester to stand up the service's dependencies locally.
+        {{ t('inspector.testConfig.composeHint') }}
       </p>
     </div>
 
-    <UModal v-model:open="browseOpen" title="Select the docker-compose file">
+    <UModal v-model:open="browseOpen" :title="t('inspector.testConfig.selectComposeTitle')">
       <template #body>
         <div v-if="repoContext" class="space-y-3">
           <p class="text-xs text-slate-400">
-            Pick the compose file in the repository — its path is stored relative to the repo root.
+            {{ t('inspector.testConfig.selectComposeHint') }}
           </p>
           <RepoTreeBrowser
             v-model="pickedPath"
@@ -183,12 +189,16 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
           <div class="flex items-center justify-between gap-2">
             <p class="truncate text-xs text-slate-400">
               <template v-if="pickedPath">
-                Selected: <code class="text-slate-200">{{ pickedPath }}</code>
+                <i18n-t keypath="inspector.testConfig.selected" tag="span" scope="global">
+                  <template #path>
+                    <code class="text-slate-200">{{ pickedPath }}</code>
+                  </template>
+                </i18n-t>
               </template>
-              <template v-else>No file selected.</template>
+              <template v-else>{{ t('inspector.testConfig.noFileSelected') }}</template>
             </p>
             <UButton size="xs" color="primary" :disabled="!pickedPath" @click="applyPicked">
-              Use this file
+              {{ t('inspector.testConfig.useThisFile') }}
             </UButton>
           </div>
         </div>
@@ -200,12 +210,11 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
         :model-value="noInfra"
         @update:model-value="(v: boolean | 'indeterminate') => toggleNoInfra(v === true)"
       />
-      No infra dependencies (the Tester spins nothing up)
+      {{ t('inspector.testConfig.noInfra') }}
     </label>
 
     <p v-if="missingInfra" class="text-[11px] leading-snug text-amber-500">
-      Set a docker-compose path or enable “no infra dependencies”, otherwise a pipeline with a
-      Tester won't start.
+      {{ t('inspector.testConfig.missingInfra') }}
     </p>
 
     <!-- Provisioning hints: advisory inputs to the ephemeral-environment provisioner.
@@ -220,18 +229,18 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
           :name="showProvisioning ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
           class="h-3.5 w-3.5"
         />
-        Ephemeral environment provisioning
+        {{ t('inspector.testConfig.provisioningTitle') }}
       </button>
 
       <div v-if="showProvisioning" class="mt-2 space-y-3">
         <p class="text-[11px] leading-snug text-slate-500">
-          A hint for provisioning this service's ephemeral test environment — which cloud provider
-          to deploy to and how large an instance to request. Ignored for local (docker-compose)
-          testing.
+          {{ t('inspector.testConfig.provisioningHint') }}
         </p>
 
         <div class="space-y-1">
-          <span class="text-[11px] text-slate-400">Cloud provider</span>
+          <span class="text-[11px] text-slate-400">{{
+            t('inspector.testConfig.cloudProvider')
+          }}</span>
           <div class="flex flex-wrap gap-1">
             <UButton
               v-for="p in PROVIDERS"
@@ -247,7 +256,9 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
         </div>
 
         <div class="space-y-1">
-          <span class="text-[11px] text-slate-400">Instance size</span>
+          <span class="text-[11px] text-slate-400">{{
+            t('inspector.testConfig.instanceSize')
+          }}</span>
           <div class="flex flex-wrap gap-1">
             <UButton
               v-for="s in SIZES"

package/app/components/panels/inspector/TaskAgentConfig.vue

@@ -13,6 +13,7 @@ const props = defineProps<{ block: Block }>()
 const board = useBoardStore()
 const agentConfig = useAgentConfigStore()
 const execution = useExecutionStore()
+const { t } = useI18n()
 
 // The descriptors that apply: those contributed by the task's pinned pipeline, plus
 // any whose value is already set (so an existing choice always stays visible/editable
@@ -77,20 +78,20 @@ function setValue(id: string, value: string) {
 <template>
   <div v-if="descriptors.length" class="space-y-3">
     <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-      Agent configuration
+      {{ t('inspector.agentConfig.title') }}
     </div>
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
         <span class="text-[11px] text-slate-400">{{ d.label }}</span>
         <div class="flex items-center gap-1.5">
-          <span v-if="isInherited(d)" class="text-[10px] text-slate-500"
-            >inherited from service</span
-          >
+          <span v-if="isInherited(d)" class="text-[10px] text-slate-500">{{
+            t('inspector.agentConfig.inherited')
+          }}</span>
           <UIcon
             v-if="isFrozen(d.agentKind)"
             name="i-lucide-lock"
             class="h-3 w-3 text-slate-500"
-            title="Frozen — the agent has started"
+            :title="t('inspector.agentConfig.frozen')"
           />
         </div>
       </div>

package/app/components/panels/inspector/TaskDependencies.vue

@@ -5,6 +5,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const { depLabel } = useDepLabels()
+const { t } = useI18n()
 
 const deps = computed(() =>
   (props.block.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
@@ -35,7 +36,7 @@ function removeDep(depId: string) {
   <div>
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Depends on
+        {{ t('inspector.dependencies.title') }}
       </span>
       <UDropdownMenu v-if="depMenu.length" :items="depMenu">
         <UButton
@@ -55,16 +56,20 @@ function removeDep(depId: string) {
         variant="subtle"
         size="sm"
         class="cursor-pointer"
-        :title="d.status === 'done' ? 'Merged' : 'Not merged yet'"
+        :title="
+          d.status === 'done'
+            ? t('inspector.dependencies.merged')
+            : t('inspector.dependencies.notMerged')
+        "
         @click="removeDep(d.id)"
       >
         {{ label(d) }}
         <UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <div v-else class="text-[11px] text-slate-500">No dependencies — can run any time.</div>
+    <div v-else class="text-[11px] text-slate-500">{{ t('inspector.dependencies.empty') }}</div>
     <div v-if="!runnable" class="mt-1 text-[10px] text-amber-400">
-      Blocked until dependencies merge.
+      {{ t('inspector.dependencies.blocked') }}
     </div>
   </div>
 </template>

package/app/components/panels/inspector/TaskEstimateBadge.vue

@@ -6,18 +6,19 @@ import { computed } from 'vue'
 import type { Block } from '~/types/domain'
 
 const props = defineProps<{ block: Block }>()
+const { t, n } = useI18n()
 
 const estimate = computed(() => props.block.estimate ?? null)
 
-const AXES = [
-  { key: 'complexity', label: 'Complexity' },
-  { key: 'risk', label: 'Risk' },
-  { key: 'impact', label: 'Impact' },
-] as const
+const AXES = computed(
+  () =>
+    [
+      { key: 'complexity', label: t('inspector.estimate.complexity') },
+      { key: 'risk', label: t('inspector.estimate.risk') },
+      { key: 'impact', label: t('inspector.estimate.impact') },
+    ] as const,
+)
 
-function pct(n: number): number {
-  return Math.round(n * 100)
-}
 /** Cool→hot bar colour by severity (low = sky, mid = amber, high = rose). */
 function barClass(n: number): string {
   if (n >= 0.66) return 'bg-rose-500'
@@ -32,7 +33,7 @@ function barClass(n: number): string {
       class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-400"
     >
       <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
-      Estimate
+      {{ t('inspector.estimate.title') }}
     </div>
     <div class="space-y-1.5 rounded-lg border border-slate-800 bg-slate-900/40 p-2.5">
       <div v-for="axis in AXES" :key="axis.key" class="flex items-center gap-2">
@@ -41,12 +42,12 @@ function barClass(n: number): string {
           <div
             class="h-full rounded-full"
             :class="barClass(estimate[axis.key])"
-            :style="{ width: `${pct(estimate[axis.key])}%` }"
+            :style="{ width: `${Math.round(estimate[axis.key] * 100)}%` }"
           />
         </div>
-        <span class="w-9 shrink-0 text-right text-xs tabular-nums text-slate-300"
-          >{{ pct(estimate[axis.key]) }}%</span
-        >
+        <span class="w-9 shrink-0 text-right text-xs tabular-nums text-slate-300">{{
+          n(estimate[axis.key], { key: 'percent' })
+        }}</span>
       </div>
       <p v-if="estimate.rationale" class="pt-1 text-xs leading-relaxed text-slate-500">
         {{ estimate.rationale }}