@cat-factory/app 0.47.8 → 0.47.10

package/app/components/spec/ServiceSpecWindow.vue

@@ -8,10 +8,12 @@
 import type {
   RequirementGroup,
   RequirementItem,
+  RequirementKind,
   RequirementPriority,
   SpecModule,
 } from '~/types/spec'
 
+const { t } = useI18n()
 const board = useBoardStore()
 const serviceSpec = useServiceSpecStore()
 
@@ -86,10 +88,19 @@ function selectGroup(m: number, g: number) {
   selected.value = { m, g }
 }
 
+// Exhaustive priority → label/chip map. Literal `t()` keys keep the typed-key drift
+// guard live, vs a runtime-built `spec.priority.${value}`.
 const PRIORITY_META: Record<RequirementPriority, { label: string; chip: string }> = {
-  must: { label: 'Must', chip: 'error' },
-  should: { label: 'Should', chip: 'warning' },
-  could: { label: 'Could', chip: 'neutral' },
+  must: { label: t('spec.priority.must'), chip: 'error' },
+  should: { label: t('spec.priority.should'), chip: 'warning' },
+  could: { label: t('spec.priority.could'), chip: 'neutral' },
+}
+
+// Exhaustive requirement-kind → label map (closed union from the contracts).
+const KIND_LABELS: Record<RequirementKind, string> = {
+  functional: t('spec.kind.functional'),
+  nonfunctional: t('spec.kind.nonfunctional'),
+  constraint: t('spec.kind.constraint'),
 }
 
 function reqCount(group: RequirementGroup): number {
@@ -98,6 +109,9 @@ function reqCount(group: RequirementGroup): number {
 function priorityMeta(item: RequirementItem) {
   return PRIORITY_META[item.priority] ?? PRIORITY_META.could
 }
+function kindLabel(item: RequirementItem): string {
+  return KIND_LABELS[item.kind] ?? item.kind
+}
 </script>
 
 <template>
@@ -118,7 +132,7 @@ function priorityMeta(item: RequirementItem) {
             <UIcon name="i-lucide-scroll-text" class="h-5 w-5 text-indigo-300" />
           </div>
           <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">Requirements</h1>
+            <h1 class="truncate text-base font-semibold text-white">{{ t('spec.title') }}</h1>
             <p v-if="block" class="truncate text-xs text-slate-500">
               {{ spec?.service || block.title }}
             </p>
@@ -133,7 +147,7 @@ function priorityMeta(item: RequirementItem) {
                 icon="i-lucide-list-tree"
                 @click="mode = 'structured'"
               >
-                Structured
+                {{ t('spec.mode.structured') }}
               </UButton>
               <UButton
                 :color="mode === 'gherkin' ? 'primary' : 'neutral'"
@@ -141,10 +155,10 @@ function priorityMeta(item: RequirementItem) {
                 size="xs"
                 icon="i-lucide-square-check-big"
                 :disabled="!hasGherkin"
-                :title="hasGherkin ? 'Gherkin scenarios' : 'No scenarios on main yet'"
+                :title="hasGherkin ? t('spec.mode.gherkinTooltip') : t('spec.mode.gherkinNone')"
                 @click="mode = 'gherkin'"
               >
-                Gherkin
+                {{ t('spec.mode.gherkin') }}
               </UButton>
             </div>
             <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
@@ -157,7 +171,7 @@ function priorityMeta(item: RequirementItem) {
           class="flex flex-1 items-center justify-center gap-2 text-sm text-slate-400"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-          Loading the specification…
+          {{ t('spec.loading') }}
         </div>
 
         <!-- error -->
@@ -166,7 +180,7 @@ function priorityMeta(item: RequirementItem) {
           class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center text-sm text-slate-400"
         >
           <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
-          Could not load the specification. Try reopening this window.
+          {{ t('spec.error') }}
         </div>
 
         <!-- empty: no spec on the repo's default branch yet -->
@@ -176,11 +190,9 @@ function priorityMeta(item: RequirementItem) {
         >
           <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-slate-600" />
           <div>
-            <p class="text-sm font-medium text-slate-300">No specification yet</p>
+            <p class="text-sm font-medium text-slate-300">{{ t('spec.empty.title') }}</p>
             <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
-              This service has no spec on its default branch. A specification is generated as tasks
-              run their pipelines; once it lands on main it will appear here, with its Gherkin
-              scenarios.
+              {{ t('spec.empty.description') }}
             </p>
           </div>
         </div>
@@ -198,7 +210,7 @@ function priorityMeta(item: RequirementItem) {
               icon="i-lucide-info"
               @click="selected = null"
             >
-              Overview
+              {{ t('spec.overview') }}
             </UButton>
             <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
               <div
@@ -226,7 +238,7 @@ function priorityMeta(item: RequirementItem) {
                   v-if="(mod.groups?.length ?? 0) === 0"
                   class="px-2 py-1 text-[11px] italic text-slate-600"
                 >
-                  No feature groups
+                  {{ t('spec.noFeatureGroups') }}
                 </li>
               </ul>
             </div>
@@ -240,10 +252,13 @@ function priorityMeta(item: RequirementItem) {
               <p v-if="spec?.summary" class="mt-2 whitespace-pre-line text-sm text-slate-300">
                 {{ spec.summary }}
               </p>
-              <p v-else class="mt-2 text-sm text-slate-500">No service summary.</p>
+              <p v-else class="mt-2 text-sm text-slate-500">{{ t('spec.noSummary') }}</p>
               <p class="mt-4 text-xs text-slate-500">
-                {{ modules.length }} module(s). Select a feature group on the left to view its
-                requirements{{ hasGherkin ? ' or switch to the Gherkin scenarios' : '' }}.
+                {{
+                  hasGherkin
+                    ? t('spec.moduleHintGherkin', { count: modules.length }, modules.length)
+                    : t('spec.moduleHint', { count: modules.length }, modules.length)
+                }}
               </p>
             </template>
 
@@ -267,14 +282,14 @@ function priorityMeta(item: RequirementItem) {
                   v-else
                   class="mt-4 rounded-lg border border-dashed border-slate-700 p-6 text-center text-sm text-slate-500"
                 >
-                  No Gherkin scenarios for this group.
+                  {{ t('spec.noGherkinForGroup') }}
                 </div>
               </template>
 
               <!-- STRUCTURED view: requirements + acceptance + domain rules -->
               <template v-else>
                 <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-slate-500">
-                  No requirements in this group.
+                  {{ t('spec.noRequirements') }}
                 </div>
                 <ul class="mt-4 space-y-4">
                   <li
@@ -288,7 +303,9 @@ function priorityMeta(item: RequirementItem) {
                         <UBadge :color="priorityMeta(req).chip as any" variant="subtle" size="sm">
                           {{ priorityMeta(req).label }}
                         </UBadge>
-                        <UBadge color="neutral" variant="subtle" size="sm">{{ req.kind }}</UBadge>
+                        <UBadge color="neutral" variant="subtle" size="sm">{{
+                          kindLabel(req)
+                        }}</UBadge>
                       </div>
                     </div>
                     <p
@@ -304,13 +321,22 @@ function priorityMeta(item: RequirementItem) {
                         class="rounded-md border border-slate-800 bg-slate-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
                       >
                         <p class="text-slate-300">
-                          <span class="font-semibold text-emerald-400">Given</span> {{ ac.given }}
+                          <span class="font-semibold text-emerald-400">{{
+                            t('spec.acceptance.given')
+                          }}</span>
+                          {{ ac.given }}
                         </p>
                         <p class="text-slate-300">
-                          <span class="font-semibold text-sky-400">When</span> {{ ac.when }}
+                          <span class="font-semibold text-sky-400">{{
+                            t('spec.acceptance.when')
+                          }}</span>
+                          {{ ac.when }}
                         </p>
                         <p class="text-slate-300">
-                          <span class="font-semibold text-violet-400">Then</span> {{ ac.outcome }}
+                          <span class="font-semibold text-violet-400">{{
+                            t('spec.acceptance.then')
+                          }}</span>
+                          {{ ac.outcome }}
                         </p>
                       </div>
                     </div>
@@ -323,7 +349,7 @@ function priorityMeta(item: RequirementItem) {
                     class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
                   >
                     <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
-                    Domain rules
+                    {{ t('spec.domainRules') }}
                   </div>
                   <ul class="space-y-1.5">
                     <li
@@ -332,9 +358,9 @@ function priorityMeta(item: RequirementItem) {
                       class="rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-[13px] text-slate-300"
                     >
                       {{ rule.rule }}
-                      <span v-if="rule.rationale" class="text-slate-500">
-                        — {{ rule.rationale }}</span
-                      >
+                      <span v-if="rule.rationale" class="text-slate-500">{{
+                        t('spec.ruleRationale', { rationale: rule.rationale })
+                      }}</span>
                     </li>
                   </ul>
                 </div>

package/app/components/testing/TestReportWindow.vue

@@ -20,6 +20,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
+const { t } = useI18n()
 
 // Per-window blob cache for the captured screenshots; revoked on unmount.
 const blobs = useArtifactBlobs()
@@ -52,11 +53,30 @@ watch(
   { immediate: true },
 )
 
-const STATUS_META: Record<TestOutcome['status'], { icon: string; text: string; label: string }> = {
-  passed: { icon: 'i-lucide-circle-check', text: 'text-emerald-400', label: 'Passed' },
-  failed: { icon: 'i-lucide-circle-x', text: 'text-rose-400', label: 'Failed' },
-  skipped: { icon: 'i-lucide-circle-minus', text: 'text-slate-500', label: 'Skipped' },
-}
+const STATUS_META = computed<
+  Record<TestOutcome['status'], { icon: string; text: string; label: string }>
+>(() => ({
+  passed: {
+    icon: 'i-lucide-circle-check',
+    text: 'text-emerald-400',
+    label: t('testing.status.passed'),
+  },
+  failed: { icon: 'i-lucide-circle-x', text: 'text-rose-400', label: t('testing.status.failed') },
+  skipped: {
+    icon: 'i-lucide-circle-minus',
+    text: 'text-slate-500',
+    label: t('testing.status.skipped'),
+  },
+}))
+
+// Exhaustive enum→key map for the concern severity chip label (literal keys keep the
+// typed-key drift guard live).
+const SEVERITY_LABELS = computed<Record<TestConcern['severity'], string>>(() => ({
+  critical: t('testing.severity.critical'),
+  high: t('testing.severity.high'),
+  medium: t('testing.severity.medium'),
+  low: t('testing.severity.low'),
+}))
 
 const SEVERITY_META: Record<TestConcern['severity'], { text: string; chip: string; rank: number }> =
   {
@@ -150,7 +170,7 @@ const scenarioLayout = computed<{ groups: ScenarioGroup[]; ungrouped: TestScreen
   if (leftoverOutcomes.length || leftoverConcerns.length) {
     out.push({
       key: 'other',
-      title: r.tested.length ? 'Other checks' : 'Checks',
+      title: r.tested.length ? t('testing.otherChecks') : t('testing.checks'),
       other: true,
       outcomes: leftoverOutcomes,
       concerns: leftoverConcerns,
@@ -169,7 +189,7 @@ const lightboxItems = computed(() =>
   screenshots.value.map((s) => ({
     artifactId: s.artifactId,
     label: s.view,
-    alt: `${s.view} (screenshot)`,
+    alt: t('testing.screenshotAlt', { view: s.view }),
   })),
 )
 const lightboxOpen = ref(false)
@@ -238,7 +258,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         tabindex="-1"
         role="dialog"
         aria-modal="true"
-        aria-label="Test report"
+        :aria-label="t('testing.title')"
         class="m-4 flex w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl focus:outline-none"
       >
         <!-- Header -->
@@ -250,10 +270,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-slate-100">
-              Test report{{ block ? ` — ${block.title}` : '' }}
+              {{ t('testing.title') }}{{ block ? ` — ${block.title}` : '' }}
             </h2>
             <p class="truncate text-[11px] text-slate-400">
-              Exploratory + regression testing of the change
+              {{ t('testing.subtitle') }}
             </p>
           </div>
           <UBadge
@@ -262,15 +282,19 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
             variant="subtle"
             size="sm"
           >
-            {{ report.greenlight ? 'Greenlit' : 'Needs fixes' }}
+            {{ report.greenlight ? t('testing.badge.greenlit') : t('testing.badge.needsFixes') }}
           </UBadge>
           <span
             v-if="testState && testState.attempts > 0"
             class="text-[11px] text-slate-400"
-            :title="'Fixer attempts'"
+            :title="t('testing.fixerAttempts')"
           >
-            {{ testState.attempts }}/{{ testState.maxAttempts }} fix
-            <template v-if="testState.phase === 'fixing'"> · fixing…</template>
+            {{
+              t('testing.fixCount', { attempts: testState.attempts, max: testState.maxAttempts })
+            }}
+            <template v-if="testState.phase === 'fixing'">
+              {{ t('testing.fixingSuffix') }}</template
+            >
           </span>
           <StepRestartControl
             :instance-id="instanceId"
@@ -293,10 +317,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
             >
               <UIcon name="i-lucide-flask-conical" class="h-8 w-8 opacity-40" />
-              <p class="text-sm">No test report yet.</p>
+              <p class="text-sm">{{ t('testing.empty.title') }}</p>
               <p class="max-w-sm text-[11px] text-slate-500">
-                The report appears once the Tester finishes a pass. While it runs, the step shows
-                live progress on the board.
+                {{ t('testing.empty.hint') }}
               </p>
             </div>
 
@@ -307,7 +330,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               </p>
 
               <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Scenarios &amp; outcomes
+                {{ t('testing.scenariosOutcomes') }}
               </h3>
               <ul class="space-y-2">
                 <li
@@ -340,12 +363,21 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       v-if="g.screenshots.length"
                       name="i-lucide-camera"
                       class="h-3.5 w-3.5 shrink-0 text-slate-500"
-                      :title="`${g.screenshots.length} screenshot${g.screenshots.length === 1 ? '' : 's'}`"
+                      :title="
+                        t(
+                          'testing.screenshotCount',
+                          { count: g.screenshots.length },
+                          g.screenshots.length,
+                        )
+                      "
                     />
                     <span class="shrink-0 text-[11px] text-slate-500">
-                      {{ g.outcomes.length }} check{{ g.outcomes.length === 1 ? '' : 's' }}
+                      {{ t('testing.checkCount', { count: g.outcomes.length }, g.outcomes.length) }}
                       <template v-if="g.concerns.length">
-                        · {{ g.concerns.length }} concern{{ g.concerns.length === 1 ? '' : 's' }}
+                        ·
+                        {{
+                          t('testing.concernCount', { count: g.concerns.length }, g.concerns.length)
+                        }}
                       </template>
                     </span>
                   </button>
@@ -370,7 +402,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       </div>
                     </div>
                     <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-slate-500">
-                      No discrete check recorded for this scenario.
+                      {{ t('testing.noDiscreteCheck') }}
                     </p>
 
                     <!-- Concerns linked to this scenario -->
@@ -391,7 +423,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                             class="rounded px-1 text-[10px] uppercase"
                             :class="SEVERITY_META[c.severity].chip"
                           >
-                            {{ c.severity }}
+                            {{ SEVERITY_LABELS[c.severity] }}
                           </span>
                         </div>
                         <p v-if="c.detail" class="text-[12px] leading-snug text-slate-400">
@@ -412,14 +444,18 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                         <img
                           v-if="blobs.urlFor(s.artifactId)"
                           :src="blobs.urlFor(s.artifactId)"
-                          :alt="`${s.view} (screenshot)`"
+                          :alt="t('testing.screenshotAlt', { view: s.view })"
                           class="h-full w-full object-cover object-top"
                         />
                         <span
                           v-else
                           class="flex h-full w-full items-center justify-center text-[10px] text-slate-600"
                         >
-                          {{ blobs.statusFor(s.artifactId) === 'error' ? 'Failed' : 'Loading…' }}
+                          {{
+                            blobs.statusFor(s.artifactId) === 'error'
+                              ? t('testing.shot.failed')
+                              : t('testing.shot.loading')
+                          }}
                         </span>
                         <span
                           class="absolute inset-x-0 bottom-0 truncate bg-slate-950/80 px-1 py-0.5 text-[9px] text-slate-300"
@@ -434,7 +470,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <!-- Standalone gallery: any captures not mapped to a scenario above -->
               <section v-if="ungroupedScreenshots.length" class="mt-5">
                 <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                  Screenshots
+                  {{ t('testing.screenshots') }}
                 </h3>
                 <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                   <button
@@ -447,7 +483,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     <img
                       v-if="blobs.urlFor(s.artifactId)"
                       :src="blobs.urlFor(s.artifactId)"
-                      :alt="`${s.view} (screenshot)`"
+                      :alt="t('testing.screenshotAlt', { view: s.view })"
                       class="h-full w-full object-cover object-top"
                     />
                     <span
@@ -455,7 +491,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       class="flex h-full w-full items-center justify-center text-[11px] text-slate-600"
                     >
                       {{
-                        blobs.statusFor(s.artifactId) === 'error' ? 'Failed to load' : 'Loading…'
+                        blobs.statusFor(s.artifactId) === 'error'
+                          ? t('testing.shot.failedToLoad')
+                          : t('testing.shot.loading')
                       }}
                     </span>
                     <span
@@ -474,7 +512,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           >
             <div v-if="report">
               <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Verdict
+                {{ t('testing.verdict.heading') }}
               </h4>
               <div class="flex items-center gap-2 text-[13px]">
                 <UIcon
@@ -483,33 +521,39 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   :class="report.greenlight ? 'text-emerald-400' : 'text-rose-400'"
                 />
                 <span :class="report.greenlight ? 'text-emerald-300' : 'text-rose-300'">
-                  {{ report.greenlight ? 'Safe to release' : 'Withheld' }}
+                  {{
+                    report.greenlight ? t('testing.verdict.safe') : t('testing.verdict.withheld')
+                  }}
                 </span>
               </div>
             </div>
 
             <div v-if="report">
               <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Outcomes
+                {{ t('testing.outcomes.heading') }}
               </h4>
               <dl class="space-y-1 text-[12px]">
                 <div class="flex items-center justify-between">
-                  <dt class="text-slate-400">Passed</dt>
+                  <dt class="text-slate-400">{{ t('testing.outcomes.passed') }}</dt>
                   <dd class="text-emerald-300">{{ counts.passed }}</dd>
                 </div>
                 <div class="flex items-center justify-between">
-                  <dt class="text-slate-400">Failed</dt>
+                  <dt class="text-slate-400">{{ t('testing.outcomes.failed') }}</dt>
                   <dd class="text-rose-300">{{ counts.failed }}</dd>
                 </div>
                 <div class="flex items-center justify-between">
-                  <dt class="text-slate-400">Skipped</dt>
+                  <dt class="text-slate-400">{{ t('testing.outcomes.skipped') }}</dt>
                   <dd class="text-slate-300">{{ counts.skipped }}</dd>
                 </div>
                 <div class="flex items-center justify-between border-t border-slate-800 pt-1">
-                  <dt class="text-slate-400">Concerns</dt>
+                  <dt class="text-slate-400">{{ t('testing.outcomes.concerns') }}</dt>
                   <dd class="text-amber-300">
                     {{ counts.concerns
-                    }}<template v-if="counts.blocking"> ({{ counts.blocking }} blocking)</template>
+                    }}<template v-if="counts.blocking">
+                      {{
+                        t('testing.outcomes.blocking', { count: counts.blocking }, counts.blocking)
+                      }}</template
+                    >
                   </dd>
                 </div>
               </dl>
@@ -517,7 +561,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
             <div v-if="report?.environment">
               <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Environment
+                {{ t('testing.environment') }}
               </h4>
               <p class="text-[12px] capitalize text-slate-300">{{ report.environment }}</p>
             </div>
@@ -535,8 +579,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
             />
 
             <p class="mt-auto text-[10px] leading-relaxed text-slate-600">
-              Scenarios are the areas the Tester chose to exercise (its spec acceptance scenarios).
-              Outcomes and concerns are grouped under them by name.
+              {{ t('testing.footer') }}
             </p>
           </aside>
         </div>