@cat-factory/app 0.308.0 → 0.310.0

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,13 +85,14 @@ 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
-                type="button"
+              <UButton
+                color="neutral"
+                variant="ghost"
                 class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated/60 disabled:opacity-50"
                 :disabled="pending"
                 @click="goToBlock(item.blockId)"
@@ -98,10 +100,10 @@ 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>
+              </UButton>
             </li>
           </ul>
         </div>

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

@@ -9,11 +9,11 @@ import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
 import AdoptionReviewModal from '~/components/bootstrap/AdoptionReviewModal.vue'
 import BootstrapRunSteps from '~/components/bootstrap/BootstrapRunSteps.vue'
+import IconButton from '~/components/common/IconButton.vue'
 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 +249,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 +316,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 +327,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 +430,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">
@@ -441,27 +441,27 @@ const ITEM_ICON: Record<string, string> = {
                    are `board.write`, hidden for a read-only viewer, who keeps the status badge
                    (the one view-only affordance here). -->
               <template v-if="access.canWriteBoard.value">
-                <UButton
+                <IconButton
                   class="nodrag"
                   data-testid="frame-add-task"
                   :size="isTouch ? 'sm' : 'xs'"
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-plus"
-                  :title="t('board.frame.addTaskTitle')"
+                  :label="t('board.frame.addTaskTitle')"
                   @click.stop="addTask"
                 />
-                <UButton
+                <IconButton
                   v-if="tasks.anyOffered"
                   class="nodrag"
                   :size="isTouch ? 'sm' : 'xs'"
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-ticket"
-                  :title="t('board.frame.createTaskFromIssueTitle')"
+                  :label="t('board.frame.createTaskFromIssueTitle')"
                   @click.stop="createTaskFromIssue"
                 />
-                <UButton
+                <IconButton
                   v-if="documents.connectedDesignSources.length > 0"
                   class="nodrag"
                   data-testid="frame-start-from-design"
@@ -469,7 +469,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-frame"
-                  :title="t('board.frame.startFromDesignTitle')"
+                  :label="t('board.frame.startFromDesignTitle')"
                   @click.stop="startFromDesign"
                 />
                 <!-- Recurring pipelines + initiatives are ADVANCED-tier authoring: both plan
@@ -480,7 +480,7 @@ const ITEM_ICON: Record<string, string> = {
                      badges its task card and opens its inspector panel, and an initiative is
                      still a block on the board with its own inspector — so what a basic-mode
                      user loses is the ability to author a new one, not sight of one. -->
-                <UButton
+                <IconButton
                   v-if="uiMode.isAdvanced"
                   class="nodrag"
                   data-testid="frame-add-recurring"
@@ -488,10 +488,10 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-repeat"
-                  :title="t('board.frame.addRecurringTitle')"
+                  :label="t('board.frame.addRecurringTitle')"
                   @click.stop="addRecurring"
                 />
-                <UButton
+                <IconButton
                   v-if="uiMode.isAdvanced"
                   class="nodrag"
                   data-testid="frame-add-initiative"
@@ -499,7 +499,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-milestone"
-                  :title="t('board.frame.createInitiativeTitle')"
+                  :label="t('board.frame.createInitiativeTitle')"
                   @click.stop="createInitiative"
                 />
                 <!-- Hunting a tracker board for a bug worth adopting is TRIAGE, not intake: it
@@ -507,7 +507,7 @@ const ITEM_ICON: Record<string, string> = {
                      engineer/PM judgement call. So it is dropped for a narrowed role, whose three
                      routes in (a new task, a task from a named ticket, a task from a design) all
                      start from work somebody has already decided to do. -->
-                <UButton
+                <IconButton
                   v-if="tasks.anyOffered && uiRole.fullSurface"
                   class="nodrag"
                   data-testid="frame-hunt-bugs"
@@ -515,7 +515,7 @@ const ITEM_ICON: Record<string, string> = {
                   variant="ghost"
                   color="neutral"
                   icon="i-lucide-radar"
-                  :title="t('board.frame.huntBugsTitle')"
+                  :label="t('board.frame.huntBugsTitle')"
                   @click.stop="huntBugs"
                 />
               </template>
@@ -530,7 +530,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)
@@ -560,15 +560,16 @@ const ITEM_ICON: Record<string, string> = {
 
           <FrameSwimlanes v-if="hasTasks" :frame-id="block.id" :lane-body-height="laneBodyHeight" />
 
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             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') }}
-          </button>
+          </UButton>
         </div>
       </div>
 

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

@@ -16,8 +16,9 @@ const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisi
 </script>
 
 <template>
-  <button
-    type="button"
+  <UButton
+    color="neutral"
+    variant="ghost"
     class="board-pulse flex items-center gap-1 rounded-full bg-app-warning-500 px-2 py-0.5 text-xs font-semibold text-app-warning-50 dark:text-app-warning-950 shadow-lg transition hover:bg-app-warning-400"
     @click.stop="$emit('open')"
   >
@@ -26,5 +27,5 @@ const displayLabel = computed(() => props.label ?? t('board.decisionBadge.decisi
     <span v-if="count && count > 1" class="rounded-full bg-app-warning-950/30 px-1">
       {{ count }}
     </span>
-  </button>
+  </UButton>
 </template>

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

@@ -67,8 +67,9 @@ const withheldNote = computed(() => {
          is the one lane whose emptiness says nothing a reader needs (a new service has merged
          nothing, which its three live lanes already show). -->
     <div v-if="doneLane && doneLane.total > 0" class="rounded-lg bg-default/40">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="nodrag flex w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left hover:bg-elevated/40"
         data-testid="done-lane-toggle"
         :aria-expanded="!laneView.doneLaneCollapsed"
@@ -83,12 +84,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,10 +97,10 @@ 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>
+      </UButton>
 
       <!-- The archive opens as a WIDE GRID: each group takes the strip's full width and wraps its
            own cards across it, and the groups stack. Wrapping the GROUPS instead read correctly
@@ -116,10 +117,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

@@ -5,6 +5,7 @@ import { STATUS_META, MODULE_META, taskTypeMeta } from '~/utils/catalog'
 import { composeRunOutcome, hasOutcomeToShow } from '~/utils/runOutcome'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import TaskPipelineMini from './TaskPipelineMini.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ taskId: string }>()
 
@@ -327,7 +328,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 +347,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'
@@ -360,15 +361,19 @@ function selectTask() {
         {{ statusText }}
       </span>
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
-      <button
-        type="button"
-        class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-dimmed hover:bg-elevated hover:text-app-warning-400 pointer-coarse:p-2.5"
-        :title="t('board.task.dragToConnect')"
+      <IconButton
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-spline"
+        class="nodrag shrink-0"
+        :label="t('board.task.dragToConnect')"
+        :ui="{
+          base: 'cursor-crosshair touch-none rounded-full p-0.5 text-dimmed hover:bg-elevated hover:text-app-warning-400 pointer-coarse:p-2.5',
+          leadingIcon: 'h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5',
+        }"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop
-      >
-        <UIcon name="i-lucide-spline" class="h-3 w-3 pointer-coarse:h-5 pointer-coarse:w-5" />
-      </button>
+      />
     </div>
 
     <!-- title gets a full-width row so long titles wrap to two lines rather than
@@ -379,7 +384,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 +420,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 +436,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 +486,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 +544,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 +570,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