@cat-factory/app 0.308.0 → 0.309.0

package/app/components/notifications/NotificationSettingsPanel.vue

@@ -25,6 +25,7 @@ import type {
   NotificationType,
 } from '~/types/notifications'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const notifications = useNotificationsStore()
@@ -174,11 +175,11 @@ function resetToDefaults() {
         </div>
 
         <template v-else>
-          <div class="flex items-center gap-3 px-2 text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel class="flex items-center gap-3 px-2">
             <span class="flex-1">{{ t('notificationSettings.column.event') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.inApp') }}</span>
             <span class="w-16 text-center">{{ t('notificationSettings.column.email') }}</span>
-          </div>
+          </SectionLabel>
 
           <div class="max-h-[50vh] space-y-1 overflow-y-auto pr-1">
             <div
@@ -198,13 +199,13 @@ function resetToDefaults() {
             </div>
           </div>
 
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.inAppNote') }}
           </p>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.emailNote') }}
           </p>
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('notificationSettings.panel.otherChannelsNote') }}
             <UButton
               v-if="slack.available"

package/app/components/observability/OutcomeFilterChips.vue

@@ -24,7 +24,7 @@ function toneClass(option: (typeof props.options)[number], active: boolean): str
 </script>
 
 <template>
-  <div class="flex rounded-lg border border-default p-0.5 text-[12px]">
+  <div class="flex rounded-lg border border-default p-0.5 text-xs">
     <button
       v-for="option in options"
       :key="option.value"

package/app/components/observability/RunFailureSummary.vue

@@ -86,15 +86,15 @@ const earlierFailedToolCalls = computed(() =>
     <div class="flex items-start gap-3">
       <UIcon name="i-lucide-siren" class="mt-0.5 h-5 w-5 shrink-0 text-app-error-400" />
       <div class="min-w-0 flex-1">
-        <h2 class="text-[13px] font-semibold text-app-error-200">
+        <h2 class="text-sm font-semibold text-app-error-200">
           {{ t('observability.failure.title') }}
         </h2>
 
         <!-- The run's own structured record. Absent on a run that is still going, or that
              failed without one; the evidence below stands on its own either way. -->
         <template v-if="evidence.failure">
-          <p class="mt-1 text-[13px] text-default">{{ evidence.failure.message }}</p>
-          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-dimmed">
+          <p class="mt-1 text-sm text-default">{{ evidence.failure.message }}</p>
+          <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-2xs text-dimmed">
             <span>{{ t('observability.failure.kind', { kind: failureKindLabel }) }}</span>
             <span v-if="evidence.failure.stepIndex != null">
               {{ t('observability.failure.atStep', { index: evidence.failure.stepIndex + 1 }) }}
@@ -108,10 +108,10 @@ const earlierFailedToolCalls = computed(() =>
           <FailureDetail
             :detail="evidence.failure.detail"
             :message="evidence.failure.message"
-            summary-class="text-[11px] text-dimmed hover:text-toned"
-            pre-class="bg-app-950/60 text-[11px] text-muted"
+            summary-class="text-2xs text-dimmed hover:text-toned"
+            pre-class="bg-app-950/60 text-2xs text-muted"
           />
-          <p v-if="evidence.failure.hint" class="mt-1.5 text-[12px] text-toned">
+          <p v-if="evidence.failure.hint" class="mt-1.5 text-xs text-toned">
             {{ evidence.failure.hint }}
           </p>
         </template>
@@ -133,7 +133,7 @@ const earlierFailedToolCalls = computed(() =>
           :style="{ color: agentMeta(evidence.lastErroredCall.agentKind).color }"
         />
         <div class="min-w-0 flex-1">
-          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-xs">
             <span class="font-medium text-default">
               {{ t('observability.failure.lastErroredCall') }}
             </span>
@@ -145,13 +145,10 @@ const earlierFailedToolCalls = computed(() =>
               {{ evidence.lastErroredCall.httpStatus ?? t('observability.call.error') }}
             </UBadge>
           </div>
-          <p
-            v-if="evidence.lastErroredCall.errorMessage"
-            class="mt-0.5 text-[12px] text-app-error-300"
-          >
+          <p v-if="evidence.lastErroredCall.errorMessage" class="mt-0.5 text-xs text-app-error-300">
             {{ evidence.lastErroredCall.errorMessage }}
           </p>
-          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-[11px] text-dimmed">
+          <p v-if="evidence.erroredCallCount > 1" class="mt-0.5 text-2xs text-dimmed">
             {{
               t(
                 'observability.failure.moreErroredCalls',
@@ -173,7 +170,7 @@ const earlierFailedToolCalls = computed(() =>
       >
         <UIcon name="i-lucide-wrench" class="mt-0.5 h-4 w-4 shrink-0 text-app-error-400" />
         <div class="min-w-0 flex-1">
-          <div class="flex flex-wrap items-baseline gap-x-2 text-[12px]">
+          <div class="flex flex-wrap items-baseline gap-x-2 text-xs">
             <span class="font-medium text-default">
               <!-- "One of the failing calls" when even the failures were bounded: the row is
                    real either way, but calling it the LAST would be a claim about rows this
@@ -191,16 +188,16 @@ const earlierFailedToolCalls = computed(() =>
           </div>
           <pre
             v-if="failedToolResult"
-            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] leading-relaxed text-app-error-300"
+            class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-2xs leading-relaxed text-app-error-300"
             >{{ failedToolResult }}</pre>
-          <p v-else class="mt-0.5 text-[11px] italic text-dimmed">
+          <p v-else class="mt-0.5 text-2xs italic text-dimmed">
             {{
               evidence.lastFailedToolCall.bodies === 'stored'
                 ? t('observability.failure.toolReturnedNothing')
                 : t('observability.failure.toolBodiesWithheld')
             }}
           </p>
-          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-[11px] text-dimmed">
+          <p v-if="earlierFailedToolCalls" class="mt-0.5 text-2xs text-dimmed">
             {{
               t(
                 'observability.failure.moreFailedToolCalls',
@@ -220,7 +217,7 @@ const earlierFailedToolCalls = computed(() =>
            come back from being reported as one that came back clean. -->
       <div
         v-else-if="emptyReason"
-        class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-[12px]"
+        class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed px-3 py-2 text-xs"
         :class="
           emptyReason === 'sink-unreachable'
             ? 'border-app-warning-900/60 text-app-warning-300'

package/app/components/observability/StepMetricsBar.vue

@@ -11,6 +11,7 @@ import {
   totalInputTokens,
   transportRatio,
 } from '~/utils/observability'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Compact, at-a-glance LLM rollup for one pipeline step: token usage, an
 // output-limit headroom bar (how close the step ran to truncation), a
@@ -57,7 +58,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 <template>
   <div
     v-if="m.calls > 0"
-    class="rounded-lg border border-default bg-default/40 p-2.5 text-[12px]"
+    class="rounded-lg border border-default bg-default/40 p-2.5 text-xs"
     :class="clickable ? 'cursor-pointer transition hover:border-muted hover:bg-default/70' : ''"
     :role="clickable ? 'button' : undefined"
     @click="clickable ? $emit('inspect') : undefined"
@@ -88,13 +89,13 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         >
           {{ onSubscription ? `~${cost}` : cost }}
         </span>
-        <span
+        <SectionLabel
           v-if="onSubscription"
-          class="text-[10px] uppercase tracking-wide text-dimmed"
+          as="span"
           :title="t('observability.metricsBar.subscriptionCostHint')"
         >
           {{ t('observability.metricsBar.subscription') }}
-        </span>
+        </SectionLabel>
       </template>
       <div class="ms-auto flex items-center gap-1">
         <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
@@ -112,7 +113,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
     </div>
 
     <!-- input breakdown: the headline's three classes, priced an order of magnitude apart -->
-    <div v-if="hasCache" class="mt-1.5 flex items-center gap-1.5 text-[11px] tabular-nums">
+    <div v-if="hasCache" class="mt-1.5 flex items-center gap-1.5 text-2xs tabular-nums">
       <span class="text-muted" :title="t('observability.metricsBar.freshHint')">
         {{ t('observability.metricsBar.fresh', { tokens: formatTokens(m.promptTokens) }) }}
       </span>
@@ -136,7 +137,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 
     <!-- output-limit headroom -->
     <div v-if="headroom !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
+      <div class="flex items-center justify-between text-2xs">
         <span class="text-dimmed">{{ t('observability.metricsBar.outputLimit') }}</span>
         <span class="tabular-nums" :class="headroomTone">
           {{ formatTokens(m.peakCompletionTokens) }} /
@@ -156,7 +157,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
           :style="{ width: `${Math.max(2, pct(headroom))}%` }"
         />
       </div>
-      <p v-if="m.truncatedCalls > 0" class="mt-1 text-[11px] text-app-error-400">
+      <p v-if="m.truncatedCalls > 0" class="mt-1 text-2xs text-app-error-400">
         {{
           t(
             'observability.metricsBar.truncatedCalls',
@@ -169,7 +170,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
 
     <!-- transport overhead vs model execution -->
     <div v-if="transport !== null" class="mt-2">
-      <div class="flex items-center justify-between text-[11px]">
+      <div class="flex items-center justify-between text-2xs">
         <span class="text-dimmed">{{ t('observability.metricsBar.transportVsExecution') }}</span>
         <span class="tabular-nums text-muted">
           {{ formatMs(m.overheadMs) }} / {{ formatMs(m.upstreamMs) }}

package/app/components/observability/StepModelActivity.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { StepMetrics } from '~/types/execution'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The shared "Model activity" block: the LLM observability rollup (StepMetricsBar) under
 // a labelled header with a "View all calls →" link into the full per-call panel. Used by
@@ -31,12 +32,12 @@ function openObservability() {
 <template>
   <div v-if="instanceId || hasCalls">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="span">
         {{ t('observability.modelActivity') }}
-      </span>
+      </SectionLabel>
       <button
         v-if="instanceId"
-        class="text-[11px] text-app-info-400 hover:text-app-info-300"
+        class="text-2xs text-app-info-400 hover:text-app-info-300"
         @click="openObservability"
       >
         {{ t('observability.viewAllCalls') }}

package/app/components/observability/ToolCallList.vue

@@ -5,6 +5,7 @@ import type { ToolOutcomeFilter } from '~/utils/observability'
 import { filterToolCallsByOutcome, formatMs } from '~/utils/observability'
 import { agentKindMeta } from '~/utils/catalog'
 import OutcomeFilterChips from '~/components/observability/OutcomeFilterChips.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The tool-call TRAJECTORY drill-down: what the run's agents DID, oldest first, in the order
 // they did it. The sibling of the model-call list, and the one that holds the failures no LLM
@@ -142,10 +143,10 @@ function prettyArgs(raw: string): string {
   <div class="space-y-4">
     <div class="flex flex-wrap items-center justify-between gap-2">
       <div>
-        <h2 class="text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h2">
           {{ t('observability.toolCalls.title') }}
-        </h2>
-        <p class="text-[11px] text-app-600">{{ t('observability.toolCalls.subtitle') }}</p>
+        </SectionLabel>
+        <p class="text-2xs text-app-600">{{ t('observability.toolCalls.subtitle') }}</p>
       </div>
       <OutcomeFilterChips v-model="filter" :options="filterOptions" />
     </div>
@@ -198,7 +199,7 @@ function prettyArgs(raw: string): string {
            implies has to explain itself here. -->
       <p
         v-if="boundedNotice"
-        class="rounded-lg border border-dashed border-app-warning-900/50 px-3 py-2 text-[11px] text-app-warning-300/90"
+        class="rounded-lg border border-dashed border-app-warning-900/50 px-3 py-2 text-2xs text-app-warning-300/90"
       >
         {{ boundedNotice }}
       </p>
@@ -225,8 +226,8 @@ function prettyArgs(raw: string): string {
               :style="{ color: agentMeta(call.agentKind).color }"
               :title="agentMeta(call.agentKind).label"
             />
-            <span class="font-mono text-[13px] text-default">{{ call.tool }}</span>
-            <div class="ms-auto flex items-center gap-2.5 text-[11px] tabular-nums text-muted">
+            <span class="font-mono text-sm text-default">{{ call.tool }}</span>
+            <div class="ms-auto flex items-center gap-2.5 text-2xs tabular-nums text-muted">
               <span :title="t('observability.toolCalls.durationHint')">
                 {{ formatMs(Math.max(0, call.endedAt - call.startedAt)) }}
               </span>
@@ -238,20 +239,18 @@ function prettyArgs(raw: string): string {
           </button>
 
           <div v-if="expanded[call.id]" class="border-t border-default px-4 py-3 space-y-3">
-            <div class="flex flex-wrap gap-x-5 gap-y-1 text-[11px] text-dimmed">
+            <div class="flex flex-wrap gap-x-5 gap-y-1 text-2xs text-dimmed">
               <span>{{ t('observability.toolCalls.dispatch', { jobId: call.jobId }) }}</span>
               <span>{{ t('observability.toolCalls.seq', { seq: call.seq }) }}</span>
             </div>
             <!-- `withheld` is not an empty body: nothing was captured, so an empty `args` here
                must not read as a tool that took none. -->
-            <p v-if="call.bodies !== 'stored'" class="text-[12px] italic text-dimmed">
+            <p v-if="call.bodies !== 'stored'" class="text-xs italic text-dimmed">
               {{ t('observability.toolCalls.bodiesWithheld') }}
             </p>
             <template v-else>
               <div>
-                <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
-                >
+                <SectionLabel class="mb-1 flex items-center gap-2">
                   <span>{{ t('observability.toolCalls.arguments') }}</span>
                   <span
                     v-if="call.argsDropped > 0"
@@ -259,15 +258,13 @@ function prettyArgs(raw: string): string {
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.argsDropped }) }}
                   </span>
-                </div>
+                </SectionLabel>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed text-toned"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-2xs leading-relaxed text-toned"
                   >{{ call.args ? prettyArgs(call.args) : '—' }}</pre>
               </div>
               <div>
-                <div
-                  class="mb-1 flex items-center gap-2 text-[11px] uppercase tracking-wide text-dimmed"
-                >
+                <SectionLabel class="mb-1 flex items-center gap-2">
                   <span>{{ t('observability.toolCalls.result') }}</span>
                   <span
                     v-if="call.resultDropped > 0"
@@ -275,9 +272,9 @@ function prettyArgs(raw: string): string {
                   >
                     {{ t('observability.toolCalls.dropped', { chars: call.resultDropped }) }}
                   </span>
-                </div>
+                </SectionLabel>
                 <pre
-                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-[11px] leading-relaxed"
+                  class="max-h-60 overflow-auto rounded-lg bg-app-950/70 p-3 text-2xs leading-relaxed"
                   :class="call.ok ? 'text-toned' : 'text-app-error-300'"
                   >{{ call.result || '—' }}</pre>
               </div>

package/app/components/outcome/OutcomeSummaryWindow.vue

@@ -45,6 +45,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
 import type { BadgeColor } from '~/utils/badge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const documents = useDocumentsStore()
@@ -458,16 +459,16 @@ function openTestReport() {
 
       <!-- What was asked, in the requester's own words. -->
       <section class="mb-5">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.ask.title') }}
-        </h3>
+        </SectionLabel>
         <MarkdownProse
           v-if="outcome.ask"
           :text="outcome.ask"
-          class="text-[13px] leading-relaxed text-toned"
+          class="text-sm leading-relaxed text-toned"
           data-testid="outcome-ask"
         />
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t('outcome.ask.none') }}
         </p>
       </section>
@@ -477,9 +478,9 @@ function openTestReport() {
            agents actually read, and every section below is a statement about work done against
            it. A design that moved mid-run is the reading that changes all of them. -->
       <section class="mb-5" data-testid="outcome-sources">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.sources.title') }}
-        </h3>
+        </SectionLabel>
         <div v-if="outcome.sources.status === 'reported'" class="space-y-1">
           <div
             v-for="source in sourceRows"
@@ -495,7 +496,7 @@ function openTestReport() {
               <UIcon :name="source.icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
               <span class="truncate">{{ source.title }}</span>
             </DocumentOriginLink>
-            <p class="mt-0.5 text-[11px] text-dimmed" data-testid="outcome-source-revision">
+            <p class="mt-0.5 text-2xs text-dimmed" data-testid="outcome-source-revision">
               {{ source.revision }}
             </p>
             <!-- Stated separately from the revision above: the last revision alone says the run
@@ -503,23 +504,23 @@ function openTestReport() {
                  changed under it. -->
             <p
               v-if="source.movedDuringRun"
-              class="mt-0.5 text-[11px] text-app-warning-300"
+              class="mt-0.5 text-2xs text-app-warning-300"
               data-testid="outcome-source-moved"
             >
               {{ t('outcome.sources.moved') }}
             </p>
           </div>
         </div>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(SOURCES_GAP_KEYS[outcome.sources.gap]) }}
         </p>
       </section>
 
       <!-- Requirement coverage: which required behaviours were checked, and what was seen. -->
       <section class="mb-5" data-testid="outcome-requirements">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.requirements.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.requirements.status === 'reported'">
           <div class="mb-2 flex flex-wrap items-center gap-1.5">
             <UBadge color="success" variant="subtle" size="sm">
@@ -550,7 +551,7 @@ function openTestReport() {
                and do not cover rather than letting them read as the whole picture. -->
           <p
             v-if="specNote"
-            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
+            class="mb-2 text-2xs leading-relaxed text-app-warning-300/90"
             data-testid="outcome-spec-note"
           >
             {{ specNote }}
@@ -560,7 +561,7 @@ function openTestReport() {
                deciding which of the two numbers to distrust. -->
           <p
             v-if="unmatchedVerdicts > 0"
-            class="mb-2 text-[11px] leading-relaxed text-app-warning-300/90"
+            class="mb-2 text-2xs leading-relaxed text-app-warning-300/90"
             data-testid="outcome-unmatched-verdicts"
           >
             {{ t('outcome.requirements.unmatchedVerdicts', { count: unmatchedVerdicts }) }}
@@ -578,7 +579,7 @@ function openTestReport() {
               />
               <div class="min-w-0">
                 <div class="flex flex-wrap items-center gap-1.5">
-                  <span class="text-[13px] text-default">{{ req.title ?? req.id }}</span>
+                  <span class="text-sm text-default">{{ req.title ?? req.id }}</span>
                   <UBadge
                     v-if="req.regression"
                     color="error"
@@ -588,18 +589,18 @@ function openTestReport() {
                   >
                     {{ t('outcome.requirements.regressionTag') }}
                   </UBadge>
-                  <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                  <SectionLabel as="span">
                     {{ t(VERDICT_META[req.verdict].key) }}
-                  </span>
+                  </SectionLabel>
                 </div>
-                <p v-if="req.detail" class="mt-0.5 text-[12px] leading-relaxed text-muted">
+                <p v-if="req.detail" class="mt-0.5 text-xs leading-relaxed text-muted">
                   {{ req.detail }}
                 </p>
               </div>
             </li>
           </ul>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(REQUIREMENTS_GAP_KEYS[outcome.requirements.gap]) }}
         </p>
       </section>
@@ -607,9 +608,9 @@ function openTestReport() {
       <!-- How it was tested: the tester's own verdict and prose, attributed as its account. -->
       <section class="mb-5" data-testid="outcome-tests">
         <div class="mb-1.5 flex flex-wrap items-center gap-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('outcome.tests.title') }}
-          </h3>
+          </SectionLabel>
           <UBadge
             v-if="outcome.tests.status === 'reported'"
             :color="TESTS_VERDICT_COLOR[outcome.tests.verdict]"
@@ -642,15 +643,15 @@ function openTestReport() {
         <template v-if="outcome.tests.status === 'reported'">
           <p
             v-if="outcome.tests.abortReason"
-            class="mb-2 rounded-md border border-app-error-900/70 bg-app-error-500/10 p-2 text-[13px] leading-relaxed text-app-error-200"
+            class="mb-2 rounded-md border border-app-error-900/70 bg-app-error-500/10 p-2 text-sm leading-relaxed text-app-error-200"
             data-testid="outcome-tests-abort"
           >
             {{ t('outcome.tests.abort', { reason: outcome.tests.abortReason }) }}
           </p>
-          <p v-if="outcome.tests.summary" class="text-[13px] leading-relaxed text-toned">
+          <p v-if="outcome.tests.summary" class="text-sm leading-relaxed text-toned">
             {{ t('outcome.tests.summary', { summary: outcome.tests.summary }) }}
           </p>
-          <p class="mt-1.5 text-[12px] text-muted">
+          <p class="mt-1.5 text-xs text-muted">
             {{
               t('outcome.tests.counts', {
                 passed: outcome.tests.passed,
@@ -663,7 +664,7 @@ function openTestReport() {
             <li
               v-for="(concern, i) in outcome.tests.concerns"
               :key="i"
-              class="flex items-start gap-2 text-[12px] text-toned"
+              class="flex items-start gap-2 text-xs text-toned"
               data-testid="outcome-concern"
             >
               <UBadge :color="SEVERITY_COLOR[concern.severity]" variant="subtle" size="sm">
@@ -673,18 +674,18 @@ function openTestReport() {
             </li>
           </ul>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(TESTS_GAP_KEYS[outcome.tests.gap]) }}
         </p>
       </section>
 
       <!-- What it looks like: the captured views, and whether a human was asked about them. -->
       <section class="mb-5" data-testid="outcome-visuals">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.visuals.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.visuals.status === 'reported'">
-          <p class="mb-2 text-[12px] leading-relaxed text-muted">
+          <p class="mb-2 text-xs leading-relaxed text-muted">
             {{
               outcome.visuals.source === 'visual_confirm'
                 ? t('outcome.visuals.source.visual_confirm')
@@ -718,7 +719,7 @@ function openTestReport() {
                 />
               </div>
               <span
-                class="flex items-center gap-1 truncate px-1.5 py-1 text-[11px] text-toned"
+                class="flex items-center gap-1 truncate px-1.5 py-1 text-2xs text-toned"
                 :title="view.view"
               >
                 <UIcon
@@ -733,12 +734,12 @@ function openTestReport() {
           </div>
         </template>
         <template v-else>
-          <p class="text-[13px] italic leading-relaxed text-dimmed">
+          <p class="text-sm italic leading-relaxed text-dimmed">
             {{ t(VISUALS_GAP_KEYS[outcome.visuals.gap]) }}
           </p>
           <p
             v-if="outcome.visuals.detail"
-            class="mt-1 text-[12px] leading-relaxed text-dimmed"
+            class="mt-1 text-xs leading-relaxed text-dimmed"
             data-testid="outcome-visuals-detail"
           >
             {{ outcome.visuals.detail }}
@@ -750,9 +751,9 @@ function openTestReport() {
            not read diffs starts from. Beside the captured views on purpose: the shots are what
            this run saw, this is the thing itself. -->
       <section class="mb-5" data-testid="outcome-environments">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.environments.title') }}
-        </h3>
+        </SectionLabel>
         <template v-if="outcome.environments.status === 'reported'">
           <div
             v-for="row in environmentRows"
@@ -765,10 +766,10 @@ function openTestReport() {
               <UBadge :color="ENVIRONMENT_STATE_COLOR[row.state]" variant="subtle" size="sm">
                 {{ t(ENVIRONMENT_STATE_KEYS[row.state]) }}
               </UBadge>
-              <span v-if="row.service" class="truncate text-[12px] text-toned">
+              <span v-if="row.service" class="truncate text-xs text-toned">
                 {{ row.service }}
               </span>
-              <span class="text-[11px] text-dimmed">
+              <span class="text-2xs text-dimmed">
                 {{ t(ENVIRONMENT_ORIGIN_KEYS[row.origin]) }}
               </span>
             </div>
@@ -789,15 +790,15 @@ function openTestReport() {
             </UButton>
             <p
               v-else-if="row.url"
-              class="mt-1.5 break-all text-[12px] text-dimmed"
+              class="mt-1.5 break-all text-xs text-dimmed"
               data-testid="outcome-environment-url"
             >
               {{ row.url }}
             </p>
-            <p v-if="row.retained" class="mt-1 text-[11px] text-muted">
+            <p v-if="row.retained" class="mt-1 text-2xs text-muted">
               {{ t('outcome.environments.retained') }}
             </p>
-            <p v-if="row.expiresAt" class="mt-1 text-[11px] text-dimmed">
+            <p v-if="row.expiresAt" class="mt-1 text-2xs text-dimmed">
               {{
                 row.lapsed
                   ? t('outcome.environments.expired', { date: d(new Date(row.expiresAt), 'long') })
@@ -810,7 +811,7 @@ function openTestReport() {
                  otherwise holds "quota exceeded" reports a fault the environment does not have. -->
             <p
               v-if="row.detail"
-              class="mt-1 break-words text-[12px] leading-relaxed text-dimmed"
+              class="mt-1 break-words text-xs leading-relaxed text-dimmed"
               data-testid="outcome-environment-detail"
               :data-detail-kind="row.detailKind"
             >
@@ -822,16 +823,16 @@ function openTestReport() {
             </p>
           </div>
         </template>
-        <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+        <p v-else class="text-sm italic leading-relaxed text-dimmed">
           {{ t(ENVIRONMENTS_GAP_KEYS[outcome.environments.gap]) }}
         </p>
       </section>
 
       <!-- The machine checks, listed only where one actually recorded a verdict. -->
       <section v-if="checkRows.length" data-testid="outcome-checks">
-        <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel as="h3" class="mb-1.5">
           {{ t('outcome.checks.title') }}
-        </h3>
+        </SectionLabel>
         <div class="flex flex-wrap items-center gap-1.5">
           <UBadge
             v-for="check in checkRows"