@cat-factory/app 0.46.9 → 0.46.11

package/app/components/panels/StepRunMeta.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 }>()
 
 const models = useModelsStore()
+const { t, d } = useI18n()
 
 const { isRunning, durationLabel } = useStepTimer({
   step: () => props.step,
@@ -36,7 +37,7 @@ const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.s
 const runId = computed(() => props.step.runId ?? props.instanceId ?? null)
 
 function formatClock(ms?: number | null): string | null {
-  return ms ? new Date(ms).toLocaleString() : null
+  return ms ? d(new Date(ms), 'long') : null
 }
 
 async function copyRunId() {
@@ -47,13 +48,17 @@ async function copyRunId() {
 <template>
   <div class="flex flex-col gap-4">
     <div v-if="stepNumber && totalSteps">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Step</h4>
-      <p class="text-[12px] text-slate-300">{{ stepNumber }} of {{ totalSteps }}</p>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.step') }}
+      </h4>
+      <p class="text-[12px] text-slate-300">
+        {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
+      </p>
     </div>
 
     <div v-if="durationLabel">
       <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        Duration
+        {{ t('panels.stepMeta.duration') }}
       </h4>
       <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-slate-300">
         <UIcon
@@ -62,34 +67,42 @@ async function copyRunId() {
           class="h-3 w-3 animate-spin text-indigo-400"
         />
         {{ durationLabel }}
-        <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+        <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+          t('panels.stepMeta.elapsed')
+        }}</span>
       </p>
     </div>
 
     <div v-if="formatClock(step.startedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Started</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.started') }}
+      </h4>
       <p class="text-[12px] text-slate-300">{{ formatClock(step.startedAt) }}</p>
     </div>
 
     <div v-if="formatClock(step.finishedAt)">
       <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        Finished
+        {{ t('panels.stepMeta.finished') }}
       </h4>
       <p class="text-[12px] text-slate-300">{{ formatClock(step.finishedAt) }}</p>
     </div>
 
     <div v-if="step.model">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Model</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.model') }}
+      </h4>
       <p class="break-all text-[12px] text-slate-300" :title="step.model">
         {{ modelLabel ?? step.model }}
       </p>
     </div>
 
     <div v-if="runId">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Run</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.run') }}
+      </h4>
       <p
         class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
-        :title="`${runId} — click to copy`"
+        :title="t('panels.stepMeta.clickToCopy', { id: runId })"
         @click="copyRunId"
       >
         {{ runId }}

package/app/components/panels/StepTestReport.vue

@@ -9,6 +9,8 @@ defineProps<{
   phase: TesterStepState | null
 }>()
 
+const { t } = useI18n()
+
 const SEVERITY_COLOR: Record<string, string> = {
   low: '#64748b',
   medium: '#f59e0b',
@@ -26,16 +28,17 @@ const OUTCOME_COLOR: Record<string, string> = {
   <section class="mt-4 scroll-mt-4">
     <div class="mb-2 flex items-center gap-1.5 text-[11px]">
       <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-slate-400" />
-      <span class="font-semibold uppercase tracking-wide text-slate-400"> Test report </span>
+      <span class="font-semibold uppercase tracking-wide text-slate-400">
+        {{ t('panels.testReport.title') }}
+      </span>
       <UBadge :color="report.greenlight ? 'success' : 'warning'" variant="subtle" size="sm">
-        {{ report.greenlight ? 'Greenlit' : 'Needs fixes' }}
+        {{
+          report.greenlight ? t('panels.testReport.greenlit') : t('panels.testReport.needsFixes')
+        }}
       </UBadge>
       <span v-if="phase && phase.attempts > 0" class="text-[11px] text-slate-500">
-        {{ phase.attempts }}/{{ phase.maxAttempts }} fix attempt(s)<span
-          v-if="phase.phase === 'fixing'"
-        >
-          · fixing…</span
-        >
+        {{ t('panels.testReport.fixAttempts', { count: phase.attempts, max: phase.maxAttempts })
+        }}<span v-if="phase.phase === 'fixing'"> {{ t('panels.testReport.fixing') }}</span>
       </span>
     </div>
     <p v-if="report.summary" class="mb-3 text-[13px] leading-relaxed text-slate-300">
@@ -43,14 +46,14 @@ const OUTCOME_COLOR: Record<string, string> = {
     </p>
 
     <div v-if="report.tested.length" class="mb-3">
-      <div class="mb-1 text-[11px] text-slate-500">Tested</div>
+      <div class="mb-1 text-[11px] text-slate-500">{{ t('panels.testReport.tested') }}</div>
       <ul class="space-y-0.5 text-[12px] text-slate-300">
-        <li v-for="(t, i) in report.tested" :key="i">• {{ t }}</li>
+        <li v-for="(item, i) in report.tested" :key="i">• {{ item }}</li>
       </ul>
     </div>
 
     <div v-if="report.outcomes.length" class="mb-3 space-y-1">
-      <div class="text-[11px] text-slate-500">Outcomes</div>
+      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.outcomes') }}</div>
       <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-[12px]">
         <span
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
@@ -63,7 +66,7 @@ const OUTCOME_COLOR: Record<string, string> = {
     </div>
 
     <div v-if="report.concerns.length" class="space-y-1">
-      <div class="text-[11px] text-slate-500">Concerns</div>
+      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.concerns') }}</div>
       <div
         v-for="(c, i) in report.concerns"
         :key="i"

package/app/components/panels/inspector/ContainerSummary.vue

@@ -6,6 +6,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const isFrame = computed(() => (props.block.level ?? 'frame') === 'frame')
 const modules = computed(() => (isFrame.value ? board.modulesOf(props.block.id) : []))
@@ -23,7 +24,7 @@ function addTask() {
     <!-- modules (services only) -->
     <div v-if="modules.length">
       <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Modules ({{ modules.length }})
+        {{ t('inspector.container.modules', { count: modules.length }) }}
       </div>
       <ul class="space-y-1">
         <li
@@ -34,9 +35,13 @@ function addTask() {
         >
           <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
           <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500"
-            >{{ board.tasksOf(m.id).length }} task(s)</span
-          >
+          <span class="ml-auto text-[10px] text-slate-500">{{
+            t(
+              'inspector.container.taskCount',
+              { count: board.tasksOf(m.id).length },
+              board.tasksOf(m.id).length,
+            )
+          }}</span>
         </li>
       </ul>
     </div>
@@ -44,31 +49,37 @@ function addTask() {
     <div>
       <div class="mb-1 flex items-center justify-between">
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ isFrame ? 'All tasks' : 'Tasks' }} ({{ tasks.length }})
+          {{
+            isFrame
+              ? t('inspector.container.allTasks', { count: tasks.length })
+              : t('inspector.container.tasks', { count: tasks.length })
+          }}
         </span>
         <UButton size="xs" variant="soft" color="primary" icon="i-lucide-plus" @click="addTask">
-          Add task
+          {{ t('inspector.container.addTask') }}
         </UButton>
       </div>
       <ul v-if="tasks.length" class="space-y-1">
         <li
-          v-for="t in tasks"
-          :key="t.id"
+          v-for="task in tasks"
+          :key="task.id"
           class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
-          @click="ui.select(t.id)"
+          @click="ui.select(task.id)"
         >
           <span
             class="h-2 w-2 shrink-0 rounded-full"
-            :style="{ backgroundColor: STATUS_META[t.status].color }"
+            :style="{ backgroundColor: STATUS_META[task.status].color }"
           />
-          <span class="truncate text-xs text-slate-200">{{ t.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500">{{ STATUS_META[t.status].label }}</span>
+          <span class="truncate text-xs text-slate-200">{{ task.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500">{{
+            STATUS_META[task.status].label
+          }}</span>
         </li>
       </ul>
-      <div v-else class="text-[11px] text-slate-500">No tasks yet — add one to start work.</div>
+      <div v-else class="text-[11px] text-slate-500">{{ t('inspector.container.noTasks') }}</div>
     </div>
     <p v-if="isFrame" class="text-[11px] text-slate-500">
-      Services are long-lived — they don't "complete". Work happens in their tasks &amp; modules.
+      {{ t('inspector.container.servicesHint') }}
     </p>
   </div>
 </template>

package/app/components/panels/inspector/EpicChildren.vue

@@ -10,6 +10,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const members = computed(() => board.epicMembers(props.block.id))
 const done = computed(() => members.value.filter((m) => m.status === 'done').length)
@@ -47,13 +48,15 @@ const groups = computed(() => {
   <div>
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Epic tasks
+        {{ t('inspector.epicChildren.title') }}
       </span>
-      <span class="text-[11px] text-slate-500">{{ done }}/{{ members.length }} done</span>
+      <span class="text-[11px] text-slate-500">{{
+        t('inspector.epicChildren.doneCount', { done, total: members.length })
+      }}</span>
     </div>
 
     <div v-if="members.length === 0" class="text-[11px] text-slate-500">
-      No tasks belong to this epic yet. Import an epic's children, or set a task's epic.
+      {{ t('inspector.epicChildren.empty') }}
     </div>
 
     <div v-else class="space-y-2">
@@ -64,7 +67,7 @@ const groups = computed(() => {
       >
         <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
           <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
-          {{ group.service?.title ?? 'Unassigned' }}
+          {{ group.service?.title ?? t('inspector.epicChildren.unassigned') }}
         </div>
         <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="pl-1">
           <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-slate-500">

package/app/components/panels/inspector/RecurringScheduleSettings.vue

@@ -9,6 +9,7 @@ const props = defineProps<{ block: Block }>()
 const recurring = useRecurringPipelinesStore()
 const pipelines = usePipelinesStore()
 const toast = useToast()
+const { t, d } = useI18n()
 
 const schedule = computed(() => recurring.byBlock(props.block.id))
 const runs = computed(() =>
@@ -32,17 +33,30 @@ const pipelineName = computed(
   () => pipelines.getPipeline(schedule.value?.pipelineId ?? '')?.name ?? schedule.value?.pipelineId,
 )
 
+const WEEKDAY_KEYS = [
+  'inspector.recurring.weekdays.sun',
+  'inspector.recurring.weekdays.mon',
+  'inspector.recurring.weekdays.tue',
+  'inspector.recurring.weekdays.wed',
+  'inspector.recurring.weekdays.thu',
+  'inspector.recurring.weekdays.fri',
+  'inspector.recurring.weekdays.sat',
+] as const
+
 function describeCadence(r: Recurrence): string {
-  const every = r.intervalHours % 24 === 0 ? `${r.intervalHours / 24}d` : `${r.intervalHours}h`
+  const every =
+    r.intervalHours % 24 === 0
+      ? t('inspector.recurring.intervalDays', { count: r.intervalHours / 24 })
+      : t('inspector.recurring.intervalHours', { count: r.intervalHours })
   const days =
     r.weekdays.length === 0
-      ? 'any day'
-      : r.weekdays.map((d) => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d]).join(' ')
+      ? t('inspector.recurring.anyDay')
+      : r.weekdays.map((wd) => t(WEEKDAY_KEYS[wd]!)).join(' ')
   const window =
     r.windowStartHour === null && r.windowEndHour === null
       ? ''
       : ` · ${String(r.windowStartHour ?? 0).padStart(2, '0')}:00–${String(r.windowEndHour ?? 24).padStart(2, '0')}:00`
-  return `Every ${every} · ${days}${window} · ${r.timezone}`
+  return t('inspector.recurring.cadence', { every, days, window, timezone: r.timezone })
 }
 
 function startEdit() {
@@ -58,7 +72,11 @@ async function saveEdit() {
     await recurring.update(schedule.value.id, { recurrence: draft.value })
     editing.value = false
   } catch (e) {
-    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.updateFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -70,7 +88,11 @@ async function toggleEnabled() {
   try {
     await recurring.update(schedule.value.id, { enabled: !schedule.value.enabled })
   } catch (e) {
-    toast.add({ title: 'Could not update schedule', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.updateFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -82,7 +104,11 @@ async function runNow() {
   try {
     await recurring.runNow(schedule.value.id)
   } catch (e) {
-    toast.add({ title: 'Could not run now', description: errMsg(e), color: 'error' })
+    toast.add({
+      title: t('inspector.recurring.runNowFailed'),
+      description: errMsg(e),
+      color: 'error',
+    })
   } finally {
     busy.value = false
   }
@@ -98,8 +124,17 @@ const RUN_COLOR: Record<string, string> = {
   failed: 'text-rose-400',
   skipped: 'text-slate-500',
 }
+const RUN_STATUS_KEYS: Record<string, string> = {
+  running: 'inspector.recurring.runStatus.running',
+  done: 'inspector.recurring.runStatus.done',
+  failed: 'inspector.recurring.runStatus.failed',
+  skipped: 'inspector.recurring.runStatus.skipped',
+}
+function runStatusLabel(status: string): string {
+  return RUN_STATUS_KEYS[status] ? t(RUN_STATUS_KEYS[status]!) : status
+}
 function fmtTime(ms: number) {
-  return new Date(ms).toLocaleString()
+  return d(new Date(ms), 'long')
 }
 </script>
 
@@ -113,10 +148,10 @@ function fmtTime(ms: number) {
         class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-indigo-300"
       >
         <UIcon name="i-lucide-repeat" class="h-3.5 w-3.5" />
-        Recurring pipeline
+        {{ t('inspector.recurring.title') }}
       </span>
       <UBadge :color="schedule.enabled ? 'primary' : 'neutral'" variant="subtle" size="xs">
-        {{ schedule.enabled ? 'Active' : 'Paused' }}
+        {{ schedule.enabled ? t('inspector.recurring.active') : t('inspector.recurring.paused') }}
       </UBadge>
     </div>
 
@@ -126,10 +161,12 @@ function fmtTime(ms: number) {
 
     <template v-if="!editing">
       <p class="text-[11px] text-slate-400">{{ describeCadence(schedule.recurrence) }}</p>
-      <p class="text-[11px] text-slate-500">Next run: {{ fmtTime(schedule.nextRunAt) }}</p>
+      <p class="text-[11px] text-slate-500">
+        {{ t('inspector.recurring.nextRun', { time: fmtTime(schedule.nextRunAt) }) }}
+      </p>
       <div class="flex flex-wrap gap-1.5 pt-1">
         <UButton size="xs" variant="soft" icon="i-lucide-play" :loading="busy" @click="runNow">
-          Run now
+          {{ t('inspector.recurring.runNow') }}
         </UButton>
         <UButton
           size="xs"
@@ -139,7 +176,7 @@ function fmtTime(ms: number) {
           :loading="busy"
           @click="toggleEnabled"
         >
-          {{ schedule.enabled ? 'Pause' : 'Resume' }}
+          {{ schedule.enabled ? t('inspector.recurring.pause') : t('inspector.recurring.resume') }}
         </UButton>
         <UButton
           size="xs"
@@ -148,7 +185,7 @@ function fmtTime(ms: number) {
           icon="i-lucide-pencil"
           @click="startEdit"
         >
-          Edit cadence
+          {{ t('inspector.recurring.editCadence') }}
         </UButton>
       </div>
     </template>
@@ -156,19 +193,23 @@ function fmtTime(ms: number) {
     <template v-else-if="draft">
       <RecurringRecurrenceEditor v-model="draft" />
       <div class="flex justify-end gap-1.5 pt-1">
-        <UButton size="xs" variant="ghost" color="neutral" @click="editing = false">Cancel</UButton>
-        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">Save</UButton>
+        <UButton size="xs" variant="ghost" color="neutral" @click="editing = false">{{
+          t('common.cancel')
+        }}</UButton>
+        <UButton size="xs" color="primary" :loading="busy" @click="saveEdit">{{
+          t('common.save')
+        }}</UButton>
       </div>
     </template>
 
     <!-- run history -->
     <div v-if="runs.length" class="space-y-1 border-t border-slate-800 pt-2">
       <span class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
-        Recent runs
+        {{ t('inspector.recurring.recentRuns') }}
       </span>
       <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-[11px]">
-        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0 capitalize">
-          {{ run.status }}
+        <span :class="RUN_COLOR[run.status] ?? 'text-slate-400'" class="w-14 shrink-0">
+          {{ runStatusLabel(run.status) }}
         </span>
         <span class="truncate text-slate-500">{{ fmtTime(run.startedAt) }}</span>
         <span v-if="run.outcome" class="ml-auto truncate text-slate-500">{{ run.outcome }}</span>

package/app/components/panels/inspector/ServiceFragments.vue

@@ -9,6 +9,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
+const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
@@ -49,7 +50,7 @@ function removeFragment(id: string) {
   <div>
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Service best practices
+        {{ t('inspector.fragments.serviceTitle') }}
       </span>
       <UDropdownMenu v-if="fragmentMenu.length" :items="fragmentMenu">
         <UButton
@@ -76,7 +77,7 @@ function removeFragment(id: string) {
       </UBadge>
     </div>
     <div v-else class="text-[11px] text-slate-500">
-      None — code-aware agents on this service follow their default guidance.
+      {{ t('inspector.fragments.serviceEmpty') }}
     </div>
   </div>
 </template>

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -11,6 +11,7 @@ const props = defineProps<{ block: Block }>()
 const store = useReleaseHealthStore()
 const ui = useUiStore()
 const toast = useToast()
+const { t } = useI18n()
 
 const busy = ref(false)
 const draft = reactive({ monitorIds: '', sloIds: '', envTag: '' })
@@ -56,9 +57,13 @@ async function save() {
       sloIds: parseIds(draft.sloIds),
       envTag: draft.envTag.trim() || null,
     })
-    toast.add({ title: 'Monitoring saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('inspector.releaseHealth.savedToast'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
-    notifyError('Could not save the mapping', e)
+    notifyError(t('inspector.releaseHealth.saveFailed'), e)
   } finally {
     busy.value = false
   }
@@ -72,7 +77,7 @@ async function clear() {
     draft.sloIds = ''
     draft.envTag = ''
   } catch (e) {
-    notifyError('Could not clear the mapping', e)
+    notifyError(t('inspector.releaseHealth.clearFailed'), e)
   } finally {
     busy.value = false
   }
@@ -83,7 +88,7 @@ async function clear() {
   <div class="space-y-2">
     <div class="flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Post-release health
+        {{ t('inspector.releaseHealth.title') }}
       </span>
       <UButton
         v-if="saved"
@@ -94,7 +99,7 @@ async function clear() {
         :loading="busy"
         @click="clear"
       >
-        Clear
+        {{ t('inspector.releaseHealth.clear') }}
       </UButton>
     </div>
 
@@ -103,32 +108,32 @@ async function clear() {
       v-if="!connected"
       class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-[11px] text-slate-400"
     >
-      <span>Connect an observability integration to watch this service after releases.</span>
+      <span>{{ t('inspector.releaseHealth.connectPrompt') }}</span>
       <UButton
         color="neutral"
         variant="soft"
         size="xs"
         icon="i-lucide-plug"
-        title="Connect an observability integration first"
+        :title="t('inspector.releaseHealth.connectFirst')"
         @click="ui.openObservabilityConnection()"
       >
-        Connect
+        {{ t('inspector.releaseHealth.connect') }}
       </UButton>
     </div>
 
     <div v-else class="space-y-2">
       <p class="text-[11px] text-slate-500">
-        The monitors and SLOs the gate watches after this service ships. Comma-separate ids.
+        {{ t('inspector.releaseHealth.hint') }}
       </p>
       <div class="grid grid-cols-2 gap-2">
-        <UFormField label="Monitor ids">
+        <UFormField :label="t('inspector.releaseHealth.monitorIds')">
           <UInput v-model="draft.monitorIds" placeholder="123, 456" size="sm" class="w-full" />
         </UFormField>
-        <UFormField label="SLO ids">
+        <UFormField :label="t('inspector.releaseHealth.sloIds')">
           <UInput v-model="draft.sloIds" placeholder="abc, def" size="sm" class="w-full" />
         </UFormField>
       </div>
-      <UFormField label="Env tag (optional)">
+      <UFormField :label="t('inspector.releaseHealth.envTag')">
         <UInput v-model="draft.envTag" placeholder="prod" size="sm" class="w-full" />
       </UFormField>
       <div class="flex justify-end">
@@ -140,7 +145,7 @@ async function clear() {
           :loading="busy"
           @click="save"
         >
-          Save monitoring
+          {{ t('inspector.releaseHealth.saveMonitoring') }}
         </UButton>
       </div>
     </div>