@cat-factory/app 0.308.0 → 0.309.0

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -128,10 +128,10 @@ async function toggleEnabled(enabled: boolean) {
 
         <!-- Credentialless source (GitHub Issues): no form, just the on/off toggle. -->
         <template v-if="credentialless">
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('tasks.connect.credentialless') }}
           </p>
-          <p v-if="!available" class="text-[11px] text-app-warning-400">
+          <p v-if="!available" class="text-2xs text-app-warning-400">
             {{ t('tasks.connect.installAppHint', { label: descriptor.label }) }}
           </p>
         </template>
@@ -149,7 +149,7 @@ async function toggleEnabled(enabled: boolean) {
             >
               {{ t('tasks.connect.oauthButton', { label: descriptor.label }) }}
             </UButton>
-            <p class="text-center text-[11px] text-dimmed">
+            <p class="text-center text-2xs text-dimmed">
               {{ t('tasks.connect.oauthOr') }}
             </p>
           </template>
@@ -167,7 +167,7 @@ async function toggleEnabled(enabled: boolean) {
             />
           </UFormField>
         </div>
-        <p v-else class="text-[11px] text-dimmed">
+        <p v-else class="text-2xs text-dimmed">
           {{
             connection?.label
               ? t('tasks.connect.connectedTo', { label: connection.label })
@@ -184,7 +184,7 @@ async function toggleEnabled(enabled: boolean) {
             <div class="font-medium text-default">
               {{ t('tasks.connect.offerToWorkspace') }}
             </div>
-            <div class="text-[11px] text-dimmed">
+            <div class="text-2xs text-dimmed">
               {{ t('tasks.connect.offerHint', { label: descriptor.label }) }}
             </div>
           </div>

package/app/components/testing/TestReportWindow.vue

@@ -22,6 +22,7 @@ import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusP
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import { runIsActive } from '~/utils/pipelineRender'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -361,7 +362,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
       </UBadge>
       <span
         v-if="testState && testState.attempts > 0"
-        class="text-[11px] text-muted"
+        class="text-2xs text-muted"
         :title="t('testing.fixerAttempts')"
       >
         {{ t('testing.fixCount', { attempts: testState.attempts, max: testState.maxAttempts }) }}
@@ -384,9 +385,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           data-testid="tester-infrastructure"
           class="space-y-3"
         >
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('testing.infrastructure') }}
-          </h3>
+          </SectionLabel>
           <StepContainerStatus :step="step" :run-failed="runFailed" :run-active="runActive" />
           <EnvironmentStatusPanel
             v-if="stepEnvironment"
@@ -414,10 +415,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 class="h-3.5 w-3.5 shrink-0"
                 :class="infraSetup.started ? 'text-app-success-400' : 'text-app-error-400'"
               />
-              <span class="text-[13px] font-medium text-default">
+              <span class="text-sm font-medium text-default">
                 {{ standupHeadline }}
               </span>
-              <span v-if="infraSetup.durationMs != null" class="ms-auto text-[11px] text-dimmed">
+              <span v-if="infraSetup.durationMs != null" class="ms-auto text-2xs text-dimmed">
                 {{
                   t('testing.standup.took', {
                     seconds: n(infraSetup.durationMs / 1000, 'decimal'),
@@ -425,12 +426,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 }}
               </span>
             </div>
-            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-[11px] text-dimmed">
+            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-2xs text-dimmed">
               {{ infraSetup.composePath }}
             </p>
             <p
               v-if="infraSetup.error"
-              class="mt-1 text-[12px] leading-snug text-app-error-300"
+              class="mt-1 text-xs leading-snug text-app-error-300"
               data-testid="tester-infra-setup-error"
             >
               {{ infraSetup.error }}
@@ -455,7 +456,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <pre
                 v-if="showInfraSetupLogs"
                 data-testid="tester-infra-setup-logs"
-                class="mt-2 max-h-64 overflow-auto rounded bg-app-950/70 p-2 font-mono text-[11px] leading-relaxed text-toned"
+                class="mt-2 max-h-64 overflow-auto rounded-sm bg-app-950/70 p-2 font-mono text-2xs leading-relaxed text-toned"
                 >{{ infraSetup.logs }}</pre>
             </template>
           </div>
@@ -467,7 +468,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <div
             v-if="infraReady"
             data-testid="tester-env-ready"
-            class="flex items-center gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2 text-[13px] text-app-success-200"
+            class="flex items-center gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2 text-sm text-app-success-200"
           >
             <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0 text-app-success-400" />
             <span>{{ t('testing.readyBanner') }}</span>
@@ -504,9 +505,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                  how it ended), so the otherwise-opaque fixer sub-jobs have a surface — the
                  analogue of the polling gate's attempt history. -->
         <section v-if="fixerAttempts.length" data-testid="tester-fixer-attempts" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('testing.fixerAttempts') }}
-          </h3>
+          </SectionLabel>
           <ol class="space-y-2">
             <li
               v-for="a in fixerAttempts"
@@ -531,20 +532,20 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <MarkdownProse
                 v-if="a.summary"
                 :text="a.summary"
-                class="mt-1 max-w-3xl text-[12px] leading-snug text-muted"
+                class="mt-1 max-w-3xl text-xs leading-snug text-muted"
               />
               <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
-                <p class="text-[11px] text-dimmed">
+                <p class="text-2xs text-dimmed">
                   {{ t('testing.fixerTimeline.addressed') }}
                 </p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(c, ci) in a.concerns"
                     :key="`fa${a.attempt}-c${ci}`"
-                    class="flex items-center gap-1.5 text-[12px] text-toned"
+                    class="flex items-center gap-1.5 text-xs text-toned"
                   >
                     <span
-                      class="rounded px-1 text-[10px] uppercase"
+                      class="rounded-sm px-1 text-3xs uppercase"
                       :class="SEVERITY_META[c.severity].chip"
                       >{{ SEVERITY_LABELS[c.severity] }}</span
                     >
@@ -566,12 +567,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           class="space-y-2"
         >
           <div class="flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('testing.quality.heading') }}
-            </h3>
+            </SectionLabel>
             <span
               v-if="quality.attempts"
-              class="text-[11px] text-muted"
+              class="text-2xs text-muted"
               :title="t('testing.quality.reruns')"
             >
               {{
@@ -604,30 +605,30 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   class="h-3.5 w-3.5 shrink-0"
                   :class="vd.adequate ? 'text-app-success-400' : 'text-app-warning-300'"
                 />
-                <span class="text-[13px] font-medium text-default">
+                <span class="text-sm font-medium text-default">
                   {{
                     vd.adequate ? t('testing.quality.adequate') : t('testing.quality.inadequate')
                   }}
                 </span>
-                <span v-if="vd.model" class="ms-auto font-mono text-[10px] text-dimmed">{{
+                <span v-if="vd.model" class="ms-auto font-mono text-3xs text-dimmed">{{
                   vd.model
                 }}</span>
-                <span class="text-[11px] text-dimmed" :class="{ 'ms-auto': !vd.model }">{{
+                <span class="text-2xs text-dimmed" :class="{ 'ms-auto': !vd.model }">{{
                   d(new Date(vd.at), 'short')
                 }}</span>
               </div>
               <MarkdownProse
                 v-if="vd.feedback"
                 :text="vd.feedback"
-                class="mt-1 text-[12px] leading-snug text-muted"
+                class="mt-1 text-xs leading-snug text-muted"
               />
               <div v-if="vd.gaps.length" class="mt-1.5">
-                <p class="text-[11px] text-dimmed">{{ t('testing.quality.gaps') }}</p>
+                <p class="text-2xs text-dimmed">{{ t('testing.quality.gaps') }}</p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(gap, gi) in vd.gaps"
                     :key="`qc${vi}-g${gi}`"
-                    class="flex items-start gap-1.5 text-[12px] text-toned"
+                    class="flex items-start gap-1.5 text-xs text-toned"
                   >
                     <UIcon
                       name="i-lucide-dot"
@@ -647,7 +648,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         >
           <UIcon name="i-lucide-flask-conical" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('testing.empty.title') }}</p>
-          <p class="max-w-sm text-[11px] text-dimmed">
+          <p class="max-w-sm text-2xs text-dimmed">
             {{ t('testing.empty.hint') }}
           </p>
         </div>
@@ -659,12 +660,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <MarkdownProse
             v-if="report.summary"
             :text="report.summary"
-            class="mb-4 max-w-3xl text-[13px] leading-relaxed text-toned"
+            class="mb-4 max-w-3xl text-sm leading-relaxed text-toned"
           />
 
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('testing.scenariosOutcomes') }}
-          </h3>
+          </SectionLabel>
           <ul class="space-y-2">
             <li
               v-for="g in groups"
@@ -685,7 +686,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   :class="GROUP_STATUS_META[g.status].text"
                 />
                 <span
-                  class="min-w-0 flex-1 truncate text-[13px]"
+                  class="min-w-0 flex-1 truncate text-sm"
                   :class="g.other ? 'text-muted' : 'font-medium text-default'"
                 >
                   {{ g.title }}
@@ -702,7 +703,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     )
                   "
                 />
-                <span class="shrink-0 text-[11px] text-dimmed">
+                <span class="shrink-0 text-2xs text-dimmed">
                   {{ t('testing.checkCount', { count: g.outcomes.length }, g.outcomes.length) }}
                   <template v-if="g.concerns.length">
                     ·
@@ -724,15 +725,15 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     :class="STATUS_META[o.status].text"
                   />
                   <div class="min-w-0">
-                    <span class="text-[13px] text-default">{{ o.name }}</span>
+                    <span class="text-sm text-default">{{ o.name }}</span>
                     <MarkdownProse
                       v-if="o.detail"
                       :text="o.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-muted"
+                      class="max-w-3xl text-xs leading-snug text-muted"
                     />
                   </div>
                 </div>
-                <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-dimmed">
+                <p v-if="!g.outcomes.length" class="py-0.5 text-xs italic text-dimmed">
                   {{ t('testing.noDiscreteCheck') }}
                 </p>
 
@@ -749,9 +750,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   />
                   <div class="min-w-0">
                     <div class="flex items-center gap-1.5">
-                      <span class="text-[12px] font-medium text-default">{{ c.title }}</span>
+                      <span class="text-xs font-medium text-default">{{ c.title }}</span>
                       <span
-                        class="rounded px-1 text-[10px] uppercase"
+                        class="rounded-sm px-1 text-3xs uppercase"
                         :class="SEVERITY_META[c.severity].chip"
                       >
                         {{ SEVERITY_LABELS[c.severity] }}
@@ -760,7 +761,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     <MarkdownProse
                       v-if="c.detail"
                       :text="c.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-muted"
+                      class="max-w-3xl text-xs leading-snug text-muted"
                     />
                   </div>
                 </div>
@@ -771,7 +772,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     v-for="(s, si) in g.screenshots"
                     :key="`shot${si}`"
                     data-testid="tester-screenshot"
-                    class="group relative h-20 w-28 shrink-0 overflow-hidden rounded border border-default bg-app-950/60 hover:border-app-600"
+                    class="group relative h-20 w-28 shrink-0 overflow-hidden rounded-sm border border-default bg-app-950/60 hover:border-app-600"
                     :title="s.view"
                     @click="openShot(s.artifactId)"
                   >
@@ -783,7 +784,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     />
                     <span
                       v-else
-                      class="flex h-full w-full items-center justify-center text-[10px] text-app-600"
+                      class="flex h-full w-full items-center justify-center text-3xs text-app-600"
                     >
                       {{
                         blobs.statusFor(s.artifactId) === 'error'
@@ -792,7 +793,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       }}
                     </span>
                     <span
-                      class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-[9px] text-toned"
+                      class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-3xs text-toned"
                       >{{ s.view }}</span
                     >
                   </button>
@@ -803,9 +804,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
           <!-- Standalone gallery: any captures not mapped to a scenario above -->
           <section v-if="ungroupedScreenshots.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('testing.screenshots') }}
-            </h3>
+            </SectionLabel>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
               <button
                 v-for="(s, si) in ungroupedScreenshots"
@@ -822,7 +823,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 />
                 <span
                   v-else
-                  class="flex h-full w-full items-center justify-center text-[11px] text-app-600"
+                  class="flex h-full w-full items-center justify-center text-2xs text-app-600"
                 >
                   {{
                     blobs.statusFor(s.artifactId) === 'error'
@@ -831,7 +832,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   }}
                 </span>
                 <span
-                  class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned"
+                  class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-3xs text-toned"
                   >{{ s.view }}</span
                 >
               </button>
@@ -845,10 +846,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('testing.verdict.heading') }}
-          </h4>
-          <div class="flex items-center gap-2 text-[13px]">
+          </SectionLabel>
+          <div class="flex items-center gap-2 text-sm">
             <UIcon
               :name="report.greenlight ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
               class="h-4 w-4"
@@ -861,10 +862,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('testing.outcomes.heading') }}
-          </h4>
-          <dl class="space-y-1 text-[12px]">
+          </SectionLabel>
+          <dl class="space-y-1 text-xs">
             <div class="flex items-center justify-between">
               <dt class="text-muted">{{ t('testing.outcomes.passed') }}</dt>
               <dd class="text-app-success-300">{{ counts.passed }}</dd>
