@cat-factory/app 0.53.0 → 0.54.1

package/app/components/media/ArtifactLightbox.vue

@@ -28,6 +28,8 @@ const emit = defineEmits<{
   (e: 'update:index', value: number): void
 }>()
 
+const { t, n } = useI18n()
+
 const MIN_SCALE = 1
 const MAX_SCALE = 8
 const scale = ref(1)
@@ -161,32 +163,36 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       class="fixed inset-0 z-[60] flex flex-col bg-slate-950/95 backdrop-blur-sm focus:outline-none"
       role="dialog"
       aria-modal="true"
-      :aria-label="current ? `Screenshot: ${current.label}` : 'Screenshot viewer'"
+      :aria-label="
+        current
+          ? t('media.lightbox.ariaLabel', { label: current.label })
+          : t('media.lightbox.ariaLabelFallback')
+      "
       @click.self="close"
     >
       <!-- Toolbar -->
       <div class="flex items-center gap-3 border-b border-slate-800/60 px-4 py-2.5">
         <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-200">
-          {{ current?.label ?? 'Screenshot' }}
+          {{ current?.label ?? t('media.lightbox.fallbackTitle') }}
         </span>
         <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-slate-400">
-          {{ index + 1 }} / {{ total }}
+          {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
-            title="Zoom out (-)"
+            :title="t('media.lightbox.zoomOut')"
             :disabled="scale <= MIN_SCALE"
             @click="zoomBy(1 / 1.25)"
           >
             <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
           </button>
-          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500"
-            >{{ Math.round(scale * 100) }}%</span
-          >
+          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500">{{
+            n(scale, 'percent')
+          }}</span>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
-            title="Zoom in (+)"
+            :title="t('media.lightbox.zoomIn')"
             :disabled="scale >= MAX_SCALE"
             @click="zoomBy(1.25)"
           >
@@ -194,14 +200,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           </button>
           <button
             class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            title="Reset (0)"
+            :title="t('media.lightbox.reset')"
             @click="resetView"
           >
             <UIcon name="i-lucide-maximize" class="h-4 w-4" />
           </button>
           <button
             class="ml-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
-            title="Close (Esc)"
+            :title="t('media.lightbox.close')"
             @click="close"
           >
             <UIcon name="i-lucide-x" class="h-4 w-4" />
@@ -218,7 +224,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
         <button
           v-if="total > 1"
           class="absolute left-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
-          title="Previous (←)"
+          :title="t('media.lightbox.prev')"
           @click="go(-1)"
         >
           <UIcon name="i-lucide-chevron-left" class="h-5 w-5" />
@@ -248,21 +254,21 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             :class="state === 'error' ? '' : 'animate-spin'"
           />
           <p class="text-[12px]">
-            {{ state === 'error' ? 'Failed to load image.' : 'Loading…' }}
+            {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}
           </p>
           <button
             v-if="state === 'error' && current"
             class="text-[12px] text-amber-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
-            Retry
+            {{ t('common.retry') }}
           </button>
         </div>
 
         <button
           v-if="total > 1"
           class="absolute right-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
-          title="Next (→)"
+          :title="t('media.lightbox.next')"
           @click="go(1)"
         >
           <UIcon name="i-lucide-chevron-right" class="h-5 w-5" />

package/app/components/media/ImageCompare.vue

@@ -23,6 +23,8 @@ const emit = defineEmits<{
   (e: 'uploadReference', file: File): void
 }>()
 
+const { t } = useI18n()
+
 type Mode = 'side-by-side' | 'overlay' | 'swipe' | 'diff'
 
 const actualUrl = computed(() => props.blobs.urlFor(props.actualId))
