@cat-factory/app 0.53.0 → 0.54.1

package/app/components/fragments/FragmentLibraryManager.vue

@@ -30,6 +30,7 @@ const library =
     : useFragmentLibrary(props.kind, props.ownerId)
 const documents = useDocumentsStore()
 const toast = useToast()
+const { t, d } = useI18n()
 
 const isWorkspace = props.kind === 'workspace'
 /** Linking a document at the account scope needs a workspace connection to fetch through. */
@@ -60,13 +61,16 @@ const tabs = computed<Tab[]>(() =>
 )
 const tab = ref<Tab>(props.showCatalog ? 'catalog' : 'authored')
 
-const ownerLabel = isWorkspace ? 'This board' : 'This account'
+const ownerLabel = computed(() =>
+  isWorkspace ? t('fragments.owner.workspace') : t('fragments.owner.account'),
+)
 
-const tierLabel: Record<ResolvedFragment['tier'], string> = {
-  builtin: 'Built-in',
-  account: 'Account',
-  workspace: 'This board',
-}
+// Exhaustive tier→label map of literal `t(...)` keys (keeps the typed-key drift guard live).
+const tierLabel = computed<Record<ResolvedFragment['tier'], string>>(() => ({
+  builtin: t('fragments.tier.builtin'),
+  account: t('fragments.tier.account'),
+  workspace: t('fragments.tier.workspace'),
+}))
 // `as const` keeps the literal color names (assignable to UBadge's `color`
 // union) instead of widening to `string`; `satisfies` still checks the shape.
 const tierColor = {
@@ -75,11 +79,11 @@ const tierColor = {
   workspace: 'primary',
 } as const satisfies Record<ResolvedFragment['tier'], string>
 
-function tabLabel(t: Tab): string {
-  if (t === 'catalog') return 'Resolved catalog'
-  if (t === 'authored') return ownerLabel
-  if (t === 'documents') return 'Documents'
-  return 'Repo sources'
+function tabLabel(which: Tab): string {
+  if (which === 'catalog') return t('fragments.tab.catalog')
+  if (which === 'authored') return ownerLabel.value
+  if (which === 'documents') return t('fragments.tab.documents')
+  return t('fragments.tab.sources')
 }
 
 function notifyError(title: string, e: unknown) {
@@ -110,18 +114,18 @@ async function createFragment() {
         .filter(Boolean),
     })
     draft.value = { title: '', summary: '', body: '', tags: '' }
-    toast.add({ title: 'Fragment added', icon: 'i-lucide-check' })
+    toast.add({ title: t('fragments.toast.added'), icon: 'i-lucide-check' })
   } catch (e) {
-    notifyError('Could not add fragment', e)
+    notifyError(t('fragments.toast.addFailed'), e)
   }
 }
 
 async function removeFragment(id: string) {
   try {
     await library.remove(id)
-    toast.add({ title: 'Fragment removed', icon: 'i-lucide-trash-2' })
+    toast.add({ title: t('fragments.toast.removed'), icon: 'i-lucide-trash-2' })
   } catch (e) {
-    notifyError('Could not remove fragment', e)
+    notifyError(t('fragments.toast.removeFailed'), e)
   }
 }
 
@@ -148,18 +152,18 @@ async function linkDocumentFragment() {
         .filter(Boolean),
     })
     docDraft.value = { source: '', ref: '', tags: '' }
-    toast.add({ title: 'Document linked as a living fragment', icon: 'i-lucide-link' })
+    toast.add({ title: t('fragments.toast.documentLinked'), icon: 'i-lucide-link' })
   } catch (e) {
-    notifyError('Could not link document', e)
+    notifyError(t('fragments.toast.linkDocumentFailed'), e)
   }
 }
 
 async function refreshFragment(id: string) {
   try {
     await library.refreshDocumentFragment(id)
-    toast.add({ title: 'Fragment re-resolved from source', icon: 'i-lucide-refresh-cw' })
+    toast.add({ title: t('fragments.toast.refreshed'), icon: 'i-lucide-refresh-cw' })
   } catch (e) {
-    notifyError('Could not refresh fragment', e)
+    notifyError(t('fragments.toast.refreshFailed'), e)
   }
 }
 
@@ -180,9 +184,9 @@ async function linkSource() {
     })
     sourceDraft.value = { repoOwner: '', repoName: '', dirPath: '', gitRef: '' }
     await library.syncSource(source.id)
