@cat-factory/app 0.308.0 → 0.309.0

package/app/components/board/FailureHistoryList.vue

@@ -23,24 +23,24 @@ const ordered = computed(() => [...props.failures].reverse())
       class="rounded-md border border-default/80 bg-app-950/50 px-2.5 py-2"
       data-testid="agent-failure-history-entry"
     >
-      <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+      <div class="flex items-center gap-1.5 text-3xs text-dimmed">
         <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
         <time>{{ d(new Date(failure.occurredAt), 'long') }}</time>
       </div>
 
-      <p class="mt-1 text-[11px] leading-snug text-toned" :title="failure.message">
+      <p class="mt-1 text-2xs leading-snug text-toned" :title="failure.message">
         {{ failure.message }}
       </p>
 
-      <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
+      <p v-if="failure.hint" class="mt-1 text-3xs leading-snug text-dimmed">
         {{ failure.hint }}
       </p>
 
       <FailureDetail
         :detail="failure.detail"
         :message="failure.message"
-        summary-class="text-[10px] text-dimmed hover:text-toned"
-        pre-class="bg-app-950/80 text-[10px] text-muted"
+        summary-class="text-3xs text-dimmed hover:text-toned"
+        pre-class="bg-app-950/80 text-3xs text-muted"
       />
     </li>
   </ol>

package/app/components/board/RecurringPipelineModal.vue

