@cat-factory/app 0.47.9 → 0.47.10

package/app/components/focus/BlockFocusView.vue

@@ -11,6 +11,8 @@ const ui = useUiStore()
 const models = useModelsStore()
 const workspace = useWorkspaceStore()
 
+const { t, n } = useI18n()
+
 onMounted(() => models.ensureLoaded(workspace.workspaceId ?? undefined))
 
 const block = computed<Block | undefined>(() =>
@@ -64,7 +66,7 @@ function openApprovalFor(approvalId: string) {
           size="sm"
           @click="close"
         >
-          Board
+          {{ t('focus.board') }}
         </UButton>
         <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
         <div
@@ -75,7 +77,9 @@ function openApprovalFor(approvalId: string) {
         </div>
         <div>
           <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
-          <div class="text-xs text-slate-500">{{ typeMeta.label }} · focus view</div>
+          <div class="text-xs text-slate-500">
+            {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
+          </div>
         </div>
         <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
           {{ statusMeta.label }}
@@ -89,7 +93,7 @@ function openApprovalFor(approvalId: string) {
               icon="i-lucide-play"
               trailing-icon="i-lucide-chevron-down"
             >
-              {{ instance ? 'Re-run pipeline' : 'Run pipeline' }}
+              {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
             </UButton>
           </UDropdownMenu>
           <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
@@ -104,7 +108,7 @@ function openApprovalFor(approvalId: string) {
           <div class="mb-4 flex items-center gap-2">
             <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
             <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
-              {{ instance ? instance.pipelineName : 'No pipeline running' }}
+              {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
             </h2>
           </div>
 
@@ -119,7 +123,7 @@ function openApprovalFor(approvalId: string) {
             v-else
             class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
           >
-            Run a pipeline to visualize the agents working on this block.
+            {{ t('focus.emptyPipelineHint') }}
           </div>
         </section>
 
@@ -129,29 +133,29 @@ function openApprovalFor(approvalId: string) {
         >
           <div>
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Description
+              {{ t('focus.description') }}
             </div>
             <p class="text-sm text-slate-300">{{ block.description }}</p>
           </div>
           <div v-if="instance">
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Overall progress
+              {{ t('focus.overallProgress') }}
             </div>
             <UProgress :model-value="Math.round(block.progress * 100)" />
             <div class="mt-1 text-[11px] text-slate-400">
-              {{ Math.round(block.progress * 100) }}%
+              {{ n(block.progress, 'percent') }}
             </div>
           </div>
           <div>
             <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Dependencies
+              {{ t('focus.dependencies') }}
             </div>
             <div v-if="deps.length" class="flex flex-wrap gap-1">
               <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
                 {{ d.title }}
               </UBadge>
             </div>
-            <div v-else class="text-[11px] text-slate-500">None</div>
+            <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
           </div>
         </aside>
       </div>

package/app/components/followUp/FollowUpWindow.vue

@@ -17,6 +17,8 @@ const execution = useExecutionStore()
 const board = useBoardStore()
 const followUps = useFollowUpsStore()
 
+const { t } = useI18n()
+
 const { open, blockId, instanceId, stepIndex, close } = useResultView('follow-ups')
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
@@ -57,15 +59,25 @@ async function onDismiss(item: FollowUpItem) {
   if (id) await followUps.dismissItem(id, item.id).catch(() => {})
 }
 
+// Exhaustive map of the item status enum → label key (literal keys keep the typed-key
+// drift guard live, vs a runtime-built `followUp.status.${status}`).
+const STATUS_LABEL_KEYS: Record<FollowUpItem['status'], string> = {
+  pending: 'followUp.status.pending',
+  filed: 'followUp.status.filed',
+  queued: 'followUp.status.queued',
+  answered: 'followUp.status.answered',
+  dismissed: 'followUp.status.dismissed',
+}
+
 const STATUS_META: Record<
   FollowUpItem['status'],
-  { label: string; badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
+  { badge: 'neutral' | 'info' | 'success' | 'warning'; text: string }
 > = {
-  pending: { label: 'Needs a decision', badge: 'warning', text: 'text-amber-300' },
-  filed: { label: 'Filed as issue', badge: 'success', text: 'text-emerald-300' },
-  queued: { label: 'Sent to Coder', badge: 'info', text: 'text-sky-300' },
-  answered: { label: 'Answered', badge: 'info', text: 'text-sky-300' },
-  dismissed: { label: 'Dismissed', badge: 'neutral', text: 'text-slate-400' },
+  pending: { badge: 'warning', text: 'text-amber-300' },
+  filed: { badge: 'success', text: 'text-emerald-300' },
+  queued: { badge: 'info', text: 'text-sky-300' },
+  answered: { badge: 'info', text: 'text-sky-300' },
+  dismissed: { badge: 'neutral', text: 'text-slate-400' },
 }
 </script>
 
@@ -88,15 +100,20 @@ const STATUS_META: Record<
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{ FOLLOW_UP_COMPANION_META.label }}{{ block ? ` — ${block.title}` : '' }}
+              {{
+                block ? t('followUp.titleWithBlock', { title: block.title }) : t('followUp.title')
+              }}
             </h2>
             <p class="truncate text-[11px] text-slate-400">
-              Forward-looking follow-ups & questions the Coder surfaced. The pipeline continues once
-              every item is decided.
+              {{ t('followUp.subtitle') }}
             </p>
           </div>
           <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">
-            {{ pendingCount > 0 ? `${pendingCount} to decide` : 'All decided' }}
+            {{
+              pendingCount > 0
+                ? t('followUp.badge.toDecide', { count: pendingCount }, pendingCount)
+                : t('followUp.badge.allDecided')
+            }}
           </UBadge>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
@@ -113,10 +130,9 @@ const STATUS_META: Record<
             class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
           >
             <UIcon :name="FOLLOW_UP_COMPANION_META.icon" class="h-8 w-8 opacity-40" />
-            <p class="text-sm">No follow-ups yet.</p>
+            <p class="text-sm">{{ t('followUp.empty.title') }}</p>
             <p class="max-w-sm text-[11px] text-slate-500">
-              As the Coder works it streams loose ends, side-tasks and questions here. They appear
-              live — you can act on them before the Coder even finishes.
+              {{ t('followUp.empty.hint') }}
             </p>
           </div>
 
@@ -146,14 +162,15 @@ const STATUS_META: Record<
                       {{ item.title }}
                     </h3>
                     <UBadge :color="STATUS_META[item.status].badge" variant="subtle" size="sm">
-                      {{ STATUS_META[item.status].label }}
+                      {{ t(STATUS_LABEL_KEYS[item.status]) }}
                     </UBadge>
                   </div>
                   <p v-if="item.detail" class="mt-1 whitespace-pre-wrap text-[12px] text-slate-300">
                     {{ item.detail }}
                   </p>
                   <p v-if="item.suggestedAction" class="mt-1 text-[11px] text-slate-400">
-                    <span class="text-slate-500">Suggested:</span> {{ item.suggestedAction }}
+                    <span class="text-slate-500">{{ t('followUp.suggested') }}</span>
+                    {{ item.suggestedAction }}
                   </p>
                   <p v-if="item.status === 'filed' && item.ticketUrl" class="mt-1 text-[11px]">
                     <a
@@ -162,14 +179,15 @@ const STATUS_META: Record<
                       rel="noopener"
                       class="text-emerald-300 hover:underline"
                     >
-                      {{ item.ticketExternalId ?? 'View issue' }}
+                      {{ item.ticketExternalId ?? t('followUp.viewIssue') }}
                     </a>
                   </p>
                   <p
                     v-if="item.status === 'answered' && item.answer"
                     class="mt-1 text-[11px] text-slate-300"
                   >
-                    <span class="text-slate-500">Your answer:</span> {{ item.answer }}
+                    <span class="text-slate-500">{{ t('followUp.yourAnswer') }}</span>
+                    {{ item.answer }}
                   </p>
 
                   <!-- Actions (only while the item is still undecided) -->
@@ -179,7 +197,7 @@ const STATUS_META: Record<
                       <textarea
                         v-model="drafts[item.id]"
                         rows="2"
-                        placeholder="Answer this question — it's folded into the Coder's next pass…"
+                        :placeholder="t('followUp.answerPlaceholder')"
                         class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none"
                       />
                       <div class="flex items-center gap-2">
@@ -190,7 +208,7 @@ const STATUS_META: Record<
                           :disabled="!(drafts[item.id] ?? '').trim()"
                           @click="onAnswer(item)"
                         >
-                          Answer & send back
+                          {{ t('followUp.actions.answerAndSend') }}
                         </UButton>
                         <UButton
                           size="xs"
@@ -199,7 +217,7 @@ const STATUS_META: Record<
                           :loading="followUps.isActing(item.id)"
                           @click="onDismiss(item)"
                         >
-                          Dismiss
+                          {{ t('followUp.actions.dismiss') }}
                         </UButton>
                       </div>
                     </div>
@@ -213,7 +231,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onFile(item)"
                       >
-                        File as issue
+                        {{ t('followUp.actions.fileAsIssue') }}
                       </UButton>
                       <UButton
                         size="xs"
@@ -223,7 +241,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onQueue(item)"
                       >
-                        Send to Coder
+                        {{ t('followUp.actions.sendToCoder') }}
                       </UButton>
                       <UButton
                         size="xs"
@@ -232,7 +250,7 @@ const STATUS_META: Record<
                         :loading="followUps.isActing(item.id)"
                         @click="onDismiss(item)"
                       >
-                        Dismiss
+                        {{ t('followUp.actions.dismiss') }}
                       </UButton>
                     </div>
                   </div>
@@ -246,10 +264,17 @@ const STATUS_META: Record<
           class="flex items-center justify-between border-t border-slate-800 px-5 py-2.5 text-[11px] text-slate-400"
         >
           <span>
-            {{ items.length }} item{{ items.length === 1 ? '' : 's' }} ·
-            {{ pendingCount }} undecided
+            {{
+              t(
+                'followUp.footer.summary',
+                { count: items.length, undecided: pendingCount },
+                items.length,
+              )
+            }}
           </span>
-          <span v-if="maxLoops > 0">Coder loops used: {{ loops }} / {{ maxLoops }}</span>
+          <span v-if="maxLoops > 0">{{
+            t('followUp.footer.loops', { loops, max: maxLoops })
+          }}</span>
         </footer>
       </div>
     </div>

package/app/components/humanTest/HumanTestWindow.vue

@@ -5,12 +5,20 @@
 // stream), surfaces the ephemeral environment URL, and drives the human actions: confirm
 // (pass + tear down + advance), request a fix from findings (the Tester's fixer), pull latest
 // main into the branch + redeploy (conflict → conflict-resolver), recreate, or destroy the env.
-import type { HumanTestEnvironmentStatus, HumanTestStepState } from '~/types/execution'
+import type {
+  HumanTestEnvironmentStatus,
+  HumanTestRound,
+  HumanTestStepState,
+} from '~/types/execution'
+
+// The round outcome union (contracts state it inline, so derive it off the round type).
+type HumanTestRoundOutcome = NonNullable<HumanTestRound['outcome']>
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
 const humanTest = useHumanTestStore()
+const { t, d } = useI18n()
 
 // Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: the gate state
 // rides on the execution step, pushed over the stream.
@@ -38,21 +46,36 @@ const working = computed(
     phase.value === 'resolving_conflicts',
 )
 
-const ENV_STATUS_META: Record<HumanTestEnvironmentStatus, { label: string; color: string }> = {
-  provisioning: { label: 'Provisioning…', color: 'text-amber-300' },
-  ready: { label: 'Ready', color: 'text-emerald-300' },
-  failed: { label: 'Failed', color: 'text-rose-300' },
-  expired: { label: 'Expired', color: 'text-slate-400' },
-  tearing_down: { label: 'Tearing down…', color: 'text-slate-400' },
-  torn_down: { label: 'Destroyed', color: 'text-slate-400' },
+// Exhaustive enum→label maps of literal keys (keeps the typed-key drift guard live vs a
+// runtime-built `humanTest.envStatus.${status}`). The colour stays a component constant.
+const ENV_STATUS_LABEL: Record<HumanTestEnvironmentStatus, string> = {
+  provisioning: 'humanTest.envStatus.provisioning',
+  ready: 'humanTest.envStatus.ready',
+  failed: 'humanTest.envStatus.failed',
+  expired: 'humanTest.envStatus.expired',
+  tearing_down: 'humanTest.envStatus.tearingDown',
+  torn_down: 'humanTest.envStatus.tornDown',
+}
+const ENV_STATUS_COLOR: Record<HumanTestEnvironmentStatus, string> = {
+  provisioning: 'text-amber-300',
+  ready: 'text-emerald-300',
+  failed: 'text-rose-300',
+  expired: 'text-slate-400',
+  tearing_down: 'text-slate-400',
+  torn_down: 'text-slate-400',
 }
 
 const PHASE_LABEL: Record<NonNullable<HumanTestStepState['phase']>, string> = {
-  provisioning: 'Provisioning environment…',
-  awaiting_human: 'Awaiting your validation',
-  fixing: 'Fixer is addressing your findings…',
-  resolving_conflicts: 'Resolving conflicts with main…',
-  passed: 'Passed',
+  provisioning: 'humanTest.phase.provisioning',
+  awaiting_human: 'humanTest.phase.awaitingHuman',
+  fixing: 'humanTest.phase.fixing',
+  resolving_conflicts: 'humanTest.phase.resolvingConflicts',
+  passed: 'humanTest.phase.passed',
+}
+
+const ROUND_OUTCOME_LABEL: Record<HumanTestRoundOutcome, string> = {
+  completed: 'humanTest.roundOutcome.completed',
+  failed: 'humanTest.roundOutcome.failed',
 }
 
 const findings = ref('')
@@ -115,10 +138,12 @@ const canDestroy = computed(
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-slate-100">
-              Human testing{{ block ? ` — ${block.title}` : '' }}
+              {{
+                block ? t('humanTest.titleWithBlock', { title: block.title }) : t('humanTest.title')
+              }}
             </h2>
             <p class="truncate text-[11px] text-slate-400">
-              {{ phase ? PHASE_LABEL[phase] : 'Validate the change in a live environment' }}
+              {{ phase ? t(PHASE_LABEL[phase]) : t('humanTest.subtitle') }}
             </p>
           </div>
           <button
@@ -135,24 +160,24 @@ const canDestroy = computed(
             class="flex flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
           >
             <UIcon name="i-lucide-user-check" class="h-8 w-8 opacity-40" />
-            <p class="text-sm">This step hasn't started yet.</p>
+            <p class="text-sm">{{ t('humanTest.notStarted') }}</p>
           </div>
 
           <template v-else>
             <!-- Environment -->
             <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-4">
               <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Ephemeral environment
+                {{ t('humanTest.environment.heading') }}
               </h3>
               <div v-if="env" class="space-y-2">
                 <div class="flex items-center gap-2 text-[13px]">
                   <UIcon
                     name="i-lucide-circle-dot"
                     class="h-3.5 w-3.5"
-                    :class="ENV_STATUS_META[env.status].color"
+                    :class="ENV_STATUS_COLOR[env.status]"
                   />
-                  <span :class="ENV_STATUS_META[env.status].color">{{
-                    ENV_STATUS_META[env.status].label
+                  <span :class="ENV_STATUS_COLOR[env.status]">{{
+                    t(ENV_STATUS_LABEL[env.status])
                   }}</span>
                 </div>
                 <a
@@ -165,13 +190,17 @@ const canDestroy = computed(
                   <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
                   {{ env.url }}
                 </a>
-                <p v-else class="text-[12px] italic text-slate-500">No URL yet.</p>
+                <p v-else class="text-[12px] italic text-slate-500">
+                  {{ t('humanTest.environment.noUrl') }}
+                </p>
                 <p v-if="env.expiresAt" class="text-[11px] text-slate-500">
-                  Expires {{ new Date(env.expiresAt).toLocaleString() }}
+                  {{
+                    t('humanTest.environment.expires', { date: d(new Date(env.expiresAt), 'long') })
+                  }}
                 </p>
               </div>
               <p v-else class="text-[12px] text-amber-300/90">
-                {{ ht.degradedReason ?? 'No live environment.' }}
+                {{ ht.degradedReason ?? t('humanTest.environment.none') }}
               </p>
               <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-amber-300/90">
                 {{ ht.degradedReason }}
@@ -188,7 +217,7 @@ const canDestroy = computed(
                   :disabled="busy || !canManageEnv"
                   @click="recreate"
                 >
-                  Recreate
+                  {{ t('humanTest.actions.recreate') }}
                 </UButton>
                 <UButton
                   size="xs"
@@ -198,7 +227,7 @@ const canDestroy = computed(
                   :disabled="busy || !canDestroy"
                   @click="destroy"
                 >
-                  Destroy
+                  {{ t('humanTest.actions.destroy') }}
                 </UButton>
                 <UButton
                   size="xs"
@@ -209,7 +238,7 @@ const canDestroy = computed(
                   :disabled="busy || !canManageEnv"
                   @click="pullMain"
                 >
-                  Pull main + redeploy
+                  {{ t('humanTest.actions.pullMain') }}
                 </UButton>
               </div>
             </section>
@@ -220,7 +249,7 @@ const canDestroy = computed(
               class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
             >
               <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-amber-300" />
-              {{ phase ? PHASE_LABEL[phase] : '' }}
+              {{ phase ? t(PHASE_LABEL[phase]) : '' }}
             </p>
 
             <!-- Findings / fix -->
@@ -230,20 +259,20 @@ const canDestroy = computed(
             >
               <div class="flex items-center justify-between">
                 <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                  Found a problem?
+                  {{ t('humanTest.fix.heading') }}
                 </h3>
                 <button
                   class="text-[12px] text-slate-400 hover:text-slate-200"
                   @click="showFindings = !showFindings"
                 >
-                  {{ showFindings ? 'Cancel' : 'Request a fix' }}
+                  {{ showFindings ? t('humanTest.fix.cancel') : t('humanTest.fix.requestFix') }}
                 </button>
               </div>
               <div v-if="showFindings" class="mt-2 space-y-2">
                 <textarea
                   v-model="findings"
                   rows="4"
-                  placeholder="Describe what went wrong — the Fixer agent gets this as context, then the environment is rebuilt for re-testing."
+                  :placeholder="t('humanTest.fix.placeholder')"
                   class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none"
                 />
                 <UButton
@@ -254,7 +283,7 @@ const canDestroy = computed(
                   :disabled="busy || !findings.trim()"
                   @click="submitFix"
                 >
-                  Send to Fixer
+                  {{ t('humanTest.fix.send') }}
                 </UButton>
               </div>
             </section>
@@ -265,7 +294,7 @@ const canDestroy = computed(
               class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
             >
               <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                History ({{ ht.attempts }} round{{ ht.attempts === 1 ? '' : 's' }})
+                {{ t('humanTest.history.heading', { count: ht.attempts }, ht.attempts) }}
               </h3>
               <ol class="space-y-2">
                 <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
@@ -275,7 +304,9 @@ const canDestroy = computed(
                   />
                   <div class="min-w-0 flex-1">
                     <span class="text-slate-200">{{
-                      r.kind === 'fix' ? 'Fix requested' : 'Pulled main'
+                      r.kind === 'fix'
+                        ? t('humanTest.history.fixRequested')
+                        : t('humanTest.history.pulledMain')
                     }}</span>
                     <span
                       class="ml-1.5 rounded px-1 text-[10px] uppercase"
@@ -287,7 +318,11 @@ const canDestroy = computed(
                             : 'bg-slate-500/15 text-slate-300'
                       "
                     >
-                      {{ r.outcome ?? 'in progress' }}
+                      {{
+                        r.outcome
+                          ? t(ROUND_OUTCOME_LABEL[r.outcome])
+                          : t('humanTest.roundOutcome.inProgress')
+                      }}
                     </span>
                     <p v-if="r.findings" class="leading-snug text-slate-400">{{ r.findings }}</p>
                   </div>
@@ -318,7 +353,7 @@ const canDestroy = computed(
             :disabled="busy || !awaitingHuman"
             @click="confirm"
           >
-            Looks good — continue
+            {{ t('humanTest.confirm') }}
           </UButton>
         </footer>
       </div>