@cat-factory/app 0.308.0 → 0.310.0

package/app/components/panels/StepFragmentAdherence.vue

@@ -7,6 +7,7 @@
 // summary instead (so there is nothing to show here).
 import type { FragmentAdherence } from '~/types/execution'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ items: FragmentAdherence }>()
 const { t } = useI18n()
@@ -34,14 +35,12 @@ function label(item: FragmentAdherence[number]): string {
     data-testid="step-fragment-adherence"
     class="scroll-mt-4 rounded-xl border border-default bg-default/50 p-4"
   >
-    <div
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel class="mb-2 flex items-center gap-1.5">
       <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5" />
       <span :title="t('panels.stepDetail.adherence.headingHint')">
         {{ t('panels.stepDetail.adherence.heading') }}
       </span>
-    </div>
+    </SectionLabel>
 
     <div class="space-y-2.5">
       <article
@@ -51,7 +50,7 @@ function label(item: FragmentAdherence[number]): string {
         class="rounded-lg border border-default bg-default/60 px-3 py-2"
       >
         <div class="flex items-center gap-2">
-          <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-app-100">{{
+          <span class="min-w-0 flex-1 truncate text-sm font-medium text-app-100">{{
             label(item)
           }}</span>
           <div class="h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-accented/60">
@@ -62,7 +61,7 @@ function label(item: FragmentAdherence[number]): string {
             />
           </div>
           <span
-            class="shrink-0 text-[12px] font-medium text-default"
+            class="shrink-0 text-xs font-medium text-default"
             :title="t('panels.stepDetail.adherence.ratingHint')"
           >
             {{ t('panels.stepDetail.adherence.outOfTen', { value: item.rating }) }}
@@ -71,17 +70,17 @@ function label(item: FragmentAdherence[number]): string {
         <MarkdownProse
           v-if="item.assessment"
           :text="item.assessment"
-          class="mt-1 text-[12px] leading-relaxed text-toned"
+          class="mt-1 text-xs leading-relaxed text-toned"
         />
         <div v-if="item.relatedFindings.length" class="mt-1.5">
-          <p class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="p">
             {{ t('panels.stepDetail.adherence.relatedFindings') }}
-          </p>
+          </SectionLabel>
           <ul class="mt-0.5 space-y-0.5">
             <li
               v-for="(finding, fi) in item.relatedFindings"
               :key="fi"
-              class="flex items-start gap-1.5 text-[11px] text-muted"
+              class="flex items-start gap-1.5 text-2xs text-muted"
             >
               <UIcon name="i-lucide-dot" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ finding }}</span>

package/app/components/panels/StepMetadataCard.vue

@@ -13,6 +13,7 @@ import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
 import StepDelegatedStatus from '~/components/panels/StepDelegatedStatus.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The step's metadata card body: state/timing/model/run id, the container cold-boot
 // phase, the live subtask breakdown, the LLM observability rollup, the applied
@@ -182,11 +183,11 @@ async function copyRunId() {
 
 <template>
   <div>
-    <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-3">
+    <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-3">
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.stateLabel') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 flex items-center gap-1.5 text-default">
           <UIcon
             v-if="runFailed && step.state === 'working'"
@@ -199,9 +200,9 @@ async function copyRunId() {
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.duration') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-default">
           <UIcon
             v-if="isRunning"
@@ -210,55 +211,55 @@ async function copyRunId() {
           />
           <span v-if="durationLabel">{{ durationLabel }}</span>
           <span v-else class="text-dimmed">—</span>
-          <span v-if="isRunning" class="text-[11px] text-dimmed">{{
+          <span v-if="isRunning" class="text-2xs text-dimmed">{{
             t('panels.stepMeta.elapsed')
           }}</span>
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.step') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 text-default">
           {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.started') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 text-toned">{{ formatClock(step.startedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.finished') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 text-toned">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.model') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 truncate text-toned" :title="step.model">
           {{ modelLabel ?? t('panels.stepMeta.notRecorded') }}
         </dd>
       </div>
       <div v-if="promptVariant">
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.promptVariant') }}
-        </dt>
+        </SectionLabel>
         <dd class="mt-0.5 truncate text-toned">{{ promptVariant.label }}</dd>
-        <dd v-if="promptVariant.note" class="mt-0.5 text-[11px] text-app-warning-400/80">
+        <dd v-if="promptVariant.note" class="mt-0.5 text-2xs text-app-warning-400/80">
           {{ promptVariant.note }}
         </dd>
       </div>
       <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
       <div class="col-span-2 sm:col-span-3">
-        <dt class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt">
           {{ t('panels.stepMeta.run') }}
-        </dt>
+        </SectionLabel>
         <dd
-          class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-muted hover:text-default"
+          class="mt-0.5 cursor-pointer truncate font-mono text-xs text-muted hover:text-default"
           :title="t('panels.stepMeta.clickToCopy', { id: step.runId ?? instanceId ?? '' })"
           @click="copyRunId"
         >
@@ -284,14 +285,14 @@ async function copyRunId() {
 
     <!-- live subtask breakdown -->
     <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+      <SectionLabel>
         {{
           t('panels.stepMeta.subtasks', {
             completed: step.subtasks.completed,
             total: step.subtasks.total,
           })
         }}
-      </div>
+      </SectionLabel>
       <div class="mt-1 h-1 overflow-hidden rounded-full bg-accented/60">
         <div
           class="h-full rounded-full bg-primary transition-all duration-500"
@@ -304,7 +305,7 @@ async function copyRunId() {
         <li
           v-for="(item, idx) in step.subtasks.items"
           :key="idx"
-          class="flex items-start gap-1.5 text-[12px]"
+          class="flex items-start gap-1.5 text-xs"
           :class="
             item.status === 'completed'
               ? 'text-dimmed line-through'
@@ -335,12 +336,9 @@ async function copyRunId() {
 
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
-      <div
-        class="text-[11px] uppercase tracking-wide text-dimmed"
-        :title="t('panels.stepMeta.standardsAppliedHint')"
-      >
+      <SectionLabel :title="t('panels.stepMeta.standardsAppliedHint')">
         {{ t('panels.stepMeta.standardsApplied') }}
-      </div>
+      </SectionLabel>
       <div class="mt-1 flex flex-wrap gap-1">
         <UBadge
           v-for="id in step.selectedFragmentIds"
@@ -356,28 +354,28 @@ async function copyRunId() {
 
     <!-- decision raised on this step -->
     <div v-if="step.decision" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+      <SectionLabel>
         {{ t('panels.stepMeta.decision') }}
-      </div>
-      <p class="mt-0.5 text-[13px] text-default">{{ step.decision.question }}</p>
+      </SectionLabel>
+      <p class="mt-0.5 text-sm text-default">{{ step.decision.question }}</p>
       <p
         v-if="step.decision.chosen"
-        class="mt-0.5 flex items-center gap-1 text-[12px] text-app-success-400"
+        class="mt-0.5 flex items-center gap-1 text-xs text-app-success-400"
       >
         <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
         {{ step.decision.chosen }}
       </p>
-      <p v-else class="mt-0.5 text-[12px] text-app-warning-400">
+      <p v-else class="mt-0.5 text-xs text-app-warning-400">
         {{ t('panels.stepMeta.awaitingChoice') }}
       </p>
     </div>
 
     <!-- approval gate state -->
     <div v-if="step.approval" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+      <SectionLabel>
         {{ t('panels.stepMeta.approvalGate') }}
-      </div>
-      <p class="mt-0.5 text-[13px] text-default">
+      </SectionLabel>
+      <p class="mt-0.5 text-sm text-default">
         {{ approvalStatusLabel }}
       </p>
     </div>
@@ -385,9 +383,9 @@ async function copyRunId() {
     <!-- companion verdict + full correction sequence -->
     <div v-if="companionVerdicts.length" class="mt-4">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span">
           {{ t('panels.stepMeta.companionReview') }}
-        </span>
+        </SectionLabel>
         <!-- The COLOUR is the verdict (`passed`) and the GLYPH is the arithmetic, which are no
              longer the same fact: a round holding an open `blocker` fails at a rating that cleared
              its bar, and reading the inequality off `passed` printed "95% < 80%" over the findings
@@ -410,9 +408,9 @@ async function copyRunId() {
           class="relative rounded-lg border border-default bg-default/60 px-3 py-2"
         >
           <CopyButton v-if="v.feedback" :text="v.feedback" class="absolute end-1 top-1" />
-          <div class="flex items-center gap-2 text-[12px]">
+          <div class="flex items-center gap-2 text-xs">
             <span
-              class="inline-flex h-4 shrink-0 items-center rounded px-1 font-mono text-[11px] tabular-nums"
+              class="inline-flex h-4 shrink-0 items-center rounded-sm px-1 font-mono text-2xs tabular-nums"
               :class="
                 v.passed
                   ? 'bg-app-success-500/15 text-app-success-300'
@@ -429,7 +427,7 @@ async function copyRunId() {
             v-if="v.feedback"
             :text="v.feedback"
             data-testid="companion-verdict-summary"
-            class="mt-1.5 pe-6 text-[12px] leading-relaxed text-toned"
+            class="mt-1.5 pe-6 text-xs leading-relaxed text-toned"
           />
           <ul v-if="findings.length" class="mt-2 space-y-1.5">
             <li
@@ -448,13 +446,13 @@ async function copyRunId() {
               </UBadge>
               <MarkdownProse
                 :text="finding.body"
-                class="min-w-0 text-[12px] leading-relaxed text-toned"
+                class="min-w-0 text-xs leading-relaxed text-toned"
               />
             </li>
           </ul>
         </li>
       </ol>
-      <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-dimmed">
+      <p v-if="companionVerdicts.length > 1" class="mt-1 text-2xs text-dimmed">
         {{
           t(
             'panels.stepMeta.correctionIterations',

package/app/components/panels/StepReproductionReport.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { ReproductionPhaseOutcome, ReproductionReport } from '~/types/reproduction'
 import { REPRODUCTION_STATUS_KEYS, REPRODUCTION_TREE_KEYS } from '~/utils/reproduction'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The BUGFIX REPRODUCTION PROOF for a step: the declared reproducing check as the
 // executor-harness ran it against the pre-fix tree and against the final tree, with both captured
@@ -54,15 +55,12 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
       variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
   >
-    <div
-      v-if="variant === 'card'"
-      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel v-if="variant === 'card'" class="flex items-center gap-1.5">
       <UIcon :name="presentation.icon" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.reproduction.heading') }}</span>
-    </div>
+    </SectionLabel>
 
-    <p class="text-[11px] text-muted" data-testid="reproduction-verdict">
+    <p class="text-2xs text-muted" data-testid="reproduction-verdict">
       {{ t(presentation.verdict) }}
     </p>
 
@@ -72,7 +70,7 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
          is exactly the inference that gets it wrong. -->
     <p
       v-if="report.note"
-      class="text-[11px] text-app-warning-300"
+      class="text-2xs text-app-warning-300"
       data-testid="reproduction-observation"
     >
       {{ report.note }}
@@ -82,19 +80,19 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
          This is what keeps "could not be reproduced" from looking like "nobody tried". -->
     <template v-if="report.status === 'declared_infeasible'">
       <div v-if="report.reason" class="rounded-md border border-default bg-app-950/40 p-2">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('panels.stepDetail.reproduction.reason') }}
-        </p>
-        <p class="mt-1 whitespace-pre-wrap text-[12px] text-toned">{{ report.reason }}</p>
+        </SectionLabel>
+        <p class="mt-1 whitespace-pre-wrap text-xs text-toned">{{ report.reason }}</p>
       </div>
       <div
         v-if="report.alternativeVerification"
         class="rounded-md border border-default bg-app-950/40 p-2"
       >
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('panels.stepDetail.reproduction.alternative') }}
-        </p>
-        <p class="mt-1 whitespace-pre-wrap text-[12px] text-toned">
+        </SectionLabel>
+        <p class="mt-1 whitespace-pre-wrap text-xs text-toned">
           {{ report.alternativeVerification }}
         </p>
       </div>
@@ -102,17 +100,17 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
 
     <template v-else>
       <div v-if="report.command" class="flex items-baseline gap-2">
-        <span class="shrink-0 text-[11px] text-dimmed">{{
+        <span class="shrink-0 text-2xs text-dimmed">{{
           t('panels.stepDetail.reproduction.command')
         }}</span>
-        <span class="truncate font-mono text-[11px] text-toned">{{ report.command }}</span>
+        <span class="truncate font-mono text-2xs text-toned">{{ report.command }}</span>
       </div>
 
       <!-- A dropped path can leave the pre-fix tree without the reproduction, which greens it and
            reads as "the test does not capture the defect". Stated, never implied. -->
       <p
         v-if="report.omittedTestPaths"
-        class="text-[11px] text-app-warning-300"
+        class="text-2xs text-app-warning-300"
         data-testid="reproduction-omitted-paths"
       >
         {{
@@ -142,10 +140,10 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
                 : 'text-app-600'
             "
           />
-          <span class="text-[12px] font-medium text-default">
+          <span class="text-xs font-medium text-default">
             {{ t(phase.label) }}
           </span>
-          <span class="ms-auto shrink-0 text-[11px] tabular-nums text-muted">
+          <span class="ms-auto shrink-0 text-2xs tabular-nums text-muted">
             {{
               phase.outcome ? phaseLabel(phase.outcome) : t('panels.stepDetail.reproduction.notRun')
             }}
@@ -153,12 +151,12 @@ function phaseLabel(outcome: ReproductionPhaseOutcome): string {
         </div>
         <pre
           v-if="phase.outcome?.outputTail"
-          class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-app-950 p-2 font-mono text-[11px] text-muted"
+          class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-sm bg-app-950 p-2 font-mono text-2xs text-muted"
           data-testid="reproduction-output"
           >{{ phase.outcome.outputTail }}</pre>
       </div>
 
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{
           t('panels.stepDetail.reproduction.attempts', {
             attempts: report.attempts,

package/app/components/panels/StepRestartControl.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Shared "Restart pipeline from this step" control.
 //
@@ -57,13 +58,13 @@ async function restart() {
 
 <template>
   <template v-if="canRestart">
-    <UButton
+    <IconButton
       v-if="!armed"
       icon="i-lucide-rotate-ccw"
       color="neutral"
       variant="ghost"
       size="sm"
-      :title="t('panels.stepRestart.restartFromStep')"
+      :label="t('panels.stepRestart.restartFromStep')"
       @click="
         () => {
           armed = true

package/app/components/panels/StepRunMeta.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { PipelineStep } from '~/types/execution'
 import { useStepTimer } from '~/composables/useStepTimer'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Shared run-metadata + observability block for the step-backed result windows
 // (the CI/conflicts gate, the tester report). It carries the facts every step has in
@@ -57,26 +58,26 @@ 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-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.step') }}
-      </h4>
-      <p class="text-[12px] text-toned">
+      </SectionLabel>
+      <p class="text-xs text-toned">
         {{ 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-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.duration') }}
-      </h4>
-      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-toned">
+      </SectionLabel>
+      <p class="flex items-center gap-1.5 text-xs tabular-nums text-toned">
         <UIcon
           v-if="isRunning"
           name="i-lucide-loader-circle"
           class="h-3 w-3 animate-spin text-primary"
         />
         {{ durationLabel }}
-        <span v-if="isRunning" class="text-[11px] text-dimmed">{{
+        <span v-if="isRunning" class="text-2xs text-dimmed">{{
           t('panels.stepMeta.elapsed')
         }}</span>
       </p>
@@ -86,54 +87,54 @@ async function copyRunId() {
          the elapsed clock above — a long, quiet phase keeps this small while elapsed climbs, so a
          genuinely-active-but-quiet run reads apart from a wedged one. Only while actively running. -->
     <div v-if="isRunning && activityAgoLabel" data-testid="step-activity">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.activity') }}
-      </h4>
-      <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-toned">
+      </SectionLabel>
+      <p class="flex items-center gap-1.5 text-xs tabular-nums text-toned">
         <span class="h-1.5 w-1.5 rounded-full bg-app-success-400" />
         {{ t('panels.stepMeta.activityAgo', { duration: activityAgoLabel }) }}
       </p>
     </div>
 
     <div v-if="formatClock(step.startedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.started') }}
-      </h4>
-      <p class="text-[12px] text-toned">{{ formatClock(step.startedAt) }}</p>
+      </SectionLabel>
+      <p class="text-xs text-toned">{{ formatClock(step.startedAt) }}</p>
     </div>
 
     <div v-if="formatClock(step.finishedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.finished') }}
-      </h4>
-      <p class="text-[12px] text-toned">{{ formatClock(step.finishedAt) }}</p>
+      </SectionLabel>
+      <p class="text-xs text-toned">{{ formatClock(step.finishedAt) }}</p>
     </div>
 
     <div v-if="step.model">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.model') }}
-      </h4>
-      <p class="break-all text-[12px] text-toned" :title="step.model">
+      </SectionLabel>
+      <p class="break-all text-xs text-toned" :title="step.model">
         {{ modelLabel ?? step.model }}
       </p>
     </div>
 
     <div v-if="promptVariant">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.promptVariant') }}
-      </h4>
-      <p class="break-all text-[12px] text-toned">{{ promptVariant.label }}</p>
-      <p v-if="promptVariant.note" class="mt-0.5 text-[11px] text-app-warning-400/80">
+      </SectionLabel>
+      <p class="break-all text-xs text-toned">{{ promptVariant.label }}</p>
+      <p v-if="promptVariant.note" class="mt-0.5 text-2xs text-app-warning-400/80">
         {{ promptVariant.note }}
       </p>
     </div>
 
     <div v-if="runId">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="h4" class="mb-1">
         {{ t('panels.stepMeta.run') }}
-      </h4>
+      </SectionLabel>
       <p
-        class="cursor-pointer break-all font-mono text-[12px] text-muted hover:text-default"
+        class="cursor-pointer break-all font-mono text-xs text-muted hover:text-default"
         :title="t('panels.stepMeta.clickToCopy', { id: runId })"
         @click="copyRunId"
       >

package/app/components/panels/StepTestReport.vue

@@ -3,6 +3,7 @@ import type { RequirementVerdictStatus, TestReport } from '~/types/domain'
 import type { TesterStepState } from '~/types/execution'
 import { resolveVerdictMeta, type VerdictMeta } from './StepTestReport.logic'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // A tester step's latest structured report (what was tested, the per-area outcomes,
 // the concerns it raised and the greenlight verdict) plus the fixer-loop phase.
@@ -43,17 +44,17 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
 
 <template>
   <section class="mt-4 scroll-mt-4">
-    <div class="mb-2 flex items-center gap-1.5 text-[11px]">
+    <div class="mb-2 flex items-center gap-1.5 text-2xs">
       <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-muted" />
-      <span class="font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('panels.testReport.title') }}
-      </span>
+      </SectionLabel>
       <UBadge :color="report.greenlight ? 'success' : 'warning'" variant="subtle" size="sm">
         {{
           report.greenlight ? t('panels.testReport.greenlit') : t('panels.testReport.needsFixes')
         }}
       </UBadge>
-      <span v-if="phase && phase.attempts > 0" class="text-[11px] text-dimmed">
+      <span v-if="phase && phase.attempts > 0" class="text-2xs text-dimmed">
         {{ t('panels.testReport.fixAttempts', { count: phase.attempts, max: phase.maxAttempts })
         }}<span v-if="phase.phase === 'fixing'"> {{ t('panels.testReport.fixing') }}</span>
       </span>
@@ -61,19 +62,19 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
     <MarkdownProse
       v-if="report.summary"
       :text="report.summary"
-      class="mb-3 text-[13px] leading-relaxed text-toned"
+      class="mb-3 text-sm leading-relaxed text-toned"
     />
 
     <div v-if="report.tested.length" class="mb-3">
-      <div class="mb-1 text-[11px] text-dimmed">{{ t('panels.testReport.tested') }}</div>
-      <ul class="space-y-0.5 text-[12px] text-toned">
+      <div class="mb-1 text-2xs text-dimmed">{{ t('panels.testReport.tested') }}</div>
+      <ul class="space-y-0.5 text-xs text-toned">
         <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-dimmed">{{ t('panels.testReport.outcomes') }}</div>
-      <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-[12px]">
+      <div class="text-2xs text-dimmed">{{ t('panels.testReport.outcomes') }}</div>
+      <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-xs">
         <span
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
           :style="{ backgroundColor: OUTCOME_COLOR[o.status] ?? 'var(--ui-text-muted)' }"
@@ -91,20 +92,20 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
       class="mb-3 space-y-1"
       data-testid="test-report-requirement-verdicts"
     >
-      <div class="text-[11px] text-dimmed">
+      <div class="text-2xs text-dimmed">
         {{ t('panels.testReport.requirementVerdicts.title') }}
       </div>
       <div
         v-for="(verdict, i) in report.requirementVerdicts"
         :key="i"
-        class="flex items-start gap-2 text-[12px]"
+        class="flex items-start gap-2 text-xs"
       >
         <span
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
           :style="{ backgroundColor: verdictMeta(verdict.status).color }"
         />
         <span class="text-toned">
-          <span class="font-mono text-[11px] text-muted">{{ verdict.requirementId }}</span>
+          <span class="font-mono text-2xs text-muted">{{ verdict.requirementId }}</span>
           <span class="text-dimmed"> — {{ verdictMeta(verdict.status).label }}</span>
           <span v-if="verdict.detail" class="text-dimmed"> · {{ verdict.detail }}</span>
         </span>
@@ -112,15 +113,15 @@ function verdictMeta(status: RequirementVerdictStatus): VerdictMeta {
     </div>
 
     <div v-if="report.concerns.length" class="space-y-1">
-      <div class="text-[11px] text-dimmed">{{ t('panels.testReport.concerns') }}</div>
+      <div class="text-2xs text-dimmed">{{ t('panels.testReport.concerns') }}</div>
       <div
         v-for="(c, i) in report.concerns"
         :key="i"
-        class="rounded border border-muted/60 p-2 text-[12px]"
+        class="rounded-sm border border-muted/60 p-2 text-xs"
       >
         <div class="flex items-center gap-1.5">
           <span
-            class="rounded px-1 text-[10px] font-semibold uppercase text-highlighted"
+            class="rounded-sm px-1 text-3xs font-semibold uppercase text-highlighted"
             :style="{ backgroundColor: SEVERITY_COLOR[c.severity] ?? 'var(--ui-text-muted)' }"
             >{{ c.severity }}</span
           >