-    toast.add({ title: 'Source linked & synced', icon: 'i-lucide-git-branch' })
+    toast.add({ title: t('fragments.toast.sourceLinked'), icon: 'i-lucide-git-branch' })
   } catch (e) {
-    notifyError('Could not link source', e)
+    notifyError(t('fragments.toast.linkSourceFailed'), e)
   }
 }
 
@@ -190,12 +194,15 @@ async function syncSource(id: string) {
   try {
     const result = await library.syncSource(id)
     toast.add({
-      title: `Synced: ${result.upserted} updated, ${result.tombstoned} removed`,
+      title: t('fragments.toast.synced', {
+        updated: result.upserted,
+        removed: result.tombstoned,
+      }),
       icon: 'i-lucide-refresh-cw',
       color: 'info',
     })
   } catch (e) {
-    notifyError('Could not sync source', e)
+    notifyError(t('fragments.toast.syncFailed'), e)
   }
 }
 
@@ -203,20 +210,22 @@ async function checkSource(id: string) {
   try {
     const status = await library.checkSource(id)
     toast.add({
-      title: status.changed ? `${status.changedCount} change(s) available` : 'Up to date',
+      title: status.changed
+        ? t('fragments.toast.changesAvailable', { count: status.changedCount }, status.changedCount)
+        : t('fragments.toast.upToDate'),
       icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
     })
   } catch (e) {
-    notifyError('Could not check source', e)
+    notifyError(t('fragments.toast.checkSourceFailed'), e)
   }
 }
 
 async function unlinkSource(id: string) {
   try {
     await library.unlinkSource(id)
-    toast.add({ title: 'Source unlinked', icon: 'i-lucide-unplug' })
+    toast.add({ title: t('fragments.toast.sourceUnlinked'), icon: 'i-lucide-unplug' })
   } catch (e) {
-    notifyError('Could not unlink source', e)
+    notifyError(t('fragments.toast.unlinkSourceFailed'), e)
   }
 }
 </script>
