@cat-factory/app 0.307.1 → 0.309.0

package/app/components/palettes/AgentPalette.vue

@@ -6,6 +6,7 @@ import AgentTierSelect from '~/components/palettes/AgentTierSelect.vue'
 import PipelinePurposeSelect from '~/components/palettes/PipelinePurposeSelect.vue'
 import { groupAgentPalette, narrowAgentPalette } from '~/utils/agentPalette'
 import { AGENT_CATEGORIES, OBSERVABILITY_GATE_ARCHETYPE } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const agents = useAgentsStore()
@@ -57,7 +58,7 @@ function toggle(id: string) {
 
 <template>
   <div class="space-y-2">
-    <p class="px-1 text-[11px] text-dimmed">{{ t('palette.hint') }}</p>
+    <p class="px-1 text-2xs text-dimmed">{{ t('palette.hint') }}</p>
     <!-- The two catalog dials, one above the other: what this pipeline is for, and how deep into
          the agent catalog to look. Both narrow the sections below, and each states its own count.
          Stacked rather than side by side because the palette column is a third of the slideover:
@@ -73,9 +74,10 @@ function toggle(id: string) {
     </div>
     <div class="space-y-2">
       <section v-for="g in groups" :key="g.id">
-        <button
+        <SectionLabel
+          as="button"
           type="button"
-          class="flex w-full items-center gap-1.5 rounded px-1 py-1 text-start text-[11px] font-semibold uppercase tracking-wide text-muted transition hover:text-default"
+          class="flex w-full items-center gap-1.5 rounded-sm px-1 py-1 text-start transition hover:text-default"
           @click="toggle(g.id)"
         >
           <UIcon
@@ -84,7 +86,7 @@ function toggle(id: string) {
           />
           <span>{{ g.label }}</span>
           <span class="ms-auto text-app-600">{{ g.agents.length }}</span>
-        </button>
+        </SectionLabel>
         <div v-if="!isCollapsed(g.id)" class="mt-1 space-y-1.5">
           <button
             v-for="a in g.agents"
@@ -103,7 +105,7 @@ function toggle(id: string) {
             </div>
             <div class="min-w-0">
               <div class="text-xs font-semibold text-app-100">{{ a.label }}</div>
-              <div class="truncate text-[10px] text-muted">{{ a.description }}</div>
+              <div class="truncate text-3xs text-muted">{{ a.description }}</div>
             </div>
             <UIcon name="i-lucide-plus" class="ms-auto h-4 w-4 shrink-0 text-dimmed" />
           </button>

package/app/components/palettes/AgentTierSelect.vue

@@ -60,7 +60,7 @@ const items = computed(() => [
         </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
+    <p v-if="props.hiddenCount" class="px-1 text-3xs text-dimmed">
       {{ t('agentTier.hidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>

package/app/components/palettes/PipelinePurposeSelect.vue

@@ -31,6 +31,7 @@ const PURPOSE_LABELS = computed<Record<PipelinePurpose, string>>(() => ({
   research: t('pipeline.builder.purposeOption.research'),
   planning: t('pipeline.builder.purposeOption.planning'),
   media: t('pipeline.builder.purposeOption.media'),
+  maintenance: t('pipeline.builder.purposeOption.maintenance'),
 }))
 
 // The button text. A stored purpose this build has no label for is NAMED as unrecognised and
@@ -71,7 +72,7 @@ const items = computed(() => [
         <span class="truncate"> {{ t('pipeline.builder.purposeLabel') }}: {{ current }} </span>
       </UButton>
     </UDropdownMenu>
-    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-dimmed">
+    <p v-if="props.hiddenCount" class="px-1 text-3xs text-dimmed">
       {{ t('palette.purposeHidden', { count: props.hiddenCount }, props.hiddenCount) }}
     </p>
   </div>

package/app/components/panels/AgentStepDetail.vue

@@ -29,6 +29,7 @@ import {
 } from '~/utils/pipelineRender'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -402,13 +403,13 @@ async function copyOutput() {
       class="hidden w-72 shrink-0 flex-col border-e border-default bg-default/60 md:flex"
     >
       <div class="border-b border-default px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+        <SectionLabel>
           {{ t('panels.stepDetail.contents') }}
-        </div>
+        </SectionLabel>
       </div>
       <nav class="flex-1 space-y-0.5 overflow-auto px-2 py-3">
         <button
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-sm transition"
           :class="
             activeId === 'step-details'
               ? 'bg-primary/15 font-medium text-primary'
@@ -421,7 +422,7 @@ async function copyOutput() {
         <button
           v-for="s in tocSections"
           :key="s.id"
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-sm transition"
           :class="
             activeId === s.id
               ? 'bg-primary/15 font-medium text-primary'
@@ -603,7 +604,7 @@ async function copyOutput() {
             data-testid="dedicated-park-redirect"
             :data-park="dedicatedPark"
           >
-            <p class="text-[13px] leading-relaxed text-app-warning-200/90">
+            <p class="text-sm leading-relaxed text-app-warning-200/90">
               {{ t(parkPresentation.noticeKey) }}
             </p>
             <UButton
@@ -640,7 +641,7 @@ async function copyOutput() {
             <li
               v-for="(note, i) in runNotes"
               :key="i"
-              class="flex items-start gap-1.5 text-[11px] leading-snug text-app-warning-300/80"
+              class="flex items-start gap-1.5 text-2xs leading-snug text-app-warning-300/80"
             >
               <UIcon name="i-lucide-info" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ note }}</span>
@@ -755,7 +756,7 @@ async function copyOutput() {
           <!-- edit-then-approve: a direct editor over the raw conclusions; the
                edits become the approved proposal that flows to the next step -->
           <section v-if="editing" class="scroll-mt-4">
-            <div class="mb-2 flex items-center gap-1.5 text-[11px] text-app-warning-400">
+            <div class="mb-2 flex items-center gap-1.5 text-2xs text-app-warning-400">
               <UIcon name="i-lucide-pencil" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">{{
                 t('panels.stepDetail.editingConclusions')
@@ -767,7 +768,7 @@ async function copyOutput() {
               autoresize
               size="sm"
               class="w-full"
-              :ui="{ base: 'font-mono text-[12px] leading-relaxed' }"
+              :ui="{ base: 'font-mono text-xs leading-relaxed' }"
               :placeholder="t('panels.stepDetail.editConclusionsPlaceholder')"
             />
           </section>
@@ -800,7 +801,7 @@ async function copyOutput() {
               <!-- eslint-disable-next-line vue/no-v-html -->
               <div
                 v-show="!collapsed[s.id]"
-                class="reader-prose mt-1 text-[13px] leading-relaxed text-toned"
+                class="reader-prose mt-1 text-sm leading-relaxed text-toned"
                 :class="[
                   s.depth > 0 ? 'ps-6' : '',
                   genericApprovalPending && !editing ? 'review-mode' : '',
@@ -829,25 +830,21 @@ async function copyOutput() {
       class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-muted bg-default/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-default lg:bg-default/60 lg:shadow-none lg:backdrop-blur-none"
     >
       <div class="border-b border-default px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-app-warning-400">
+        <div class="text-2xs font-semibold uppercase tracking-wide text-app-warning-400">
           {{
             editing
               ? t('panels.stepDetail.approveWithCorrections')
               : t('panels.stepDetail.reviewAndApprove')
           }}
         </div>
-        <p class="mt-1 text-[12px] text-muted">
+        <p class="mt-1 text-xs text-muted">
           {{ editing ? t('panels.stepDetail.editHint') : t('panels.stepDetail.reviewHint') }}
         </p>
         <!-- The gate's configured POLICY, when it has one. Both lines exist because an
            approve on such a gate legitimately may not advance the run: without the tally, a
            correctly-recorded approval is indistinguishable from a call that failed, and
            without the refusal a person would press a button the server answers 403. -->
-        <p
-          v-if="gateQuorum"
-          class="mt-1 text-[12px] text-app-warning-300/90"
-          data-testid="gate-quorum"
-        >
+        <p v-if="gateQuorum" class="mt-1 text-xs text-app-warning-300/90" data-testid="gate-quorum">
           {{
             t('panels.stepDetail.quorumProgress', {
               recorded: gateQuorum.recorded,
@@ -856,7 +853,7 @@ async function copyOutput() {
           }}
           <span v-if="viewerHasApproved">{{ t('panels.stepDetail.quorumYours') }}</span>
         </p>
-        <p v-if="gateRefusal" class="mt-1 text-[12px] text-muted" data-testid="gate-not-approver">
+        <p v-if="gateRefusal" class="mt-1 text-xs text-muted" data-testid="gate-not-approver">
           {{ t(GATE_REFUSAL_KEYS[gateRefusal]) }}
         </p>
       </div>
@@ -864,7 +861,7 @@ async function copyOutput() {
       <div class="flex-1 space-y-3 overflow-auto overscroll-contain px-4 py-3">
         <p
           v-if="editing"
-          class="rounded-lg border border-app-warning-500/30 bg-app-warning-500/5 p-3 text-[12px] leading-relaxed text-app-warning-200/90"
+          class="rounded-lg border border-app-warning-500/30 bg-app-warning-500/5 p-3 text-xs leading-relaxed text-app-warning-200/90"
         >
           {{ t('panels.stepDetail.editingNotice') }}
         </p>
@@ -875,11 +872,11 @@ async function copyOutput() {
             data-testid="step-review-composer"
             class="rounded-lg border border-primary/40 bg-primary/5 p-3"
           >
-            <div class="mb-1 text-[10px] uppercase tracking-wide text-primary">
+            <div class="mb-1 text-3xs uppercase tracking-wide text-primary">
               {{ t('panels.stepDetail.commentingOn') }}
             </div>
             <pre
-              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
+              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-2 text-2xs text-toned"
               >{{ draftTarget.quotedSource }}</pre>
             <UTextarea
               v-model="draftBody"
@@ -914,9 +911,9 @@ async function copyOutput() {
             class="rounded-lg border border-default bg-default/50 p-3"
           >
             <div class="mb-1 flex items-start justify-between gap-2">
-              <div class="text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel>
                 {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
-              </div>
+              </SectionLabel>
               <button
                 class="text-dimmed transition hover:text-app-error-400"
                 :title="t('panels.stepDetail.removeComment')"
@@ -926,15 +923,15 @@ async function copyOutput() {
               </button>
             </div>
             <pre
-              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-app-950/50 p-1.5 text-[10px] text-muted"
+              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/50 p-1.5 text-3xs text-muted"
               >{{ c.quotedSource }}</pre>
-            <p class="text-[12px] text-default">{{ c.body }}</p>
+            <p class="text-xs text-default">{{ c.body }}</p>
           </div>
 
           <div>
-            <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="label" class="mb-1 block">
               {{ t('panels.stepDetail.overallFeedback') }}
-            </label>
+            </SectionLabel>
             <UTextarea
               v-model="feedback"
               data-testid="step-review-feedback"
@@ -1005,14 +1002,14 @@ async function copyOutput() {
         </UButton>
         <p
           v-else-if="!proposalEditable"
-          class="text-[10px] text-dimmed"
+          class="text-3xs text-dimmed"
           data-testid="step-rendered-output-note"
         >
           {{ t('panels.stepDetail.renderedOutputNote') }}
         </p>
         <!-- Withheld only until the quorum is one approval away, so it says so rather than
            leaving a reviewer to wonder where the affordance went. -->
-        <p v-else class="text-[10px] text-dimmed" data-testid="step-quorum-edit-locked">
+        <p v-else class="text-3xs text-dimmed" data-testid="step-quorum-edit-locked">
           {{ t('panels.stepDetail.quorumEditLocked') }}
         </p>
 
@@ -1021,7 +1018,7 @@ async function copyOutput() {
           v-if="rejectArmed"
           class="rounded-lg border border-app-error-500/40 bg-app-error-500/5 p-2.5"
         >
-          <p class="mb-2 text-[11px] text-app-error-200">
+          <p class="mb-2 text-2xs text-app-error-200">
             {{ t('panels.stepDetail.rejectConfirmPrompt') }}
           </p>
           <div class="flex gap-2">
@@ -1073,7 +1070,7 @@ async function copyOutput() {
             {{ t('panels.stepDetail.reject') }}
           </UButton>
         </div>
-        <p class="text-[10px] text-dimmed">
+        <p class="text-3xs text-dimmed">
           {{ t('panels.stepDetail.requestChangesHint') }}
         </p>
       </div>

package/app/components/panels/AttemptEntryHeader.vue

@@ -23,11 +23,11 @@ function formatClock(ms: number | null | undefined, fmt: 'short' | 'long'): stri
 <template>
   <div class="flex items-center gap-2">
     <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" :class="iconClass" />
-    <span class="text-[13px] font-medium text-default">{{ label }}</span>
+    <span class="text-sm font-medium text-default">{{ label }}</span>
     <UBadge :color="outcome === 'failed' ? 'error' : 'neutral'" variant="subtle" size="sm">{{
       outcomeLabel
     }}</UBadge>
-    <span v-if="formatClock(at, dateFormat ?? 'short')" class="ms-auto text-[11px] text-dimmed">{{
+    <span v-if="formatClock(at, dateFormat ?? 'short')" class="ms-auto text-2xs text-dimmed">{{
       formatClock(at, dateFormat ?? 'short')
     }}</span>
   </div>

package/app/components/panels/DecisionModal.vue

@@ -93,7 +93,7 @@ async function choose(option: string) {
             {{ opt }}
           </UButton>
         </div>
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('panels.decision.visualizationHint') }}
         </p>
       </div>

package/app/components/panels/GenericStructuredResultView.vue

@@ -11,6 +11,7 @@ import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -71,18 +72,18 @@ const customJson = computed<string | null>(() => {
         <MarkdownProse
           v-if="step?.output"
           :text="step.output"
-          class="mb-4 text-[13px] leading-relaxed text-toned"
+          class="mb-4 text-sm leading-relaxed text-toned"
         />
 
         <template v-if="customJson">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('panels.structuredResult.structuredOutput') }}
-            </h3>
+            </SectionLabel>
             <CopyButton :text="customJson" class="-my-1" />
           </div>
           <pre
-            class="overflow-x-auto rounded-lg border border-default bg-app-950/60 p-3 text-[12px] leading-relaxed text-default"
+            class="overflow-x-auto rounded-lg border border-default bg-app-950/60 p-3 text-xs leading-relaxed text-default"
           ><code>{{ customJson }}</code></pre>
         </template>
 
@@ -92,7 +93,7 @@ const customJson = computed<string | null>(() => {
         >
           <UIcon name="i-lucide-braces" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
-          <p class="max-w-sm text-[11px] text-dimmed">
+          <p class="max-w-sm text-2xs text-dimmed">
             {{ t('panels.structuredResult.noResultHint') }}
           </p>
         </div>

package/app/components/panels/InspectorPanel.vue

@@ -10,6 +10,7 @@ import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import BootstrapRunSteps from '~/components/bootstrap/BootstrapRunSteps.vue'
 import { BLUEPRINT_AGENT_KIND } from '@cat-factory/contracts'
 import { VCS_PROVIDER_ICONS } from '~/utils/vcs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -368,7 +369,10 @@ const showOriginalDescription = ref(false)
               <UBadge :color="statusMeta.chip" variant="subtle" size="sm">
                 {{ statusLabel }}
               </UBadge>
-              <span class="text-[10px] uppercase tracking-wide text-dimmed">{{ level }}</span>
+              <!-- The block's LEVEL, beside its status chip: a category this block is in, not a
+                   heading over what follows, so it keeps its own classes rather than adopting the
+                   eyebrow recipe (`common/SectionLabel.vue`). -->
+              <span class="text-3xs uppercase tracking-wide text-dimmed">{{ level }}</span>
             </div>
           </div>
         </div>
@@ -403,16 +407,16 @@ const showOriginalDescription = ref(false)
         <template v-if="frozenByRework">
           <div class="rounded-lg border border-app-success-900/60 bg-app-success-950/20 p-3">
             <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-success-400"
+              class="mb-1.5 flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-app-success-400"
             >
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.reworkedRequirements') }}
             </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
+            <p class="line-clamp-5 whitespace-pre-line text-sm leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
             <div class="mt-2 flex items-center justify-between gap-2">
-              <p class="text-[11px] text-dimmed">
+              <p class="text-2xs text-dimmed">
                 {{ t('panels.inspector.agentStepsUseDocument') }}
               </p>
               <UButton
@@ -464,23 +468,21 @@ const showOriginalDescription = ref(false)
             @change="saveDescription"
             @blur="saveDescription"
           />
-          <p v-if="isTask && !editable" class="flex items-center gap-1 text-[11px] text-dimmed">
+          <p v-if="isTask && !editable" class="flex items-center gap-1 text-2xs text-dimmed">
             <UIcon name="i-lucide-lock" class="h-3 w-3" />
             {{ t('panels.inspector.taskStartedLocked') }}
           </p>
 
           <!-- prior incorporated requirements kept as a base after a review-driven reset -->
           <div v-if="reqHasPriorDoc" class="rounded-lg border border-muted bg-elevated/40 p-3">
-            <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-            >
+            <SectionLabel class="mb-1.5 flex items-center gap-1.5">
               <UIcon name="i-lucide-history" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.lastIncorporatedRequirements') }}
-            </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="line-clamp-5 whitespace-pre-line text-sm leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
-            <p class="mt-2 text-[11px] text-dimmed">
+            <p class="mt-2 text-2xs text-dimmed">
               {{ t('panels.inspector.priorDocHint') }}
             </p>
           </div>
@@ -586,7 +588,7 @@ const showOriginalDescription = ref(false)
       >
         {{ t('panels.inspector.mapService') }}
       </UButton>
-      <p v-if="isFrame && !serviceRepo" class="text-[11px] text-dimmed">
+      <p v-if="isFrame && !serviceRepo" class="text-2xs text-dimmed">
         {{ t('panels.inspector.mapServiceNoRepo') }}
       </p>
 
@@ -613,7 +615,7 @@ const showOriginalDescription = ref(false)
            on a disabled button doesn't fire hover events. -->
       <p
         v-if="isTask && runBlockedReason"
-        class="flex items-start gap-1.5 text-[11px] text-app-warning-300/90"
+        class="flex items-start gap-1.5 text-2xs text-app-warning-300/90"
         data-testid="run-blocked-reason"
       >
         <UIcon name="i-lucide-lock" class="mt-px h-3 w-3 shrink-0" />

package/app/components/panels/MergerResultView.vue

@@ -11,6 +11,7 @@ import type { ChangeClass, MergeAxis, MergeDecision, WorkspaceRole } from '@cat-
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -217,15 +218,15 @@ const reasonText = computed(() => {
                   {{ changeClassLabel }}
                 </UBadge>
               </div>
-              <p class="mt-0.5 text-[13px] leading-relaxed text-toned">{{ reasonText }}</p>
+              <p class="mt-0.5 text-sm leading-relaxed text-toned">{{ reasonText }}</p>
             </div>
           </div>
 
           <!-- Scores vs the resolved preset's ceilings. -->
           <template v-if="axes.length">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('panels.mergerResult.scores') }}
-            </h3>
+            </SectionLabel>
             <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
               <div v-for="axis in axes" :key="axis.key" class="flex items-center gap-2">
                 <span class="w-20 shrink-0 text-xs text-muted">{{ axis.label }}</span>
@@ -242,7 +243,7 @@ const reasonText = computed(() => {
                 >
                   {{ n(axis.score, { key: 'percent' }) }}
                 </span>
-                <span class="w-24 shrink-0 text-end text-[10px] tabular-nums text-dimmed">
+                <span class="w-24 shrink-0 text-end text-3xs tabular-nums text-dimmed">
                   {{
                     t('panels.mergerResult.ceiling', {
                       value: n(axis.ceiling, { key: 'percent' }),
@@ -255,15 +256,15 @@ const reasonText = computed(() => {
 
           <!-- The agent's prose justification. -->
           <template v-if="decision.assessment?.rationale">
-            <h3 class="mb-2 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2 mt-4">
               {{ t('panels.mergerResult.rationale') }}
-            </h3>
+            </SectionLabel>
             <MarkdownProse
               :text="decision.assessment.rationale"
-              class="text-[13px] leading-relaxed text-toned"
+              class="text-sm leading-relaxed text-toned"
             />
           </template>
-          <p v-else class="text-[13px] italic leading-relaxed text-dimmed">
+          <p v-else class="text-sm italic leading-relaxed text-dimmed">
             {{ t('panels.mergerResult.noAssessment') }}
           </p>
         </template>
@@ -272,7 +273,7 @@ const reasonText = computed(() => {
         <MarkdownProse
           v-else-if="step?.output"
           :text="step.output"
-          class="text-[13px] leading-relaxed text-toned"
+          class="text-sm leading-relaxed text-toned"
         />
         <div
           v-else