@@ -12,6 +12,7 @@ import { BUILTIN_TASK_SOURCE_KINDS } from '@cat-factory/contracts'
 import { apiErrorReason } from '~/composables/api/errors'
 import { pipelineAllowedForSchedule } from '~/utils/pipeline'
 import { appliesIntakePredicate } from '~/utils/intakePredicates'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -453,7 +454,7 @@ async function add() {
           <USwitch v-model="onDemand" :disabled="onDemandLocked" size="sm" class="mt-0.5" />
           <div class="space-y-0.5">
             <p class="text-xs font-medium text-default">{{ t('board.recurring.onDemand') }}</p>
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{
                 onDemandLocked
                   ? t('board.recurring.onDemandLockedHint')
@@ -466,10 +467,10 @@ async function add() {
         <RecurringRecurrenceEditor v-if="!onDemand" v-model="recurrence" />
 
         <div v-if="filesTicket" class="space-y-3 rounded-lg border border-default p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{ t('board.recurring.issueTracker') }}
-          </p>
-          <p class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p class="text-2xs text-dimmed">
             {{ t('board.recurring.issueTrackerHint') }}
           </p>
           <div class="flex gap-1">
@@ -541,22 +542,22 @@ async function add() {
             <p class="text-xs font-medium text-default">
               {{ t('board.recurring.trackerTrigger') }}
             </p>
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{ t('board.recurring.trackerTriggerHint') }}
             </p>
           </div>
         </div>
 
         <div v-if="showIntake" class="space-y-3 rounded-lg border border-default p-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{ t('board.recurring.intake') }}
-          </p>
-          <p class="text-[11px] text-dimmed">
+          </SectionLabel>
+          <p class="text-2xs text-dimmed">
             {{ t('board.recurring.intakeHint') }}
           </p>
           <!-- Two different remedies: connect something, versus connect something ELSE. A source
                that is connected but cannot run a scheduled search is not an absent connection. -->
-          <p v-if="intakeSources.length === 0" class="text-[11px] text-app-warning-500">
+          <p v-if="intakeSources.length === 0" class="text-2xs text-app-warning-500">
             {{
               tasks.anyOffered
                 ? t('board.recurring.intakeNoIntakeSources')
@@ -626,7 +627,7 @@ async function add() {
           </UFormField>
 
           <template v-if="intakeSource">
-            <p class="text-[11px] text-dimmed">
+            <p class="text-2xs text-dimmed">
               {{
                 intakeDispatch === 'per-ticket'
                   ? t('board.recurring.intakeDispatchPerTicketHint')
@@ -677,7 +678,7 @@ async function add() {
           </template>
         </div>
 
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('board.recurring.footerHint') }}
         </p>
       </div>

package/app/components/board/ReviewFrictionDialog.vue

@@ -6,6 +6,7 @@
 // flag); the hard `blocked` tier does not. Driven by `ui.reviewFrictionContext`, mounted in
 // pages/index.vue. See backend/docs/review-debt-friction.md.
 import { computed } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -84,9 +85,9 @@ function createAnyway() {
         <p class="text-sm text-toned">{{ body }}</p>
 
         <div class="rounded-lg border border-muted bg-default/50 p-2">
-          <p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="p" class="mb-1.5 px-1">
             {{ t('errors.reviewFriction.waitingHeading') }}
-          </p>
+          </SectionLabel>
           <ul class="space-y-1">
             <li v-for="item in ctx.debt" :key="item.blockId">
               <button
@@ -98,7 +99,7 @@ function createAnyway() {
                 <span class="truncate text-default">
                   {{ item.title || t('errors.reviewFriction.untitled') }}
                 </span>
-                <span class="shrink-0 text-[12px] text-dimmed">
+                <span class="shrink-0 text-xs text-dimmed">
                   {{ t('errors.reviewFriction.waiting', { minutes: item.waitingMinutes }) }}
                 </span>
               </button>

package/app/components/board/StepExecutionHistory.vue

@@ -55,7 +55,7 @@ const entries = computed<Entry[]>(() =>
     >
       <!-- a superseded SUCCESSFUL attempt: its output, collapsible + copyable -->
       <template v-if="entry.kind === 'success'">
-        <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+        <div class="flex items-center gap-1.5 text-3xs text-dimmed">
           <UIcon name="i-lucide-check-circle-2" class="h-3 w-3 shrink-0 text-app-success-400/70" />
           <time>{{ d(new Date(entry.occurredAt), 'long') }}</time>
           <span class="text-app-success-400/80">{{ t('panels.stepDetail.attemptSucceeded') }}</span>
@@ -63,31 +63,31 @@ const entries = computed<Entry[]>(() =>
         <div class="relative mt-1">
           <CopyButton :text="entry.output.output" class="absolute end-1 top-1 z-10" />
           <pre
-            class="max-h-40 overflow-auto whitespace-pre-wrap rounded bg-app-950/80 p-1.5 pe-9 text-[10px] leading-snug text-toned"
+            class="max-h-40 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/80 p-1.5 pe-9 text-3xs leading-snug text-toned"
             >{{ entry.output.output }}</pre>
         </div>
-        <p v-if="entry.output.truncated" class="mt-1 text-[10px] text-dimmed">
+        <p v-if="entry.output.truncated" class="mt-1 text-3xs text-dimmed">
           {{ t('panels.stepDetail.outputTruncated') }}
         </p>
       </template>
 
       <!-- a FAILED attempt: mirrors FailureHistoryList's entry markup -->
       <template v-else>
-        <div class="flex items-center gap-1.5 text-[10px] text-dimmed">
+        <div class="flex items-center gap-1.5 text-3xs text-dimmed">
           <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-app-error-400/70" />
           <time>{{ d(new Date(entry.occurredAt), 'long') }}</time>
         </div>
-        <p class="mt-1 text-[11px] leading-snug text-toned" :title="entry.failure.message">
+        <p class="mt-1 text-2xs leading-snug text-toned" :title="entry.failure.message">
           {{ entry.failure.message }}
         </p>
-        <p v-if="entry.failure.hint" class="mt-1 text-[10px] leading-snug text-dimmed">
+        <p v-if="entry.failure.hint" class="mt-1 text-3xs leading-snug text-dimmed">
           {{ entry.failure.hint }}
         </p>
         <FailureDetail
           :detail="entry.failure.detail"
           :message="entry.failure.message"
-          summary-class="text-[10px] text-dimmed hover:text-toned"
-          pre-class="bg-app-950/80 text-[10px] text-muted"
+          summary-class="text-3xs text-dimmed hover:text-toned"
+          pre-class="bg-app-950/80 text-3xs text-muted"
         />
       </template>
     </li>

package/app/components/board/nodes/AgentChip.vue

@@ -52,7 +52,7 @@ const dim = computed(() => (props.size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'))
         />
       </span>
     </div>
-    <span v-if="size !== 'sm'" class="text-[10px] leading-none text-toned">
+    <span v-if="size !== 'sm'" class="text-3xs leading-none text-toned">
       {{ archetype.label }}
     </span>
   </div>

package/app/components/board/nodes/BlockNode.vue

@@ -13,7 +13,6 @@ import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useViewport } from '~/composables/useViewport'
 import { laneBodyHeightIn } from '~/utils/laneGeometry'
-
 // Vue Flow passes the node's `id` and `data` as props to custom node components.
 // Only frames are rendered as board nodes; their tasks live inside the card.
 const props = defineProps<{ id: string }>()
@@ -249,10 +248,10 @@ const ITEM_ICON: Record<string, string> = {
       }}</span>
     </div>
     <div class="px-3 py-3">
-      <p class="text-[11px] leading-snug text-muted">
+      <p class="text-2xs leading-snug text-muted">
         {{ t('board.frame.accessDenied.hint') }}
       </p>
-      <code class="mt-2 block truncate font-mono text-[11px] text-dimmed">{{ block.id }}</code>
+      <code class="mt-2 block truncate font-mono text-2xs text-dimmed">{{ block.id }}</code>
     </div>
   </div>
 
@@ -316,9 +315,9 @@ const ITEM_ICON: Record<string, string> = {
             }}
           </span>
         </div>
-        <div class="mt-1.5 h-1 w-full overflow-hidden rounded bg-app-warning-900/40">
+        <div class="mt-1.5 h-1 w-full overflow-hidden rounded-sm bg-app-warning-900/40">
           <div
-            class="h-full rounded bg-app-warning-400 transition-all"
+            class="h-full rounded-sm bg-app-warning-400 transition-all"
             :style="{ width: bootstrapPct + '%' }"
           />
         </div>
@@ -327,7 +326,7 @@ const ITEM_ICON: Record<string, string> = {
           <li
             v-for="(item, i) in bootstrapItems"
             :key="i"
-            class="flex items-start gap-1.5 text-[11px]"
+            class="flex items-start gap-1.5 text-2xs"
             :class="
               item.status === 'completed'
                 ? 'text-app-warning-200/60 line-through'
@@ -430,7 +429,7 @@ const ITEM_ICON: Record<string, string> = {
                     {{ t('board.frame.shared') }}
                   </UBadge>
                 </div>
-                <div class="text-[11px] text-muted">{{ typeMeta!.label }}</div>
+                <div class="text-2xs text-muted">{{ typeMeta!.label }}</div>
               </div>
             </div>
             <div class="flex items-center gap-1">
@@ -530,7 +529,7 @@ const ITEM_ICON: Record<string, string> = {
                stays is what the canvas can't show at a glance. -->
           <div
             v-if="modules.length || prTasks"
-            class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-dimmed"
+            class="flex items-center gap-2 text-3xs uppercase tracking-wide text-dimmed"
           >
             <span v-if="modules.length">{{
               t('board.frame.moduleCount', { count: modules.length }, modules.length)
@@ -564,7 +563,7 @@ const ITEM_ICON: Record<string, string> = {
             v-if="!hasTasks && access.canWriteBoard.value"
             type="button"
             data-testid="frame-add-task-empty"
-            class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-muted text-[11px] text-dimmed hover:border-app-500 hover:text-toned"
+            class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-muted text-2xs text-dimmed hover:border-app-500 hover:text-toned"
             @click.stop="addTask"
           >
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> {{ t('board.frame.addFirstTask') }}

package/app/components/board/nodes/EpicNode.vue

@@ -36,10 +36,10 @@ const selected = computed(() => ui.selectedBlockId === props.id)
   >
     <div class="flex items-center gap-1.5">
       <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 shrink-0 text-app-secondary-400" />
-      <span class="text-[10px] font-semibold uppercase tracking-wide text-app-secondary-300">{{
+      <span class="text-3xs font-semibold uppercase tracking-wide text-app-secondary-300">{{
         t('board.epic.label')
       }}</span>
-      <span class="ms-auto text-[10px] text-muted">{{ done }}/{{ total }}</span>
+      <span class="ms-auto text-3xs text-muted">{{ done }}/{{ total }}</span>
     </div>
     <div class="mt-1 truncate text-sm font-medium text-app-100" :title="block.title">
       {{ block.title }}
@@ -50,10 +50,10 @@ const selected = computed(() => ui.selectedBlockId === props.id)
         :style="{ width: total ? `${Math.round((done / total) * 100)}%` : '0%' }"
       />
     </div>
-    <div v-if="active" class="mt-1 text-[10px] text-muted">
+    <div v-if="active" class="mt-1 text-3xs text-muted">
       {{ t('board.epic.activeCount', { count: active }) }}
     </div>
-    <div v-else-if="total === 0" class="mt-1 text-[10px] text-dimmed">
+    <div v-else-if="total === 0" class="mt-1 text-3xs text-dimmed">
       {{ t('board.epic.noTasksYet') }}
     </div>
   </div>

package/app/components/board/nodes/FrameSwimlanes.vue

@@ -83,12 +83,12 @@ const withheldNote = computed(() => {
           class="h-3.5 w-3.5 shrink-0"
           :style="{ color: LANE_META.done.color }"
         />
-        <span class="text-[11px] font-semibold text-default">{{ t(LANE_META.done.labelKey) }}</span>
+        <span class="text-2xs font-semibold text-default">{{ t(LANE_META.done.labelKey) }}</span>
         <!-- The TOTAL, not what the caps admitted: "this service has finished 312 tasks" is the
              fact the lane carries, and counting only the visible cards would understate it by
              two orders of magnitude. -->
         <span
-          class="shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
+          class="shrink-0 rounded-sm px-1 text-3xs font-semibold tabular-nums"
           :style="{
             backgroundColor: tint(LANE_META.done.color),
             color: LANE_META.done.color,
@@ -96,7 +96,7 @@ const withheldNote = computed(() => {
           data-testid="lane-count-done"
           >{{ doneLane.total }}</span
         >
-        <span v-if="withheldNote" class="ms-auto truncate text-[10px] text-dimmed">{{
+        <span v-if="withheldNote" class="ms-auto truncate text-3xs text-dimmed">{{
           withheldNote
         }}</span>
       </button>
@@ -116,10 +116,7 @@ const withheldNote = computed(() => {
       >
         <!-- A zero cap is a real setting ("count them, show none"), so the strip explains why it
              has nothing in it rather than looking broken. -->
-        <p
-          v-if="doneSelection.shown.length === 0"
-          class="px-1 text-[10px] leading-snug text-app-600"
-        >
+        <p v-if="doneSelection.shown.length === 0" class="px-1 text-3xs leading-snug text-app-600">
           {{ t('board.lanes.done.allWithheld') }}
         </p>
         <LaneGroup

package/app/components/board/nodes/InitiativeCard.vue

@@ -82,17 +82,17 @@ function select() {
           {{ statusLabel }}
         </UBadge>
       </div>
-      <div class="mt-1 text-[10px] uppercase tracking-wide text-primary/70">
+      <div class="mt-1 text-3xs uppercase tracking-wide text-primary/70">
         {{ t('initiative.card.kind') }}
       </div>
       <div v-if="progress" class="mt-2 space-y-1">
-        <div class="h-1.5 overflow-hidden rounded bg-elevated">
+        <div class="h-1.5 overflow-hidden rounded-sm bg-elevated">
           <div
-            class="h-full rounded bg-primary"
+            class="h-full rounded-sm bg-primary"
             :style="{ width: `${Math.round((progress.settled / progress.total) * 100)}%` }"
           />
         </div>
-        <div class="text-[10px] text-muted">
+        <div class="text-3xs text-muted">
           {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
         </div>
       </div>

package/app/components/board/nodes/LaneGroup.vue

@@ -4,6 +4,7 @@ import { MODULE_META, taskTypeMeta } from '~/utils/catalog'
 import { LANE_GEOMETRY } from '~/utils/laneGeometry'
 import type { LaneGroup, LaneGroupKey } from '~/utils/laneSort'
 import { LANE_REASON_LABEL_KEYS, type LaneReason } from '~/utils/swimlanes'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 /**
  * One labelled run of cards inside a lane.
@@ -73,14 +74,11 @@ const icon = computed(() => {
   <div :data-drop-zone="dropZone ?? undefined" class="space-y-1.5">
     <!-- `none` grouping renders no header: one unlabelled group IS the flat lane, and a header
          saying "all of them" would be a row of chrome carrying no information. -->
-    <div
-      v-if="groupKey !== 'none'"
-      class="flex items-center gap-1 px-0.5 text-[10px] uppercase tracking-wide text-dimmed"
-    >
+    <SectionLabel v-if="groupKey !== 'none'" class="flex items-center gap-1 px-0.5">
       <UIcon v-if="icon" :name="icon" class="h-3 w-3 shrink-0" />
       <span class="truncate" :title="label">{{ label }}</span>
       <span class="ms-auto shrink-0 tabular-nums">{{ group.entries.length }}</span>
-    </div>
+    </SectionLabel>
     <div :class="layout === 'grid' ? 'flex flex-wrap items-start gap-2' : 'space-y-1.5'">
       <LaneTask
         v-for="entry in group.entries"

package/app/components/board/nodes/TaskCard.vue

@@ -327,7 +327,7 @@ function selectTask() {
            hover. Renders a built-in OR a deployment-registered custom type via `taskTypeMeta`. -->
       <span
         v-if="typeBadge"
-        class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded"
+        class="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm"
         :style="{ color: typeBadge.color, backgroundColor: tint(typeBadge.color) }"
         :title="typeBadge.label"
         :data-task-type-badge="task.taskType"
@@ -346,7 +346,7 @@ function selectTask() {
         "
       />
       <span
-        class="ms-auto truncate text-[9px] uppercase tracking-wide"
+        class="ms-auto truncate text-3xs uppercase tracking-wide"
         :class="
           runFailed
             ? 'text-app-error-400'
@@ -379,7 +379,7 @@ function selectTask() {
          title is the one always-rendered part of the body that no control can occupy. -->
     <div
       data-testid="task-title"
-      class="mt-1 line-clamp-2 break-words text-[11px] font-semibold leading-snug text-app-100"
+      class="mt-1 line-clamp-2 break-words text-2xs font-semibold leading-snug text-app-100"
       :title="task.title"
     >
       {{ task.title }}
@@ -415,7 +415,7 @@ function selectTask() {
       <span
         v-for="d in deps"
         :key="d.id"
-        class="inline-flex items-center gap-0.5 rounded bg-elevated/80 px-1 py-0.5 text-[9px]"
+        class="inline-flex items-center gap-0.5 rounded-sm bg-elevated/80 px-1 py-0.5 text-3xs"
         :class="d.status === 'done' ? 'text-muted' : 'text-app-warning-300'"
         :title="depLabel(d)"
       >
@@ -431,7 +431,7 @@ function selectTask() {
     <div class="nodrag mt-2 flex flex-wrap items-center gap-1">
       <!-- a reviewer gate folding/re-reviewing in the background: a working indicator,
            NOT a gate — the human is back on the board and summoned only if input is needed -->
-      <span v-if="reviewStage" class="inline-flex items-center gap-1 text-[9px] text-primary">
+      <span v-if="reviewStage" class="inline-flex items-center gap-1 text-3xs text-primary">
         <UIcon name="i-lucide-loader-circle" class="h-3 w-3 animate-spin" />
         {{ reviewStageLabel }}
       </span>
@@ -481,7 +481,7 @@ function selectTask() {
         </UButton>
         <span
           v-if="runnable && defaultPipeline"
-          class="inline-flex items-center gap-0.5 text-[9px] text-dimmed"
+          class="inline-flex items-center gap-0.5 text-3xs text-dimmed"
         >
           <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />{{ defaultPipeline.name }}
         </span>
@@ -539,7 +539,7 @@ function selectTask() {
       <!-- A merged task is the one people come back to READ, so its result stays openable
            rather than collapsing to a tick the moment it lands. -->
       <template v-else-if="task.status === 'done'">
-        <span class="inline-flex items-center gap-1 text-[9px] text-app-success-400">
+        <span class="inline-flex items-center gap-1 text-3xs text-app-success-400">
           <UIcon name="i-lucide-check-check" class="h-3 w-3" /> {{ t('board.task.implemented') }}
         </span>
         <UButton
@@ -565,7 +565,7 @@ function selectTask() {
       class="mt-2 flex flex-wrap items-center gap-1 border-t border-default pt-2"
     >
       <span
-        class="inline-flex items-center gap-1 rounded bg-app-secondary-500/15 px-1.5 py-0.5 text-[9px] text-app-secondary-200"
+        class="inline-flex items-center gap-1 rounded-sm bg-app-secondary-500/15 px-1.5 py-0.5 text-3xs text-app-secondary-200"
         :title="t('board.task.module', { name: task.moduleName })"
       >
         <UIcon :name="MODULE_META.icon" class="h-3 w-3" :style="{ color: MODULE_META.color }" />

package/app/components/board/nodes/TaskLane.vue

@@ -46,9 +46,9 @@ const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.leng
       :style="{ borderColor: tint(meta.color, 20) }"
     >
       <UIcon :name="meta.icon" class="h-3.5 w-3.5 shrink-0" :style="{ color: meta.color }" />
-      <span class="truncate text-[11px] font-semibold text-default">{{ t(meta.labelKey) }}</span>
+      <span class="truncate text-2xs font-semibold text-default">{{ t(meta.labelKey) }}</span>
       <span
-        class="ms-auto shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
+        class="ms-auto shrink-0 rounded-sm px-1 text-3xs font-semibold tabular-nums"
         :style="{ backgroundColor: tint(meta.color), color: meta.color }"
         :data-testid="`lane-count-${rendered.lane}`"
         >{{ rendered.total }}</span
@@ -65,7 +65,7 @@ const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.leng
       <!-- An empty lane SAYS it is empty. Left blank, "nothing needs you" and "the lane failed
            to render" look identical, and the first is worth stating: it is the answer a reader
            scanning the needs-you column is hoping for. -->
-      <p v-if="isEmpty" class="px-1 pt-2 text-[10px] leading-snug text-app-600">
+      <p v-if="isEmpty" class="px-1 pt-2 text-3xs leading-snug text-app-600">
         {{ t(meta.emptyKey) }}
       </p>
       <LaneGroup

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -12,6 +12,7 @@ import {
 import { lodAtLeast } from '~/composables/useSemanticZoom'
 import { prReviewPhase } from '~/utils/prReviewProgress'
 import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Drill-down inside a task card: the task's build-pipeline steps appear on hover (at any
 // zoom level) or once the `steps` zoom band is reached, and one band deeper (`subtasks`)
@@ -101,14 +102,14 @@ const ITEM_ICON: Record<string, string> = {
 
 <template>
   <div v-if="showSteps" class="mt-2 space-y-1 border-t border-default pt-2">
-    <div class="flex items-center gap-1 text-[9px] uppercase tracking-wide text-dimmed">
+    <SectionLabel class="flex items-center gap-1">
       <UIcon name="i-lucide-workflow" class="h-2.5 w-2.5" />
       {{ t('board.task.buildSteps') }}
-    </div>
-    <div v-for="(s, i) in steps" :key="i" class="rounded bg-default/60 px-1.5 py-1">
+    </SectionLabel>
+    <div v-for="(s, i) in steps" :key="i" class="rounded-sm bg-default/60 px-1.5 py-1">
       <button
         type="button"
-        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+        class="flex w-full cursor-pointer items-center gap-1 rounded-sm text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -117,7 +118,7 @@ const ITEM_ICON: Record<string, string> = {
           class="h-3 w-3 shrink-0"
           :style="{ color: agentKindMeta(s.agentKind).color }"
         />
-        <span class="truncate text-[10px] text-default">
+        <span class="truncate text-3xs text-default">
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
@@ -129,7 +130,7 @@ const ITEM_ICON: Record<string, string> = {
              live — its slice progress reads better as Slicing… / Reviewing X/Y slices. -->
         <span
           v-if="s.subtasks && s.subtasks.total > 0 && !prPhaseActive(s)"
-          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-muted"
+          class="ms-auto shrink-0 font-mono text-3xs tabular-nums text-muted"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
@@ -149,7 +150,7 @@ const ITEM_ICON: Record<string, string> = {
         v-if="prPhaseActive(s)"
         :step="s"
         :run-failed="runFailed"
-        class="ms-4 mt-1 text-[9px]"
+        class="ms-4 mt-1 text-3xs"
       />
 
       <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
@@ -162,7 +163,7 @@ const ITEM_ICON: Record<string, string> = {
           !reviews.isBackground(s.agentKind, props.taskId)
         "
         type="button"
-        class="mt-1 flex w-full items-center justify-center gap-1 rounded bg-app-warning-500 px-1.5 py-0.5 text-[9px] font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
+        class="mt-1 flex w-full items-center justify-center gap-1 rounded-sm bg-app-warning-500 px-1.5 py-0.5 text-3xs font-semibold text-app-warning-50 dark:text-app-warning-950 transition hover:bg-app-warning-400"
         @click.stop="ui.openApprovalDetail(instance.id, s.approval.id)"
       >
         <UIcon name="i-lucide-shield-check" class="h-2.5 w-2.5" />
@@ -172,10 +173,10 @@ const ITEM_ICON: Record<string, string> = {
       <!-- per-step subtask progress bar -->
       <div
         v-if="s.subtasks && s.subtasks.total > 0"
-        class="mt-1 h-0.5 w-full overflow-hidden rounded bg-accented/60"
+        class="mt-1 h-0.5 w-full overflow-hidden rounded-sm bg-accented/60"
       >
         <div
-          class="h-full rounded bg-primary transition-all"
+          class="h-full rounded-sm bg-primary transition-all"
           :style="{ width: `${(s.subtasks.completed / s.subtasks.total) * 100}%` }"
         />
       </div>
@@ -183,7 +184,7 @@ const ITEM_ICON: Record<string, string> = {
       <!-- conditionally-run companion (the gate's ci-fixer / conflict-resolver, or the
            Tester's fixer): a compact running/ran/skipped line, so a gate that's working
            its helper reads as actively fixing rather than a frozen subtask list. -->
-      <div v-if="companionByStep[i]" class="mt-1 flex items-center gap-1 text-[9px]">
+      <div v-if="companionByStep[i]" class="mt-1 flex items-center gap-1 text-3xs">
         <UIcon
           :name="agentKindMeta(companionByStep[i]!.kind).icon"
           class="h-2.5 w-2.5 shrink-0"
@@ -208,7 +209,7 @@ const ITEM_ICON: Record<string, string> = {
         <li
           v-for="(item, j) in s.subtasks.items"
           :key="j"
-          class="flex items-start gap-1 text-[9px]"
+          class="flex items-start gap-1 text-3xs"
           :class="
             item.status === 'completed'
               ? 'text-dimmed line-through'

package/app/components/bootstrap/AdoptionReviewModal.vue

@@ -9,6 +9,7 @@
 // is no suggestion at all as its own state, because "the two repositories agreed on everything"
 // and "the analysis never ran" would otherwise look identical and lead to opposite conclusions.
 import type { AdoptionSource, BootstrapJob } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ job: BootstrapJob }>()
 const emit = defineEmits<{ close: [] }>()
@@ -239,7 +240,7 @@ watch(open, (isOpen) => {
                 class="flex items-baseline gap-2"
               >
                 <span
-                  class="shrink-0 font-mono text-[10px] uppercase"
+                  class="shrink-0 font-mono text-3xs uppercase"
                   :class="entry.outcome === 'read' ? 'text-dimmed' : 'text-app-warning-400/80'"
                 >
                   {{ t(`bootstrap.adoption.survey.outcome.${entry.outcome}`) }}
@@ -289,9 +290,9 @@ watch(open, (isOpen) => {
               <div class="flex items-start justify-between gap-3">
                 <div>
                   <p class="text-sm font-medium text-app-100">{{ decision.title }}</p>
-                  <p class="text-[11px] uppercase tracking-wide text-dimmed">
+                  <SectionLabel as="p">
                     {{ t(`bootstrap.adoption.area.${decision.area}`) }}
-                  </p>
+                  </SectionLabel>
                 </div>
                 <UBadge v-if="!touched.has(decision.id)" color="warning" variant="subtle" size="sm">
                   {{ t('bootstrap.adoption.needsYou') }}
@@ -299,7 +300,7 @@ watch(open, (isOpen) => {
               </div>
 
               <div class="grid gap-2 text-xs sm:grid-cols-2">
-                <div class="rounded bg-default/60 p-2">
+                <div class="rounded-sm bg-default/60 p-2">
                   <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.monorepo') }}
                   </p>
@@ -307,7 +308,7 @@ watch(open, (isOpen) => {
                     {{ decision.monorepoPractice ?? t('bootstrap.adoption.side.nothing') }}
                   </p>
                 </div>
-                <div class="rounded bg-default/60 p-2">
+                <div class="rounded-sm bg-default/60 p-2">
                   <p class="mb-1 font-semibold text-toned">
                     {{ t('bootstrap.adoption.side.template') }}
                   </p>
@@ -321,7 +322,7 @@ watch(open, (isOpen) => {
 
               <!-- The evidence is what makes the suggestion checkable rather than an assertion,
                    so it is shown, not tucked away. -->
-              <p v-if="decision.evidence.length" class="text-[11px] text-dimmed">
+              <p v-if="decision.evidence.length" class="text-2xs text-dimmed">
                 {{ t('bootstrap.adoption.evidence') }}
                 <span class="font-mono">{{ decision.evidence.join(', ') }}</span>
               </p>