@@ -892,10 +893,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <div v-if="report?.environment">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('testing.environment') }}
-          </h4>
-          <p class="text-[12px] capitalize text-toned">{{ report.environment }}</p>
+          </SectionLabel>
+          <p class="text-xs capitalize text-toned">{{ report.environment }}</p>
         </div>
 
         <!-- Shared run metadata + embedded observability (model, run id, timing,
@@ -910,7 +911,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           :failure-at="instance?.failure?.occurredAt"
         />
 
-        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
+        <p class="mt-auto text-3xs leading-relaxed text-app-600">
           {{ t('testing.footer') }}
         </p>
       </aside>

package/app/components/tutorial/TutorialNudge.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The contextual offer's surface: one walkthrough, offered beside the work that just made it
 // relevant. Deliberately NOT a modal — the whole point is the moment, and a modal would
@@ -75,9 +76,9 @@ function take(tourId: string) {
           class="text-primary mt-0.5 h-4 w-4 shrink-0"
         />
         <div class="min-w-0 flex-1">
-          <p class="text-[11px] tracking-wide text-muted uppercase">
+          <SectionLabel as="p">
             {{ t('tutorial.nudge.label') }}
-          </p>
+          </SectionLabel>
           <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(offered.titleKey) }}</p>
           <p class="mt-0.5 text-xs text-muted">{{ t(offered.descriptionKey) }}</p>
         </div>

