@cat-factory/app 0.46.9 → 0.46.11

package/app/components/panels/ObservabilityPanel.vue

@@ -15,6 +15,7 @@ const ui = useUiStore()
 const execution = useExecutionStore()
 const board = useBoardStore()
 const observability = useObservabilityStore()
+const { t, d } = useI18n()
 
 const executionId = computed(() => ui.observabilityInstanceId)
 const open = computed(() => !!executionId.value)
@@ -110,7 +111,7 @@ function agentMeta(kind: string) {
   return agentKindMeta(kind)
 }
 function clock(ms: number): string {
-  return new Date(ms).toLocaleTimeString()
+  return d(new Date(ms), 'long')
 }
 /** Pretty-print the prompt JSON; fall back to the raw string if it isn't JSON. */
 function prettyPrompt(raw: string): string {
@@ -150,7 +151,9 @@ function exportJson() {
             <UIcon name="i-lucide-activity" class="h-5 w-5 text-sky-400" />
           </div>
           <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">Model activity</h1>
+            <h1 class="truncate text-base font-semibold text-white">
+              {{ t('observability.modelActivity') }}
+            </h1>
             <p v-if="block" class="truncate text-xs text-slate-500">
               {{ block.title }} · {{ instance?.pipelineName }}
             </p>
@@ -166,7 +169,7 @@ function exportJson() {
                 "
                 @click="view = 'calls'"
               >
-                Model activity
+                {{ t('observability.modelActivity') }}
               </button>
               <button
                 class="rounded-md px-2.5 py-1 transition"
@@ -177,7 +180,7 @@ function exportJson() {
                 "
                 @click="view = 'context'"
               >
-                Provided context
+                {{ t('observability.providedContext') }}
               </button>
             </div>
             <UButton
@@ -188,17 +191,17 @@ function exportJson() {
               size="sm"
               :loading="exporting"
               :disabled="!calls.length"
-              title="Download an LLM-friendly JSON export of this run"
+              :title="t('observability.exportHint')"
               @click="exportJson"
             >
-              Export JSON
+              {{ t('observability.exportJson') }}
             </UButton>
             <UButton
               icon="i-lucide-x"
               color="neutral"
               variant="ghost"
               size="sm"
-              title="Close (Esc)"
+              :title="t('observability.closeEsc')"
               @click="close"
             />
           </div>
@@ -210,12 +213,14 @@ function exportJson() {
             <section class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
               <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-4">
                 <div>
-                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">Calls</dt>
+                  <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+                    {{ t('observability.summary.calls') }}
+                  </dt>
                   <dd class="mt-0.5 tabular-nums text-slate-200">{{ totals.calls }}</dd>
                 </div>
                 <div>
                   <dt class="text-[11px] uppercase tracking-wide text-slate-500">
-                    Tokens (in / out)
+                    {{ t('observability.summary.tokensInOut') }}
                   </dt>
                   <dd class="mt-0.5 tabular-nums text-slate-200">
                     {{ formatTokens(totals.promptTokens) }} /
@@ -224,7 +229,7 @@ function exportJson() {
                 </div>
                 <div>
                   <dt class="text-[11px] uppercase tracking-wide text-slate-500">
-                    Transport overhead
+                    {{ t('observability.summary.transportOverhead') }}
                   </dt>
                   <dd class="mt-0.5 tabular-nums text-slate-200">
                     <span v-if="totals.transportPct !== null">
@@ -235,7 +240,7 @@ function exportJson() {
                 </div>
                 <div>
                   <dt class="text-[11px] uppercase tracking-wide text-slate-500">
-                    Model execution
+                    {{ t('observability.summary.modelExecution') }}
                   </dt>
                   <dd class="mt-0.5 tabular-nums text-slate-200">
                     {{ formatMs(totals.upstreamMs) }}
@@ -244,13 +249,27 @@ function exportJson() {
               </dl>
               <div class="mt-3 flex flex-wrap gap-1.5">
                 <UBadge v-if="totals.errors" color="error" variant="subtle" size="sm">
-                  {{ totals.errors }} error{{ totals.errors === 1 ? '' : 's' }}
+                  {{
+                    t('observability.metricsBar.errors', { count: totals.errors }, totals.errors)
+                  }}
                 </UBadge>
                 <UBadge v-if="totals.warnings" color="warning" variant="subtle" size="sm">
-                  {{ totals.warnings }} warning{{ totals.warnings === 1 ? '' : 's' }}
+                  {{
+                    t(
+                      'observability.metricsBar.warnings',
+                      { count: totals.warnings },
+                      totals.warnings,
+                    )
+                  }}
                 </UBadge>
                 <UBadge v-if="totals.truncated" color="error" variant="subtle" size="sm">
-                  {{ totals.truncated }} truncated
+                  {{
+                    t(
+                      'observability.summary.truncated',
+                      { count: totals.truncated },
+                      totals.truncated,
+                    )
+                  }}
                 </UBadge>
               </div>
             </section>
@@ -260,8 +279,8 @@ function exportJson() {
               v-if="loading && !calls.length"
               class="flex items-center gap-2 py-8 text-center text-sm text-slate-500 justify-center"
             >
-              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" /> Loading model
-              activity…
+              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+              {{ t('observability.loadingActivity') }}
             </p>
             <p
               v-else-if="error"
@@ -273,7 +292,7 @@ function exportJson() {
               v-else-if="!calls.length"
               class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
             >
-              No model calls recorded for this run.
+              {{ t('observability.noCalls') }}
             </p>
 
             <!-- per-call list -->
@@ -309,18 +328,26 @@ function exportJson() {
                     class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
                   >
                     <span
-                      :title="`${c.promptTokens} prompt / ${c.completionTokens} completion tokens`"
+                      :title="
+                        t('observability.call.tokensTitle', {
+                          prompt: c.promptTokens,
+                          completion: c.completionTokens,
+                        })
+                      "
                     >
                       {{ formatTokens(c.promptTokens) }}↑ {{ formatTokens(c.completionTokens) }}↓
                     </span>
-                    <span v-if="headroomOf(c) !== null" :title="'Output used vs limit'">
+                    <span
+                      v-if="headroomOf(c) !== null"
+                      :title="t('observability.call.outputUsedVsLimit')"
+                    >
                       {{ headroomOf(c) }}%
                     </span>
-                    <span title="Transport overhead / model execution">
+                    <span :title="t('observability.call.transportVsExecution')">
                       {{ formatMs(c.overheadMs) }} / {{ formatMs(c.upstreamMs) }}
                     </span>
                     <UBadge v-if="!c.ok" color="error" variant="subtle" size="sm">
-                      {{ c.httpStatus ?? 'error' }}
+                      {{ c.httpStatus ?? t('observability.call.error') }}
                     </UBadge>
                     <UBadge
                       v-else-if="isWarning(c.finishReason)"
@@ -330,7 +357,9 @@ function exportJson() {
                     >
                       {{ c.finishReason }}
                     </UBadge>
-                    <span v-else class="text-slate-600">{{ c.finishReason ?? 'ok' }}</span>
+                    <span v-else class="text-slate-600">{{
+                      c.finishReason ?? t('observability.call.ok')
+                    }}</span>
                     <span class="hidden text-slate-600 md:inline">{{ clock(c.createdAt) }}</span>
                   </div>
                 </button>
@@ -340,27 +369,40 @@ function exportJson() {
                     {{ c.errorMessage }}
                   </p>
                   <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-slate-500">
-                    <span>{{ c.messageCount }} messages</span>
-                    <span>{{ c.toolCount }} tools</span>
-                    <span>{{ c.streaming ? 'streamed' : 'buffered' }}</span>
-                    <span v-if="c.requestMaxTokens != null"
-                      >max_tokens {{ c.requestMaxTokens }}</span
-                    >
-                    <span v-if="c.cachedPromptTokens > 0" class="text-emerald-400"
-                      >{{ c.cachedPromptTokens }}/{{ c.promptTokens }} prompt cached</span
-                    >
-                    <span>total {{ formatMs(c.totalMs) }}</span>
+                    <span>{{ t('observability.call.messages', { count: c.messageCount }) }}</span>
+                    <span>{{ t('observability.call.tools', { count: c.toolCount }) }}</span>
+                    <span>{{
+                      c.streaming
+                        ? t('observability.call.streamed')
+                        : t('observability.call.buffered')
+                    }}</span>
+                    <span v-if="c.requestMaxTokens != null">{{
+                      t('observability.call.maxTokens', { value: c.requestMaxTokens })
+                    }}</span>
+                    <span v-if="c.cachedPromptTokens > 0" class="text-emerald-400">{{
+                      t('observability.call.promptCached', {
+                        cached: c.cachedPromptTokens,
+                        prompt: c.promptTokens,
+                      })
+                    }}</span>
+                    <span>{{
+                      t('observability.call.total', { duration: formatMs(c.totalMs) })
+                    }}</span>
                   </div>
                   <div>
                     <div
                       class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500"
                     >
-                      <span>Prompt</span>
+                      <span>{{ t('observability.call.prompt') }}</span>
                       <span
                         v-if="c.promptPrefixCount > 0"
                         class="normal-case tracking-normal text-slate-600"
                       >
-                        (new messages only — {{ c.promptPrefixCount }} earlier omitted)
+                        {{
+                          t('observability.call.promptPrefixOmitted', {
+                            count: c.promptPrefixCount,
+                          })
+                        }}
                       </span>
                     </div>
                     <pre
@@ -370,7 +412,7 @@ function exportJson() {
                   </div>
                   <div>
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      Response
+                      {{ t('observability.call.response') }}
                     </div>
                     <pre
                       class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
@@ -379,7 +421,7 @@ function exportJson() {
                   </div>
                   <div v-if="c.reasoningText">
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      Reasoning
+                      {{ t('observability.call.reasoning') }}
                     </div>
                     <pre
                       class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-400"
@@ -397,15 +439,14 @@ function exportJson() {
               v-if="contextLoading && !contextSnapshots.length"
               class="flex items-center justify-center gap-2 py-8 text-center text-sm text-slate-500"
             >
-              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" /> Loading provided
-              context…
+              <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+              {{ t('observability.loadingContext') }}
             </p>
             <p
               v-else-if="!contextSnapshots.length"
               class="rounded-lg border border-dashed border-slate-800 py-8 text-center text-sm text-slate-500"
             >
-              No agent context stored for this run. It is captured per dispatch when the workspace
-              has "Store full agent context" enabled.
+              {{ t('observability.noContext') }}
             </p>
 
             <ul v-else class="space-y-2">
@@ -435,10 +476,12 @@ function exportJson() {
                   <div
                     class="ml-auto flex items-center gap-2.5 text-[11px] tabular-nums text-slate-400"
                   >
-                    <span :title="'Injected context files'">{{ s.contextFiles.length }} files</span>
-                    <span :title="'Best-practice fragments'"
-                      >{{ s.fragments.length }} fragments</span
-                    >
+                    <span :title="t('observability.context.injectedFiles')">{{
+                      t('observability.context.filesCount', { count: s.contextFiles.length })
+                    }}</span>
+                    <span :title="t('observability.context.bestPracticeFragments')">{{
+                      t('observability.context.fragmentsCount', { count: s.fragments.length })
+                    }}</span>
                     <span class="hidden text-slate-600 md:inline">{{ clock(s.createdAt) }}</span>
                   </div>
                 </button>
@@ -446,7 +489,7 @@ function exportJson() {
                 <div v-if="expandedCtx[s.id]" class="border-t border-slate-800 px-4 py-3 space-y-3">
                   <div>
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      System prompt
+                      {{ t('observability.context.systemPrompt') }}
                     </div>
                     <pre
                       class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
@@ -455,7 +498,7 @@ function exportJson() {
                   </div>
                   <div>
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      User prompt
+                      {{ t('observability.context.userPrompt') }}
                     </div>
                     <pre
                       class="max-h-72 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-300"
@@ -464,7 +507,7 @@ function exportJson() {
                   </div>
                   <div v-if="s.fragments.length">
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      Best-practice fragments
+                      {{ t('observability.context.bestPracticeFragments') }}
                     </div>
                     <div
                       v-for="f in s.fragments"
@@ -480,7 +523,7 @@ function exportJson() {
                   </div>
                   <div v-if="s.contextFiles.length">
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      Injected context files
+                      {{ t('observability.context.injectedFiles') }}
                     </div>
                     <div
                       v-for="file in s.contextFiles"
@@ -499,7 +542,7 @@ function exportJson() {
                   </div>
                   <div>
                     <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                      Details
+                      {{ t('observability.context.details') }}
                     </div>
                     <pre
                       class="max-h-48 overflow-auto rounded-lg bg-slate-950/70 p-3 text-[11px] leading-relaxed text-slate-400"

package/app/components/panels/StepMetadataCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { AgentState, PipelineStep, CompanionVerdict } from '~/types/execution'
+import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~/types/execution'
 import { subtaskIconClass } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 
@@ -21,20 +21,28 @@ const props = defineProps<{
 }>()
 
 const models = useModelsStore()
+const { t, d } = useI18n()
 
-const STATE_META: Record<AgentState, { label: string; color: string }> = {
-  pending: { label: 'Pending', color: '#64748b' },
-  working: { label: 'Working', color: '#6366f1' },
-  waiting_decision: { label: 'Needs input', color: '#f59e0b' },
-  done: { label: 'Done', color: '#22c55e' },
+const STATE_LABEL_KEYS: Record<AgentState, string> = {
+  pending: 'panels.stepMeta.state.pending',
+  working: 'panels.stepMeta.state.working',
+  waiting_decision: 'panels.stepMeta.state.waiting_decision',
+  done: 'panels.stepMeta.state.done',
+}
+const STATE_COLOR: Record<AgentState, string> = {
+  pending: '#64748b',
+  working: '#6366f1',
+  waiting_decision: '#f59e0b',
+  done: '#22c55e',
 }
 
 // The state badge: a step left mid-flight on a failed run keeps `state: 'working'`,
 // so report it as "Failed" rather than the misleading "Working".
 const stateMeta = computed(() => {
   const s = props.step
-  if (props.runFailed && s.state === 'working') return { label: 'Failed', color: '#ef4444' }
-  return STATE_META[s.state]
+  if (props.runFailed && s.state === 'working')
+    return { label: t('panels.stepMeta.state.failed'), color: '#ef4444' }
+  return { label: t(STATE_LABEL_KEYS[s.state]), color: STATE_COLOR[s.state] }
 })
 
 const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.step.model) : null))
@@ -47,8 +55,18 @@ const ITEM_ICON: Record<string, string> = {
 
 const pctOf = (n: number) => `${Math.round(n * 100)}%`
 
+const APPROVAL_STATUS_KEYS: Record<StepApproval['status'], string> = {
+  pending: 'panels.stepMeta.approvalStatus.pending',
+  approved: 'panels.stepMeta.approvalStatus.approved',
+  changes_requested: 'panels.stepMeta.approvalStatus.changes_requested',
+  rejected: 'panels.stepMeta.approvalStatus.rejected',
+}
+const approvalStatusLabel = computed(() =>
+  props.step.approval ? t(APPROVAL_STATUS_KEYS[props.step.approval.status]) : '',
+)
+
 function formatClock(ms?: number | null): string | null {
-  return ms ? new Date(ms).toLocaleString() : null
+  return ms ? d(new Date(ms), 'long') : null
 }
 
 async function copyRunId() {
@@ -61,7 +79,9 @@ async function copyRunId() {
   <div>
     <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-3">
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">State</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.stateLabel') }}
+        </dt>
         <dd class="mt-0.5 flex items-center gap-1.5 text-slate-200">
           <UIcon
             v-if="runFailed && step.state === 'working'"
@@ -74,7 +94,9 @@ async function copyRunId() {
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Duration</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.duration') }}
+        </dt>
         <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-slate-200">
           <UIcon
             v-if="isRunning"
@@ -83,33 +105,47 @@ async function copyRunId() {
           />
           <span v-if="durationLabel">{{ durationLabel }}</span>
           <span v-else class="text-slate-500">—</span>
-          <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+          <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+            t('panels.stepMeta.elapsed')
+          }}</span>
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Step</dt>
-        <dd class="mt-0.5 text-slate-200">{{ stepNumber }} of {{ totalSteps }}</dd>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.step') }}
+        </dt>
+        <dd class="mt-0.5 text-slate-200">
+          {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
+        </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Started</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.started') }}
+        </dt>
         <dd class="mt-0.5 text-slate-300">{{ formatClock(step.startedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Finished</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.finished') }}
+        </dt>
         <dd class="mt-0.5 text-slate-300">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Model</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.model') }}
+        </dt>
         <dd class="mt-0.5 truncate text-slate-300" :title="step.model">
-          {{ modelLabel ?? 'Not recorded' }}
+          {{ modelLabel ?? t('panels.stepMeta.notRecorded') }}
         </dd>
       </div>
       <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
       <div class="col-span-2 sm:col-span-3">
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Run</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.run') }}
+        </dt>
         <dd
           class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-slate-400 hover:text-slate-200"
-          :title="`${step.runId ?? instanceId ?? ''} — click to copy`"
+          :title="t('panels.stepMeta.clickToCopy', { id: step.runId ?? instanceId ?? '' })"
           @click="copyRunId"
         >
           {{ step.runId ?? instanceId ?? '—' }}
@@ -124,13 +160,18 @@ async function copyRunId() {
       class="mt-4 flex items-center gap-2 rounded-lg border border-sky-900/50 bg-sky-950/30 px-3 py-2 text-[12px] text-sky-300"
     >
       <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
-      <span>Spinning up container…</span>
+      <span>{{ t('panels.stepMeta.spinningUpContainer') }}</span>
     </div>
 
     <!-- live subtask breakdown -->
     <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">
       <div class="text-[11px] uppercase tracking-wide text-slate-500">
-        Subtasks · {{ step.subtasks.completed }}/{{ step.subtasks.total }}
+        {{
+          t('panels.stepMeta.subtasks', {
+            completed: step.subtasks.completed,
+            total: step.subtasks.total,
+          })
+        }}
       </div>
       <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
         <div
@@ -170,7 +211,9 @@ async function copyRunId() {
 
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Standards applied</div>
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.standardsApplied') }}
+      </div>
       <div class="mt-1 flex flex-wrap gap-1">
         <UBadge
           v-for="id in step.selectedFragmentIds"
@@ -186,7 +229,9 @@ async function copyRunId() {
 
     <!-- decision raised on this step -->
     <div v-if="step.decision" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Decision</div>
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.decision') }}
+      </div>
       <p class="mt-0.5 text-[13px] text-slate-200">{{ step.decision.question }}</p>
       <p
         v-if="step.decision.chosen"
@@ -195,21 +240,27 @@ async function copyRunId() {
         <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
         {{ step.decision.chosen }}
       </p>
-      <p v-else class="mt-0.5 text-[12px] text-amber-400">Awaiting a human choice</p>
+      <p v-else class="mt-0.5 text-[12px] text-amber-400">
+        {{ t('panels.stepMeta.awaitingChoice') }}
+      </p>
     </div>
 
     <!-- approval gate state -->
     <div v-if="step.approval" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Approval gate</div>
-      <p class="mt-0.5 text-[13px] text-slate-200 capitalize">
-        {{ step.approval.status.replace('_', ' ') }}
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.approvalGate') }}
+      </div>
+      <p class="mt-0.5 text-[13px] text-slate-200">
+        {{ approvalStatusLabel }}
       </p>
     </div>
 
     <!-- companion verdict + full correction sequence -->
     <div v-if="companionVerdicts.length" class="mt-4">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] uppercase tracking-wide text-slate-500"> Companion review </span>
+        <span class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.companionReview') }}
+        </span>
         <UBadge :color="latestVerdict?.passed ? 'success' : 'warning'" variant="subtle" size="sm">
           {{ pctOf(latestVerdict!.rating) }}
           {{ latestVerdict?.passed ? '≥' : '<' }} {{ pctOf(latestVerdict!.threshold) }}
@@ -234,7 +285,13 @@ async function copyRunId() {
         </li>
       </ol>
       <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-slate-500">
-        {{ companionVerdicts.length }} correction iteration(s).
+        {{
+          t(
+            'panels.stepMeta.correctionIterations',
+            { count: companionVerdicts.length },
+            companionVerdicts.length,
+          )
+        }}
       </p>
     </div>
   </div>

package/app/components/panels/StepRestartControl.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 const emit = defineEmits<{ restarted: [] }>()
 
 const execution = useExecutionStore()
+const { t } = useI18n()
 
 const instance = computed(() =>
   props.instanceId ? execution.getInstance(props.instanceId) : undefined,
@@ -62,7 +63,7 @@ async function restart() {
       color="neutral"
       variant="ghost"
       size="sm"
-      title="Restart pipeline from this step"
+      :title="t('panels.stepRestart.restartFromStep')"
       @click="armed = true"
     />
     <template v-else>
@@ -74,7 +75,7 @@ async function restart() {
         :loading="restarting"
         @click="restart"
       >
-        Restart from here
+        {{ t('panels.stepRestart.restartFromHere') }}
       </UButton>
       <UButton
         color="neutral"
@@ -83,7 +84,7 @@ async function restart() {
         :disabled="restarting"
         @click="armed = false"
       >
-        Cancel
+        {{ t('common.cancel') }}
       </UButton>
     </template>
   </template>