@cat-factory/app 0.307.1 → 0.309.0

package/app/components/layout/BoardSwitcher.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { CloudProvider } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Account + board switching. Picks the active account (personal / org) and the
 // active board within it, and manages boards (new / rename / delete). The account
@@ -265,9 +266,9 @@ async function submitPrompt() {
           :name="accounts.activeAccount?.type === 'org' ? 'i-lucide-users' : 'i-lucide-user'"
           class="h-3.5 w-3.5 shrink-0 text-muted"
         />
-        <span class="truncate text-[11px] font-medium uppercase tracking-wide text-muted">
+        <SectionLabel as="span" class="truncate">
           {{ accounts.activeAccount?.name ?? t('layout.boardSwitcher.accountFallback') }}
-        </span>
+        </SectionLabel>
         <UIcon name="i-lucide-chevrons-up-down" class="ms-auto h-3.5 w-3.5 shrink-0 text-app-600" />
       </button>
     </UDropdownMenu>

package/app/components/layout/BoardToolbar.vue

@@ -153,14 +153,18 @@ const decisionItems = computed(() =>
          drops on narrow viewports) so the zoom level is never a mystery. -->
     <button
       type="button"
-      class="w-16 rounded text-center text-xs tabular-nums text-toned hover:bg-elevated focus-visible:ring-2 focus-visible:ring-app-400/60 sm:w-20"
+      class="w-16 rounded-sm text-center text-xs tabular-nums text-toned hover:bg-elevated focus-visible:ring-2 focus-visible:ring-app-400/60 sm:w-20"
       :title="t('board.toolbar.resetZoom')"
       :aria-label="t('board.toolbar.resetZoom')"
       data-testid="board-zoom-reset"
       @click="resetZoom()"
     >
       {{ zoomPct }}%
-      <span class="hidden text-[9px] uppercase tracking-wide text-dimmed sm:block">{{
+      <!-- The zoom band this readout is currently in, under the percentage: a second VALUE
+           annotating the first, not a heading over what follows, so it is not a
+           `common/SectionLabel.vue`. It stays a step smaller and unweighted so it does not compete
+           with the percentage inside a `w-20` button. -->
+      <span class="hidden text-3xs uppercase tracking-wide text-dimmed sm:block">{{
         lodLabel
       }}</span>
     </button>

package/app/components/layout/CommandBar.vue

@@ -6,6 +6,8 @@
 // from the add-task flow.) Commands are assembled from the live stores so only
 // available actions (connected integrations, etc.) show.
 
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 interface Command {
   id: string
   label: string
@@ -276,9 +278,9 @@ function indexOf(cmd: Command) {
           </p>
 
           <div v-for="group in groups" :key="group.name" class="mb-1">
-            <p class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p" class="px-2 pb-1 pt-2">
               {{ group.name }}
-            </p>
+            </SectionLabel>
             <button
               v-for="cmd in group.items"
               :key="cmd.id"

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -74,7 +74,7 @@ function openConfig(event: MouseEvent) {
               @click="ui.dismissDefaultProvision()"
             />
           </div>
-          <p class="mt-1 text-[13px] text-app-info-200/90">
+          <p class="mt-1 text-sm text-app-info-200/90">
             {{ t('layout.defaultTestEnvBanner.body') }}
           </p>
           <div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2">
@@ -92,7 +92,7 @@ function openConfig(event: MouseEvent) {
             <!-- The URL itself, shown so it can be read and copied, not just clicked. -->
             <a
               :href="configUrl"
-              class="min-w-0 truncate font-mono text-[11px] text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
+              class="min-w-0 truncate font-mono text-2xs text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
               data-testid="default-test-env-url"
               @click="openConfig"
             >

package/app/components/layout/IntegrationsHub.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { showOverrideField } from '~/utils/uiMode'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
 // can enable or link in — the ones that feed a run its context (source control, documents,
@@ -422,9 +423,9 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
             <button
               v-for="item in group.items"
@@ -443,7 +444,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                   <UBadge v-else-if="item.attention" color="warning" variant="subtle" size="sm">
                     {{ item.attentionLabel || t('layout.integrationsHub.status.needsAttention') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">{{
+                  <span v-else class="text-2xs text-dimmed">{{
                     t('layout.integrationsHub.status.notConnected')
                   }}</span>
                   <UBadge

package/app/components/layout/LanguageSwitcher.vue

@@ -50,7 +50,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
     >
       <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-muted" />
       <div v-if="!collapsed" class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+        <div class="truncate text-2xs uppercase tracking-wide text-muted">
           {{ t('language.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-highlighted">{{ current }}</div>

package/app/components/layout/ModelProvidersHub.vue

@@ -12,6 +12,8 @@
 // `ui.openFromModelProviders(...)`, so opening one closes this hub and gives that panel a
 // "Back to Model providers" control (IntegrationBackTitle). Layout mirrors the Integrations
 // hub row-for-row so the two read as siblings.
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 const apiKeys = useApiKeysStore()
@@ -200,9 +202,9 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
             <button
               v-for="item in group.items"
@@ -219,7 +221,7 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.modelProvidersHub.status.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">{{
+                  <span v-else class="text-2xs text-dimmed">{{
                     t('layout.modelProvidersHub.status.notConnected')
                   }}</span>
                   <UBadge
@@ -239,7 +241,7 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
               />
             </button>
           </div>
-          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-dimmed">{{ group.note }}</p>
+          <p v-if="group.note" class="mt-1.5 px-1 text-2xs text-dimmed">{{ group.note }}</p>
         </section>
       </div>
     </template>

package/app/components/layout/NotificationsInbox.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Notification } from '~/types/domain'
 import type { ReviewEffort } from '~/types/merge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The board's notification inbox: a bell with an open-count badge that opens a
 // panel of human-actionable items (a PR awaiting a merge decision, a completed
@@ -406,9 +407,9 @@ function revealDecision(n: Notification) {
 
     <template #content>
       <div class="max-h-[28rem] w-[min(24rem,92vw)] overflow-y-auto p-2">
-        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel class="px-2 py-1">
           {{ t('layout.notifications.heading') }}
-        </div>
+        </SectionLabel>
         <div
           v-for="n in notifications.open"
           :key="n.id"
@@ -437,18 +438,18 @@ function revealDecision(n: Notification) {
                 </button>
                 <span
                   v-if="isUrgent(n)"
-                  class="shrink-0 rounded bg-app-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-app-error-400"
+                  class="shrink-0 rounded-sm bg-app-error-500/20 px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wide text-app-error-400"
                 >
                   {{ t('layout.notifications.overdue') }}
                 </span>
               </div>
-              <p class="mt-0.5 text-[11px] leading-snug text-muted">{{ n.body }}</p>
+              <p class="mt-0.5 text-2xs leading-snug text-muted">{{ n.body }}</p>
               <a
                 v-if="n.payload?.prUrl"
                 :href="n.payload.prUrl"
                 target="_blank"
                 rel="noopener"
-                class="mt-1 inline-flex items-center gap-1 text-[11px] text-app-info-400 hover:underline"
+                class="mt-1 inline-flex items-center gap-1 text-2xs text-app-info-400 hover:underline"
               >
                 <UIcon name="i-lucide-external-link" class="h-3 w-3" />
                 {{ t('layout.notifications.openPr') }}
@@ -467,7 +468,7 @@ function revealDecision(n: Notification) {
                   v-for="run in failingRuns(n)"
                   :key="run.executionId"
                   :type="canOpenFailingRun(run) ? 'button' : undefined"
-                  class="flex items-center gap-1 text-start text-[11px]"
+                  class="flex items-center gap-1 text-start text-2xs"
                   :class="
                     canOpenFailingRun(run)
                       ? 'text-app-info-400 hover:underline'
@@ -486,7 +487,7 @@ function revealDecision(n: Notification) {
                     })
                   }}</span>
                 </component>
-                <span v-if="failingRunsOmitted(n) > 0" class="text-[11px] text-dimmed">
+                <span v-if="failingRunsOmitted(n) > 0" class="text-2xs text-dimmed">
                   {{ t('layout.notifications.failingRunsMore', { count: failingRunsOmitted(n) }) }}
                 </span>
               </div>

package/app/components/layout/PersonalSetupModal.vue

@@ -5,6 +5,8 @@
 // previously sat, confusingly, among the workspace-wide integrations. Each row reuses the
 // existing per-panel handlers via `ui.openFromPersonal(...)`, so opening one closes this
 // hub, reveals that panel, and gives it a "Back to My setup" control (IntegrationBackTitle).
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 const userSecrets = useUserSecretsStore()
@@ -117,9 +119,9 @@ const groups = computed<PersonalGroup[]>(() => {
         </p>
 
         <section v-for="group in groups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
             <button
               v-for="item in group.items"
@@ -135,7 +137,7 @@ const groups = computed<PersonalGroup[]>(() => {
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.personalSetup.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">
+                  <span v-else class="text-2xs text-dimmed">
                     {{ t('layout.personalSetup.notConnected') }}
                   </span>
                 </div>

package/app/components/layout/RolePrompt.vue

@@ -56,7 +56,7 @@ function pick(role: UiRole) {
         </div>
         <!-- The choice is not a commitment, and saying so is what makes the narrowed role
              pickable: it is one dropdown at the top of the sidebar to leave again. -->
-        <p class="text-[11px] leading-snug text-dimmed">{{ t('uiRole.prompt.change') }}</p>
+        <p class="text-2xs leading-snug text-dimmed">{{ t('uiRole.prompt.change') }}</p>
       </div>
     </template>
     <template #footer>

package/app/components/layout/SideBar.vue

@@ -20,6 +20,7 @@ import UiRoleSwitcher from '~/components/layout/UiRoleSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 import type { NavContribution } from '~/modular/nav-contributions'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 
@@ -248,12 +249,9 @@ watch(
       <template v-for="section in sidebarGroups" :key="section.group">
         <USeparator />
         <section>
-          <h2
-            v-if="!railed"
-            class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
-          >
+          <SectionLabel v-if="!railed" as="h2" class="mb-2 px-1">
             {{ t(section.labelKey) }}
-          </h2>
+          </SectionLabel>
           <div class="space-y-1.5">
             <UButton
               v-for="item in section.items"

package/app/components/layout/SpendWarningBanner.vue

@@ -54,7 +54,7 @@ async function resume() {
 
             <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.spent') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">
@@ -62,7 +62,7 @@ async function resume() {
                 </dd>
               </div>
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.budget') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">
@@ -70,7 +70,7 @@ async function resume() {
                 </dd>
               </div>
               <div class="rounded-lg bg-app-error-900/50 px-3 py-2">
-                <dt class="text-[11px] uppercase tracking-wide text-app-error-300/80">
+                <dt class="text-2xs uppercase tracking-wide text-app-error-300/80">
                   {{ t('layout.spendWarningBanner.tokens') }}
                 </dt>
                 <dd class="text-base font-semibold tabular-nums text-app-error-50">{{ tokens }}</dd>

package/app/components/layout/TranslationWarningBanner.vue

@@ -31,7 +31,7 @@ function dismiss() {
       v-if="show"
       data-testid="translation-warning"
       role="alert"
-      class="flex shrink-0 items-center gap-3 border-b border-app-warning-500/40 bg-app-warning-950/95 px-4 py-2 text-[13px] text-app-warning-100 shadow-lg backdrop-blur"
+      class="flex shrink-0 items-center gap-3 border-b border-app-warning-500/40 bg-app-warning-950/95 px-4 py-2 text-sm text-app-warning-100 shadow-lg backdrop-blur"
     >
       <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-app-warning-400" />
       <p class="min-w-0 flex-1">

package/app/components/layout/UiModeSwitcher.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UI_MODES, type UiMode } from '~/utils/uiMode'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Interface-tier picker, shown at the TOP of the sidebar under the board switcher. Basic mode
 // hides the power-user destinations and the less-used run options; advanced shows everything.
@@ -55,9 +56,9 @@ const pinnedTitle = computed(
   >
     <UIcon :name="icon" class="h-4 w-4 shrink-0 text-dimmed" />
     <div v-if="!collapsed" class="min-w-0 flex-1">
-      <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="truncate">
         {{ t('uiMode.switcher') }}
-      </div>
+      </SectionLabel>
       <div class="truncate text-xs font-medium text-toned">{{ currentLabel }}</div>
     </div>
     <UIcon v-if="!collapsed" name="i-lucide-lock" class="h-3.5 w-3.5 shrink-0 text-app-600" />
@@ -76,15 +77,15 @@ const pinnedTitle = computed(
     @click="uiMode.toggleMode()"
   >
     <UIcon :name="icon" class="h-4 w-4 shrink-0 text-primary" />
-    <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
+    <span class="w-full truncate text-center text-3xs font-medium uppercase text-toned">
       {{ currentLabel }}
     </span>
   </button>
 
   <div v-else data-testid="ui-mode-switcher" class="w-full">
-    <div class="mb-1 px-1 text-[10px] uppercase tracking-wide text-dimmed">
+    <SectionLabel class="mb-1 px-1">
       {{ t('uiMode.switcher') }}
-    </div>
+    </SectionLabel>
     <div
       role="group"
       :aria-label="t('uiMode.switcher')"
@@ -111,7 +112,7 @@ const pinnedTitle = computed(
 
   <!-- The one-line "what this tier gives you", so the choice is self-explanatory. Dropped in
        the collapsed rail, where the tooltip above carries the mode instead. -->
-  <p v-if="!collapsed" class="px-1 text-[10px] leading-snug text-dimmed">
+  <p v-if="!collapsed" class="px-1 text-3xs leading-snug text-dimmed">
     {{ t(MODE_HINTS[uiMode.mode]) }}
   </p>
 </template>

package/app/components/layout/UiRoleSwitcher.vue

@@ -47,7 +47,7 @@ const items = computed(() =>
       class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-muted bg-default/60 px-1 py-1.5 transition hover:border-primary/60 hover:bg-elevated/60"
     >
       <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
-      <span class="w-full truncate text-center text-[9px] font-medium uppercase text-toned">
+      <span class="w-full truncate text-center text-3xs font-medium uppercase text-toned">
         {{ currentLabel }}
       </span>
     </button>
@@ -62,7 +62,7 @@ const items = computed(() =>
     >
       <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-primary" />
       <div class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+        <div class="truncate text-2xs uppercase tracking-wide text-muted">
           {{ t('uiRole.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-default">{{ currentLabel }}</div>

package/app/components/media/ArtifactLightbox.vue

@@ -173,10 +173,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
     >
       <!-- Toolbar -->
       <div class="flex items-center gap-3 border-b border-default/60 px-4 py-2.5">
-        <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-default">
+        <span class="min-w-0 flex-1 truncate text-sm font-medium text-default">
           {{ current?.label ?? t('media.lightbox.fallbackTitle') }}
         </span>
-        <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-muted">
+        <span v-if="total > 1" class="shrink-0 text-xs tabular-nums text-muted">
           {{ t('media.lightbox.counter', { current: index + 1, total }) }}
         </span>
         <div class="flex shrink-0 items-center gap-1">
@@ -188,7 +188,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           >
             <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
           </button>
-          <span class="w-10 text-center text-[11px] tabular-nums text-dimmed">{{
+          <span class="w-10 text-center text-2xs tabular-nums text-dimmed">{{
             n(scale, 'percent')
           }}</span>
           <button
@@ -236,7 +236,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           :src="url"
           :alt="current?.alt ?? ''"
           draggable="false"
-          class="max-h-full max-w-full select-none rounded shadow-2xl"
+          class="max-h-full max-w-full select-none rounded-sm shadow-2xl"
           :class="[
             scale > 1 ? (dragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in',
             dragging ? '' : 'transition-transform duration-100',
@@ -254,12 +254,12 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
             class="h-8 w-8"
             :class="state === 'error' ? '' : 'animate-spin'"
           />
-          <p class="text-[12px]">
+          <p class="text-xs">
             {{ state === 'error' ? t('media.lightbox.failed') : t('media.lightbox.loading') }}
           </p>
           <button
             v-if="state === 'error' && current"
-            class="text-[12px] text-app-warning-300 hover:underline"
+            class="text-xs text-app-warning-300 hover:underline"
             @click="props.blobs.retry(current.artifactId)"
           >
             {{ t('common.retry') }}

package/app/components/media/ImageCompare.vue

@@ -88,7 +88,7 @@ const diffCanvas = ref<HTMLCanvasElement | null>(null)
 // there reads as "no difference", the same zero the difference composite produces, in either colour
 // mode, so no mode-following token fits. Bound as a const so the guard's `fixed-colour-ok:` marker
 // stays on the class string; the inline-template form gets reflowed off its own line by oxfmt.
-const DIFF_CANVAS_CLASS = 'w-full rounded border border-default bg-black' // fixed-colour-ok: diff canvas backdrop
+const DIFF_CANVAS_CLASS = 'w-full rounded-sm border border-default bg-black' // fixed-colour-ok: diff canvas backdrop
 const CAP = 2000
 // Bumped on every renderDiff entry so a render whose async work (image decode) is overtaken
 // by a newer mode/image change bails out instead of drawing stale pixels onto the canvas.
@@ -157,7 +157,7 @@ function onRefInput(e: Event) {
 <template>
   <div class="rounded-lg border border-default bg-default/60 p-3">
     <div class="mb-2 flex items-center justify-between gap-2">
-      <h3 class="min-w-0 truncate text-[12px] font-semibold text-default">{{ view }}</h3>
+      <h3 class="min-w-0 truncate text-xs font-semibold text-default">{{ view }}</h3>
       <!-- Mode switch -->
       <div
         v-if="MODES.length > 1"
@@ -166,7 +166,7 @@ function onRefInput(e: Event) {
         <button
           v-for="m in MODES"
           :key="m.id"
-          class="rounded px-1.5 py-1 text-muted hover:text-default"
+          class="rounded-sm px-1.5 py-1 text-muted hover:text-default"
           :class="mode === m.id ? 'bg-elevated text-app-100' : ''"
           :title="m.label"
           @click="mode = m.id"
@@ -179,12 +179,12 @@ function onRefInput(e: Event) {
     <!-- SIDE BY SIDE -->
     <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
+        <figcaption class="text-3xs uppercase tracking-wide text-dimmed">
           {{ t('media.compare.actual') }}
         </figcaption>
         <button
           v-if="actualUrl"
-          class="block w-full overflow-hidden rounded border border-default hover:border-app-600"
+          class="block w-full overflow-hidden rounded-sm border border-default hover:border-app-600"
           @click="actualId && emit('expand', actualId)"
         >
           <img
@@ -195,7 +195,7 @@ function onRefInput(e: Event) {
         </button>
         <div
           v-else
-          class="flex h-32 items-center justify-center rounded border border-dashed border-muted text-[11px] text-app-600"
+          class="flex h-32 items-center justify-center rounded-sm border border-dashed border-muted text-2xs text-app-600"
         >
           {{
             props.blobs.statusFor(actualId) === 'error'
@@ -208,7 +208,7 @@ function onRefInput(e: Event) {
       </figure>
 
       <figure class="space-y-1">
-        <figcaption class="text-[10px] uppercase tracking-wide text-dimmed">
+        <figcaption class="text-3xs uppercase tracking-wide text-dimmed">
           {{ t('media.compare.reference') }}
           <span v-if="referenceOrigin === 'design'" class="text-app-warning-300/80">
             {{ t('media.compare.fromLinkedDesign') }}
@@ -216,7 +216,7 @@ function onRefInput(e: Event) {
         </figcaption>
         <button
           v-if="refUrl"
-          class="group relative block w-full overflow-hidden rounded border border-default hover:border-app-600"
+          class="group relative block w-full overflow-hidden rounded-sm border border-default hover:border-app-600"
           @click="referenceId && emit('expand', referenceId)"
         >
           <img
@@ -225,7 +225,7 @@ function onRefInput(e: Event) {
             class="w-full cursor-zoom-in"
           />
           <span
-            class="absolute bottom-1 end-1 rounded bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned opacity-0 group-hover:opacity-100"
+            class="absolute bottom-1 end-1 rounded-sm bg-app-950/80 px-1.5 py-0.5 text-3xs text-toned opacity-0 group-hover:opacity-100"
             @click.stop="refInput?.click()"
           >
             {{ t('media.compare.replace') }}
@@ -234,7 +234,7 @@ function onRefInput(e: Event) {
         <!-- Drop zone when no reference yet -->
         <div
           v-else
-          class="flex h-32 cursor-pointer flex-col items-center justify-center gap-1 rounded border border-dashed text-[11px] transition"
+          class="flex h-32 cursor-pointer flex-col items-center justify-center gap-1 rounded-sm border border-dashed text-2xs transition"
           :class="
             dragOver
               ? 'border-app-warning-500 bg-app-warning-500/5 text-app-warning-300'
@@ -253,7 +253,7 @@ function onRefInput(e: Event) {
 
     <!-- OVERLAY (onion-skin) -->
     <div v-else-if="mode === 'overlay'" class="space-y-2">
-      <div class="relative w-full overflow-hidden rounded border border-default">
+      <div class="relative w-full overflow-hidden rounded-sm border border-default">
         <img :src="refUrl" :alt="t('media.compare.referenceAlt', { view })" class="w-full" />
         <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
         <img
@@ -263,7 +263,7 @@ function onRefInput(e: Event) {
           :style="{ opacity: overlayOpacity / 100 }"
         />
       </div>
-      <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-dimmed">
+      <div class="flex items-center gap-2 text-2xs uppercase tracking-wide text-muted">
         <span>{{ t('media.compare.reference') }}</span>
         <input
           v-model.number="overlayOpacity"
@@ -280,7 +280,7 @@ function onRefInput(e: Event) {
     <div
       v-else-if="mode === 'swipe'"
       ref="swipeBox"
-      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded border border-default"
+      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded-sm border border-default"
       @pointerdown="onSwipeDown"
       @pointermove="moveSwipe"
       @pointerup="onSwipeUp"
@@ -312,11 +312,11 @@ function onRefInput(e: Event) {
         </span>
       </div>
       <span
-        class="absolute left-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
+        class="absolute left-1 top-1 rounded-sm bg-app-950/70 px-1 text-3xs uppercase text-toned"
         >{{ t('media.compare.actual') }}</span
       >
       <span
-        class="absolute right-1 top-1 rounded bg-app-950/70 px-1 text-[9px] uppercase text-toned"
+        class="absolute right-1 top-1 rounded-sm bg-app-950/70 px-1 text-3xs uppercase text-toned"
         >{{ t('media.compare.reference') }}</span
       >
     </div>
@@ -324,7 +324,7 @@ function onRefInput(e: Event) {
     <!-- DIFF (canvas) -->
     <div v-else-if="mode === 'diff'" class="space-y-1">
       <canvas ref="diffCanvas" :class="DIFF_CANVAS_CLASS" />
-      <p class="text-[10px] text-dimmed">{{ t('media.compare.diffHint') }}</p>
+      <p class="text-3xs text-dimmed">{{ t('media.compare.diffHint') }}</p>
     </div>
 
     <!-- Hidden file input shared by replace/drop zone -->

package/app/components/merge/MergeEffortChips.vue

@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import { REVIEW_EFFORTS } from '@cat-factory/contracts'
 import type { ChangeClass, MergeClassRollup, ReviewEffort } from '~/types/merge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The currently picked effort, or null for "not chosen". */
@@ -87,12 +88,9 @@ function pick(effort: ReviewEffort) {
 <template>
   <div data-testid="merge-effort-chips" class="mt-2">
     <div class="flex items-center gap-1.5">
-      <span
-        class="text-[10px] uppercase tracking-wide text-dimmed"
-        :title="t('merge.effort.promptHint')"
-      >
+      <SectionLabel as="span" :title="t('merge.effort.promptHint')">
         {{ t('merge.effort.prompt') }}
-      </span>
+      </SectionLabel>
       <UBadge
         v-if="classLabel"
         data-testid="merge-effort-class"
@@ -119,7 +117,7 @@ function pick(effort: ReviewEffort) {
         {{ chip.label }}
       </UButton>
     </div>
-    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-[10px] text-dimmed">
+    <p v-if="history" data-testid="merge-effort-history" class="mt-1 text-3xs text-dimmed">
       {{ history }}
     </p>
   </div>