@@ -32,14 +34,15 @@ const hasBoth = computed(() => !!actualUrl.value && !!refUrl.value)
 const diffFailed = ref(false)
 const MODES = computed<{ id: Mode; icon: string; label: string }[]>(() => {
   const base: { id: Mode; icon: string; label: string }[] = [
-    { id: 'side-by-side', icon: 'i-lucide-columns-2', label: 'Side by side' },
+    { id: 'side-by-side', icon: 'i-lucide-columns-2', label: t('media.compare.mode.sideBySide') },
   ]
   if (hasBoth.value) {
     base.push(
-      { id: 'overlay', icon: 'i-lucide-layers', label: 'Overlay' },
-      { id: 'swipe', icon: 'i-lucide-flip-horizontal-2', label: 'Swipe' },
+      { id: 'overlay', icon: 'i-lucide-layers', label: t('media.compare.mode.overlay') },
+      { id: 'swipe', icon: 'i-lucide-flip-horizontal-2', label: t('media.compare.mode.swipe') },
     )
-    if (!diffFailed.value) base.push({ id: 'diff', icon: 'i-lucide-contrast', label: 'Difference' })
+    if (!diffFailed.value)
+      base.push({ id: 'diff', icon: 'i-lucide-contrast', label: t('media.compare.mode.diff') })
   }
   return base
 })
@@ -162,13 +165,19 @@ function onRefInput(e: Event) {
     <!-- SIDE BY SIDE -->
     <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">Actual</figcaption>
+        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('media.compare.actual') }}
+        </figcaption>
         <button
           v-if="actualUrl"
           class="block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
           @click="actualId && emit('expand', actualId)"
         >
-          <img :src="actualUrl" :alt="`${view} (actual)`" class="w-full cursor-zoom-in" />
+          <img
+            :src="actualUrl"
+            :alt="t('media.compare.actualAlt', { view })"
+            class="w-full cursor-zoom-in"
+          />
         </button>
         <div
           v-else
