@cat-factory/app 0.46.10 → 0.46.11

package/app/components/panels/InspectorPanel.vue

@@ -28,6 +28,7 @@ const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
 const recurring = useRecurringPipelinesStore()
 const requirements = useRequirementsStore()
+const { t } = useI18n()
 
 // When the selected task block backs a recurring pipeline, the inspector shows the
 // schedule controls + history, and "Delete" removes the schedule (block + history).
@@ -58,20 +59,20 @@ const instance = computed(() => execution.getInstance(block.value?.executionId))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
 // Containers show a derived activity status (never "done"); tasks use their own.
-const FRAME_LABEL: Record<BlockStatus, string> = {
-  planned: 'No tasks',
-  ready: 'Live',
-  in_progress: 'Active',
-  blocked: 'Needs attention',
-  pr_ready: 'Active',
-  done: 'Live',
+const FRAME_LABEL_KEYS: Record<BlockStatus, string> = {
+  planned: 'panels.inspector.frameStatus.planned',
+  ready: 'panels.inspector.frameStatus.ready',
+  in_progress: 'panels.inspector.frameStatus.in_progress',
+  blocked: 'panels.inspector.frameStatus.blocked',
+  pr_ready: 'panels.inspector.frameStatus.pr_ready',
+  done: 'panels.inspector.frameStatus.done',
 }
 const effectiveStatus = computed<BlockStatus>(() =>
   isContainer.value ? board.frameStatus(block.value!.id) : block.value!.status,
 )
 const statusMeta = computed(() => (block.value ? STATUS_META[effectiveStatus.value] : null))
 const statusLabel = computed(() =>
-  isContainer.value ? FRAME_LABEL[effectiveStatus.value] : statusMeta.value!.label,
+  isContainer.value ? t(FRAME_LABEL_KEYS[effectiveStatus.value]) : statusMeta.value!.label,
 )
 
 const runnable = computed(() => (block.value ? board.isRunnable(block.value.id) : false))
@@ -80,12 +81,12 @@ const runnable = computed(() => (block.value ? board.isRunnable(block.value.id)
 // reads as "Delete task" rather than ambiguously removing the whole service.
 const deleteLabel = computed(() =>
   schedule.value
-    ? 'Delete recurring pipeline'
+    ? t('panels.inspector.deleteRecurringPipeline')
     : isTask.value
-      ? 'Delete task'
+      ? t('panels.inspector.deleteTask')
       : level.value === 'module'
-        ? 'Delete module'
-        : 'Delete service',
+        ? t('panels.inspector.deleteModule')
+        : t('panels.inspector.deleteService'),
 )
 
 // A task is "started" once a pipeline has been launched on it (it has an
@@ -252,7 +253,7 @@ const showOriginalDescription = ref(false)
           v-model="block.title"
           size="sm"
           class="w-full"
-          placeholder="Title…"
+          :placeholder="t('panels.inspector.titlePlaceholder')"
           @change="saveTitle"
           @blur="saveTitle"
         />
@@ -265,13 +266,15 @@ const showOriginalDescription = ref(false)
               class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-400"
             >
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
-              Reworked requirements
+              {{ t('panels.inspector.reworkedRequirements') }}
             </div>
             <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
               {{ reqReworkedText }}
             </p>
             <div class="mt-2 flex items-center justify-between gap-2">
-              <p class="text-[11px] text-slate-500">Agent steps use this document.</p>
+              <p class="text-[11px] text-slate-500">
+                {{ t('panels.inspector.agentStepsUseDocument') }}
+              </p>
               <UButton
                 color="neutral"
                 variant="link"
@@ -279,7 +282,7 @@ const showOriginalDescription = ref(false)
                 icon="i-lucide-maximize-2"
                 @click="ui.openRequirementReview(block.id)"
               >
-                Open
+                {{ t('panels.inspector.open') }}
               </UButton>
             </div>
           </div>
@@ -290,7 +293,7 @@ const showOriginalDescription = ref(false)
             :icon="showOriginalDescription ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
             @click="showOriginalDescription = !showOriginalDescription"
           >
-            Original description (frozen)
+            {{ t('panels.inspector.originalDescriptionFrozen') }}
           </UButton>
           <UTextarea
             v-if="showOriginalDescription"
@@ -300,7 +303,7 @@ const showOriginalDescription = ref(false)
             size="sm"
             class="w-full"
             disabled
-            placeholder="No description"
+            :placeholder="t('panels.inspector.noDescription')"
           />
         </template>
 
@@ -313,13 +316,13 @@ const showOriginalDescription = ref(false)
             size="sm"
             class="w-full"
             :disabled="!editable"
-            placeholder="Describe this block…"
+            :placeholder="t('panels.inspector.describeBlock')"
             @change="saveDescription"
             @blur="saveDescription"
           />
           <p v-if="isTask && !editable" class="flex items-center gap-1 text-[11px] text-slate-500">
             <UIcon name="i-lucide-lock" class="h-3 w-3" />
-            This task has started — its details are locked.
+            {{ t('panels.inspector.taskStartedLocked') }}
           </p>
 
           <!-- prior incorporated requirements kept as a base after a review-driven reset -->
@@ -328,13 +331,13 @@ const showOriginalDescription = ref(false)
               class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
             >
               <UIcon name="i-lucide-history" class="h-3.5 w-3.5" />
-              Last incorporated requirements
+              {{ t('panels.inspector.lastIncorporatedRequirements') }}
             </div>
             <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
               {{ reqReworkedText }}
             </p>
             <p class="mt-2 text-[11px] text-slate-500">
-              From the previous review. Use it as a base — edit the description above and resubmit.
+              {{ t('panels.inspector.priorDocHint') }}
             </p>
           </div>
         </template>
@@ -350,7 +353,7 @@ const showOriginalDescription = ref(false)
       >
         <span class="flex items-center gap-1.5 text-xs text-amber-300">
           <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
-          Bootstrapping…
+          {{ t('panels.inspector.bootstrapping') }}
         </span>
         <AgentStopButton :run-id="runningRun.runId" :kind="runningRun.kind" size="xs" />
       </div>
@@ -391,7 +394,11 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-ticket"
           @click="ui.openTaskImport()"
         >
-          {{ tasks.anyOffered ? 'Import issue' : 'Connect a tracker' }}
+          {{
+            tasks.anyOffered
+              ? t('panels.inspector.importIssue')
+              : t('panels.inspector.connectTracker')
+          }}
         </UButton>
         <UButton
           v-if="isContainer && documents.available && documents.anyConnected"
@@ -401,7 +408,7 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-wand-sparkles"
           @click="spawnFromDocument"
         >
-          Spawn from document
+          {{ t('panels.inspector.spawnFromDocument') }}
         </UButton>
       </div>
 
@@ -422,7 +429,7 @@ const showOriginalDescription = ref(false)
         icon="i-lucide-scroll-text"
         @click="ui.openServiceSpec(block.id)"
       >
-        View Requirements
+        {{ t('panels.inspector.viewRequirements') }}
       </UButton>
 
       <!-- service / module: tasks summary -->
@@ -461,7 +468,7 @@ const showOriginalDescription = ref(false)
             trailing-icon="i-lucide-chevron-down"
             :disabled="!runnable"
           >
-            {{ instance ? 'Re-run' : 'Run' }}
+            {{ instance ? t('panels.inspector.reRun') : t('panels.inspector.run') }}
           </UButton>
         </UDropdownMenu>
         <UButton
@@ -472,7 +479,7 @@ const showOriginalDescription = ref(false)
           icon="i-lucide-maximize-2"
           @click="ui.focus(block.id)"
         >
-          Focus
+          {{ t('panels.inspector.focus') }}
         </UButton>
         <UButton
           color="error"

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"