package/app/components/tutorial/TutorialOverlay.vue

@@ -20,6 +20,7 @@ import {
   waitBudgetMs,
 } from './TutorialOverlay.logic'
 import type { TutorialAdvanceCause, TutorialDirection } from './TutorialOverlay.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The one shared tour runtime: resolves the running tour from the `tutorialTours` slot,
 // anchors a highlight ring + tooltip to the current step's `data-testid`, and advances
@@ -628,9 +629,9 @@ onUnmounted(() => {
           class="mt-3 rounded-lg border border-muted/70 bg-elevated/40 p-2.5"
           data-testid="tutorial-next-tour"
         >
-          <p class="text-[11px] tracking-wide text-muted uppercase">
+          <SectionLabel as="p">
             {{ t('tutorial.overlay.nextUp') }}
-          </p>
+          </SectionLabel>
           <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(nextTour.titleKey) }}</p>
           <p class="mt-0.5 text-xs text-muted">{{ t(nextTour.descriptionKey) }}</p>
           <UButton

package/app/components/vcs/GitLabConnect.vue

@@ -67,7 +67,7 @@ async function connect() {
       />
     </UFormField>
 
-    <p class="text-[11px] text-dimmed">
+    <p class="text-2xs text-dimmed">
       <ULink :to="tokenUrl" target="_blank" class="text-primary hover:underline">
         {{ t('vcs.connect.gitlab.createToken') }}
       </ULink>

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -14,6 +14,7 @@ import ImageCompare from '~/components/media/ImageCompare.vue'
 import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -242,7 +243,7 @@ async function onFilePicked(e: Event) {
       <template v-else>
         <p
           v-if="vc.degradedReason"
-          class="rounded-lg border border-app-warning-700/40 bg-app-warning-500/5 px-3 py-2 text-[12px] text-app-warning-300/90"
+          class="rounded-lg border border-app-warning-700/40 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-300/90"
         >
           {{ vc.degradedReason }}
         </p>
@@ -251,7 +252,7 @@ async function onFilePicked(e: Event) {
              reference the reviewer is judging against is never anonymous. -->
         <section
           v-if="design"
-          class="rounded-lg border border-default bg-default/60 px-3 py-2 text-[12px] text-toned"
+          class="rounded-lg border border-default bg-default/60 px-3 py-2 text-xs text-toned"
         >
           <p class="flex items-center gap-1.5">
             <UIcon name="i-lucide-figma" class="h-3.5 w-3.5 shrink-0 text-app-warning-300" />
@@ -265,10 +266,7 @@ async function onFilePicked(e: Event) {
           <!-- One line per short design, carrying both ways it can fall short: what its source
                kept, and what this gallery's shared ceiling cut from it. A design the ceiling shut
                out entirely reads as one with no frames unless it is named here. -->
-          <ul
-            v-if="design.gaps?.length"
-            class="mt-1.5 space-y-1 text-[11px] text-app-warning-300/90"
-          >
+          <ul v-if="design.gaps?.length" class="mt-1.5 space-y-1 text-2xs text-app-warning-300/90">
             <li v-for="gap in design.gaps" :key="`${gap.title}-${gap.reason ?? 'capped'}`">
               {{ t('visualConfirm.design.gapLine', { title: gap.title }) }}
               <template v-if="gap.reason">{{ DESIGN_GAP_LABELS[gap.reason] }}</template>
@@ -281,7 +279,7 @@ async function onFilePicked(e: Event) {
 
         <p
           v-if="working"
-          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-[12px] text-toned"
+          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-xs text-toned"
         >
           <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
           {{ phase ? PHASE_LABEL[phase] : '' }}
@@ -304,7 +302,7 @@ async function onFilePicked(e: Event) {
             <!-- Per-view note (folded into the fixer findings) -->
             <div v-if="awaitingHuman" class="px-1">
               <button
-                class="flex items-center gap-1.5 text-[11px] text-muted hover:text-default"
+                class="flex items-center gap-1.5 text-2xs text-muted hover:text-default"
                 @click="noteOpen[p.view] = !noteOpen[p.view]"
               >
                 <UIcon
@@ -314,7 +312,7 @@ async function onFilePicked(e: Event) {
                 {{ t('visualConfirm.noteIssue', { view: p.view }) }}
                 <span
                   v-if="perViewNotes[p.view]?.trim()"
-                  class="rounded-full bg-app-warning-500/15 px-1.5 text-[9px] text-app-warning-300"
+                  class="rounded-full bg-app-warning-500/15 px-1.5 text-3xs text-app-warning-300"
                   >{{ t('visualConfirm.noted') }}</span
                 >
               </button>
@@ -323,26 +321,26 @@ async function onFilePicked(e: Event) {
                 v-model="perViewNotes[p.view]"
                 rows="2"
                 :placeholder="t('visualConfirm.notePlaceholder', { view: p.view })"
-                class="mt-1 w-full rounded-md border border-muted bg-app-950 px-2 py-1.5 text-[12px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+                class="mt-1 w-full rounded-md border border-muted bg-app-950 px-2 py-1.5 text-xs text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
               />
             </div>
           </div>
         </section>
-        <p v-else class="text-[12px] italic text-dimmed">
+        <p v-else class="text-xs italic text-dimmed">
           {{ t('visualConfirm.noScreenshots') }}
         </p>
 
         <!-- Upload a reference for any view -->
         <section class="rounded-lg border border-default bg-default/60 p-3">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('visualConfirm.upload.heading') }}
-          </h3>
+          </SectionLabel>
           <div class="flex flex-wrap items-center gap-2">
             <input
               v-model="uploadView"
               list="vc-views"
               :placeholder="t('visualConfirm.upload.viewPlaceholder')"
-              class="rounded-md border border-muted bg-app-950 px-2 py-1 text-[12px] text-default placeholder:text-app-600"
+              class="rounded-md border border-muted bg-app-950 px-2 py-1 text-xs text-default placeholder:text-app-600"
             />
             <datalist id="vc-views">
               <option v-for="p in pairs" :key="p.view" :value="p.view" />
@@ -352,11 +350,11 @@ async function onFilePicked(e: Event) {
               type="file"
               accept="image/png,image/jpeg"
               :disabled="busy || !uploadView.trim()"
-              class="text-[12px] text-toned file:me-2 file:rounded file:border-0 file:bg-elevated file:px-2 file:py-1 file:text-default disabled:opacity-40"
+              class="text-xs text-toned file:me-2 file:rounded-sm file:border-0 file:bg-elevated file:px-2 file:py-1 file:text-default disabled:opacity-40"
               @change="onFilePicked"
             />
           </div>
-          <p class="mt-1.5 text-[10px] text-app-600">
+          <p class="mt-1.5 text-3xs text-app-600">
             {{
               uploadView.trim()
                 ? t('visualConfirm.upload.tipReady')
@@ -367,17 +365,17 @@ async function onFilePicked(e: Event) {
 
         <!-- Request fix -->
         <section v-if="awaitingHuman" class="rounded-lg border border-default bg-default/60 p-3">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('visualConfirm.requestFix.heading') }}
-          </h3>
+          </SectionLabel>
           <textarea
             v-model="globalFindings"
             rows="3"
             :placeholder="t('visualConfirm.requestFix.placeholder')"
-            class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+            class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-sm text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
           />
           <div class="mt-2 flex items-center justify-between">
-            <span class="text-[11px] text-dimmed">
+            <span class="text-2xs text-dimmed">
               {{ t('visualConfirm.requestFix.foldedHint') }}
             </span>
             <UButton
@@ -399,16 +397,16 @@ async function onFilePicked(e: Event) {
           v-if="vc.rounds && vc.rounds.length"
           class="rounded-lg border border-default bg-default/60 p-3"
         >
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('visualConfirm.history.heading', { count: vc.attempts }, vc.attempts) }}
-          </h3>
+          </SectionLabel>
           <ol class="space-y-2">
-            <li v-for="(r, i) in vc.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
+            <li v-for="(r, i) in vc.rounds" :key="i" class="flex items-start gap-2 text-xs">
               <UIcon name="i-lucide-wrench" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
               <div class="min-w-0 flex-1">
                 <span class="text-default">{{ t('visualConfirm.history.fixRequested') }}</span>
                 <span
-                  class="ms-1.5 rounded px-1 text-[10px] uppercase"
+                  class="ms-1.5 rounded-sm px-1 text-3xs uppercase"
                   :class="
                     r.outcome === 'completed'
                       ? 'bg-app-success-500/15 text-app-success-300'
@@ -447,7 +445,7 @@ async function onFilePicked(e: Event) {
       <div class="flex items-center gap-2">
         <label
           v-if="awaitingHuman && needsAck"
-          class="flex items-center gap-1.5 text-[11px] text-app-warning-300/90"
+          class="flex items-center gap-1.5 text-2xs text-app-warning-300/90"
         >
           <input v-model="ackDegraded" type="checkbox" class="accent-app-warning-500" />
           {{ t('visualConfirm.reviewedManually') }}

package/app/utils/theme/builtins.ts

@@ -1,4 +1,4 @@
-import type { ThemeDoc } from '~/utils/theme/doc'
+import { THEME_DEFAULTS, type ThemeDoc } from '~/utils/theme/doc'
 import { presets } from '~/utils/theme/presets'
 
 /**
@@ -24,12 +24,18 @@ export const DEFAULT_THEME_ID = 'cat-factory'
  * Status hues are the app's long-standing choices (amber for warning, rose for error, emerald
  * for success, sky for info, violet for the secondary accent), named here as aliases so a theme
  * that recolours `warning` recolours every warning surface.
+ *
+ * `radius` is stated even though it equals `THEME_DEFAULTS.radius`, so the value every surface in
+ * the app derives from has one visible home. It writes no CSS at that value (`css.ts` skips a
+ * default), which is the point: changing the number here is the whole edit, and Nuxt UI's
+ * `--radius-*` scale carries it to every `rounded-*` step (issue #2251).
  */
 export const CAT_FACTORY_THEME: NamedTheme = {
   id: DEFAULT_THEME_ID,
   name: 'Cat Factory',
   doc: {
     version: 1,
+    radius: THEME_DEFAULTS.radius,
     colors: {
       primary: 'indigo',
       secondary: 'violet',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.308.0",
+  "version": "0.309.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",