@@ -176,29 +185,33 @@ function onRefInput(e: Event) {
         >
           {{
             props.blobs.statusFor(actualId) === 'error'
-              ? 'Failed to load'
+              ? t('media.compare.failedToLoad')
               : actualId
-                ? 'Loading…'
-                : 'Not captured'
+                ? t('media.compare.loading')
+                : t('media.compare.notCaptured')
           }}
         </div>
       </figure>
 
       <figure class="space-y-1">
         <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
-          Reference
+          {{ t('media.compare.reference') }}
         </figcaption>
         <button
           v-if="refUrl"
           class="group relative block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
           @click="referenceId && emit('expand', referenceId)"
         >
-          <img :src="refUrl" :alt="`${view} (reference)`" class="w-full cursor-zoom-in" />
+          <img
+            :src="refUrl"
+            :alt="t('media.compare.referenceAlt', { view })"
+            class="w-full cursor-zoom-in"
+          />
           <span
             class="absolute bottom-1 right-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
             @click.stop="refInput?.click()"
           >
-            Replace
+            {{ t('media.compare.replace') }}
           </span>
         </button>
         <!-- Drop zone when no reference yet -->
@@ -216,7 +229,7 @@ function onRefInput(e: Event) {
           @drop.prevent="onDrop"
         >
           <UIcon name="i-lucide-image-up" class="h-5 w-5" />
-          <span>Drop or click to add a reference</span>
+          <span>{{ t('media.compare.dropHint') }}</span>
         </div>
       </figure>
     </div>
@@ -224,17 +237,17 @@ function onRefInput(e: Event) {
     <!-- OVERLAY (onion-skin) -->
     <div v-else-if="mode === 'overlay'" class="space-y-2">
       <div class="relative w-full overflow-hidden rounded border border-slate-800">
-        <img :src="refUrl" :alt="`${view} (reference)`" class="w-full" />
+        <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="w-full" />
         <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
         <img
           :src="actualUrl"
-          :alt="`${view} (actual)`"
+          :alt="t('media.compare.actualAlt', { view })"
           class="absolute inset-0 h-full w-full object-contain"
           :style="{ opacity: overlayOpacity / 100 }"
         />
       </div>
       <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
-        <span>Reference</span>
+        <span>{{ t('media.compare.reference') }}</span>
         <input
           v-model.number="overlayOpacity"
           type="range"
@@ -242,7 +255,7 @@ function onRefInput(e: Event) {
           max="100"
           class="flex-1 accent-amber-500"
         />
-        <span>Actual</span>
+        <span>{{ t('media.compare.actual') }}</span>
       </div>
     </div>
 
@@ -256,7 +269,7 @@ function onRefInput(e: Event) {
       @pointerup="onSwipeUp"
       @pointercancel="onSwipeUp"
     >
-      <img :src="refUrl" :alt="`${view} (reference)`" class="block w-full" />
+      <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="block w-full" />
       <div
         class="absolute inset-0 overflow-hidden"
         :style="{ clipPath: `inset(0 ${100 - splitPct}% 0 0)` }"
@@ -265,7 +278,7 @@ function onRefInput(e: Event) {
              ratio doesn't stretch it; the split then compares like-for-like. -->
         <img
           :src="actualUrl"
-          :alt="`${view} (actual)`"
+          :alt="t('media.compare.actualAlt', { view })"
           class="absolute inset-0 block h-full w-full object-contain"
         />
       </div>
@@ -278,18 +291,18 @@ function onRefInput(e: Event) {
       </div>
       <span
         class="absolute left-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
-        >Actual</span
+        >{{ t('media.compare.actual') }}</span
       >
       <span
         class="absolute right-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
-        >Reference</span
+        >{{ t('media.compare.reference') }}</span
       >
     </div>
 
     <!-- DIFF (canvas) -->
     <div v-else-if="mode === 'diff'" class="space-y-1">
       <canvas ref="diffCanvas" class="w-full rounded border border-slate-800 bg-black" />
-      <p class="text-[10px] text-slate-500">Identical pixels appear black; differences glow.</p>
+      <p class="text-[10px] text-slate-500">{{ t('media.compare.diffHint') }}</p>
     </div>
 
     <!-- Hidden file input shared by replace/drop zone -->

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -6,10 +6,16 @@
 // panels' drawer, or `executionId` for a run's "Infrastructure attempts" drawer (which
 // surfaces that run's container/runner/env attempts). Loaded on mount + re-loadable.
 import { onMounted } from 'vue'
-import type { ProvisioningOperation, ProvisioningSubsystem } from '~/types/provisioningLogs'
+import type {
+  ProvisioningOperation,
+  ProvisioningOutcome,
+  ProvisioningSubsystem,
+} from '~/types/provisioningLogs'
 
 const props = defineProps<{ subsystem?: ProvisioningSubsystem; executionId?: string }>()
 
+const { t, d } = useI18n()
+
 const store = useProvisioningLogsStore()
 const state = computed(() =>
   props.executionId
@@ -24,17 +30,24 @@ function reload() {
 
 onMounted(reload)
 
-const OPERATION_LABEL: Record<ProvisioningOperation, string> = {
-  provision: 'Spin up',
-  teardown: 'Tear down',
-  status: 'Status check',
-  dispatch: 'Spin up',
-  release: 'Tear down',
-  'poll-failure': 'Health check',
-}
+// Exhaustive enum→label maps of literal `t(...)` keys (keeps the typed-key drift guard
+// live for these runtime-indexed lookups).
+const OPERATION_LABEL = computed<Record<ProvisioningOperation, string>>(() => ({
+  provision: t('provisioning.operation.provision'),
+  teardown: t('provisioning.operation.teardown'),
+  status: t('provisioning.operation.status'),
+  dispatch: t('provisioning.operation.dispatch'),
+  release: t('provisioning.operation.release'),
+  'poll-failure': t('provisioning.operation.poll-failure'),
+}))
+
+const OUTCOME_LABEL = computed<Record<ProvisioningOutcome, string>>(() => ({
+  success: t('provisioning.outcome.success'),
+  failure: t('provisioning.outcome.failure'),
+}))
 
 function when(epochMs: number): string {
-  return new Date(epochMs).toLocaleString()
+  return d(new Date(epochMs), 'long')
 }
 </script>
 
@@ -42,7 +55,7 @@ function when(epochMs: number): string {
   <div class="rounded-lg border border-slate-700 bg-slate-900/50">
     <div class="flex items-center justify-between border-b border-slate-800 px-3 py-2">
       <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Provisioning logs
+        {{ t('provisioning.title') }}
       </p>
       <UButton
         icon="i-lucide-rotate-ccw"
@@ -51,7 +64,7 @@ function when(epochMs: number): string {
         :loading="state.loading"
         @click="reload"
       >
-        Refresh
+        {{ t('provisioning.refresh') }}
       </UButton>
     </div>
 
@@ -60,7 +73,7 @@ function when(epochMs: number): string {
       v-else-if="!state.loading && state.entries.length === 0"
       class="px-3 py-3 text-[12px] text-slate-500"
     >
-      No provisioning attempts recorded yet.
+      {{ t('provisioning.empty') }}
     </p>
 
     <ul v-else class="max-h-80 divide-y divide-slate-800 overflow-auto">
@@ -79,7 +92,7 @@ function when(epochMs: number): string {
                 ? 'bg-emerald-950/60 text-emerald-300'
                 : 'bg-rose-950/60 text-rose-300'
             "
-            >{{ entry.outcome }}</span
+            >{{ OUTCOME_LABEL[entry.outcome] }}</span
           >
           <span class="ml-auto text-[11px] text-slate-500">{{ when(entry.createdAt) }}</span>
         </div>

package/app/components/recurring/RecurrenceEditor.vue

@@ -8,15 +8,22 @@ import type { Recurrence } from '~/types/recurring'
 const props = defineProps<{ modelValue: Recurrence }>()
 const emit = defineEmits<{ 'update:modelValue': [Recurrence] }>()
 
-const WEEKDAYS = [
-  { value: 0, label: 'Sun' },
-  { value: 1, label: 'Mon' },
-  { value: 2, label: 'Tue' },
-  { value: 3, label: 'Wed' },
-  { value: 4, label: 'Thu' },
-  { value: 5, label: 'Fri' },
-  { value: 6, label: 'Sat' },
-]
+const { t } = useI18n()
+
+// Exhaustive day-index→label map of literal `t(...)` keys (keeps the typed-key drift
+// guard live for this short-form weekday list).
+const WEEKDAY_LABELS = computed<Record<number, string>>(() => ({
+  0: t('recurring.weekday.sun'),
+  1: t('recurring.weekday.mon'),
+  2: t('recurring.weekday.tue'),
+  3: t('recurring.weekday.wed'),
+  4: t('recurring.weekday.thu'),
+  5: t('recurring.weekday.fri'),
+  6: t('recurring.weekday.sat'),
+}))
+const WEEKDAYS = computed(() =>
+  [0, 1, 2, 3, 4, 5, 6].map((value) => ({ value, label: WEEKDAY_LABELS.value[value]! })),
+)
 
 function patch(p: Partial<Recurrence>) {
   emit('update:modelValue', { ...props.modelValue, ...p })
@@ -60,7 +67,7 @@ const timezoneOptions = computed(() =>
 
 <template>
   <div class="space-y-3">
-    <UFormField label="Run every">
+    <UFormField :label="t('recurring.runEvery')">
       <div class="flex items-center gap-2">
         <UInput
           :model-value="modelValue.intervalHours"
@@ -69,11 +76,11 @@ const timezoneOptions = computed(() =>
           class="w-24"
           @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
         />
-        <span class="text-xs text-slate-400">hours</span>
+        <span class="text-xs text-slate-400">{{ t('recurring.hours') }}</span>
       </div>
     </UFormField>
 
-    <UFormField label="Allowed days" help="Leave all off to run any day.">
+    <UFormField :label="t('recurring.allowedDays')" :help="t('recurring.allowedDaysHelp')">
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="d in WEEKDAYS"
@@ -91,7 +98,7 @@ const timezoneOptions = computed(() =>
     <UFormField>
       <UCheckbox
         :model-value="windowEnabled"
-        label="Only within an hour-of-day window (e.g. business hours)"
+        :label="t('recurring.windowToggle')"
         @update:model-value="toggleWindow(Boolean($event))"
       />
     </UFormField>
@@ -103,7 +110,7 @@ const timezoneOptions = computed(() =>
         class="w-28"
         @update:model-value="patch({ windowStartHour: Number($event) })"
       />
-      <span class="text-xs text-slate-400">to</span>
+      <span class="text-xs text-slate-400">{{ t('recurring.to') }}</span>
       <USelect
         :model-value="modelValue.windowEndHour ?? 24 % 24"
         :items="hours"
@@ -112,7 +119,7 @@ const timezoneOptions = computed(() =>
       />
     </div>
 
-    <UFormField label="Timezone">
+    <UFormField :label="t('recurring.timezone')">
       <USelect
         :model-value="modelValue.timezone"
         :items="timezoneOptions"