@@ -225,14 +234,10 @@ async function unlinkSource(id: string) {
   <div class="flex flex-col gap-4">
     <p class="text-sm text-slate-400">
       <template v-if="isWorkspace">
-        Curate the best-practice guidelines agents follow on this board. Fragments are merged from
-        the built-in catalog, your account, and this board — later tiers override earlier ones —
-        then the relevant ones are selected for each agent run.
+        {{ t('fragments.intro.workspace') }}
       </template>
       <template v-else>
-        Curate best-practice guidelines shared by every board in this account. Account fragments are
-        merged below the built-in catalog and above nothing, and a board can override or add its own
-        on top. The relevant ones are selected for each agent run.
+        {{ t('fragments.intro.account') }}
       </template>
     </p>
 
@@ -252,7 +257,13 @@ async function unlinkSource(id: string) {
     <!-- Resolved (merged) catalog — workspace scope only -->
     <div v-if="tab === 'catalog'" class="flex flex-col gap-2">
       <p class="text-xs text-slate-500">
-        {{ library.resolved.length }} fragment(s) resolved · {{ library.builtinCount }} built-in.
+        {{
+          t(
+            'fragments.catalog.summary',
+            { count: library.resolved.length, builtin: library.builtinCount },
+            library.resolved.length,
+          )
+        }}
       </p>
       <div
         v-for="f in library.resolved"
@@ -271,7 +282,7 @@ async function unlinkSource(id: string) {
             variant="subtle"
             icon="i-lucide-radio"
           >
-            Live · {{ f.documentRef.source }}
+            {{ t('fragments.catalog.live', { source: f.documentRef.source }) }}
           </UBadge>
           <span class="ml-auto font-mono text-[11px] text-slate-500">{{ f.id }}</span>
         </div>
@@ -294,7 +305,9 @@ async function unlinkSource(id: string) {
         <div class="min-w-0">
           <div class="flex items-center gap-2">
             <span class="font-medium text-slate-100">{{ f.title }}</span>
-            <UBadge v-if="f.source" size="xs" color="info" variant="subtle">from repo</UBadge>
+            <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
+              t('fragments.authored.fromRepo')
+            }}</UBadge>
           </div>
           <p class="text-sm text-slate-400">{{ f.summary }}</p>
         </div>
@@ -308,21 +321,27 @@ async function unlinkSource(id: string) {
         />
       </div>
       <p v-if="!library.fragments.length" class="text-sm text-slate-500">
-        No {{ isWorkspace ? 'board' : 'account' }}-specific fragments yet. Add one below, or
-        override a built-in by using its id.
+        {{
+          isWorkspace
+            ? t('fragments.authored.empty.workspace')
+            : t('fragments.authored.empty.account')
+        }}
       </p>
 
       <div class="rounded-md border border-slate-800 p-3">
-        <p class="mb-2 text-sm font-medium">Add a fragment</p>
+        <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
         <div class="flex flex-col gap-2">
-          <UInput v-model="draft.title" placeholder="Title" />
-          <UInput v-model="draft.summary" placeholder="One-line summary (used by the selector)" />
+          <UInput v-model="draft.title" :placeholder="t('fragments.authored.titlePlaceholder')" />
+          <UInput
+            v-model="draft.summary"
+            :placeholder="t('fragments.authored.summaryPlaceholder')"
+          />
           <UTextarea
             v-model="draft.body"
-            placeholder="Guidance body (injected into the prompt)"
+            :placeholder="t('fragments.authored.bodyPlaceholder')"
             :rows="4"
           />
-          <UInput v-model="draft.tags" placeholder="Tags, comma-separated (e.g. backend, db)" />
+          <UInput v-model="draft.tags" :placeholder="t('fragments.authored.tagsPlaceholder')" />
           <UButton
             icon="i-lucide-plus"
             size="sm"
@@ -331,7 +350,7 @@ async function unlinkSource(id: string) {
             class="self-start"
             @click="createFragment"
           >
-            Add fragment
+            {{ t('fragments.authored.add') }}
           </UButton>
         </div>
       </div>
@@ -340,9 +359,7 @@ async function unlinkSource(id: string) {
     <!-- Document-backed (living) fragments -->
     <div v-else-if="tab === 'documents'" class="flex flex-col gap-3">
       <p class="text-xs text-slate-500">
-        Link a Confluence/Notion page or a GitHub file as a best-practice fragment. Its guidance is
-        re-resolved from the source at run time — edit the doc and the next agent run follows the
-        new version (no re-import).
+        {{ t('fragments.documents.intro') }}
       </p>
 
       <div
@@ -360,7 +377,7 @@ async function unlinkSource(id: string) {
           </div>
           <p class="text-sm text-slate-400">{{ f.summary }}</p>
           <p v-if="f.resolvedAt" class="text-[11px] text-slate-500">
-            last resolved {{ new Date(f.resolvedAt).toLocaleString() }}
+            {{ t('fragments.documents.lastResolved', { date: d(new Date(f.resolvedAt), 'long') }) }}
           </p>
         </div>
         <div class="ml-auto flex gap-1">
@@ -369,7 +386,7 @@ async function unlinkSource(id: string) {
             size="xs"
             variant="ghost"
             :loading="library.loading"
-            title="Re-resolve from source now"
+            :title="t('fragments.documents.refreshTitle')"
             @click="refreshFragment(f.id)"
           />
           <UButton
@@ -382,17 +399,16 @@ async function unlinkSource(id: string) {
         </div>
       </div>
       <p v-if="!documentFragments.length" class="text-sm text-slate-500">
-        No document-backed fragments yet. Link one below.
+        {{ t('fragments.documents.empty') }}
       </p>
 
       <div class="rounded-md border border-slate-800 p-3">
-        <p class="mb-2 text-sm font-medium">Link a document</p>
+        <p class="mb-2 text-sm font-medium">{{ t('fragments.documents.linkTitle') }}</p>
         <div v-if="docLinkDisabled" class="text-sm text-slate-500">
-          Create a board with a connected document source first — account-level document fragments
-          are fetched through one of this account's boards.
+          {{ t('fragments.documents.disabledHint') }}
         </div>
         <div v-else-if="!documents.connectedSources.length" class="text-sm text-slate-500">
-          Connect a document source (Confluence, Notion or GitHub) under Integrations first.
+          {{ t('fragments.documents.connectFirst') }}
         </div>
         <div v-else class="flex flex-col gap-2">
           <div class="flex flex-wrap gap-2">
@@ -407,11 +423,8 @@ async function unlinkSource(id: string) {
               {{ s.label }}
             </UButton>
           </div>
-          <UInput
-            v-model="docDraft.ref"
-            placeholder="Page id or URL (e.g. a Confluence/Notion page or GitHub file URL)"
-          />
-          <UInput v-model="docDraft.tags" placeholder="Tags, comma-separated (optional)" />
+          <UInput v-model="docDraft.ref" :placeholder="t('fragments.documents.refPlaceholder')" />
+          <UInput v-model="docDraft.tags" :placeholder="t('fragments.documents.tagsPlaceholder')" />
           <UButton
             icon="i-lucide-link"
             size="sm"
@@ -420,7 +433,7 @@ async function unlinkSource(id: string) {
             class="self-start"
             @click="linkDocumentFragment"
           >
-            Link as living fragment
+            {{ t('fragments.documents.link') }}
           </UButton>
         </div>
       </div>
@@ -440,7 +453,11 @@ async function unlinkSource(id: string) {
             }}<span class="text-slate-500">/{{ s.dirPath || '' }}</span>
           </span>
           <p class="text-xs text-slate-500">
-            {{ s.lastSyncedAt ? 'synced' : 'never synced' }} · ref {{ s.gitRef }}
+            {{
+              s.lastSyncedAt
+                ? t('fragments.sources.metaSynced', { ref: s.gitRef })
+                : t('fragments.sources.metaNever', { ref: s.gitRef })
+            }}
           </p>
         </div>
         <UBadge
@@ -450,7 +467,13 @@ async function unlinkSource(id: string) {
           variant="subtle"
           class="ml-auto"
         >
-          {{ library.sourceChanges[s.id] }} change(s)
+          {{
+            t(
+              'fragments.sources.changes',
+              { count: library.sourceChanges[s.id] },
+              library.sourceChanges[s.id] ?? 0,
+            )
+          }}
         </UBadge>
         <div class="ml-auto flex gap-1">
           <UButton
@@ -476,23 +499,35 @@ async function unlinkSource(id: string) {
         </div>
       </div>
       <p v-if="!library.sources.length" class="text-sm text-slate-500">
-        No linked guideline repos. Link one below to import its Markdown files as fragments.
+        {{ t('fragments.sources.empty') }}
       </p>
 
       <div class="rounded-md border border-slate-800 p-3">
-        <p class="mb-2 text-sm font-medium">Link a guideline repo</p>
+        <p class="mb-2 text-sm font-medium">{{ t('fragments.sources.linkTitle') }}</p>
         <div class="flex flex-col gap-2">
           <div class="flex gap-2">
-            <UInput v-model="sourceDraft.repoOwner" placeholder="owner" class="flex-1" />
-            <UInput v-model="sourceDraft.repoName" placeholder="repo" class="flex-1" />
+            <UInput
+              v-model="sourceDraft.repoOwner"
+              :placeholder="t('fragments.sources.ownerPlaceholder')"
+              class="flex-1"
+            />
+            <UInput
+              v-model="sourceDraft.repoName"
+              :placeholder="t('fragments.sources.repoPlaceholder')"
+              class="flex-1"
+            />
           </div>
           <div class="flex gap-2">
             <UInput
               v-model="sourceDraft.dirPath"
-              placeholder="dir path (e.g. guidelines)"
+              :placeholder="t('fragments.sources.dirPlaceholder')"
+              class="flex-1"
+            />
+            <UInput
+              v-model="sourceDraft.gitRef"
+              :placeholder="t('fragments.sources.refPlaceholder')"
               class="flex-1"
             />
-            <UInput v-model="sourceDraft.gitRef" placeholder="ref (default HEAD)" class="flex-1" />
           </div>
           <UButton
             icon="i-lucide-link"
@@ -502,7 +537,7 @@ async function unlinkSource(id: string) {
             class="self-start"
             @click="linkSource"
           >
-            Link & sync
+            {{ t('fragments.sources.link') }}
           </UButton>
         </div>
       </div>

package/app/components/fragments/FragmentLibraryPanel.vue

@@ -7,6 +7,7 @@ import FragmentLibraryManager from '~/components/fragments/FragmentLibraryManage
 
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
+const { t } = useI18n()
 
 const open = computed({
   get: () => ui.fragmentLibraryOpen,
@@ -17,7 +18,7 @@ const open = computed({
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Prompt-fragment library" :ui="{ content: 'max-w-3xl' }">
+  <UModal v-model:open="open" :title="t('fragments.panel.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
       <FragmentLibraryManager
         v-if="workspace.workspaceId"

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>