@cat-factory/app 0.46.9 → 0.46.11

package/app/components/board/RecurringPipelineModal.vue

@@ -13,6 +13,7 @@ const pipelines = usePipelinesStore()
 const recurring = useRecurringPipelinesStore()
 const tracker = useTrackerStore()
 const toast = useToast()
+const { t } = useI18n()
 
 const open = computed({
   get: () => ui.addRecurringFrameId !== null,
@@ -54,7 +55,9 @@ const pipelineMenu = computed(() => [
   })),
 ])
 const selectedPipeline = computed(() => pipelines.getPipeline(pipelineId.value))
-const selectedPipelineLabel = computed(() => selectedPipeline.value?.name ?? 'Pick a pipeline')
+const selectedPipelineLabel = computed(
+  () => selectedPipeline.value?.name ?? t('board.recurring.pickPipeline'),
+)
 
 // Infer the template from the picked pipeline so the backend seeds the right block
 // description (and so we know to show the tracker config).
@@ -108,7 +111,7 @@ async function add() {
     ui.closeAddRecurring()
   } catch (e) {
     toast.add({
-      title: 'Could not add recurring pipeline',
+      title: t('board.recurring.addFailedTitle'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -120,24 +123,27 @@ async function add() {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Add a recurring pipeline">
+  <UModal v-model:open="open" :title="t('board.recurring.title')">
     <template #body>
       <div class="space-y-4">
         <p v-if="frame" class="text-xs text-slate-400">
-          Recurring pipeline on
-          <span class="font-medium text-slate-200">{{ frame.title }}</span>
+          <i18n-t keypath="board.recurring.on" tag="span" scope="global">
+            <template #frame>
+              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+            </template>
+          </i18n-t>
         </p>
 
-        <UFormField label="Name" required>
+        <UFormField :label="t('board.recurring.name')" required>
           <UInput
             v-model="name"
-            placeholder="e.g. Weekly dependency updates"
+            :placeholder="t('board.recurring.namePlaceholder')"
             autofocus
             class="w-full"
           />
         </UFormField>
 
-        <UFormField label="Pipeline" required>
+        <UFormField :label="t('board.recurring.pipeline')" required>
           <UDropdownMenu :items="pipelineMenu" class="w-full">
             <UButton
               color="neutral"
@@ -152,12 +158,12 @@ async function add() {
           </UDropdownMenu>
         </UFormField>
 
-        <UFormField label="Prompt">
+        <UFormField :label="t('board.recurring.prompt')">
           <UTextarea
             v-model="description"
             :rows="3"
             autoresize
-            placeholder="What should each run do? Describe the work — the same prompt a normal task carries. Leave blank to use the pipeline's default."
+            :placeholder="t('board.recurring.promptPlaceholder')"
             class="w-full"
           />
         </UFormField>
@@ -166,11 +172,10 @@ async function add() {
 
         <div v-if="isTechDebt" class="space-y-3 rounded-lg border border-slate-800 p-3">
           <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            Issue tracker
+            {{ t('board.recurring.issueTracker') }}
           </p>
           <p class="text-[11px] text-slate-500">
-            The tech-debt pipeline files a ticket from its analysis before implementing. Choose
-            where (saved for the whole workspace).
+            {{ t('board.recurring.issueTrackerHint') }}
           </p>
           <div class="flex gap-1">
             <UButton
@@ -180,7 +185,7 @@ async function add() {
               icon="i-lucide-github"
               @click="trackerKind = 'github'"
             >
-              GitHub Issues
+              {{ t('board.recurring.githubIssues') }}
             </UButton>
             <UButton
               size="xs"
@@ -189,7 +194,7 @@ async function add() {
               icon="i-lucide-square-check"
               @click="trackerKind = 'jira'"
             >
-              Jira
+              {{ t('board.recurring.jira') }}
             </UButton>
             <UButton
               size="xs"
@@ -198,27 +203,32 @@ async function add() {
               icon="i-lucide-square-kanban"
               @click="trackerKind = 'linear'"
             >
-              Linear
+              {{ t('board.recurring.linear') }}
             </UButton>
           </div>
-          <UFormField v-if="trackerKind === 'jira'" label="Jira project key">
-            <UInput v-model="jiraProjectKey" placeholder="e.g. ENG" class="w-full" />
+          <UFormField v-if="trackerKind === 'jira'" :label="t('board.recurring.jiraProjectKey')">
+            <UInput
+              v-model="jiraProjectKey"
+              :placeholder="t('board.recurring.jiraProjectKeyPlaceholder')"
+              class="w-full"
+            />
           </UFormField>
-          <UFormField v-if="trackerKind === 'linear'" label="Linear team id">
+          <UFormField v-if="trackerKind === 'linear'" :label="t('board.recurring.linearTeamId')">
             <UInput v-model="linearTeamId" placeholder="team_…" class="w-full" />
           </UFormField>
         </div>
 
         <p class="text-[11px] text-slate-500">
-          A single recurring task is added inside the service; each run replaces the last. Its run
-          history is visible in the inspector.
+          {{ t('board.recurring.footerHint') }}
         </p>
       </div>
     </template>
 
     <template #footer>
       <div class="flex w-full justify-end gap-2">
-        <UButton color="neutral" variant="ghost" @click="ui.closeAddRecurring()">Cancel</UButton>
+        <UButton color="neutral" variant="ghost" @click="ui.closeAddRecurring()">{{
+          t('common.cancel')
+        }}</UButton>
         <UButton
           color="primary"
           icon="i-lucide-repeat"
@@ -226,7 +236,7 @@ async function add() {
           :disabled="!canAdd"
           @click="add"
         >
-          Add recurring pipeline
+          {{ t('board.recurring.submit') }}
         </UButton>
       </div>
     </template>

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

@@ -22,6 +22,7 @@ const tasks = useTasksStore()
 const agentRuns = useAgentRunsStore()
 const services = useServicesStore()
 const reviews = useReviewStage()
+const { t } = useI18n()
 const { lod } = useSemanticZoom()
 // Coarse-pointer (touch) bumps the frame-header actions from `xs` to `sm` so
 // they clear a comfortable tap target on phones without affecting mouse desktops.
@@ -57,15 +58,17 @@ const canvas = computed(() => board.containerSize(props.id))
 const frameStatus = computed<BlockStatus>(() => board.frameStatus(props.id))
 const statusMeta = computed(() => STATUS_META[frameStatus.value])
 const accent = computed(() => statusMeta.value.color)
-const FRAME_LABEL: Record<BlockStatus, string> = {
-  planned: 'No tasks',
-  ready: 'Live',
-  in_progress: 'Active',
-  blocked: 'Needs attention',
-  pr_ready: 'Active',
-  done: 'Live',
+// Exhaustive (tier-2) status → label-key map: a new BlockStatus without a label
+// fails the typecheck rather than leaking a raw key into the frame badge.
+const FRAME_LABEL_KEYS: Record<BlockStatus, string> = {
+  planned: 'board.frame.status.planned',
+  ready: 'board.frame.status.ready',
+  in_progress: 'board.frame.status.in_progress',
+  blocked: 'board.frame.status.blocked',
+  pr_ready: 'board.frame.status.pr_ready',
+  done: 'board.frame.status.done',
 }
-const statusLabel = computed(() => FRAME_LABEL[frameStatus.value])
+const statusLabel = computed(() => t(FRAME_LABEL_KEYS[frameStatus.value]))
 
 const selected = computed(() => ui.selectedBlockId === props.id)
 // Services are always expanded to their task canvas, at every zoom level: there is no
@@ -211,7 +214,7 @@ const ITEM_ICON: Record<string, string> = {
         v-if="blockApprovals.length"
         :count="blockApprovals.length"
         :compact="lod === 'far'"
-        label="Approval needed"
+        :label="t('board.decisionBadge.approvalNeeded')"
         icon="i-lucide-shield-check"
         @open="openFirstApproval"
       />
@@ -232,13 +235,13 @@ const ITEM_ICON: Record<string, string> = {
         v-if="bootstrapping"
         name="i-lucide-loader-circle"
         class="ml-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
-        title="Bootstrapping…"
+        :title="t('board.frame.bootstrapping')"
       />
       <UIcon
         v-else-if="runFailed"
         name="i-lucide-alert-triangle"
         class="ml-auto h-3.5 w-3.5 shrink-0 text-rose-400"
-        title="Run failed"
+        :title="t('board.frame.runFailed')"
       />
       <span v-else-if="hasTasks" class="ml-auto shrink-0 text-[11px] text-slate-300">
         {{ mergedTasks }}/{{ taskCount }}
@@ -259,7 +262,7 @@ const ITEM_ICON: Record<string, string> = {
             name="i-lucide-loader-circle"
             class="h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
           />
-          <span class="text-amber-300">Bootstrapping…</span>
+          <span class="text-amber-300">{{ t('board.frame.bootstrapping') }}</span>
           <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
             {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }}
           </span>
@@ -292,18 +295,18 @@ const ITEM_ICON: Record<string, string> = {
             variant="subtle"
             size="sm"
             class="shrink-0"
-            title="Shared across workspaces in this org"
+            :title="t('board.frame.sharedTitle')"
           >
-            Shared
+            {{ t('board.frame.shared') }}
           </UBadge>
         </div>
         <div class="flex items-center justify-between">
           <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
             statusLabel
           }}</UBadge>
-          <span class="text-[11px] text-slate-400"
-            >{{ taskCount }} task{{ taskCount === 1 ? '' : 's' }}</span
-          >
+          <span class="text-[11px] text-slate-400">{{
+            t('board.frame.taskCount', { count: taskCount }, taskCount)
+          }}</span>
         </div>
         <button
           type="button"
@@ -311,9 +314,13 @@ const ITEM_ICON: Record<string, string> = {
           @click.stop="toggleExpand"
         >
           <UIcon name="i-lucide-layers" class="h-3 w-3 text-slate-400" />
-          <span v-if="hasTasks">{{ mergedTasks }}/{{ taskCount }} merged</span>
-          <span v-else>No tasks yet</span>
-          <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR</span>
+          <span v-if="hasTasks">{{
+            t('board.frame.mergedOfTotal', { merged: mergedTasks, total: taskCount })
+          }}</span>
+          <span v-else>{{ t('board.frame.noTasksYet') }}</span>
+          <span v-if="prTasks" class="text-emerald-400"
+            >· {{ t('board.frame.prCount', { count: prTasks }) }}</span
+          >
           <UIcon name="i-lucide-chevron-down" class="ml-auto h-3 w-3" />
         </button>
       </div>
@@ -333,9 +340,14 @@ const ITEM_ICON: Record<string, string> = {
             name="i-lucide-loader-circle"
             class="h-4 w-4 shrink-0 animate-spin text-amber-400"
           />
-          <span class="text-amber-300">Bootstrapping repository…</span>
+          <span class="text-amber-300">{{ t('board.frame.bootstrappingRepository') }}</span>
           <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
-            {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }} steps
+            {{
+              t('board.frame.bootstrapStepsCount', {
+                completed: bootstrapSubtasks.completed,
+                total: bootstrapSubtasks.total,
+              })
+            }}
           </span>
         </div>
         <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-amber-900/40">
@@ -389,7 +401,7 @@ const ITEM_ICON: Record<string, string> = {
              the gap). -->
         <div
           class="nopan cursor-grab touch-none space-y-3 pb-3 active:cursor-grabbing"
-          title="Drag service"
+          :title="t('board.frame.dragService')"
           @pointerdown="onFrameHandle"
         >
           <div class="flex items-start justify-between gap-2">
@@ -420,7 +432,7 @@ const ITEM_ICON: Record<string, string> = {
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-plus"
-                title="Add task"
+                :title="t('board.frame.addTaskTitle')"
                 @click.stop="addTask"
               />
               <UButton
@@ -430,7 +442,7 @@ const ITEM_ICON: Record<string, string> = {
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-ticket"
-                title="Create task from issue"
+                :title="t('board.frame.createTaskFromIssueTitle')"
                 @click.stop="createTaskFromIssue"
               />
               <UButton
@@ -439,7 +451,7 @@ const ITEM_ICON: Record<string, string> = {
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-repeat"
-                title="Add recurring pipeline"
+                :title="t('board.frame.addRecurringTitle')"
                 @click.stop="addRecurring"
               />
               <UButton
@@ -448,18 +460,22 @@ const ITEM_ICON: Record<string, string> = {
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-chevron-up"
-                title="Collapse"
+                :title="t('board.frame.collapseTitle')"
                 @click.stop="toggleExpand"
               />
             </div>
           </div>
 
           <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
-            <span>{{ mergedTasks }}/{{ taskCount }} implemented</span>
+            <span>{{
+              t('board.frame.implemented', { merged: mergedTasks, total: taskCount })
+            }}</span>
             <span v-if="modules.length"
-              >· {{ modules.length }} module{{ modules.length === 1 ? '' : 's' }}</span
+              >· {{ t('board.frame.moduleCount', { count: modules.length }, modules.length) }}</span
+            >
+            <span v-if="prTasks" class="text-emerald-400"
+              >· {{ t('board.frame.prReadyCount', { count: prTasks }) }}</span
             >
-            <span v-if="prTasks" class="text-emerald-400">· {{ prTasks }} PR ready</span>
           </div>
         </div>
 
@@ -478,7 +494,7 @@ const ITEM_ICON: Record<string, string> = {
             class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-slate-700 text-[11px] text-slate-500 hover:border-slate-500 hover:text-slate-300"
             @click.stop="addTask"
           >
-            <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> Add the first task
+            <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> {{ t('board.frame.addFirstTask') }}
           </button>
 
           <!-- resize handles (drag the borders to resize the service, Miro-style).
@@ -486,17 +502,17 @@ const ITEM_ICON: Record<string, string> = {
                same reason as the header handle above. -->
           <div
             class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-sky-400/20 pointer-coarse:w-4"
-            title="Drag to resize"
+            :title="t('board.frame.dragToResize')"
             @pointerdown="onResize($event, 'e')"
           />
           <div
             class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-sky-400/20 pointer-coarse:h-4"
-            title="Drag to resize"
+            :title="t('board.frame.dragToResize')"
             @pointerdown="onResize($event, 's')"
           />
           <div
             class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
-            title="Drag to resize"
+            :title="t('board.frame.dragToResize')"
             @pointerdown="onResize($event, 'se')"
           >
             <span

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-withDefaults(
+const props = withDefaults(
   defineProps<{
     count?: number
     compact?: boolean
@@ -7,9 +7,12 @@ withDefaults(
     label?: string
     icon?: string
   }>(),
-  { label: 'Decision needed', icon: 'i-lucide-circle-help' },
+  { icon: 'i-lucide-circle-help' },
 )
 defineEmits<{ (e: 'open'): void }>()
+
+const { t } = useI18n()
+const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisionNeeded'))
 </script>
 
 <template>
@@ -19,7 +22,7 @@ defineEmits<{ (e: 'open'): void }>()
     @click.stop="$emit('open')"
   >
     <UIcon :name="icon" class="h-3.5 w-3.5" />
-    <span v-if="!compact">{{ label }}</span>
+    <span v-if="!compact">{{ displayLabel }}</span>
     <span v-if="count && count > 1" class="rounded-full bg-amber-950/30 px-1">
       {{ count }}
     </span>

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

@@ -4,6 +4,7 @@ import { useBlockDrag } from '~/composables/useBlockDrag'
 
 const props = defineProps<{ taskId: string }>()
 const board = useBoardStore()
+const { t } = useI18n()
 const expansion = useTaskExpansionStore()
 const task = computed(() => board.getBlock(props.taskId))
 const { draggingId, startDrag } = useBlockDrag()
@@ -42,7 +43,7 @@ function onHandle(e: PointerEvent) {
       <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
         class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
-        title="Drag task"
+        :title="t('board.frame.dragTask')"
         @pointerdown="onHandle"
       >
         <UIcon

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

@@ -10,6 +10,7 @@ const props = defineProps<{ id: string }>()
 
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
 const members = computed(() => board.epicMembers(props.id))
@@ -31,7 +32,9 @@ const selected = computed(() => ui.selectedBlockId === props.id)
   >
     <div class="flex items-center gap-1.5">
       <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 shrink-0 text-violet-400" />
-      <span class="text-[10px] font-semibold uppercase tracking-wide text-violet-300">Epic</span>
+      <span class="text-[10px] font-semibold uppercase tracking-wide text-violet-300">{{
+        t('board.epic.label')
+      }}</span>
       <span class="ml-auto text-[10px] text-slate-400">{{ done }}/{{ total }}</span>
     </div>
     <div class="mt-1 truncate text-sm font-medium text-slate-100" :title="block.title">
@@ -43,7 +46,11 @@ const selected = computed(() => ui.selectedBlockId === props.id)
         :style="{ width: total ? `${Math.round((done / total) * 100)}%` : '0%' }"
       />
     </div>
-    <div v-if="active" class="mt-1 text-[10px] text-slate-400">{{ active }} active</div>
-    <div v-else-if="total === 0" class="mt-1 text-[10px] text-slate-500">No tasks yet</div>
+    <div v-if="active" class="mt-1 text-[10px] text-slate-400">
+      {{ t('board.epic.activeCount', { count: active }) }}
+    </div>
+    <div v-else-if="total === 0" class="mt-1 text-[10px] text-slate-500">
+      {{ t('board.epic.noTasksYet') }}
+    </div>
   </div>
 </template>

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

@@ -7,6 +7,7 @@ import { useFrameResize } from '~/composables/useFrameResize'
 const props = defineProps<{ moduleId: string }>()
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const mod = computed(() => board.getBlock(props.moduleId))
 const tasks = computed(() => board.tasksOf(props.moduleId))
@@ -61,10 +62,10 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       />
       <span class="truncate text-[11px] font-semibold text-violet-100">{{ mod.title }}</span>
       <span v-if="inflight" class="ml-auto shrink-0 text-[9px] text-violet-300/70">
-        {{ inflight }} task{{ inflight === 1 ? '' : 's' }}
+        {{ t('board.frame.taskCount', { count: inflight }, inflight) }}
       </span>
       <span v-else-if="total" class="ml-auto shrink-0 text-[9px] text-violet-300/70">
-        {{ total }} task{{ total === 1 ? '' : 's' }}
+        {{ t('board.frame.taskCount', { count: total }, total) }}
       </span>
     </div>
 
@@ -77,17 +78,17 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
          `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
       class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-violet-400/20 pointer-coarse:w-4"
-      title="Drag to resize"
+      :title="t('board.frame.dragToResize')"
       @pointerdown="onResize($event, 'e')"
     />
     <div
       class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-violet-400/20 pointer-coarse:h-4"
-      title="Drag to resize"
+      :title="t('board.frame.dragToResize')"
       @pointerdown="onResize($event, 's')"
     />
     <div
       class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
-      title="Drag to resize"
+      :title="t('board.frame.dragToResize')"
       @pointerdown="onResize($event, 'se')"
     >
       <span