@cat-factory/app 0.54.0 → 0.54.2

package/app/components/kaizen/KaizenPanel.vue

@@ -9,6 +9,7 @@ import { agentKindMeta } from '~/utils/catalog'
 // grading is scheduled by the engine and run by the background sweep, never from here.
 const ui = useUiStore()
 const kaizen = useKaizenStore()
+const { t, d } = useI18n()
 
 const open = computed(() => ui.kaizenScreenOpen)
 
@@ -31,7 +32,7 @@ function meta(kind: string) {
   return agentKindMeta(kind)
 }
 function when(ms: number): string {
-  return new Date(ms).toLocaleString()
+  return d(new Date(ms), 'long')
 }
 function gradeTone(g: KaizenGrading): string {
   if (g.status === 'failed') return 'text-slate-500'
@@ -42,10 +43,10 @@ function gradeTone(g: KaizenGrading): string {
   return 'text-rose-400'
 }
 function statusLabel(g: KaizenGrading): string {
-  if (g.status === 'scheduled') return 'Scheduled'
-  if (g.status === 'running') return 'Grading…'
-  if (g.status === 'failed') return 'Failed'
-  return g.grade != null ? `${g.grade}/5` : 'Graded'
+  if (g.status === 'scheduled') return t('kaizen.status.scheduled')
+  if (g.status === 'running') return t('kaizen.status.grading')
+  if (g.status === 'failed') return t('kaizen.status.failed')
+  return g.grade != null ? t('kaizen.gradeValue', { grade: g.grade }) : t('kaizen.status.graded')
 }
 </script>
 
@@ -63,9 +64,9 @@ function statusLabel(g: KaizenGrading): string {
             <UIcon name="i-lucide-sparkles" class="h-5 w-5 text-teal-400" />
           </div>
           <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">Kaizen</h1>
+            <h1 class="truncate text-base font-semibold text-white">{{ t('kaizen.title') }}</h1>
             <p class="truncate text-xs text-slate-500">
-              Continuous-improvement grading of agent runs
+              {{ t('kaizen.subtitle') }}
             </p>
           </div>
           <div class="ml-auto flex items-center gap-2">
@@ -77,10 +78,10 @@ function statusLabel(g: KaizenGrading): string {
               :loading="kaizen.loadingOverview"
               @click="kaizen.loadOverview()"
             >
-              Refresh
+              {{ t('kaizen.refresh') }}
             </UButton>
             <UButton icon="i-lucide-x" size="xs" color="neutral" variant="ghost" @click="close">
-              Close
+              {{ t('common.close') }}
             </UButton>
           </div>
         </header>
@@ -89,7 +90,7 @@ function statusLabel(g: KaizenGrading): string {
           v-if="kaizen.available === false"
           class="flex flex-1 items-center justify-center text-sm text-slate-500"
         >
-          Kaizen is not configured on this deployment.
+          {{ t('kaizen.notConfigured') }}
         </div>
 
         <div v-else class="grid flex-1 grid-cols-1 gap-6 overflow-auto p-6 lg:grid-cols-3">
@@ -97,12 +98,13 @@ function statusLabel(g: KaizenGrading): string {
           <section class="lg:col-span-1">
             <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
               <UIcon name="i-lucide-badge-check" class="h-4 w-4 text-emerald-400" />
-              Verified combos
-              <span class="text-xs font-normal text-slate-500">({{ kaizen.verifiedCount }})</span>
+              {{ t('kaizen.verifiedCombos.title') }}
+              <span class="text-xs font-normal text-slate-500">{{
+                t('kaizen.verifiedCombos.count', { count: kaizen.verifiedCount })
+              }}</span>
             </h2>
             <p class="mb-3 text-[11px] text-slate-500">
-              A prompt + agent + model combination that graded 4 or 5 with no recommendations five
-              times in a row. These are no longer graded.
+              {{ t('kaizen.verifiedCombos.hint') }}
             </p>
             <ul class="space-y-2">
               <li
@@ -125,15 +127,20 @@ function statusLabel(g: KaizenGrading): string {
                     class="ml-auto h-3.5 w-3.5 text-emerald-400"
                   />
                   <span v-else class="ml-auto text-[11px] text-slate-500">
-                    {{ c.consecutiveHighGrades }}/5
+                    {{ t('kaizen.verifiedCombos.progress', { count: c.consecutiveHighGrades }) }}
                   </span>
                 </div>
                 <div class="mt-1 truncate text-[11px] text-slate-500" :title="c.model">
-                  {{ c.model }} · prompt v{{ c.promptVersion }}
+                  {{
+                    t('kaizen.verifiedCombos.modelPrompt', {
+                      model: c.model,
+                      version: c.promptVersion,
+                    })
+                  }}
                 </div>
               </li>
               <li v-if="kaizen.verified.length === 0" class="text-xs text-slate-600">
-                No combos yet.
+                {{ t('kaizen.verifiedCombos.empty') }}
               </li>
             </ul>
           </section>
@@ -142,17 +149,19 @@ function statusLabel(g: KaizenGrading): string {
           <section class="lg:col-span-2">
             <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
               <UIcon name="i-lucide-history" class="h-4 w-4 text-teal-400" />
-              Grading history
+              {{ t('kaizen.history.title') }}
             </h2>
             <div class="overflow-hidden rounded-lg border border-slate-800">
               <table class="w-full text-left text-xs">
                 <thead class="bg-slate-900/60 text-[11px] uppercase tracking-wide text-slate-500">
                   <tr>
-                    <th class="px-3 py-2 font-medium">When</th>
-                    <th class="px-3 py-2 font-medium">Agent</th>
-                    <th class="px-3 py-2 font-medium">Model</th>
-                    <th class="px-3 py-2 font-medium">Grade</th>
-                    <th class="px-3 py-2 font-medium">Recommendations</th>
+                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.when') }}</th>
+                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.agent') }}</th>
+                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.model') }}</th>
+                    <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.grade') }}</th>
+                    <th class="px-3 py-2 font-medium">
+                      {{ t('kaizen.history.col.recommendations') }}
+                    </th>
                   </tr>
                 </thead>
                 <tbody class="divide-y divide-slate-800/70">
@@ -168,7 +177,9 @@ function statusLabel(g: KaizenGrading): string {
                           :style="{ color: meta(g.agentKind).color }"
                         />
                         <span class="text-slate-200">{{ meta(g.agentKind).label }}</span>
-                        <span class="text-slate-600">v{{ g.promptVersion }}</span>
+                        <span class="text-slate-600">{{
+                          t('kaizen.promptVersion', { version: g.promptVersion })
+                        }}</span>
                       </span>
                     </td>
                     <td class="max-w-[12rem] truncate px-3 py-2 text-slate-400" :title="g.model">
@@ -187,7 +198,7 @@ function statusLabel(g: KaizenGrading): string {
                   </tr>
                   <tr v-if="kaizen.history.length === 0">
                     <td colspan="5" class="px-3 py-6 text-center text-slate-600">
-                      No gradings yet.
+                      {{ t('kaizen.history.empty') }}
                     </td>
                   </tr>
                 </tbody>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
 }>()
 
 const kaizen = useKaizenStore()
+const { t } = useI18n()
 
 const grading = computed(() => {
   if (!props.instanceId || props.stepIndex == null) return null
@@ -45,50 +46,52 @@ const tone = computed(() => {
   <section v-if="grading" class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
     <div class="flex items-center gap-2">
       <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-teal-400" />
-      <h3 class="text-sm font-semibold text-slate-200">Kaizen grading</h3>
+      <h3 class="text-sm font-semibold text-slate-200">{{ t('kaizen.grading.title') }}</h3>
       <span class="ml-auto flex items-center gap-1.5 text-xs">
         <template v-if="grading.status === 'scheduled'">
           <UIcon name="i-lucide-clock" class="h-3.5 w-3.5 text-slate-500" />
-          <span class="text-slate-400">Scheduled</span>
+          <span class="text-slate-400">{{ t('kaizen.status.scheduled') }}</span>
         </template>
         <template v-else-if="grading.status === 'running'">
           <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-teal-400" />
-          <span class="text-teal-300">Grading…</span>
+          <span class="text-teal-300">{{ t('kaizen.status.grading') }}</span>
         </template>
         <template v-else-if="grading.status === 'failed'">
           <UIcon name="i-lucide-circle-alert" class="h-3.5 w-3.5 text-rose-400" />
-          <span class="text-rose-400">Failed</span>
+          <span class="text-rose-400">{{ t('kaizen.status.failed') }}</span>
         </template>
         <template v-else>
-          <span class="font-semibold" :class="tone">{{ grading.grade }}/5</span>
+          <span class="font-semibold" :class="tone">{{
+            t('kaizen.gradeValue', { grade: grading.grade })
+          }}</span>
         </template>
       </span>
     </div>
 
     <p v-if="grading.status === 'scheduled'" class="mt-2 text-[11px] text-slate-500">
-      A Kaizen grading is queued for this step. It runs in the background after the run.
+      {{ t('kaizen.scheduledHint') }}
     </p>
 
     <template v-else-if="grading.status === 'complete'">
       <p v-if="grading.summary" class="mt-2 text-xs text-slate-300">{{ grading.summary }}</p>
       <div v-if="grading.recommendations.length" class="mt-2">
         <p class="text-[11px] font-medium uppercase tracking-wide text-slate-500">
-          Recommendations
+          {{ t('kaizen.recommendations') }}
         </p>
         <ul class="mt-1 list-disc space-y-0.5 pl-4 text-xs text-slate-300">
           <li v-for="(r, i) in grading.recommendations" :key="i">{{ r }}</li>
         </ul>
       </div>
       <p v-else class="mt-2 text-[11px] text-emerald-400/80">
-        Smooth interaction — nothing to improve.
+        {{ t('kaizen.noImprovements') }}
       </p>
       <p v-if="grading.graderModel" class="mt-2 text-[10px] text-slate-600">
-        Graded by {{ grading.graderModel }}
+        {{ t('kaizen.gradedBy', { model: grading.graderModel }) }}
       </p>
     </template>
 
     <p v-else-if="grading.status === 'failed'" class="mt-2 text-[11px] text-rose-400/80">
-      {{ grading.error ?? 'The grading could not be completed.' }}
+      {{ grading.error ?? t('kaizen.failedFallback') }}
     </p>
   </section>
 </template>

package/app/components/media/ArtifactLightbox.vue

@@ -28,6 +28,8 @@ const emit = defineEmits<{
   (e: 'update:index', value: number): void
 }>()
 
+const { t, n } = useI18n()
+
 const MIN_SCALE = 1
 const MAX_SCALE = 8
 const scale = ref(1)
@@ -161,32 +163,36 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       class="fixed inset-0 z-[60] flex flex-col bg-slate-950/95 backdrop-blur-sm focus:outline-none"
       role="dialog"
       aria-modal="true"
-      :aria-label="current ? `Screenshot: ${current.label}` : 'Screenshot viewer'"
+      :aria-label="
+        current
+          ? t('media.lightbox.ariaLabel', { label: current.label })
+          : t('media.lightbox.ariaLabelFallback')
+      "
       @click.self="close"
     >
       <!-- Toolbar -->
       <div class="flex items-center gap-3 border-b border-slate-800/60 px-4 py-2.5">
         <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-200">
-          {{ current?.label ?? 'Screenshot' }}
+          {{ current?.label ?? t('media.lightbox.fallbackTitle') }}
         </span>
         <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-slate-400">
-          {{ index + 1 }} / {{ total }}
+          {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
-            title="Zoom out (-)"
+            :title="t('media.lightbox.zoomOut')"
             :disabled="scale <= MIN_SCALE"
             @click="zoomBy(1 / 1.25)"
           >
             <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
           </button>
-          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500"
-            >{{ Math.round(scale * 100) }}%</span
-          >
+          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500">{{
+            n(scale, 'percent')
+          }}</span>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
-            title="Zoom in (+)"
+            :title="t('media.lightbox.zoomIn')"
             :disabled="scale >= MAX_SCALE"
             @click="zoomBy(1.25)"
           >
@@ -194,14 +200,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           </button>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            title="Reset (0)"
+            :title="t('media.lightbox.reset')"
             @click="resetView"
           >
             <UIcon name="i-lucide-maximize" class="h-4 w-4" />
           </button>
           <button
             class="ml-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            title="Close (Esc)"
+            :title="t('media.lightbox.close')"
             @click="close"
           >
             <UIcon name="i-lucide-x" class="h-4 w-4" />
@@ -218,7 +224,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
         <button
           v-if="total > 1"
           class="absolute left-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
-          title="Previous (←)"
+          :title="t('media.lightbox.prev')"
           @click="go(-1)"
         >
           <UIcon name="i-lucide-chevron-left" class="h-5 w-5" />
@@ -248,21 +254,21 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             :class="state === 'error' ? '' : 'animate-spin'"
           />
           <p class="text-[12px]">
-            {{ state === 'error' ? 'Failed to load image.' : 'Loading…' }}
+            {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}
           </p>
           <button
             v-if="state === 'error' && current"
             class="text-[12px] text-amber-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
-            Retry
+            {{ t('common.retry') }}
           </button>
         </div>
 
         <button
           v-if="total > 1"
           class="absolute right-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
-          title="Next (→)"
+          :title="t('media.lightbox.next')"
           @click="go(1)"
         >
           <UIcon name="i-lucide-chevron-right" class="h-5 w-5" />

package/app/components/media/ImageCompare.vue

@@ -23,6 +23,8 @@ const emit = defineEmits<{
   (e: 'uploadReference', file: File): void
 }>()
 
+const { t } = useI18n()
+
 type Mode = 'side-by-side' | 'overlay' | 'swipe' | 'diff'
 
 const actualUrl = computed(() => props.blobs.urlFor(props.actualId))
@@ -32,14 +34,15 @@ const hasBoth = computed(() => !!actualUrl.value && !!refUrl.value)
 const diffFailed = ref(false)
 const MODES = computed<{ id: Mode; icon: string; label: string }[]>(() => {
   const base: { id: Mode; icon: string; label: string }[] = [
-    { id: 'side-by-side', icon: 'i-lucide-columns-2', label: 'Side by side' },
+    { id: 'side-by-side', icon: 'i-lucide-columns-2', label: t('media.compare.mode.sideBySide') },
   ]
   if (hasBoth.value) {
     base.push(
-      { id: 'overlay', icon: 'i-lucide-layers', label: 'Overlay' },
-      { id: 'swipe', icon: 'i-lucide-flip-horizontal-2', label: 'Swipe' },
+      { id: 'overlay', icon: 'i-lucide-layers', label: t('media.compare.mode.overlay') },
+      { id: 'swipe', icon: 'i-lucide-flip-horizontal-2', label: t('media.compare.mode.swipe') },
     )
-    if (!diffFailed.value) base.push({ id: 'diff', icon: 'i-lucide-contrast', label: 'Difference' })
+    if (!diffFailed.value)
+      base.push({ id: 'diff', icon: 'i-lucide-contrast', label: t('media.compare.mode.diff') })
   }
   return base
 })
@@ -162,13 +165,19 @@ function onRefInput(e: Event) {
     <!-- SIDE BY SIDE -->
     <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">Actual</figcaption>
+        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('media.compare.actual') }}
+        </figcaption>
         <button
           v-if="actualUrl"
           class="block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
           @click="actualId && emit('expand', actualId)"
         >
-          <img :src="actualUrl" :alt="`${view} (actual)`" class="w-full cursor-zoom-in" />
+          <img
+            :src="actualUrl"
+            :alt="t('media.compare.actualAlt', { view })"
+            class="w-full cursor-zoom-in"
+          />
         </button>
         <div
           v-else
@@ -176,29 +185,33 @@ function onRefInput(e: Event) {
         >
           {{
             props.blobs.statusFor(actualId) === 'error'
-              ? 'Failed to load'
+              ? t('media.compare.failedToLoad')
               : actualId
-                ? 'Loading…'
-                : 'Not captured'
+                ? t('media.compare.loading')
+                : t('media.compare.notCaptured')
           }}
         </div>
       </figure>
 
       <figure class="space-y-1">
         <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
-          Reference
+          {{ t('media.compare.reference') }}
         </figcaption>
         <button
           v-if="refUrl"
           class="group relative block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
           @click="referenceId && emit('expand', referenceId)"
         >
-          <img :src="refUrl" :alt="`${view} (reference)`" class="w-full cursor-zoom-in" />
+          <img
+            :src="refUrl"
+            :alt="t('media.compare.referenceAlt', { view })"
+            class="w-full cursor-zoom-in"
+          />
           <span
             class="absolute bottom-1 right-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
             @click.stop="refInput?.click()"
           >
-            Replace
+            {{ t('media.compare.replace') }}
           </span>
         </button>
         <!-- Drop zone when no reference yet -->
@@ -216,7 +229,7 @@ function onRefInput(e: Event) {
           @drop.prevent="onDrop"
         >
           <UIcon name="i-lucide-image-up" class="h-5 w-5" />
-          <span>Drop or click to add a reference</span>
+          <span>{{ t('media.compare.dropHint') }}</span>
         </div>
       </figure>
     </div>
@@ -224,17 +237,17 @@ function onRefInput(e: Event) {
     <!-- OVERLAY (onion-skin) -->
     <div v-else-if="mode === 'overlay'" class="space-y-2">
       <div class="relative w-full overflow-hidden rounded border border-slate-800">
-        <img :src="refUrl" :alt="`${view} (reference)`" class="w-full" />
+        <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="w-full" />
         <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
         <img
           :src="actualUrl"
-          :alt="`${view} (actual)`"
+          :alt="t('media.compare.actualAlt', { view })"
           class="absolute inset-0 h-full w-full object-contain"
           :style="{ opacity: overlayOpacity / 100 }"
         />
       </div>
       <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
-        <span>Reference</span>
+        <span>{{ t('media.compare.reference') }}</span>
         <input
           v-model.number="overlayOpacity"
           type="range"
@@ -242,7 +255,7 @@ function onRefInput(e: Event) {
           max="100"
           class="flex-1 accent-amber-500"
         />
-        <span>Actual</span>
+        <span>{{ t('media.compare.actual') }}</span>
       </div>
     </div>
 
@@ -256,7 +269,7 @@ function onRefInput(e: Event) {
       @pointerup="onSwipeUp"
       @pointercancel="onSwipeUp"
     >
-      <img :src="refUrl" :alt="`${view} (reference)`" class="block w-full" />
+      <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="block w-full" />
       <div
         class="absolute inset-0 overflow-hidden"
         :style="{ clipPath: `inset(0 ${100 - splitPct}% 0 0)` }"
@@ -265,7 +278,7 @@ function onRefInput(e: Event) {
              ratio doesn't stretch it; the split then compares like-for-like. -->
         <img
           :src="actualUrl"
-          :alt="`${view} (actual)`"
+          :alt="t('media.compare.actualAlt', { view })"
           class="absolute inset-0 block h-full w-full object-contain"
         />
       </div>
@@ -278,18 +291,18 @@ function onRefInput(e: Event) {
       </div>
       <span
         class="absolute left-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
-        >Actual</span
+        >{{ t('media.compare.actual') }}</span
       >
       <span
         class="absolute right-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
-        >Reference</span
+        >{{ t('media.compare.reference') }}</span
       >
     </div>
 
     <!-- DIFF (canvas) -->
     <div v-else-if="mode === 'diff'" class="space-y-1">
       <canvas ref="diffCanvas" class="w-full rounded border border-slate-800 bg-black" />
-      <p class="text-[10px] text-slate-500">Identical pixels appear black; differences glow.</p>
+      <p class="text-[10px] text-slate-500">{{ t('media.compare.diffHint') }}</p>
     </div>
 
     <!-- Hidden file input shared by replace/drop zone -->

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -6,10 +6,16 @@
 // panels' drawer, or `executionId` for a run's "Infrastructure attempts" drawer (which
 // surfaces that run's container/runner/env attempts). Loaded on mount + re-loadable.
 import { onMounted } from 'vue'
-import type { ProvisioningOperation, ProvisioningSubsystem } from '~/types/provisioningLogs'
+import type {
+  ProvisioningOperation,
+  ProvisioningOutcome,
+  ProvisioningSubsystem,
+} from '~/types/provisioningLogs'
 
 const props = defineProps<{ subsystem?: ProvisioningSubsystem; executionId?: string }>()
 
+const { t, d } = useI18n()
+
 const store = useProvisioningLogsStore()
 const state = computed(() =>
   props.executionId
@@ -24,17 +30,24 @@ function reload() {
 
 onMounted(reload)
 
-const OPERATION_LABEL: Record<ProvisioningOperation, string> = {
-  provision: 'Spin up',
-  teardown: 'Tear down',
-  status: 'Status check',
-  dispatch: 'Spin up',
-  release: 'Tear down',
-  'poll-failure': 'Health check',
-}
+// Exhaustive enum→label maps of literal `t(...)` keys (keeps the typed-key drift guard
+// live for these runtime-indexed lookups).
+const OPERATION_LABEL = computed<Record<ProvisioningOperation, string>>(() => ({
+  provision: t('provisioning.operation.provision'),
+  teardown: t('provisioning.operation.teardown'),
+  status: t('provisioning.operation.status'),
+  dispatch: t('provisioning.operation.dispatch'),
+  release: t('provisioning.operation.release'),
+  'poll-failure': t('provisioning.operation.poll-failure'),
+}))
+
+const OUTCOME_LABEL = computed<Record<ProvisioningOutcome, string>>(() => ({
+  success: t('provisioning.outcome.success'),
+  failure: t('provisioning.outcome.failure'),
+}))
 
 function when(epochMs: number): string {
-  return new Date(epochMs).toLocaleString()
+  return d(new Date(epochMs), 'long')
 }
 </script>
 
@@ -42,7 +55,7 @@ function when(epochMs: number): string {
   <div class="rounded-lg border border-slate-700 bg-slate-900/50">
     <div class="flex items-center justify-between border-b border-slate-800 px-3 py-2">
       <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Provisioning logs
+        {{ t('provisioning.title') }}
       </p>
       <UButton
         icon="i-lucide-rotate-ccw"
@@ -51,7 +64,7 @@ function when(epochMs: number): string {
         :loading="state.loading"
         @click="reload"
       >
-        Refresh
+        {{ t('provisioning.refresh') }}
       </UButton>
     </div>
 
@@ -60,7 +73,7 @@ function when(epochMs: number): string {
       v-else-if="!state.loading && state.entries.length === 0"
       class="px-3 py-3 text-[12px] text-slate-500"
     >
-      No provisioning attempts recorded yet.
+      {{ t('provisioning.empty') }}
     </p>
 
     <ul v-else class="max-h-80 divide-y divide-slate-800 overflow-auto">
@@ -79,7 +92,7 @@ function when(epochMs: number): string {
                 ? 'bg-emerald-950/60 text-emerald-300'
                 : 'bg-rose-950/60 text-rose-300'
             "
-            >{{ entry.outcome }}</span
+            >{{ OUTCOME_LABEL[entry.outcome] }}</span
           >
           <span class="ml-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
         </div>