@cat-factory/app 0.46.10 → 0.46.12

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>

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"