@cat-factory/app 0.308.0 → 0.309.0

package/app/components/panels/ReportsPanel.vue

@@ -19,6 +19,7 @@ import {
   trendMagnitude,
 } from './ReportsPanel.logic'
 import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Reports: cross-cutting usage analytics for the active account — where the spend and the
 // work actually go. Spend per model and agent kind, spend + run activity per workspace /
@@ -206,7 +207,7 @@ watch(
           <!-- Filters in ONE row above the charts: window, then board scope. -->
           <div class="ms-auto flex flex-wrap items-center gap-1.5">
             <select
-              class="rounded-lg border border-default bg-default px-2.5 py-1.5 text-[12px] text-default"
+              class="rounded-lg border border-default bg-default px-2.5 py-1.5 text-xs text-default"
               :value="reports.workspaceFilter ?? ''"
               :aria-label="t('reports.filter.board')"
               data-testid="reports-board-filter"
@@ -219,7 +220,7 @@ watch(
                 {{ board.name }}
               </option>
             </select>
-            <div class="me-1 flex rounded-lg border border-default p-0.5 text-[12px]">
+            <div class="me-1 flex rounded-lg border border-default p-0.5 text-xs">
               <button
                 v-for="opt in WINDOWS"
                 :key="opt.value"
@@ -277,7 +278,7 @@ watch(
           </div>
 
           <div v-else-if="view" class="mx-auto flex max-w-5xl flex-col gap-6">
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{
                 t('reports.period', {
                   from: d(new Date(view.since), 'short'),
@@ -308,7 +309,7 @@ watch(
             </p>
             <p
               v-else-if="rollupState === 'current'"
-              class="text-[11px] text-dimmed"
+              class="text-2xs text-dimmed"
               data-testid="reports-rollup-current"
             >
               {{
@@ -320,9 +321,9 @@ watch(
 
             <!-- Headline totals. A stat tile, not a chart: these are single numbers. -->
             <section>
-              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+              <SectionLabel as="h2" class="mb-2">
                 {{ t('reports.totals.title') }}
-              </h2>
+              </SectionLabel>
               <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                 <div class="rounded-lg border border-default bg-default/40 p-3">
                   <p
@@ -352,16 +353,16 @@ watch(
                   <p class="text-xs text-dimmed">{{ t('reports.totals.tokens') }}</p>
                 </div>
               </div>
-              <p class="mt-1.5 text-[10px] text-dimmed">
+              <p class="mt-1.5 text-3xs text-dimmed">
                 {{ t('reports.totals.illustrative') }}
               </p>
             </section>
 
             <!-- Spend over time. One axis, two stacked series, legend always present. -->
             <section>
-              <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+              <SectionLabel as="h2" class="mb-2">
                 {{ t('reports.trend.title') }}
-              </h2>
+              </SectionLabel>
               <div class="rounded-lg border border-default bg-default/40 p-4">
                 <div v-if="!hasSpend" class="py-6 text-center text-xs text-dimmed">
                   {{ t('reports.trend.empty') }}
@@ -383,7 +384,7 @@ watch(
                     />
                   </div>
                 </div>
-                <div class="mt-2 flex items-center gap-4 text-[11px] text-dimmed">
+                <div class="mt-2 flex items-center gap-4 text-2xs text-dimmed">
                   <span class="flex items-center gap-1" :title="t('reports.legend.meteredHint')">
                     <span class="h-2 w-2 rounded-sm bg-app-secondary-500" />{{
                       t('reports.legend.metered')
@@ -404,9 +405,9 @@ watch(
             <!-- Spend by model + by agent kind: the two axes a run has no single value for. -->
             <div class="grid gap-6 md:grid-cols-2">
               <section>
-                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+                <SectionLabel as="h2" class="mb-2">
                   {{ t('reports.spend.byModel') }}
-                </h2>
+                </SectionLabel>
                 <ReportsSpendBreakdown
                   :rows="view.spend.byModel"
                   :currency="currency"
@@ -415,9 +416,9 @@ watch(
                 />
               </section>
               <section>
-                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+                <SectionLabel as="h2" class="mb-2">
                   {{ t('reports.spend.byAgentKind') }}
-                </h2>
+                </SectionLabel>
                 <ReportsSpendBreakdown
                   :rows="view.spend.byAgentKind"
                   :currency="currency"
@@ -434,9 +435,9 @@ watch(
                  breakdowns the projection caps, and each says so under its own card. -->
             <div class="grid gap-6 md:grid-cols-2">
               <section>
-                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+                <SectionLabel as="h2" class="mb-2">
                   {{ t('reports.spend.byTicket') }}
-                </h2>
+                </SectionLabel>
                 <ReportsSpendBreakdown
                   :rows="view.spend.byTicket"
                   :currency="currency"
@@ -446,9 +447,9 @@ watch(
                 />
               </section>
               <section>
-                <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-dimmed">
+                <SectionLabel as="h2" class="mb-2">
                   {{ t('reports.spend.byRun') }}
-                </h2>
+                </SectionLabel>
                 <ReportsSpendBreakdown
                   :rows="view.spend.byRun"
                   :currency="currency"
@@ -462,10 +463,10 @@ watch(
             <!-- The shared axis: spend AND activity for the same grouping, side by side. -->
             <section class="flex flex-col gap-3">
               <div class="flex flex-wrap items-center gap-2">
-                <h2 class="text-xs font-semibold uppercase tracking-wide text-dimmed">
+                <SectionLabel as="h2">
                   {{ t('reports.breakdown.title') }}
-                </h2>
-                <div class="flex rounded-lg border border-default p-0.5 text-[12px]">
+                </SectionLabel>
+                <div class="flex rounded-lg border border-default p-0.5 text-xs">
                   <button
                     v-for="opt in DIMENSIONS"
                     :key="opt.value"
@@ -484,7 +485,7 @@ watch(
               </div>
               <div class="grid gap-6 md:grid-cols-2">
                 <div>
-                  <h3 class="mb-2 text-[11px] text-dimmed">
+                  <h3 class="mb-2 text-2xs text-dimmed">
                     {{ t('reports.spend.heading') }}
                   </h3>
                   <ReportsSpendBreakdown
@@ -495,7 +496,7 @@ watch(
                   />
                 </div>
                 <div>
-                  <h3 class="mb-2 text-[11px] text-dimmed">
+                  <h3 class="mb-2 text-2xs text-dimmed">
                     {{ t('reports.activity.heading') }}
                   </h3>
                   <div class="rounded-lg border border-default bg-default/40 p-4">
@@ -532,7 +533,7 @@ watch(
                           </div>
                           <!-- The status counts in text: the reserved status hues are
                                red-green adjacent, so identity is never colour alone. -->
-                          <p class="mt-1 flex flex-wrap gap-x-2 text-[10px] text-dimmed">
+                          <p class="mt-1 flex flex-wrap gap-x-2 text-3xs text-dimmed">
                             <span v-for="segment in activitySegments(row)" :key="segment.status">
                               {{ n(segment.count, 'decimal') }} {{ statusLabel(segment.status) }}
                             </span>
@@ -545,7 +546,7 @@ watch(
                           </p>
                         </li>
                       </ul>
-                      <div class="mt-3 flex flex-wrap items-center gap-3 text-[11px] text-dimmed">
+                      <div class="mt-3 flex flex-wrap items-center gap-3 text-2xs text-dimmed">
                         <span
                           v-for="status in ['done', 'failed', 'running', 'other'] as const"
                           :key="status"

package/app/components/panels/ReportsSpendBreakdown.vue

@@ -66,7 +66,7 @@ const max = computed(() => maxOf(props.rows, spendMagnitude))
             :style="{ width: `${segmentPct(row.subscriptionCost, max)}%` }"
           />
         </div>
-        <p class="mt-1 text-[10px] text-dimmed">
+        <p class="mt-1 text-3xs text-dimmed">
           {{ t('reports.spend.calls', { count: row.calls }, row.calls) }} ·
           {{
             t('reports.spend.tokens', {
@@ -77,7 +77,7 @@ const max = computed(() => maxOf(props.rows, spendMagnitude))
         </p>
       </li>
     </ul>
-    <p v-if="cap" class="mt-3 text-[10px] text-dimmed" :data-testid="`${testId}-capped`">
+    <p v-if="cap" class="mt-3 text-3xs text-dimmed" :data-testid="`${testId}-capped`">
       {{
         t('reports.spend.capped', { shown: n(cap.returned), omitted: n(cap.omitted) }, cap.omitted)
       }}

package/app/components/panels/ResultWindowShell.vue

@@ -39,6 +39,7 @@ import {
   RESULT_WINDOW_WIDTH_CLASS,
   type ResultWindowWidth,
 } from '~/components/panels/ResultWindowShell.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 /** A pipeline step reference — passed by step-result windows to surface the shared
  *  "restart from here" control. `StepRestartControl` self-hides for an off-path open
@@ -68,8 +69,8 @@ const props = withDefaults(
      * worse, not better.
      *
      * The obligation that comes with it: CONTINUOUS PROSE inside a `full` window carries its
-     * own reading measure (`PROSE_MEASURE_CLASS`, the step reader's own, over the same 13px
-     * `.reader-prose`), or the width lands as 200-character lines.
+     * own reading measure (`PROSE_MEASURE_CLASS`, the step reader's own, over the same
+     * `text-sm` `.reader-prose`), or the width lands as 200-character lines.
      *
      * The unit that obligation attaches to is the PARAGRAPH, not the section — which is the
      * distinction to get right, because "a findings list reads better at the full span" is
@@ -289,7 +290,7 @@ const panelClass = computed(() => [
           </span>
           <div class="min-w-0 flex-1">
             <h2 class="truncate text-sm font-semibold text-app-100">{{ title }}</h2>
-            <p v-if="subtitle" class="truncate text-[11px] text-muted">{{ subtitle }}</p>
+            <p v-if="subtitle" class="truncate text-2xs text-muted">{{ subtitle }}</p>
           </div>
           <!-- Window-specific header content (status badges, counts). -->
           <slot name="header-extras" />
@@ -329,16 +330,16 @@ const panelClass = computed(() => [
             @click="effortOpen = !effortOpen"
           >
             <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('panels.stepDetail.effort.heading') }}
-            </span>
+            </SectionLabel>
             <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
+              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
               :class="chipClass"
             >
               {{ t('panels.stepDetail.effort.outOfTen', { value: effortReport.difficulty }) }}
             </span>
-            <span v-if="hint" class="min-w-0 flex-1 truncate text-[12px] text-muted">
+            <span v-if="hint" class="min-w-0 flex-1 truncate text-xs text-muted">
               {{ hint }}
             </span>
             <UIcon
@@ -371,11 +372,11 @@ const panelClass = computed(() => [
               class="h-3.5 w-3.5 shrink-0"
               :class="validationReport.passed ? 'text-app-success-400' : 'text-app-error-400'"
             />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('panels.stepDetail.validation.heading') }}
-            </span>
+            </SectionLabel>
             <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium tabular-nums"
+              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium tabular-nums"
               :class="
                 validationReport.passed
                   ? 'bg-app-success-500/15 text-app-success-300'
@@ -388,7 +389,7 @@ const panelClass = computed(() => [
                   : t('panels.stepDetail.validation.failed')
               }}
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
+            <span class="min-w-0 flex-1 truncate text-xs text-muted">
               {{
                 t('panels.stepDetail.validation.attempts', {
                   attempts: validationReport.attempts,
@@ -427,11 +428,11 @@ const panelClass = computed(() => [
               class="h-3.5 w-3.5 shrink-0"
               :class="reproductionKeys!.proven ? 'text-app-success-400' : 'text-app-warning-400'"
             />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('panels.stepDetail.reproduction.heading') }}
-            </span>
+            </SectionLabel>
             <span
-              class="shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium"
+              class="shrink-0 rounded-sm px-1.5 py-0.5 text-2xs font-medium"
               :class="
                 reproductionKeys!.proven
                   ? 'bg-app-success-500/15 text-app-success-300'
@@ -440,7 +441,7 @@ const panelClass = computed(() => [
             >
               {{ t(reproductionKeys!.chip) }}
             </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
+            <span class="min-w-0 flex-1 truncate text-xs text-muted">
               {{ t(reproductionKeys!.verdict) }}
             </span>
             <UIcon
@@ -471,10 +472,10 @@ const panelClass = computed(() => [
             @click="binaryOutputsOpen = !binaryOutputsOpen"
           >
             <UIcon name="i-lucide-image" class="h-3.5 w-3.5 shrink-0 text-muted" />
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('binaryOutput.heading') }}
-            </span>
-            <span class="min-w-0 flex-1 truncate text-[12px] text-muted">
+            </SectionLabel>
+            <span class="min-w-0 flex-1 truncate text-xs text-muted">
               {{ binaryOutputSummary }}
             </span>
             <UIcon

package/app/components/panels/RunDetailLoadState.vue

@@ -25,7 +25,7 @@ const error = computed(() => execution.fullError(props.instanceId))
 <template>
   <div
     v-if="loading || error"
-    class="flex items-center gap-2 border-b border-default px-4 py-2 text-[11px]"
+    class="flex items-center gap-2 border-b border-default px-4 py-2 text-2xs"
     :class="error ? 'text-app-error-300' : 'text-muted'"
     data-testid="run-detail-load-state"
   >

package/app/components/panels/StepContainerStatus.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The per-run container lifecycle for a container-backed step: its status (spinning up /
 // running / errored / reclaimed), the live phase (preparing the checkout vs the agent
@@ -94,7 +95,7 @@ const { copy: copyText } = useCopyToClipboard()
          live phase (preparing the checkout vs the agent making calls), and the
          container's id + reachable URL once up. -->
     <div
-      class="rounded-lg border px-3 py-2 text-[12px]"
+      class="rounded-lg border px-3 py-2 text-xs"
       :class="CONTAINER_STATUS_META[containerStatus].cls"
     >
       <div class="flex items-center gap-2">
@@ -111,10 +112,10 @@ const { copy: copyText } = useCopyToClipboard()
       </div>
       <dl v-if="step.container?.id || step.container?.url" class="mt-2 space-y-1">
         <div v-if="step.container?.id" class="flex items-center gap-2">
-          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="dt" class="shrink-0">
             {{ t('panels.stepMeta.container.id') }}
-          </dt>
-          <dd class="truncate font-mono text-[11px] text-toned" :title="step.container.id">
+          </SectionLabel>
+          <dd class="truncate font-mono text-2xs text-toned" :title="step.container.id">
             {{ step.container.id }}
           </dd>
           <UButton
@@ -129,10 +130,10 @@ const { copy: copyText } = useCopyToClipboard()
           />
         </div>
         <div v-if="step.container?.url" class="flex items-center gap-2">
-          <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="dt" class="shrink-0">
             {{ t('panels.stepMeta.container.url') }}
-          </dt>
-          <dd class="truncate font-mono text-[11px] text-toned">
+          </SectionLabel>
+          <dd class="truncate font-mono text-2xs text-toned">
             <a
               :href="step.container.url"
               target="_blank"

package/app/components/panels/StepDelegatedStatus.vue

@@ -6,6 +6,7 @@ import {
   externalRunHref,
 } from './StepDelegatedStatus.logic'
 import type { PipelineStep } from '~/types/execution'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The EXTERNAL work a delegated step dispatched: which registered executor is running it, what it
 // is doing, and the link to that system's own logs, which is the affordance everything else here
@@ -77,7 +78,7 @@ const { copy: copyText } = useCopyToClipboard()
   <!-- Single conditional root so a passed-through `class` (e.g. layout margin) applies cleanly.
        Renders nothing for a step that dispatched nowhere external. -->
   <div v-if="record" data-testid="step-delegated-status">
-    <div class="rounded-lg border px-3 py-2 text-[12px]" :class="statusView.meta.cls">
+    <div class="rounded-lg border px-3 py-2 text-xs" :class="statusView.meta.cls">
       <div class="flex items-center gap-2">
         <UIcon
           :name="statusView.meta.icon"
@@ -98,13 +99,13 @@ const { copy: copyText } = useCopyToClipboard()
       <!-- The PRIMARY affordance: the executor's own logs. It is the only place the detail of
            what happened exists, which is why a failed delegated step without it is a dead end. -->
       <div v-if="record.url" class="mt-2 flex items-center gap-2">
-        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt" class="shrink-0">
           {{ t('panels.stepMeta.delegated.run') }}
-        </dt>
+        </SectionLabel>
         <!-- Linked only when the executor's URL is `http(s)`. Anything else is shown as the text
              it is: refusing to follow it is right, and hiding it would report a run that named
              no link at all. -->
-        <dd class="truncate font-mono text-[11px] text-toned">
+        <dd class="truncate font-mono text-2xs text-toned">
           <a
             v-if="runHref"
             :href="runHref"
@@ -132,35 +133,35 @@ const { copy: copyText } = useCopyToClipboard()
            request. Rendered here because the platform holds nothing else about that run's
            product. -->
       <div v-if="landedBranch" class="mt-2 flex items-center gap-2">
-        <dt class="shrink-0 text-[11px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="dt" class="shrink-0">
           {{ t('panels.stepMeta.delegated.branch') }}
-        </dt>
-        <dd class="truncate font-mono text-[11px] text-toned">{{ landedBranch }}</dd>
+        </SectionLabel>
+        <dd class="truncate font-mono text-2xs text-toned">{{ landedBranch }}</dd>
       </div>
 
       <!-- What the platform could not do, stated rather than left to read as a clean outcome:
            a cancelled run whose executor declares no cancel is still going. -->
-      <p v-if="record.note" class="mt-2 text-[11px] text-toned">{{ record.note }}</p>
+      <p v-if="record.note" class="mt-2 text-2xs text-toned">{{ record.note }}</p>
     </div>
 
     <!-- "Absent" and "zero" must never render the same. Without this line a delegated step shows
          no tokens beside a container step that shows some, and the only available reading is that
          it was free. -->
-    <p v-if="usageUnreported" class="mt-2 text-[11px] text-dimmed">
+    <p v-if="usageUnreported" class="mt-2 text-2xs text-dimmed">
       {{ t('panels.stepMeta.delegated.usageNotReported', { executor: executorName }) }}
     </p>
 
     <!-- Earlier attempts. Kept across a re-run on purpose: the previous run's logs are the
          evidence for why this step is being run again, and the platform holds nothing else. -->
     <div v-if="priorAttempts.length" class="mt-3">
-      <div class="text-[11px] uppercase tracking-wide text-dimmed">
+      <SectionLabel>
         {{ t('panels.stepMeta.delegated.earlierAttempts') }}
-      </div>
+      </SectionLabel>
       <ul class="mt-1 space-y-1">
         <li
           v-for="(attempt, index) in priorAttempts"
           :key="`${attempt.startedAt}-${index}`"
-          class="flex items-center gap-2 text-[11px] text-muted"
+          class="flex items-center gap-2 text-2xs text-muted"
         >
           <span class="truncate">{{
             attempt.outcome || t('panels.stepMeta.delegated.noOutcome')

package/app/components/panels/StepEffortReport.vue

@@ -10,6 +10,7 @@
 // second one plus a nested border would just be chrome inside chrome.
 import type { AgentEffortReport } from '~/types/execution'
 import { effortBand } from '~/utils/effort'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = withDefaults(
   defineProps<{ report: AgentEffortReport; variant?: 'card' | 'flat' }>(),
@@ -37,16 +38,13 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
       variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
   >
-    <div
-      v-if="variant === 'card'"
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel v-if="variant === 'card'" class="mb-2 flex items-center gap-1.5">
       <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.effort.heading') }}</span>
-    </div>
+    </SectionLabel>
 
     <div class="flex items-center gap-2">
-      <span class="text-[12px] text-toned" :title="t('panels.stepDetail.effort.difficultyHint')">
+      <span class="text-xs text-toned" :title="t('panels.stepDetail.effort.difficultyHint')">
         {{ t('panels.stepDetail.effort.difficulty') }}
       </span>
       <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-accented/60">
@@ -58,38 +56,35 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
       </div>
       <span
         data-testid="step-effort-difficulty"
-        class="text-[12px] font-medium text-default"
+        class="text-xs font-medium text-default"
         :title="t('panels.stepDetail.effort.difficultyHint')"
       >
         {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
       </span>
     </div>
 
-    <p
-      v-if="report.summary"
-      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-toned"
-    >
+    <p v-if="report.summary" class="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-toned">
       {{ report.summary }}
     </p>
 
     <div v-if="report.reducedEffectiveness" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="p">
         {{ t('panels.stepDetail.effort.reduced') }}
-      </p>
-      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-toned">
+      </SectionLabel>
+      <p class="mt-0.5 whitespace-pre-wrap text-xs text-toned">
         {{ report.reducedEffectiveness }}
       </p>
     </div>
 
     <div v-if="report.obstacles?.length" class="mt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="p">
         {{ t('panels.stepDetail.effort.obstacles') }}
-      </p>
+      </SectionLabel>
       <ul class="mt-0.5 space-y-1">
         <li
           v-for="(obstacle, i) in report.obstacles"
           :key="i"
-          class="flex items-start gap-1.5 text-[12px] text-toned"
+          class="flex items-start gap-1.5 text-xs text-toned"
         >
           <UIcon
             name="i-lucide-alert-triangle"

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>