@cat-factory/app 0.46.9 → 0.46.11

package/app/components/board/nodes/TaskCard.vue

@@ -13,6 +13,7 @@ const ui = useUiStore()
 const agentRuns = useAgentRunsStore()
 const reviews = useReviewStage()
 const toast = useToast()
+const { t } = useI18n()
 
 const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
@@ -43,7 +44,9 @@ const defaultPipeline = computed(
 
 /** The PR the implementer agent opened for this task, if any. */
 const pr = computed(() => task.value?.pullRequest)
-const prLabel = computed(() => (pr.value?.number ? `PR #${pr.value.number}` : 'PR'))
+const prLabel = computed(() =>
+  pr.value?.number ? t('board.task.prNumber', { number: pr.value.number }) : t('board.task.pr'),
+)
 
 // This task's current agent run (if any). A failed run must surface the shared
 // failure banner + retry — NOT a stuck progress bar — so the card never looks
@@ -65,15 +68,18 @@ const starting = ref(false)
 async function run() {
   if (!runnable.value) {
     toast.add({
-      title: 'Blocked by dependencies',
-      description: `Waiting on: ${unmet.value.map((d) => d.title).join(', ')}`,
+      title: t('board.task.blockedByDependenciesTitle'),
+      description: t('board.task.waitingOn', { deps: unmet.value.map((d) => d.title).join(', ') }),
       icon: 'i-lucide-lock',
     })
     return
   }
   const pipeline = defaultPipeline.value
   if (!pipeline) {
-    toast.add({ title: 'No pipeline defined', description: 'Create one in the builder first.' })
+    toast.add({
+      title: t('board.task.noPipelineTitle'),
+      description: t('board.task.noPipelineBody'),
+    })
     return
   }
   starting.value = true
@@ -108,11 +114,11 @@ const pendingDecision = computed(() =>
 const reviewStage = computed(() => reviews.stageForBlock(props.taskId))
 const reviewStageLabel = computed(() =>
   reviewStage.value === 'incorporating'
-    ? 'Incorporating answers…'
+    ? t('board.task.incorporatingAnswers')
     : reviewStage.value === 'reviewing'
-      ? 'Re-reviewing…'
+      ? t('board.task.reReviewing')
       : reviewStage.value === 'recommending'
-        ? 'Recommending…'
+        ? t('board.task.recommending')
         : null,
 )
 const pendingApproval = computed(() => {
@@ -135,17 +141,17 @@ const attention = computed<{
   const d = pendingDecision.value
   if (d)
     return {
-      label: 'Decision needed',
+      label: t('board.task.decisionNeeded'),
       icon: 'i-lucide-circle-help',
-      action: 'Resolve',
+      action: t('board.task.resolve'),
       open: () => ui.openDecision(d.instanceId, d.decision.id),
     }
   const a = pendingApproval.value
   if (a)
     return {
-      label: 'Approval needed',
+      label: t('board.task.approvalNeeded'),
       icon: 'i-lucide-shield-check',
-      action: 'Approve',
+      action: t('board.task.approve'),
       open: () => ui.openApprovalDetail(a.instanceId, a.approval.id),
     }
   return null
@@ -155,7 +161,7 @@ const attention = computed<{
  * decision/approval reason, otherwise the generic status label. */
 const statusText = computed(() =>
   runFailed.value
-    ? 'Failed'
+    ? t('board.task.failed')
     : (reviewStageLabel.value ?? attention.value?.label ?? statusMeta.value?.label ?? ''),
 )
 
@@ -191,7 +197,11 @@ function selectTask() {
         v-if="schedule"
         name="i-lucide-repeat"
         class="h-3 w-3 shrink-0 text-indigo-400"
-        :title="schedule.enabled ? 'Recurring pipeline' : 'Recurring pipeline (paused)'"
+        :title="
+          schedule.enabled
+            ? t('board.task.recurringPipeline')
+            : t('board.task.recurringPipelinePaused')
+        "
       />
       <span
         class="ml-auto truncate text-[9px] uppercase tracking-wide"
@@ -211,7 +221,7 @@ function selectTask() {
       <button
         type="button"
         class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
-        title="Drag onto another task to make it depend on this one"
+        :title="t('board.task.dragToConnect')"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
       >
@@ -302,12 +312,20 @@ function selectTask() {
           :disabled="!runnable || starting"
           :title="
             runnable
-              ? `Start ${defaultPipeline?.name ?? 'pipeline'}`
-              : `Waiting on: ${unmet.map((d) => d.title).join(', ')}`
+              ? t('board.task.startPipeline', {
+                  name: defaultPipeline?.name ?? t('board.task.pipelineFallback'),
+                })
+              : t('board.task.waitingOn', { deps: unmet.map((d) => d.title).join(', ') })
           "
           @click.stop="run"
         >
-          {{ starting ? 'Starting…' : runnable ? 'Start' : 'Blocked' }}
+          {{
+            starting
+              ? t('board.task.starting')
+              : runnable
+                ? t('board.task.start')
+                : t('board.task.blocked')
+          }}
         </UButton>
         <span
           v-if="runnable && defaultPipeline"
@@ -328,7 +346,7 @@ function selectTask() {
           variant="soft"
           size="xs"
           icon="i-lucide-git-pull-request"
-          :title="`Open ${prLabel} on GitHub`"
+          :title="t('board.task.openPrOnGithub', { pr: prLabel })"
           @click.stop
         >
           {{ prLabel }}
@@ -340,7 +358,7 @@ function selectTask() {
           icon="i-lucide-scan-eye"
           @click.stop="review"
         >
-          Review
+          {{ t('board.task.review') }}
         </UButton>
         <UButton
           color="success"
@@ -349,7 +367,7 @@ function selectTask() {
           icon="i-lucide-git-merge"
           @click.stop="merge"
         >
-          Merge
+          {{ t('board.task.merge') }}
         </UButton>
       </template>
 
@@ -357,7 +375,7 @@ function selectTask() {
         v-else-if="task.status === 'done'"
         class="inline-flex items-center gap-1 text-[9px] text-emerald-400"
       >
-        <UIcon name="i-lucide-check-check" class="h-3 w-3" /> implemented
+        <UIcon name="i-lucide-check-check" class="h-3 w-3" /> {{ t('board.task.implemented') }}
       </span>
     </div>
 
@@ -368,7 +386,7 @@ function selectTask() {
     >
       <span
         class="inline-flex items-center gap-1 rounded bg-violet-500/15 px-1.5 py-0.5 text-[9px] text-violet-200"
-        :title="`Module: ${task.moduleName}`"
+        :title="t('board.task.module', { name: task.moduleName })"
       >
         <UIcon :name="MODULE_META.icon" class="h-3 w-3" :style="{ color: MODULE_META.color }" />
         {{ task.moduleName }}

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -21,6 +21,7 @@ const execution = useExecutionStore()
 const ui = useUiStore()
 const expansion = useTaskExpansionStore()
 const reviews = useReviewStage()
+const { t } = useI18n()
 const { lod } = useSemanticZoom()
 
 const instance = computed(() => execution.getByBlock(props.taskId))
@@ -75,12 +76,12 @@ const ITEM_ICON: Record<string, string> = {
   <div v-if="showSteps" class="mt-2 space-y-1 border-t border-slate-800 pt-2">
     <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-slate-500">
       <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
-      Build steps
+      {{ t('board.task.buildSteps') }}
     </div>
     <div v-for="(s, i) in steps" :key="i" class="rounded bg-slate-900/60 px-1.5 py-1">
       <div
         class="flex cursor-pointer items-center gap-1"
-        :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\nClick to view step details & output`"
+        :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
         <UIcon
@@ -131,7 +132,7 @@ const ITEM_ICON: Record<string, string> = {
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
-        Review &amp; approve
+        {{ t('board.task.reviewAndApprove') }}
       </button>
 
       <!-- per-step subtask progress bar -->

package/app/components/layout/BoardToolbar.vue

@@ -8,15 +8,20 @@ const execution = useExecutionStore()
 const workspace = useWorkspaceStore()
 const services = useServicesStore()
 const toast = useToast()
+const { t, n } = useI18n()
 const { fitView, zoomIn, zoomOut } = useBoardFlow()
 
 async function mountService(serviceId: string, title: string) {
   try {
     await services.mount(serviceId)
-    toast.add({ title: `Added ${title}`, icon: 'i-lucide-box', color: 'success' })
+    toast.add({
+      title: t('board.toolbar.serviceAdded', { title }),
+      icon: 'i-lucide-box',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not add service',
+      title: t('board.toolbar.serviceAddFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -38,16 +43,16 @@ const mountableItems = computed(() =>
 )
 
 const zoomPct = computed(() => Math.round(ui.zoom * 100))
-const lodLabel = computed(
-  () =>
-    ({
-      far: 'Overview',
-      mid: 'Summary',
-      close: 'Detail',
-      steps: 'Build steps',
-      subtasks: 'Subtasks',
-    })[ui.lod],
-)
+// Exhaustive (tier-2) map from level-of-detail → its label key, so adding an LOD
+// without a label fails the typecheck rather than leaking a raw key.
+const LOD_LABEL_KEYS = {
+  far: 'board.toolbar.lod.far',
+  mid: 'board.toolbar.lod.mid',
+  close: 'board.toolbar.lod.close',
+  steps: 'board.toolbar.lod.steps',
+  subtasks: 'board.toolbar.lod.subtasks',
+} as const
+const lodLabel = computed(() => t(LOD_LABEL_KEYS[ui.lod]))
 
 // Live spend indicator: shown once any tokens have been metered this period.
 const spend = computed(() => workspace.spend)
@@ -55,11 +60,11 @@ const showSpend = computed(() => !!spend.value && spend.value.costSpent > 0)
 const spendLabel = computed(() => {
   const s = spend.value
   if (!s) return ''
-  const fmt = (n: number) => {
+  const fmt = (value: number) => {
     try {
-      return new Intl.NumberFormat(undefined, { style: 'currency', currency: s.currency }).format(n)
+      return n(value, { key: 'currency', currency: s.currency })
     } catch {
-      return `${n.toFixed(2)} ${s.currency}`
+      return `${value.toFixed(2)} ${s.currency}`
     }
   }
   return `${fmt(s.costSpent)} / ${fmt(s.costLimit)}`
@@ -70,7 +75,7 @@ const decisionItems = computed(() =>
   execution.openDecisions.map((d) => {
     const b = board.getBlock(d.blockId)
     return {
-      label: b?.title ?? 'Block',
+      label: b?.title ?? t('common.block'),
       description: d.decision.question,
       icon: 'i-lucide-circle-help',
       onSelect: () => ui.openDecision(d.instanceId, d.decision.id),
@@ -127,7 +132,7 @@ const decisionItems = computed(() =>
       >
         {{ execution.pendingDecisionCount
         }}<span class="hidden sm:inline"
-          >&nbsp;{{ $t('board.toolbar.decisionWord', execution.pendingDecisionCount) }}</span
+          >&nbsp;{{ t('board.toolbar.decisionWord', execution.pendingDecisionCount) }}</span
         >
       </UButton>
     </UDropdownMenu>
@@ -135,7 +140,7 @@ const decisionItems = computed(() =>
     <!-- in-org sharing: add an existing org service to this board -->
     <UDropdownMenu v-if="mountableItems.length" :items="mountableItems">
       <UButton color="neutral" variant="ghost" size="sm" icon="i-lucide-plus-circle">
-        <span class="hidden sm:inline">{{ $t('board.toolbar.addService') }}</span>
+        <span class="hidden sm:inline">{{ t('board.toolbar.addService') }}</span>
       </UButton>
     </UDropdownMenu>
 
@@ -149,7 +154,9 @@ const decisionItems = computed(() =>
       variant="soft"
       size="sm"
       icon="i-lucide-wallet"
-      :title="spend?.exceeded ? 'Spend limit reached — runs paused' : 'Token spend this month'"
+      :title="
+        spend?.exceeded ? t('board.toolbar.spendLimitReached') : t('board.toolbar.spendTitle')
+      "
     >
       <span class="hidden sm:inline">{{ spendLabel }}</span>
     </UButton>

package/app/components/observability/StepMetricsBar.vue

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

package/app/components/observability/StepModelActivity.vue

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