@cat-factory/app 0.46.10 → 0.46.11

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

package/app/components/panels/AgentStepDetail.vue

@@ -27,6 +27,7 @@ const execution = useExecutionStore()
 const board = useBoardStore()
 const models = useModelsStore()
 const workspace = useWorkspaceStore()
+const { t } = useI18n()
 
 onMounted(() => models.ensureLoaded(workspace.workspaceId ?? undefined))
 
@@ -187,7 +188,7 @@ async function copyOutput() {
         >
           <div class="border-b border-slate-800 px-4 py-3">
             <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-              Contents
+              {{ t('panels.stepDetail.contents') }}
             </div>
           </div>
           <nav class="flex-1 space-y-0.5 overflow-auto px-2 py-3">
@@ -200,7 +201,7 @@ async function copyOutput() {
               "
               @click="goTo('step-details')"
             >
-              Details
+              {{ t('panels.stepDetail.details') }}
             </button>
             <button
               v-for="s in tocSections"
@@ -242,7 +243,7 @@ async function copyOutput() {
                 class="mr-1"
               >
                 <UIcon name="i-lucide-shield-check" class="mr-1 h-3 w-3" />
-                Approval required
+                {{ t('panels.stepDetail.approvalRequired') }}
               </UBadge>
               <UBadge
                 v-else-if="companionExceeded"
@@ -252,7 +253,7 @@ async function copyOutput() {
                 class="mr-1"
               >
                 <UIcon name="i-lucide-alert-triangle" class="mr-1 h-3 w-3" />
-                Decision required
+                {{ t('panels.stepDetail.decisionRequired') }}
               </UBadge>
               <UButton
                 v-if="outline.sections.length"
@@ -260,7 +261,11 @@ async function copyOutput() {
                 color="neutral"
                 variant="ghost"
                 size="sm"
-                :title="allCollapsed ? 'Expand all sections' : 'Collapse all sections'"
+                :title="
+                  allCollapsed
+                    ? t('panels.stepDetail.expandAll')
+                    : t('panels.stepDetail.collapseAll')
+                "
                 @click="setAll(!allCollapsed)"
               />
               <UButton
@@ -269,7 +274,7 @@ async function copyOutput() {
                 color="neutral"
                 variant="ghost"
                 size="sm"
-                title="Copy raw output"
+                :title="t('panels.stepDetail.copyRawOutput')"
                 @click="copyOutput"
               />
               <!-- Restart the pipeline from this step (shared two-click confirm; resetting
@@ -286,7 +291,7 @@ async function copyOutput() {
                 color="neutral"
                 variant="ghost"
                 size="sm"
-                title="Close (Esc)"
+                :title="t('panels.stepDetail.closeEsc')"
                 @click="close"
               />
             </div>
@@ -323,8 +328,14 @@ async function copyOutput() {
                    (one more round / proceed with the current output / stop & reset) -->
               <IterationCapPrompt
                 v-if="companionExceeded"
-                :heading="`${agent.label} hit its ${step.companion?.maxAttempts}-attempt rework limit, still below the ${pctOf(latestVerdict?.threshold ?? 0)} bar.`"
-                detail="Do one more automatic rework round, proceed to the next step accepting the current output, or stop and reset the task so you can edit the inputs and resubmit."
+                :heading="
+                  t('panels.stepDetail.companionCapHeading', {
+                    agent: agent.label,
+                    attempts: step.companion?.maxAttempts,
+                    threshold: pctOf(latestVerdict?.threshold ?? 0),
+                  })
+                "
+                :detail="t('panels.stepDetail.companionCapDetail')"
                 :loading="resolvingCap"
                 @resolve="resolveCompanionCap"
               />
@@ -344,7 +355,9 @@ async function copyOutput() {
                   @click="showProvisioning = !showProvisioning"
                 >
                   {{
-                    showProvisioning ? 'Hide infrastructure attempts' : 'Infrastructure attempts'
+                    showProvisioning
+                      ? t('panels.stepDetail.hideInfraAttempts')
+                      : t('panels.stepDetail.infraAttempts')
                   }}
                 </UButton>
                 <ProvisioningLogsDrawer
@@ -363,7 +376,9 @@ async function copyOutput() {
               <section v-if="editing" class="scroll-mt-4">
                 <div class="mb-2 flex items-center gap-1.5 text-[11px] text-amber-400">
                   <UIcon name="i-lucide-pencil" class="h-3.5 w-3.5" />
-                  <span class="font-semibold uppercase tracking-wide">Editing the conclusions</span>
+                  <span class="font-semibold uppercase tracking-wide">{{
+                    t('panels.stepDetail.editingConclusions')
+                  }}</span>
                 </div>
                 <UTextarea
                   v-model="draftProposal"
@@ -372,7 +387,7 @@ async function copyOutput() {
                   size="sm"
                   class="w-full"
                   :ui="{ base: 'font-mono text-[12px] leading-relaxed' }"
-                  placeholder="Edit the agent's conclusions; your edits are saved when you approve…"
+                  :placeholder="t('panels.stepDetail.editConclusionsPlaceholder')"
                 />
               </section>
 
@@ -419,7 +434,7 @@ async function copyOutput() {
                 v-else
                 class="rounded-lg border border-dashed border-slate-800 py-6 text-center text-sm text-slate-500"
               >
-                This agent produced no prose output.
+                {{ t('panels.stepDetail.noProseOutput') }}
               </p>
             </div>
           </div>
@@ -434,14 +449,14 @@ async function copyOutput() {
         >
           <div class="border-b border-slate-800 px-4 py-3">
             <div class="text-[11px] font-semibold uppercase tracking-wide text-amber-400">
-              {{ editing ? 'Approve with corrections' : 'Review & approve' }}
-            </div>
-            <p class="mt-1 text-[12px] text-slate-400">
               {{
                 editing
-                  ? 'Edit the conclusions on the left; your edits are saved when you approve.'
-                  : 'Click any block in the output to comment on it, or leave overall feedback below.'
+                  ? t('panels.stepDetail.approveWithCorrections')
+                  : t('panels.stepDetail.reviewAndApprove')
               }}
+            </div>
+            <p class="mt-1 text-[12px] text-slate-400">
+              {{ editing ? t('panels.stepDetail.editHint') : t('panels.stepDetail.reviewHint') }}
             </p>
           </div>
 
@@ -450,8 +465,7 @@ async function copyOutput() {
               v-if="editing"
               class="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-[12px] leading-relaxed text-amber-200/90"
             >
-              You're editing the conclusions directly. Manual edits can't be combined with per-block
-              comments — approve to save them, or cancel to return to review.
+              {{ t('panels.stepDetail.editingNotice') }}
             </p>
             <template v-else>
               <!-- composer for the block the human just clicked -->
@@ -460,7 +474,7 @@ async function copyOutput() {
                 class="rounded-lg border border-indigo-500/40 bg-indigo-500/5 p-3"
               >
                 <div class="mb-1 text-[10px] uppercase tracking-wide text-indigo-300">
-                  Commenting on
+                  {{ t('panels.stepDetail.commentingOn') }}
                 </div>
                 <pre
                   class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded bg-slate-950/60 p-2 text-[11px] text-slate-300"
@@ -472,11 +486,11 @@ async function copyOutput() {
                   autoresize
                   size="sm"
                   class="w-full"
-                  placeholder="Leave a comment on this block…"
+                  :placeholder="t('panels.stepDetail.commentPlaceholder')"
                 />
                 <div class="mt-2 flex justify-end gap-2">
                   <UButton color="neutral" variant="ghost" size="xs" @click="cancelDraft">
-                    Cancel
+                    {{ t('common.cancel') }}
                   </UButton>
                   <UButton
                     color="primary"
@@ -484,7 +498,7 @@ async function copyOutput() {
                     :disabled="!draftBody.trim()"
                     @click="addDraftComment"
                   >
-                    Add comment
+                    {{ t('panels.stepDetail.addComment') }}
                   </UButton>
                 </div>
               </div>
@@ -497,11 +511,11 @@ async function copyOutput() {
               >
                 <div class="mb-1 flex items-start justify-between gap-2">
                   <div class="text-[10px] uppercase tracking-wide text-slate-500">
-                    Comment {{ idx + 1 }}
+                    {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
                   </div>
                   <button
                     class="text-slate-500 transition hover:text-rose-400"
-                    title="Remove comment"
+                    :title="t('panels.stepDetail.removeComment')"
                     @click="removeComment(idx)"
                   >
                     <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -518,7 +532,7 @@ async function copyOutput() {
                 <label
                   class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
                 >
-                  Overall feedback / reject reason
+                  {{ t('panels.stepDetail.overallFeedback') }}
                 </label>
                 <UTextarea
                   v-model="feedback"
@@ -526,7 +540,7 @@ async function copyOutput() {
                   autoresize
                   size="sm"
                   class="w-full"
-                  placeholder="Describe the changes the agent should make (optional if you left per-block comments)…"
+                  :placeholder="t('panels.stepDetail.overallFeedbackPlaceholder')"
                 />
               </div>
             </template>
@@ -542,7 +556,7 @@ async function copyOutput() {
               :loading="submitting"
               @click="approveWithEdits"
             >
-              Approve with these edits
+              {{ t('panels.stepDetail.approveWithEdits') }}
             </UButton>
             <UButton
               color="neutral"
@@ -552,7 +566,7 @@ async function copyOutput() {
               :disabled="submitting"
               @click="cancelEditing"
             >
-              Cancel edits
+              {{ t('panels.stepDetail.cancelEdits') }}
             </UButton>
           </div>
 
@@ -567,7 +581,7 @@ async function copyOutput() {
               :loading="submitting"
               @click="approve"
             >
-              Approve &amp; proceed
+              {{ t('panels.stepDetail.approveAndProceed') }}
             </UButton>
             <UButton
               color="primary"
@@ -578,7 +592,7 @@ async function copyOutput() {
               :disabled="rejectArmed || submitting"
               @click="startEditing"
             >
-              Approve with corrections
+              {{ t('panels.stepDetail.approveWithCorrections') }}
             </UButton>
 
             <!-- destructive: a two-step inline confirm instead of a native dialog -->
@@ -587,7 +601,7 @@ async function copyOutput() {
               class="rounded-lg border border-rose-500/40 bg-rose-500/5 p-2.5"
             >
               <p class="mb-2 text-[11px] text-rose-200">
-                Reject this proposal and stop the run entirely?
+                {{ t('panels.stepDetail.rejectConfirmPrompt') }}
               </p>
               <div class="flex gap-2">
                 <UButton
@@ -598,7 +612,7 @@ async function copyOutput() {
                   :disabled="submitting"
                   @click="disarmReject"
                 >
-                  Cancel
+                  {{ t('common.cancel') }}
                 </UButton>
                 <UButton
                   color="error"
@@ -608,7 +622,7 @@ async function copyOutput() {
                   :loading="submitting"
                   @click="reject"
                 >
-                  Confirm reject
+                  {{ t('panels.stepDetail.confirmReject') }}
                 </UButton>
               </div>
             </div>
@@ -623,7 +637,7 @@ async function copyOutput() {
                 :loading="submitting"
                 @click="requestChanges"
               >
-                Request changes
+                {{ t('panels.stepDetail.requestChanges') }}
               </UButton>
               <UButton
                 color="error"
@@ -634,12 +648,11 @@ async function copyOutput() {
                 :disabled="submitting"
                 @click="armReject"
               >
-                Reject
+                {{ t('panels.stepDetail.reject') }}
               </UButton>
             </div>
             <p class="text-[10px] text-slate-500">
-              Request changes re-runs this step with your feedback &amp; comments. Reject stops the
-              run entirely.
+              {{ t('panels.stepDetail.requestChangesHint') }}
             </p>
           </div>
         </aside>

package/app/components/panels/DecisionModal.vue

@@ -4,6 +4,7 @@ import { agentKindMeta } from '~/utils/catalog'
 const execution = useExecutionStore()
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const ctx = computed(() => ui.decisionContext)
 
@@ -30,7 +31,7 @@ function choose(option: string) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Decision required">
+  <UModal v-model:open="open" :title="t('panels.decision.title')">
     <template #body>
       <div v-if="decision && agent" class="space-y-4" data-testid="decision-modal">
         <div class="flex items-center gap-2 text-sm text-slate-400">
@@ -41,9 +42,15 @@ function choose(option: string) {
             <UIcon :name="agent.icon" class="h-4 w-4" :style="{ color: agent.color }" />
           </div>
           <div>
-            <span class="font-medium text-slate-200">{{ agent.label }}</span>
-            <span v-if="block"> on </span>
-            <span v-if="block" class="font-medium text-slate-200">{{ block.title }}</span>
+            <i18n-t v-if="block" keypath="panels.decision.agentOnBlock" tag="span" scope="global">
+              <template #agent>
+                <span class="font-medium text-slate-200">{{ agent.label }}</span>
+              </template>
+              <template #block>
+                <span class="font-medium text-slate-200">{{ block.title }}</span>
+              </template>
+            </i18n-t>
+            <span v-else class="font-medium text-slate-200">{{ agent.label }}</span>
           </div>
         </div>
 
@@ -64,7 +71,7 @@ function choose(option: string) {
           </UButton>
         </div>
         <p class="text-[11px] text-slate-500">
-          This is a visualization — any choice simply resumes the pipeline.
+          {{ t('panels.decision.visualizationHint') }}
         </p>
       </div>
     </template>

package/app/components/panels/GenericStructuredResultView.vue

@@ -13,6 +13,7 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 const board = useBoardStore()
 const execution = useExecutionStore()
 const agents = useAgentsStore()
+const { t } = useI18n()
 
 // Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: this window reads
 // its data straight off the execution step, so there's nothing to fetch on open.
@@ -28,6 +29,16 @@ const step = computed(() => {
 })
 const meta = computed(() => (step.value ? agents.get(step.value.agentKind) : undefined))
 
+const headerLabel = computed(() => meta.value?.label ?? t('panels.structuredResult.fallbackTitle'))
+const headerTitle = computed(() =>
+  block.value
+    ? t('panels.structuredResult.titleWithBlock', {
+        label: headerLabel.value,
+        title: block.value.title,
+      })
+    : headerLabel.value,
+)
+
 /** The agent's structured JSON, pretty-printed; null when the step produced none. */
 const customJson = computed<string | null>(() => {
   const custom = step.value?.custom
@@ -59,10 +70,10 @@ const customJson = computed<string | null>(() => {
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-slate-100">
-              {{ meta?.label ?? 'Agent result' }}{{ block ? ` — ${block.title}` : '' }}
+              {{ headerTitle }}
             </h2>
             <p class="truncate text-[11px] text-slate-400">
-              {{ meta?.description ?? 'Structured agent output' }}
+              {{ meta?.description ?? t('panels.structuredResult.fallbackDescription') }}
             </p>
           </div>
           <StepRestartControl
@@ -90,7 +101,7 @@ const customJson = computed<string | null>(() => {
 
             <template v-if="customJson">
               <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Structured output
+                {{ t('panels.structuredResult.structuredOutput') }}
               </h3>
               <pre
                 class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
@@ -102,10 +113,9 @@ const customJson = computed<string | null>(() => {
               class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
             >
               <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
-              <p class="text-sm">No result yet.</p>
+              <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
               <p class="max-w-sm text-[11px] text-slate-500">
-                The structured output appears once this agent finishes. While it runs, the step
-                shows live progress on the board.
+                {{ t('panels.structuredResult.noResultHint') }}
               </p>
             </div>
           </div>